v5.0.0

[AlekseyManetov]

5.0.0 - 06.06.2023

Themes

This release introduces Themes support. @epam/uui package now contains components, which can be styled differently according to an applied Theme - a set of global CSS variables.

@epam/promo and @epam/loveship packages are re-built on top of @epam/uui package. This allows us to unify codebase, and reduce differences between 'loveship' and 'promo'. We also aligned APIs, functionality and visual appearance between 'promo' and 'loveship' skins, as a result, we removed or deprecated some props or their values.

Pay attention that this release requires some additional actions for the library to work properly.
You can find migration guide and full list of changes here.

Note: Currently, we use Themes internally to implement Loveship and Promo. In future, we allow UUI users to build their own themes, and using Themes variables for customization. However, in this release we haven’t yet finalized Themes APIs (CSS variables names). We can’t yet recommend using Themes internals, e.g. override Themes CSS variables for customization.

Testing facilities and documentation

• Introduced new @epam/uui-test-utils package. It provides a set of helpers, utils and mocks which facilitate creation of unit tests for UUI components.
• Was added Testing documentation. It contains general guidelines, best practices and tools which we are recommending to use for UUI components testing.
  Also, it contains a Cookbook describing typical use cases with code examples as well as frequent questions & answers.

DataSources documentation

• Introduced the new DataSources documentation, that covers a wide range of topics related to the DataSources, accompanied by illustrative examples.
  Note that this is the first revision of this doc, so we would appreciate your feedback and have plans to continuously improve this documentation.

ESM modules support

• EcmaScript modules (ESM) are now included into UUI packages. Usage of ESM should help to eliminate unused code via tree shaking. CommonJs modules will be published along with ESM in the same package for backwards compatibility.

Other changes

• We made UUI compatible with Vite build toolchain. You can find template project of UUI + Vite here.
• The @epam/assets package and "assets" folders inside promo and loveship packages were cleaned up: some "*.scss" files were deleted. Please copy any missing files directly to your project if they are still needed.
• [useTableState]:
  • [BreakingChange]: removed initialFilter prop, if you need to provide any initial state for hook, pre-generate an url link with this state on you side.
  • added storing of sorting, columns config, and paging state into url
  • now hook accepts optional IEditable props, use them for cases when you need to store DataTableState by yourself. If passed it assumed that you will handle all state changes on your side and hook will not store any state into url.
• [ContextProvider]: removed support of legacy React context API, as it were announced in 4.1.0 version. enableLegacyContext prop was deleted.
• [ApiContext]: removed the code which handles /auth/login for the apps, which doesn't handle this themselves.
  If an app doesn't handle /auth/login correctly, this needs to be implemented implicitly. There are several options:
  • Handle /auth/login path server-side. Server should log in user (via redirects to SSO), and - after success, return the following HTML:
    <script>window.opener && window.opener.postMessage("authSuccess", "*")</script>
  • Handle /auth/login path client-side. The simplest method is to add the following to the index.js:
    window.opener && window.location.pathname === '/auth/login' && window.opener.postMessage("authSuccess", "*");
  • If an app implements UUI-based login pages, they need to run the following code after successful login:
    window.opener && window.opener.postMessage("authSuccess", "*")
• [DataTable]: deprecated column shrink property was removed, as it was announced in 4.9.0 version.
• [MainMenuDropdown]: added callback renderBody prop.
• [FiltersPanel]:
  • hide 'Add filter' button, if all filters isAlwaysVisible
  • added presets prop to rangeDatePicker filter
  • added filter prop for datePicker and rangeDatePicker filters
• [PickerInput]:
  • added implicit cascade selection mode. In this mode selecting a parent node means that all children are considered checked,
    but only the checked parent is present in the Picker's value or DataSourceState.checked array.
  • now items which present in selection and doesn't exist in DataSource will be shown in picker as '[Unknown]'
  • added a default footer component for single pickers that includes a "Clear" button
• [DataSources]: DataSources internals are refactored, optimized, and prepared for further improvements
• [PresetsPanel]: added limitation for new preset input (max length 50)
• [DropdownMenu]: added a 400ms delay to the submenu's close and open triggers
• [ModalWindow]: added possibility to provide number for 'width' and 'height' props.
• [TimePicker]: added max values to hours and minutes inputs
• [Tooltip]: added possibility to pass rawProps to the tooltip body
• [RangeDatePicker]: added new onOpenChange prop
• [ErrorHandler]: now in Loveship used NotificationCard component instead of SnackbarCard for notification type errors
• [ErrorHandler]: added additional property onNotificationError to render notifications with custom markup and configured the notification duration.
• Added inputCx and bodyCx props for composed components like PickerInput and DatePickers

What's Fixed

• [PickerInput]:
  • fixed partially checked nodes in lazy lists
  • fixed single select dropdown body closing by the collapse icon if any value was selected.
  • fixed hover affect doesn't appear on "parent" node, in case when it's not selectable but foldable.
  • fixed single select window doesn't close by the collapse icon if any value was selected.
  • fixed renderToggler prop which was used with TextInput / SearchInput
  • fixed picker body closing by click on clear search icon
• [FilterPanel]:
  • fixed "show only selected" toggle not being visible, when selectAll was disabled via DataSource
  • fixed picker body closing by clicking close button or done in mobile view.
• [DataTable]:
  • fixed first column overlapping second column in case when content can't fit the column
  • set 'undefined' value instead of '[]' for sorting, when sorting removed from column
  • fixed mobile view column filter crashes and when column caption not a string
• [Tooltip]:
  • removed default 300px max-width value from styles, you can set max-with using property 'maxWidth'.
  • Fixed a white subpixel line on a tooltip arrow on browsers with zoom >100%.
• [PresetsPanel]: fixed scroll inside "N more" dropdown
• [Dropdown]: The delay to close/open the dropdown has been fixed. In previous version the closeDelay being overwritten constantly while the mouse was moving.
• [Button]: removed 'disabled' attribute if the Button/LinkButton/IconButton is disabled, because it will prevent all events and broke Tooltip at least.
• [RichTextView]: h1 font-size in promo skin changed from 36px to 42px.
• [FilterPanel]: fixed issue with "show only selected" toggle not being visible, when selectAll was disabled via DataSource

---

This discussion was created from the release v5.0.0.