Skip to main content

Unifi React

Current version: 3.0.6

3.0.6

Library

Added

  • Added passthrough property unmountOnExit to Panel component to allow for controlling what happens to child components of a Panel when it is collapsed.

3.0.5

Library

Fixed

  • Addressed issues with bundle size due to including the entire lodash package.

3.0.4

Library

Fixed

  • Migrated the Task theme to MUI v5 theme specification.

3.0.3

Library

Changed

  • Update to allow for React 18 peer dependency following its release.

3.0.2

Library

Fixed

  • Stepper with truncate property did not properly respond on small screens due to change in MUI's responsive breakpoints in v5. This has been adjusted according to their docs.

Added

  • Ability to pass a base theme to the createTheme function to extend themes provided by the Unifi library.
  • Exported the Box component from MUI for use in consuming libraries.

Updated

  • MUI and it's dependencies have been updated to their latest version.

3.0.1

Update Summary

Library

Fixed

  • Table Rows with hover states now correctly use the cursor: pointer style.
  • AppBar with no color prop specified now fallback to default color as they did in v2.

3.0.0

Update Summary

Updated MUI Core from v4 to v5

Library

Added

  • All components now properly forward refs where applicable. This may require changes tests if you are spying on these components as a component that uses React.forwardRef is an object and not a function.

Changed

  • MUI Core updated from v4 to v5, this update includes breaking changes in theme structure, updates to component APIs, removal of some previously exported utility functions, and bumps in required versions of underlying dependencies. This is by no means a comprehensive list, but attempts to detail the most likely breaks you will encounter. For a full list of changes that may not be detailed here, please see the MUI v4 -> v5 migration guide.
  • Minimum supported version of React is now v17.0.0.
  • Minimum supported version of TypeScript is now v3.5.
  • The theme structure has changed significantly, a utility function named adaptV4Theme can be used to transform previous theme structures to the new structure. This function is deprecated and the preferred approach would be to migrate your previous theme(s) to the new structure.
  • The Grid component has changed to apply the negative margins only on the top and left sides of the grid container and padding only on the top and left sides of grid items. Previously, negative margins were applied to all sides of the container and padding to all sides of the items. This was not detailed as a breaking change but adjustments may need to be made if your use of the Grid was accounting for the previous behavior in your styles.
  • Tabs components will no longer trigger the onChange callback if you click on a tab that is already selected.
  • Autocomplete component has been changed to utilize the component shipped from MUI instead of the previous implementation. This component has feature parity with our previous implementation but functions more reliably. See the MUI documentation to find the props necessary to change in order to migrate to the new version.

Changes in Component APIs:

  • The justify prop on Grid components has been changed to justifyContent to mirror the CSS property.
  • TextField: rowsMax prop was changed to maxRows
  • CircularProgress: variant of type "static" has been changed to be type "determinate".
  • Collapse: collapsedHeight prop has been renamed to collapsedSize to support collapsing in both directions.
  • Select: onChange is no longer a React event but instead a synthetic, native Event.
  • disableBackdropClick: on Modal components and components that use modals (Drawer, Dialog, etc.) the disableBackdropClick prop has been removed in favor of handling the backdrop click case accordingly in the Modal's onClose handler.
  • Typography: variant of "srOnly" has been removed, you can now use visuallyHidden style utility from @mui/utils in conjunction with the the sx prop instead.
  • Badge: when using showZero={false}, the badge will no longer be rendered on the page if the value is 0. Previously it was rendered but had an invisible style.
  • labelWidth: on outlined inputs and selects is no longer necessary, just pass the label as desired and the width will be automatically adjusted.

Style / Structure changes:

  • Table components that have size small are a bit more dense, there was a decrease in the amount of padding on the right side of table cells.
  • Button components no longer have an inner span element wrapping the text of the button. Styles / tests depending on this inner span will need to be adjusted accordingly. This change applies to any component that leverages button elements, for example the Pagination component.
  • Typography classes that used to be used to apply style variants such as "colorInherit", "colorPrimary", "colorSecondary", "colorTextPrimary", "colorTextSecondary", "colorError", "displayInline" and "displayBlock" were removed and now considered part of the design system. Overrides / tests that depend on these classes will need to be adjusted accordingly.
  • Checkbox and Switch components had some changes in their HTML structure / classes applied that may effect tests and style overrides that depend on them. They both now use the primary color by default instead of secondary, which is inline with Material guidelines and brings style parity with the Unifi Angular library.
  • Tabs indicator default color is now the primary color, also done in order to be more inline with Material guidelines.
  • DialogTitle has had its DOM structure flattened and no longer requires disableTypography to set your own Typography for the title.
  • List component now has class names with prefix UnifiList instead of MuiList.
  • Grid classes for alignContent and justifyContent are no longer used to apply those styles, as they are now part of the design system. Test against the CSS properties and adjust any CSS overrides that leveraged those classes accordingly.
  • Breakpoints are now treated as values instead of ranges. The behavior of down(key) was changed to define a media query below the value defined by the corresponding breakpoint (exclusive), rather than the breakpoint above. between(start, end) was also updated to define a media query for the values between the actual values of start (inclusive) and end (exclusive). When using the down() breakpoints utility you need to update the breakpoint key by one step up. When using the between(start, end) the end breakpoint should also be updated by one step up. Same goes for instances of the Hidden component using xsDown, smDown, mdDown, lgDown, xlDown properties.

Deprecated

  • createStyles and withStyles are now deprecated, in favor of using the emotion counterpart styled or the sx property on components.
  • adaptV4Theme has been introduced as a way to help with migration to the new library but it is deprecated as it will not remain in MUI permanently
  • Hidden component has been deprecated in favor of using the useMediaQuery hook or the sx prop on components.
  • fade utility function has been deprecate in favor of using alpha which should now be shipped from our package.

Removed

  • The RootRef component has been removed in favor of utilizing the ref prop provided by any component. Unifi has been updated to properly forward props to the underlying MUI component where appropriate which should help in this transition.

2.20.0

Update Summary

Improved Styling on Tooltip

Library

  • [Tooltip] - Fixed Tooltip spacing relative to the component as it was slightly off. Also updated Tooltip Placement prop so it functions correctly

2.19.0

Update Summary

Improved Styling on Tooltip

Library

  • [Tooltip] - Provided clear separation between the Tooltip text and the component

2.18.0

Update Summary

Versioning

2.17.0

Update Summary

Versioning

2.16.0

Update Summary

Resolved Tooltip Bug

Library

  • [Tooltip] - On page load the Tooltip was not being displayed until after the user clicked the child element. It is now working as intended and it is being displayed on hover of the child element

2.15.0

Update Summary

Removal of Tertiary Title

Library

  • [Panel] - Tertiary title is no longer available as an option for all panels
  • [PanelHeader] - Tertiary title is no longer available as an option

2.14.0

Update Summary

Addition of Tertiary Title

Library

  • [Panel] - Tertiary title available as an option for all panels
  • [PanelHeader] - Tertiary title available as an option

2.13.0

Update Summary

Addition of Error Color Prop

Library

  • [Button] - Error color available as an option (for contained, outlined, and text buttons)
  • [FAB] - Error color available as an option

2.12.4

Update Summary

Enhanced the Autocomplete

Library

  • [Autocomplete] - Update to properly trigger on change

2.12.3

Update Summary

Enhanced the Autocomplete

Library

  • [Autocomplete] - Update to allow accepting an object array as well as a custom filter, as seen in the demos

2.12.1

Update Summary

Added the <Pagination /> component

Library

2.11.1

Update Summary

Added the <Autocomplete /> component

Library

  • [Autocomplete] - View the docs to learn how to provide an accessible autocomplete input.

2.10.0

Update Summary

Update of the Unifi Theme palette values to align with the latest Nelnet Brand standards.

Library

Updated palette values:

  • palette.primary.main: #107F1B
  • palette.primary.light: #AED136
  • palette.secondary.main: #0E729A
  • palette.secondary.light: #0AA0BE
  • palette.warning.main: #EE6B18
  • palette.info.main: #0AA0BE
  • palette.success.main: #55A43A

These changes resulted in updates to the Notification colors for info and succes to correspond with those palette values.

2.9.4

Update Summary

Library

  • [Lists] - resolve minor bugs with the datalist
  • [PanelContent] - passthrough style prop to containing div

2.9.0

Library

  • [Deletion of Deprecated Components] - See list in previous release notes
  • [List] - added the datalist property which is a structural variant for <List/> that offers three layouts intended for non-table key/value pairs. Check out the demos for more information.

2.8.0

Update Summary

Deprecation Notice

The following components will be deprecated in the next release:

  • BottomNavigation / BottomNavigationAction
    undefined
  • GridList / GridListTile / GridListTileBar
    undefined

2.6.3

Library

  • [Styling] - added useTheme hook to access theme values within functional components
  • [Themes] - resolved bug with custom theme styling of switches

2.6.2

Library

  • [Avatar] - Create size for Avatar and fixed bug with color
  • [Themes] - resolved custom palette application, reducing overrides

2.5.1

Update Summary

  • Improved contrast for outlined TextField and Button components
  • [Checkbox|Radio|Switch] - swapped ripple focus in favor of mimicing native focus to remove reliance on a theme color for this very important state

Library

  • [Checkbox|Radio|Switch] - removed prop/functionality related to use of the ripple, added styles for improved, non-theme reliant focus state contrast
  • [TextField] - added more distinctive readonly styles, improved outlined variant contrast

2.5.0

Library

  • [List] - enable semantically linked list content, see demo

2.4.4

Update Summary

  • Added [ButtonGroup]
  • Added [Notification]
  • Margin and padding classes hoisted to the global space for use v. being scoped within each component's CSS. Requires the inclusion of CssBaseline. See [spacing] properties to verify if margin/padding props are available.
  • Minor bug fixes and improvements

Library

  • [Avatar] - fix contrast when used within List
  • [Notification] - New component
  • [Panel] - add margin/padding props
  • [Stepper] - add margin/padding props
  • [Table] - add borders prop, update header style and cell font size, expand documenation
  • [TextField] - add 'type' enum for TypeScript linting
  • [Typography] - add scale prop and additional color values, expand documentation
  • [Themes/TaskTheme] - updated type scale

v2.2.2

Update Summary

🎉 Hooray! Version 2.2.2 of the Unifi React Library is here! 🎉

This major release includes 91 stable, accessible components

  • Upgraded dependencies
  • Added [Panel] and [Stepper] components
  • Updated styling-related functionality (breaking changes)

Library

  • Removal of deprecated non-"I"-prefixed component interfaces
  • [Grid] - spacing values simplified to 1-10 v. the computed multiple of 8, ex. 24
  • [ListItemAvatar] - Now required when using an <Avatar> in <List>
  • [Panel/PanelHeader/PanelContent] - New components
  • [Stepper/Step/StepLabel] - New components
  • [Table/TableCell] - Removal of the padding prop in favor of size
  • [Typography] - Rename of color default value from default to initial, and update of behavior to inherit color v. use primary text color
  • [Typography] - Addition of display prop
  • [Typography] - Reduced scope of inherited inline link styles to paragraph
  • [Typography] - Rename of headlineMapping to variantMapping
  • [Select] - Correctly update field style when alternate variant is provided
  • [Switch] - Rename of icon to thumb, and bar to track
  • [Switch] - Addition of edge prop to apply negative margin to adjust alignment with sibling components
  • [Styling] - Access to spacing value changed from spacing.unit to the function spacing(1) where the passed value is multiplied by 8
  • [Styling] - Addition of [ServerStylesheets] and [StylesProvider]

Documentation

  • [Themes and Styles] - New content to reflect upgrade of dependencies

v1.1.0

Update Summary

This release closed the ~3% gap to achieve 100% test coverage 🎉

Additional updates:

  • Name change: MuiThemeProvider updated to UnifiThemeProvider - affects theming
  • Component TypeScript interface exports now prefixed with "I", ex. IAppBarProps v. AppBarProps

Content & Guidelines

Documentation

  • Enable syntax highlighting on non-interactive code blocks

v1.0.0

Update Summary

🎉 Hooray! Version 1.0.0 of the Unifi React Library is here! 🎉

This release includes  86 stable, accessible components

During the Beta period, significant improvements were made to refine components and demos to meet Section 508/WCAG 2.1 AA standards. Additional patch release notes with more details can be found below.