Migration guide to UUI v.5

Migration Guide to UUI Version 5 from Lower Versions

In UUI version 5, we have focused on aligning functionality and visual appearance with current design specifications. We have also worked on aligning the code base and interfaces of the Promo and Loveship skins. As a result, we removed or deprecate some props or their values, the full list of changes could be found below.

While there is a substantial list of deprecations, we have analyzed several projects and found that most of them do not significantly impact existing projects. These deprecations are mainly relevant to older projects (started over 2 years ago). We are committed to closely collaborating with projects to assist in managing these breaking changes.

For many cases of breaking changes, you can find suitable replacements from the current set of values. However, if our breaking change recommendations do not fit your specific case, please reach out to your designer or contact us directly to identify the appropriate replacement.

Required global actions:

• Add import styles from import '@epam/uui/styles.css'; to the root of your app.
• Add theme class uui-theme-promo or uui-theme-loveship to body tag according to the skin you are using.
• The previous codebase of @epam/uui package was moved to the @epam/uui-core. So it's required to change previous imports.

Loveship skin changes:

• [Button]:
  • Removed lineHeight, fontSize props;
  • Removed following color prop values: 'carbon', 'cobalt', 'lavanda', 'fuchsia', 'night50', 'night100', 'night200', 'night300', 'night400', 'night700', 'night800', 'night900'.
  • Added new 'gray' color value, which equals previous 'night600' value;
  • Colors 'night500' | 'night600' marked as deprecated and will be removed in future releases, use 'gray' color instead.
• [Badge]:
  • Removed deprecated 'carbon' color;
  • Removed lineHeight, fontSize props.
• [Blocker]: removed color prop, 'sky' spinner color is used by default.
• [Checkbox]: removed prop color, 'blue' value is used by default.
• [DatePicker]: removed suffix & prefix props. Use ControlGroup component to create an input with prefix or suffix.
• [FlexRow]: 'borderBottom' prop type changed to boolean, 'night400' color is used for border by default.
• [IconButton]:
  • Removed deprecated 'carbon' color, default color changed to 'night600';
  • Colors 'night200', 'night300', 'night400' marked as deprecated and will be removed in future releases.
• [IconContainer]: prop color is deprecated and will be removed in future releases. Please make icon color configuration by yourself, e.g. via cx or style prop.
• [LabeledInput]: removed 'color' prop, 'night800' is used by default
• [LinkButton]:
  • Removed deprecated color 'carbon';
  • Removed lineHeight,font, fontSize props.
• [ModalBlocker]: removed blockerShadow prop, 'dark' value is used by default;
• [ModalHeader]:
  • Removed background prop;
  • borderBottom prop type changed to boolean, 'night400' color is used for border by default.
• [NotificationCard]: removed colors 'carbon' | 'cobalt' | 'lavanda' | 'fuchsia' | 'white' | 'night50' | 'night100' | 'night200' | 'night300' | 'night400' | 'night500' | 'night700' | 'night800' | 'night900'.
• [PageButton]: removed, use Button instead
• [PickerInput]: removed suffix & prefix props. Use ControlGroup component to create an input with prefix or suffix.
• [PickerList]: removed theme prop.
• [RadioInput]: removed color prop, 'sky' color is used by default.
• [Rating]: removed color prop, 'sun' color is used by default
• [RichTextView]: removed theme prop.
• [Slider]: removed color prop, 'sky' color is used by default.
• [Spinner]: removed color prop, 'sky' color is used by default.
• [Switch]: removed color prop, 'sky' color is used by default.
• [Tag]: removed color prop, 'night300' color is used by default.
• [Text]: removed colors 'carbon' | 'cobalt' | 'lavanda' | 'fuchsia' | 'night100' | 'night200'.
• [TextArea]: removed fontSize, lineHeight props.
• [TextInput]:
  • Removed fontSize, lineHeight props;
  • Removed suffix & prefix props. Use ControlGroup component to create an input with prefix or suffix.
• [TextPlaceholder]: removed color prop, 'night400' color is used by default.
• [Tooltip]: changed type of prop color to 'white' | 'fire' | 'gray' | 'night900', color 'night900' is deprecated & will be removed in the future releases use 'gray' instead.
• [RangeSlider]: removed color prop, 'sky' color is used by default.
• Removed components: AvatarRow, ColumnPickerFilter, Carousel.

Promo skin changes

• [Button]: color 'gray50' is deprecated and will be removed in the future release. Use 'gray' instead.
• [FlexRow]: type 'borderBottom' changed to boolean, 'gray40' color is used for border by default.
• [IconButton]: default color changed to 'gray60'.
• [LabeledInput]: removed color prop, 'gray80' is used by default
• [LinkButton]:
  • Removed font, fontSize, lineHeight props;
  • Added new colors 'gray10' | 'gray60'.
• [ModalBlocker]: removed deprecated prop blockerShadow, 'dark' value is used by default;
• [PickerInput]: removed deprecated props suffix, prefix. Use ControlGroup component to create an input with prefix or suffix.
• [Text]: added new colors 'blue' | 'green' | 'amber' | 'red' | 'white' | 'gray50'.
• [TextPlaceholder]: removed deprecated prop color, 'gray40' color is used for border by default.
• [Tooltip]: color 'gray90' is deprecated and will be removed in the future release. Use 'gray' instead.
• [Spinner]: removed deprecated prop color, 'blue' is used by default
• removed ColumnPickerFilter component.