Skip to content

v2.0.0

Choose a tag to compare

View all tags
@ui5-webcomponents-react-bot ui5-webcomponents-react-bot released this 23 Aug 14:24
· 957 commits to main since this release
v2.0.0
c331ebe

2.0.0 (2024-08-23)

Migration Guide

BREAKING CHANGES

General Changes

  • ❗ Updated UI5 Web Components to v2. All breaking changes apply to this project as well. ❗
  • ❗ The minimum required react and react-dom version is now 18.0.0 ❗
  • UI5 Web Components Enums are no longer exported
  • the dedicated build for Server Side Rendering in the ssr folder has been removed as the UI5 Web Components now natively support being imported in Node.js environments. You can import all components from @ui5/webcomponents-react.
  • UI5 Web Components for React is no longer relying on react-jss internally, hence the dependency is now removed and the react-jss ThemeProvider is no longer rendered as part of our ThemeProvider. If you are relying on react-jss in your application, please make sure to render your own react-jss ThemeProvider.
  • We stopped recommending jest as a testing framework over a year ago, thus the jestSetup file is removed. We recommend using cypress instead.

Component Changes

ActionSheet

  • ActionSheet: a11yConfig has been renamed to accessibilityAttributes.
  • ActionSheet: the portalContainer prop has been removed as it's not needed anymore
  • ActionSheet: the showCancelButton has been renamed to hideCancelButton and the logic has been inverted.
  • ActionSheet: prop placementType has been renamed to placement, onAfterClose to onClose and onAfterOpen to onOpen

AnalyticalCard

  • AnalyticalCard: The AnalyticalCard component has been removed. Please use the Card component instead.

AnalyticalTable

  • AnalyticalTable - TypeScript: The internal table instance types were updated, leading to stricter types, so depending on your implementation, you might encounter ts-errors.
  • AnalyticalTable: selectedFlatRows has been removed from the detail object of onRowSelect.
  • AnalyticalTable: The properties and values for the AnalyticalTableSelectionMode enum has been changed. SingleSelect is now Single and MultiSelect is now Multiple.
  • AnalyticalTable: a11yConfig has been renamed to accessibilityAttributes.
  • AnalyticalTable: The TableScaleWidthMode enum has been removed, please use AnalyticalTableScaleWidthMode instead.
  • AnalyticalTable: The TableSelectionBehavior enum has been removed, please use AnalyticalTableSelectionBehavior instead.
  • AnalyticalTable: The TableSelectionMode enum has been removed, please use AnalyticalTableSelectionMode instead.
  • AnalyticalTable: The TableVisibleRowCountMode enum has been removed, please use AnalyticalTableVisibleRowCountMode instead.
  • AnalyticalTable: The alwaysShowSubComponent prop has been removed, please use subComponentsBehavior instead.
  • AnalyticalTable: The default value (true) of the sortable prop has been removed, it is now required to explicitly set this prop, if the table should be sortable.
  • AnalyticalTable: The canReorder column property has been removed, please use disableDragAndDrop instead.
  • AnalyticalTable: When selecting or pressing a row by using the Space key, onRowClick and onRowSelect are now fired on keyup instead of keydown.
  • AnalyticalTable: portalContainer has been removed as it's no longer needed due to the Popover API.

Badge

  • Badge: the Badge component has been renamed to Tag

ComboBoxGroupItem

  • ComboBoxGroupItem: the ComboBoxGroupItem component has been renamed to ComboBoxItemGroup

CustomListItem

  • CustomListItem: the CustomListItem has been replaced with the ListItemCustom component

DynamicPage

  • DynamicPage The DynamicPage component has been replaced with the ui5-dynamic-page UI5 Web Component, please visit our Migration Guide for more details.
  • DynamicPage The DynamicPageHeader component has been replaced with the ui5-dynamic-page-header UI5 Web Component.
  • DynamicPage The DynamicPageTitle component has been replaced with the ui5-dynamic-page-title UI5 Web Component.

ExpandableText

  • ExpandableText: the inherited props hyphenated and emptyIndicator from the Text have been removed.
  • ExpandableText: the portalContainer prop has been removed as it's not needed anymore

FilterBar & FilterGroupItem

  • FilterBar: The FilterBar component was completely overhauled and references of input elements aren’t copied to the filters dialog anymore, also internal logic for reordering and selection has been removed, meaning it’s necessary to control their values manually (e.g. via React state).

  • FilterBar: onToggleFilters: The detail property of the event now only includes visible and nativeDetail properties. filters and search have been removed.

  • FilterBar: onFiltersDialogSave: The detail property of the event now only includes selectedFilterKeys, reorderedFilterKeys and nativeDetail properties. elements, toggledElements, filters, search, orderIds have been removed.

  • FilterBar: onFiltersDialogCancel: The event is now a callback instead of a Ui5CustomEvent. It implements the escPressed parameter.

  • FilterBar: onFiltersDialogClose: The event is now a callback instead of a Ui5CustomEvent. It implements the closeTrigger parameter.

  • FilterBar: onFiltersDialogSelectionChange: The event is now a callback instead of a Ui5CustomEvent. It implements a payload object as parameter.

  • FilterBar: onFiltersDialogSearch: The event is now a standard Input onInput event. The detail properties value and element have been removed.

  • FilterBar: onClear: The event is now a standard ToolbarButton onClick event. The detail properties filters and search have been removed.

  • FilterBar: onGo: The event is now a standard ToolbarButton onClick event. The detail properties elements, filters, search, nativeDetail have been removed.

  • FilterBar: onRestore: The event is now a callback instead of a CustomEvent. It implements a payload object as parameter.

  • FilterBar: onFiltersDialogOpen (TypeScript): The target of the event is now a ToolbarButton.

  • FilterBar: portalContainer has been removed as it's no longer needed due to the Popover API used in the Popover ui5 web component.

  • FilterGroupItem: orderId has been removed. Please use filterKey instead.

  • FilterGroupItem: For a better aligned API, the visible and visibleInFilterBar (default: true) props have been replaced with hidden and hiddenInFilterBar (no default value).

Form

  • Form: The Form component has been replaced with the ui5-form UI5 Web Component, please visit our Migration Guide for more details.

GroupHeaderListItem

  • GroupHeaderListItem: the GroupHeaderListItem component has been renamed to ListItemGroup

Loader

  • Loader: The deprecated Loader component has been moved to the @ui5/webcomponents-react-compat package. Please use the BusyIndicator instead, as it's now the only loading indicator that is supported by our UX guidelines. Please visit our Migration Guide for more details.

MessageBox

  • MessageBox: onClose is now a plain callback and not a CustomEvent event anymore. It now receives two params: action & escPressed.

Modals

  • Modals: modals are now rendered as children of the Modals component instead of being rendered into document.body
  • Modals: ThemeProvider: the prop withoutModalsProvider has been removed. For more information, please refer to our Migration Guide.
  • Modals: the hooks useShowDialog, useShowPopover, useShowResponsivePopover, useShowMenu, useShowMessageBox and useShowToast have been removed. For more information, please refer to our Migration Guide.

MultiComboBoxGroupItem

  • MultiComboBoxGroupItem: the MultiComboBoxGroupItem has been replaced with the MultiComboBoxItemGroup component

NotificationAction

  • NotificationAction: the NotificationAction component has been removed. You can use the Menu component instead.

ObjectPage, ObjectPageSection, ObjectPageSubSection & ObjectPageTitle

  • ObjectPage: headerContent has been renamed to headerArea and now only accepts the ObjectPageHeader component.

  • ObjectPage: headerTitle has been renamed to titleArea and now only accepts the ObjectPageTitle component.

  • ObjectPage: footer has been renamed to footerArea.

  • ObjectPage: onToggleHeaderContent has been renamed to onToggleHeaderArea

  • ObjectPage: onPinnedStateChange has been renamed to onPinButtonToggle

  • ObjectPage: headerTitle now only accepts the ObjectPageTitle component instead of the DynamicPageTitle.

  • ObjectPage: headerContent now only accepts the ObjectPageHeader component instead of the DynamicPageTitle.

  • ObjectPage: a11yConfig.dynamicPageAnchorBar has been renamed to a11yConfig.objectPageAnchorBar

  • ObjectPage: the props showHideHeaderButton and showTitleInHeaderContent have been removed.

  • ObjectPage: the prop alwaysShowContentHeader has been renamed to headerPinned

  • ObjectPage: the prop headerContentPinnable has been renamed to hidePinButton and its logic has been inverted. The pin button is now shown by default.

  • ObjectPage: the prop showSubHeaderRight has been removed as it's not defined by design anymore.

  • ObjectPage: a11yConfig has been renamed to accessibilityAttributes.

  • ObjectPage (TypeScript): replace headerTitle type with ReactElement<DynamicPageTitlePropTypes>

  • ObjectPage (TypeScript): replace headerContent type with ReactElement<DynamicPageHeaderPropTypes>

  • ObjectPage (TypeScript): replace image type with string | ReactElement<AvatarPropTypes>

  • ObjectPageSection: the prop titleText is now required.

  • ObjectPageSection: the default value true for the prop titleTextUppercase has been removed.

  • ObjectPageSubSection: the prop titleText is now required.

  • ObjectPageTitle: actions has been renamed to actionsBar. Instead of single actions, the Toolbar component should now be passed.

  • ObjectPageTitle: navigationActions has been renamed to navigationBar. Instead of single actions, the Toolbar component should now be passed.

  • ObjectPageTitle: actionsToolbarProps: Since it's now recommended passing the Toolbar component directly, this prop is redundant.

  • ObjectPageTitle: navigationActionsToolbarProps: Since it's now recommended passing the Toolbar component directly, this prop is redundant.

ObjectStatus

  • ObjectStatus: active has been renamed to interactive.
  • ObjectStatus (TypeScript):: the HTMLDivElement type has been removed from the onClick handler.

SelectDialog

  • SelectDialog: renamed prop mode to selectionMode to be aligned with new List API, onAfterClose to onClose and onAfterOpen to onOpen

SelectMenu

  • SelectMenu: the SelectMenu and SelectMenuOption components have been removed. The Select and Option now allow custom content.

StandardListItem

  • StandardListItem: the StandardListItem has been replaced with the ListItemStandard component

SuggestionGroupItem

  • SuggestionGroupItem: the SuggestionGroupItem component has been replaced by the SuggestionItemGroup component

TableColumn

  • TableColumn: the TableColumn component has been replaced with the TableHeaderCell component

TableGroupRow

  • TableGroupRow: the TableGroupRow component has been deleted

Text

  • Text: the Text component has been replaced with the ui5-text web component, please visit our Migration Guide for more details.

ThemeProvider

  • ThemeProvider: the GlobalStyleClasses enum has been removed

Toolbar

  • Toolbar: the Toolbar component and its related components have been moved to the @ui5/webcomponents-react-compat package.

ToolbarV2, ToolbarSpacerV2 & ToolbarSeparatorV2

  • ToolbarV2: the ToolbarV2 component has been renamed to Toolbar
  • ToolbarSpacerV2: the ToolbarSpacerV2 component has been renamed to ToolbarSpacer
  • ToolbarSeparatorV2: the ToolbarSeparatorV2 component has been renamed to ToolbarSeparator

VariantManagement

  • VariantManagement: the portalContainer prop has been removed as it is no longer needed.

Enums

  • enums: the MessageBoxActions enum has been renamed to MessageBoxAction
  • enums: the MessageBoxTypes enum has been renamed to MessageBoxType
  • enums: the Themes enum has been renamed to Theme and the deprecated "Belize" (sap_belize) theme family has been removed

Types

  • CommonProps - TypeScript: dangerouslySetInnerHTML type has been removed

Charts

  • charts: the MicroBarChart component as been removed as this is a legacy component which is not covered by design specs anymore.

Base

  • useResponsiveContentPadding: The useResponsiveContentPadding has been removed. You can achieve the same look and feel by using the responsive content padding from Common CSS.
  • All spacing variables have been removed. You can use common CSS classes as a substitute for most variables. For more information, please refer to our Migration Guide.

Changes

Bug Fixes

  • AnalyticalTable - useRowDisableSelection: remove title from select-all cell (#5955) (c731554), closes #5953

  • AnalyticalTable: don't wrap custom header content in Text component (#6022) (455acc1)

  • AnalyticalTable: fire row select & click events on keyup instead of keydown (#6013) (f1386f8), closes #4388

  • AnalyticalTable: fix custom header alignment (#6068) (c4a49e4)

  • AnalyticalTable: improve focus border alignment (#5944) (18aeb52), closes #5898

  • apply correct scoping for internal ui5wc CSS vars (#6057) (3822bee), closes #6051

  • CommonProps - TypeScript: remove dangerouslySetInnerHTML from types (#6002) (f5f9101)

  • deps: update dependency @tanstack/react-virtual to v3.5.1 (#5883) (2db3ca9)

  • deps: update dependency react-content-loader to v7.0.1 (#5899) (5ed11e9)

  • deps: update dependency react-content-loader to v7.0.2 (#5909) (cb79434)

  • deps: update react monorepo to v19.0.0-rc-fb9a90fa48-20240614 (patch) (#5928) (863055a)

  • MessageBox - TypeScript: adjust onClose type (#5975) (a30867a)

  • MessageViewItem: enable details view if titleText is overflowing (#6015) (dba28ce), closes #5990

  • MessageView: use correct icon and color for default type (#6016) (0018bba)

  • NumericSideIndicator: fix alignment (#6064) (7ecd301)

  • ObjectStatus: remove HTMLDivElement from onClick type (#6011) (671cfaa)

  • use new JSX transform in preparation for React 19 (#5837) (7dcad64)

  • codemod: fix import statment for UI5 Web Component enums (#6084) (b3a5aed)

  • AnalyticalTable: add "Filter" text to column popover (#6164) (c035703), closes #6132

  • AnalyticalTable: add aria-hidden to multi selection checkboxes (#6134) (082d1c0), closes #6133

  • AnalyticalTable: allow selecting all rows via keyboard (#6168) (65de580), closes #6110

  • AnalyticalTable: fix pop-in content styles (#6170) (5f7d56b), closes #5977

  • codemod: improve replacements for Text (#6123) (277120b)

  • deps: update dependency @tanstack/react-virtual to v3.8.4 (main) (#6137) (ef1650b)

  • ObjectPage: increase header z-index (#6117) (e9aeb63), closes #6116

  • ObjectPageTitle: prevent styling race condition when using static css bundle (#6115) (f4c4ebb)

  • UI5CustomEvent - TypeScript: correctly currentTarget type (#6167) (656ad5a), closes #6136

  • AnalyticalTable: correct CustomElementsScope import path (#6184) (de68b2d), closes #6183

  • MessageBox: don't throw error if onClose is not passed (#6226) (7981491), closes #6215

  • VariantManagement: apply correct header size for "Manage Views" dialog (#6185) (8b01af4)

  • add runtime index to global Modal and Style store (#6248) (8184b4e)

  • AnalyticalTable: ensure loading indicator displays correctly across all browsers (#6244) (4fb6008), closes #6243

chore

Code Refactoring

Features

  • AnalyticalTable: introduce loadingDelay prop (#6025) (6d80fd8)

  • charts: introduce loadingDelay prop (#6027) (71fcb40)

  • cli: create codemod for UI5 Web Components React v2 migration (#5908) (9f65c98)

  • create compat package (#5894) (f4516cc)

  • DynamicPage & ObjectPage: use ui5wc DynamicPage & rename ObjectPage components (#5939) (cb684cd)

  • Form: replace with UI5 Web Component (#5925) (1e246ee)

  • move Loader to compat package & replace with BusyIndicator (#6020) (80d8c0b)

  • ObjectPage: introduce preserveHeaderStateOnClick prop (#6049) (c3c6f06)

  • RadialChart: introduce loading & loadingDelay props (#6028) (3891437)

  • support objects and references as Web Component props (#5957) (f41d32b)

  • support React 19 (#5860) (c78ab7f)

  • Text: replace with UI5 Web Component (#5988) (19ed2ec)

  • ThemeProvider: apply Fiori scrollbar styling to all scroll containers (#5978) (9a611fd)

  • update to @ui5/webcomonents 2.0.0-rc.6 (#5940) (60907b4)

  • update to UI5 Web Components 2.0 RC (#5861) (7a27b7f)

  • update UI5 Web Components to 2.0.0 (#6023) (49efb9b)

  • codemod: basic replacements for DynamicPage (#6086) (93819a9)

  • codemod: transform Text wrapping to maxLines (#6085) (a879a9b)

  • ObjectPage: refactor component to support ui5wc v2 (#6089) (105b2da)

  • update to UI5 Web Components ~2.1.1 (#6151) (80c9a65), closes #5971

  • VariantManagement: introduce size prop & improve docs (#6166) (c0184cc)

  • expose CLI package for creating web component wrappers (#6212) (28b14d9), closes #5046

  • react 19: bind web components event handlers using react lifecycle (#6169) (70f9f27)

  • register current runtime version in window (#6222) (367628c), closes #6210

  • AnalyticalTable - TypeScript: improve instance & prop types (#6256) (796f7c1)

Assets 2
Loading