Skip to main content

Unifi Web

Current version: 5.0.1

5.0.1

Update Summary

Disabled Buttons

Library

Disabled buttons will always be gray and not change on hover

5.0.0

Update Summary

Security Improvements

Library

Data URLs are no longer being used in our style sheets and have been replaced with HTML-based SVGs

4.1.0

Update Summary

Text/Outline Button Variables

Library

  • Text/Outline buttons can now be themed. A theme color that doesn't have enough contrast on white will no longer prevent you from using those button types.

4.0.1

Update Summary

Notification text color

Library

  • Notification text color can be changed by updating the $u-notification-ink-color variable

4.0.0

Update Summary

Conversion to Sass modules

Library

  • Sass no longer uses @import rules and instead uses @use and @forward
  • Sass variables are now separated into two categories, "Tokens" and "Variables"

3.1.1

Update Summary

Bug fixes

Library

  • Checkboxes will no longer become small when a checkbox label has wrapping content

3.1.0

Update Summary

Accessibility and bug fixes

Library

  • Additional form control theming variables are now available ($u-input-border-focus-color, $u-input-ink-focus-color, $u-input-label-background, $u-input-label-color)
  • z-index updates for better performance with screen readers, everything is now below 100
  • Text areas will no longer expand outside of their container
  • Text field styling will now match Unifi Angular

3.0.1

Update Summary

Accessibility Updates

Library

Bug Fixes:

  • Increase contrast of labels and button focus indicators to meet accessibility standards
  • Prevent form labels from overlapping other content

New theme variables for contained button focus colors:

  • $u-button-contained-primary-focus-color
  • $u-button-contained-secondary-focus-color

Documentation

Button and label documentation reflects new/updated variables.

3.0.0

Update Summary

Visual Theming Changes

Library

  • Updated default radio button & checkbox fill colors to primary theme color instead of secondary theme color.
  • Swapped primary and secondary button color styles. The primary action button should use a different color than the app bar which uses the primary theme color. Primary action buttons will now use the secondary theme color by default. Secondary action buttons will default to use the primary theme color.
  • The Notifications Component has been re-vamped to move the icon out of the color bar on the left. This change was primarily made so that the notifications are more aesthetic at mobile screen sizes. We have put together detailed instructions on how to update your current notifications in your application on Confluence.
  • Fixed an issue with the text contrast on extended palette color backgrounds. Previous minimum text contrast was set to a ratio of 3. Changed to 4.5 to meet WCAG 2.0 AA standards.
  • Fixed the hover color calculation on the button component. When using the Task theme, the hover color was too dark on the green buttons.

2.0.0

Update Summary

Updated to Dart Sass from Lib Sass.

Library

  • Update to Dart Sass and removed Node Sass. Node Sass is a wrapper for LibSass, which is now deprecated.
  • Replace characters in svg background url's to use UTF-8 encoding. For example: change all < to %3C and so on. We need to do this for applications that build with inline styles to improve first contentful paint, otherwise we will get a build compilation error. This change doesn't effect any functionality.
  • Use math.min and math.max instead of min() or max() for calculating luminance. This is an update that resulted from updating to Dart Sass.
  • Another change we had to make when updating to Dart Sass was updating files to use implicit imports. SCSS partials need to be imported into the file when using references such as functions or variable references.

1.4.0

Update Summary

Remove deprecated SASS division operator

Library

  • Removed deprecated SASS division operator from slash "/" to div() in all instances
  • Updated library dependencies

1.3.1

Update Summary

Bug Fix

Library

Update to fix bug where textarea resize handle was showing on native datepicker when it was in an error state.

1.3.0

Update Summary

Update of the Unifi Selection Controls to create consistent radio button input alignment.

Library

  • Align radio button inputs to the top of multiline labels.
  • Adjusted filled radio button image values.

1.2.0

Update Summary

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

Library

Updated and added palette values:

  • $u-theme-primary: #107f1b
  • $u-theme-secondary: #0e729a
  • $u-theme-warning: #ee6b18
  • $u-theme-info: #0aa0be
  • $u-theme-success: #55a43a

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

1.1.0

Update Summary

  • behind-the-scenes reorganization of library to enable easier theming and improve ability to extend to the Angular library
  • improvement of mixins for customizing builds to more selectively use styles, description follows

Library

All components now allow selectively including structure or color styles, such as for AppBar:

  • u-appbar(structure) - returns structural classes with no theme applied, only enough color to provide appropriate contrast or if color is essential to the component
  • u-appbar(color) - returns styles that apply the theme palette where applicable

Review the updated styling docs for more information and examples.

1.0.1

Update Summary

  • Improved contrast for outlined TextField and Button components
  • [Checkbox|Radio] - updated :focus styles to mimic native focus and remove reliance on a theme color for this very important state

Library

  • [Checkbox|Radio] - updated :focus styles for improved, non-theme reliant contrast
  • [TextField] - added more distinctive readonly styles, improved outlined variant contrast
  • [Media] - added missing !default flag to variables
  • updated dependencies

1.0.0

Update Summary

🎉 Hooray! Unifi's Web Version 1 release is here! 🎉

This release includes 27 stable components

Library