@ui5/webcomponents-base - npm Package Versions

2.0.0-rc.4 (2024-05-29)

Bug Fixes

• register runtime in SSR usage (#9013) (54db283)
• ui5-*: Make setAnimationMode() properly change modes (#8965) (9f5d276), closes #8964
• ui5-button: add keyboard shortcut to cancel the button's action (c2d9c85), closes #6782
• ui5-button: adjust ui5-button menu button samples to use open/opener (974ff8c)
• ui5-button: remove tabindex from disabled button (#8957) (041f573), closes #8852
• ui5-calendar-legend: align visual design to meet WCAG 2.2 requirements (0860a3e)
• ui5-calendar: change the show month/year private event names (#8960) (c981459), closes #8893
• ui5-calendar: respect component level calendarType in week calculation (#8971) (69b8003)
• ui5-calendar: switch to two column layout on Islamic or Persian secondary calendar type (#8453) (1b172eb)
• ui5-date-picker: adjust failing tests (#9039) (7232039), closes #9033 #9034
• ui5-date-picker: display initial view properly (#8910) (e570031), closes #8893
• ui5-datetime-picker: change dateformat to datetime instance (#9024) (e5051ea)
• ui5-illustrated-mesasge: update subtitle color (#8986) (c9a5120), closes #8984
• ui5-multi-input: delete selected value on BACKSPACE (#8982) (d773532)
• ui5-multiinput: restore and adjust unit tests (#8933) (70dc2a6)
• ui5-notification-list: fix keyboard issues (#9040) (f1c0635)
• ui5-notification: implement keyboard navigation spec (#8975) (d68c883)
• ui5-panel: fix failing tests (#9044) (aeb7d42)
• ui5-popover: correct placement in RTL direction (#9009) (36fa85e)
• ui5-popover: fix auto close when click on iframe inside a shadow root (#8961) (5c2f5f6)
• ui5-popover: fix infinite open/show loop (#9055) (a142caf), closes #9031
• ui5-popover: prevent runtime error when opener is outside the viewport (#9017) (9212aa8)
• ui5-responsive-popover: fix initially focused input going out of the viewport on iPhone (#8945) (7ff177c)
• ui5-segmented-button-item: align sizes to spec (#8972) (0eefe5f), closes #7357
• ui5-select: popover scrolls to typed item (#9053) (70bbd7f), closes #8987
• ui5-side-navigation-item: "selected" is no longer announced on every focused item (#9008) (8cd3f83)
• ui5-side-navigation-item: click event is no longer fired twice (#8944) (0dd36ca)
• ui5-side-navigation: menu in collapsed mode width is not longer stretched unnecessary (#8940) (30c0530)
• ui5-side-navigation: overflow menu items are now displayed (#8948) (bcb3008)
• ui5-tag: add colors for Quartz high contrast themes for Set 2 (#8952) (92b3cf8)
• ui5-time-picker: remove box shadow (#8951) (7c7170d), closes #8932

Code Refactoring

• ui5-input: replace openPicker method with public property open (#8950) (3e2b32e)
• ui5-list: refactored HighlightTypes (#9061) (2510224), closes #8461
• ui5-option: make options physical elements (#8903) (8d6fac7), closes #8461 #7887
• ui5-popover: remove hideBackdrop property (#8947) (f628fbc), closes #8461
• ui5-popup: rename after-open and after-close events to 'open' and 'close' (#8946) (912167d), closes #8461
• ui5-shellbar: introducing assistant slot (#8963) (2a8c252), closes #8461 #7887
• ui5-toast: rename event after-close to close (#8967) (d05839d)

Features

• ui5-*: integrate element internals in input components (#8685) (c8e68d5), closes #8461
• ui5-button: add second (end) icon (2e97c03)
• ui5-color-palette-item: introduce selected state (#8554) (b0f8a30)
• ui5-combobox: introduce nested grouping of items (#8926) (92fe765)
• ui5-date-range: introduce new calendar date type (#8804) (ffe14a5), closes #8461
• ui5-dynamic-page: introduce new component (#7899) (3752ce7)
• ui5-form: introduce Form web component (#8281) (8d72042), closes #7854
• ui5-input: add input type search (#8980) (410ba3f), closes #7641
• ui5-input: allow custom icon styling (#8881) (cf9f1c2), closes #8182 #6132
• ui5-li-notification-group: enhance 'Expand'/'Collapse' tooltip (#9042) (08b81c7)
• ui5-li-notification: implement new design (#8426) (e451cdc)
• ui5-list,ui5-tree: make drag&drop feature public (#8904) (60b8038)
• ui5-time-picker: introduce open property (#9001) (1c1cea6)
• ui5-toolbar-button: add second (end) icon (#9048) (6688814)
• UI5Element: invalidateOnChildChange works for slots (#9021) (ec3ead7)

BREAKING CHANGES

• ui5-input: Remove openPicker method and replace it with public property open

Before the ui5-input suggestions popover could be opened by calling openPicker() :

const input = document.getElementById("exampleID");
input.openPicker();

Now the suggestions popover is opened by setting the open property to true:

const input = document.getElementById("exampleID");
input.open = true;

• refactor(ui5-input): fix spacing in input.mobile.spec.js
• ui5-combobox: The ui5-cb-group-item component is removed. Groups can now be created with the ui5-cb-item-group.
• ui5-list: Highlight enum should be imported differently. Before:

import HighlightTypes from "@ui5/webcomponents-base/dist/types/HighlightTypes.js";

Now:

import Highlight from "@ui5/webcomponents-base/dist/types/Highlight.js";

• ui5-toolbar-button: iconEnd property is changed from boolean to string type and now can accept name for second/end icon.

Before:

<ui5-toolbar-button icon="home" icon-end>Button</ui5-toolbar-button>

Now:

<ui5-toolbar-button end-icon="home">Button</ui5-toolbar-button>

or

<ui5-toolbar-button icon="employee" end-icon="home">Button</ui5-toolbar-button>

• ui5-notification: Instead of ui5-list, ui5-notification-list should be used as a container for ui5-li-notification-group and ui5-li-notification components.

Previously the application developers were defining notifications in this way:

<ui5-list>
        <ui5-li-notification-group title-text="Group Title" >
            <ui5-li-notification..

To support accessibility, developers should now use the ui5-notification-list as seen below:

<ui5-notification-list>
        <ui5-li-notification-group title-text="Group Title" >
            <ui5-li-notification..

• ui5-shellbar: 1. The showCoPilot property of the ui5-shellbar is removed.

If you have previously used the showCoPilot property:

<ui5-shellbar show-co-pilot></ui5-shellbar>

it will no longer work for the component.

1. The CoPilotAnimation feature of the ui5-shellbar is removed.

If you have previously used the CoPilotAnimation feature:

import CoPilotAnimation from "@ui5/webcomponents-fiori/dist/features/CoPilotAnimation.js"

it will no longer work for the component.

1. The copilotDomRef getter of the ui5-shellbar is removed.

If you have previously used the copilotDomRef public getter:

shellbar.copilotDomRef

it will no longer work for the component.

1. The co-pilot-click event of the ui5-shellbar is removed. If you have previously used the co-pilot-click public event:

shellbar.addEventListener("ui5-co-pilot-click", function(event) {
	...
});

it will no longer work for the component.

You can achieve similar functionality with the new slot:

HTML:

<ui5-shellbar>
  <ui5-toggle-button id="assistant" icon="sap-icon://da" slot="assistant"></ui5-toggle-button>
</ui5-shellbar>

JavaScript:

assistant.addEventListener("click", function (event) {
	const toggleButton = event.target;
	toggleButton.icon = toggleButton.pressed ? "sap-icon://da-2" : "sap-icon://da";
});

• ui5-option: The ui5-select-menu and ui5-select-menu-option components are removed. Custom options can now be created using the ui5-option-custom, directly placed inside the default slot of the ui5-select

SelectMenu & SelectMenuOption Changed item Old New SelectMenu ui5-select-menu removed SelectMenuOption ui5-select-menu-option ui5-option-custom If you have previously used the ui5-select-menu and ui5-select-menu-option:

<ui5-select menu="selectMenu"></ui5-select>

<ui5-select-menu id="selectMenu"> <ui5-select-menu-option> <div class="optionContent">custom</div> </ui5-select-menu-option> </ui5-select-menu> Now use just ui5-select and ui5-option-custom instead: <ui5-select> <ui5-option-custom> <div class="optionContent">custom</div> </ui5-option-custom> </ui5-select> Select Changed item Old New property menu removed The menu property of the ui5-select is removed. * **ui5-button:** iconEnd property is changed from boolean to string type and now can accept name for second/end icon.

Before:

<ui5-button icon="home" icon-end>Button</ui5-button>

Now:

<ui5-button end-icon="home">Button</ui5-button>

or

<ui5-button icon="employee" end-icon="home">Button</ui5-button>

• ui5-toast: The after-close event has been renamed to close. If you previously used it like:

toast.addEventListener("after-close", (event) => {
});

Now you have to use it like:

toast.addEventListener("close", (event) => {
});

Related to: https://github.com/SAP/ui5-webcomponents/issues/8461

• ui5-*: The features/InputElementsFormSupport.js feature has been deleted and now, form elements works natively in form elements.
• ui5-date-range: dates slot in a calendar now works with a ui5-date-range when selection-mode="Range"

Previously date ranges were declared as follows:

<ui5-calendar selection-mode="Range"> <ui5-date value="Jan 20, 2021"></ui5-date> <ui5-date value="Jan 30, 2021"></ui5-date> </ui5-calendar>

Now they are declared using a ui5-date-range:

<ui5-calendar selection-mode="Range"> <ui5-date-range start-value="Jan 20, 2021" end-value="Jan 30, 2021"></ui5-date-range> </ui5-calendar> * **ui5-popup:** Event names `after-close` and `after-open` are now named `close` and `open`. Previously the application developers could subscribe to the events as follows: ```ts popup.addEventListener("after-open", function() { //... }); popup.addEventListener("after-close", function() { //... }); ```

Now the application developers should include the ui5-bar as follows:

popup.addEventListener("open", function() {
	//...
});

popup.addEventListener("close", function() {
	//...
});

• ui5-popover: Property hideBackdrop is removed.

Previously the application developers could define a modal popover without visible backdrop as follows:

<ui5-popover modal hide-backdrop>

Now the application developers can use the standard ::backdrop CSS selector

<style>
.transparentBackdrop::backdrop {
  background: transparent;
}
</style>

...

<ui5-popover modal class="transparentBackdrop">