@ui5/webcomponents-base - npm Package Versions

2.0.0-rc.6 (2024-06-17)

Bug Fixes

• framework: set dataTransfer.effectAllowed only for UI5 elements (#9136) (28f6a2d)
• ui5-barcode-scanner-dialog: properly fire 'close' event (#9193) (db099f1), closes #9177
• ui5-busy-indicator: add block layer (#9208) (ba4ddb3), closes #9079
• ui5-button: fix tab chaining in lists (#9148) (9fdf617)
• ui5-carousel: selected state is added to item (#9184) (ced0f35)
• ui5-date-picker: adjust unstable tests (#9223) (3b049c8), closes #9033
• ui5-date-picker: provide accessible name to the popover (#8693) (26dee35), closes #8598
• ui5-dialog: fix focusing when dialog is open from OpenUI5 dialog (#9183) (d067e13)
• ui5-file-uploader: apply focus properly from inside of a popover (#9162) (2283e9e), closes #9090
• ui5-li-notification: enhance accessibility (#9192) (cc34cea), closes #9161
• ui5-list-item: move styles back from shadow DOM element to :host (#9155) (68cdd20)
• ui5-list: adjust failing test (#9191) (55e477c), closes #9173
• ui5-multi-combobox: correct lint error (#9157) (55cd3aa)
• ui5-notification-list: change host to display:block (#9139) (efb4791)
• ui5-segmented-button-item: add padding to icon when item is not in icon-only mode (#9180) (a3fd241), closes #9172
• ui5-shellbar: add tooltip for shellbar items (#9143) (c39c18a)
• ui5-side-navigation: group name is announced one time by screen … (#9207) (4f18dfd)
• ui5-special-date: respect format-pattern (#9086) (105c311)
• ui5-step-input: check for inner input before using value (#9212) (1b9fb61)
• ui5-tree-item: ensure correct cursor style (#9152) (d196583), closes #9146

Code Refactoring

• ui5-checkbox: wrap text by default (#9165) (ba1c583)
• ui5-li, ui5-li-custom: rename classes (#9158) (8f5b679)
• ui5-side-navigation-item: remove wholeItemToggleable property (#9164) (37b2181), closes #9057
• ui5-tag: wrap text by default (#9126) (96704b8)

Features

• ui5-ai-prompt-input: initial (experimental) implementation (#9078) (9dcdfdb)
• ui5-grid: implementing new grid component (#8362) (04d291d)
• ui5-link: introduce icon and endIcon properties (#9036) (06318cb)
• ui5-toolbar: design property added (#9147) (dc3dfe0)

BREAKING CHANGES

• ui5-checkbox: wrapping-type property default value has changed from None to Normal. Before:

<ui5-checkbox text=Some very very very very long text"></ui5-checkbox><!-- would truncate the text if there is not enough space -->

Now:

<ui5-checkbox text=Some very very very very long text"></ui5-checkbox> <!-- would let the text wrap if there is not enough space -->

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

• ui5-side-navigation-item: the wholeItemToggleAble poperty of ui5-side-navigation-item is now remomoved. The functionality of clicking the whole item to show/hide the sub items (if present) will be introduced soon with new property name and enhanced accessibility and keyboard handling.
• ui5-tag: wrapping-type property default value has changed from None to Normal. Before:

<ui5-tag>In Process</ui5-tag><!-- would truncate the text if there is not enough space -->

Now:

<ui5-tag>In Process</ui5-tag><!-- would let the text wrap if there is not enough space -->

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

• refactor(ui5-tag): fix test texsts

• refactor(ui5-tag): fix height of the tags to be the same

No matter if the tag is with wrapping-type="None" or wrapping-type="Normal" the height when there is only one line of text should be the same.

• refactor(ui5-tag): merge adjustments and code review comments

• refactor(ui5-tag): fix height

• ui5-li, ui5-li-custom: StandardListItem has been renamed to ListItemStandard, and CustomListItem has been renamed to ListItemCustom. If you previously imported the classes as follows:

import StandardListItem from "@ui5/webcomponents/StandardListItem.js";
import CustomListItem from "@ui5/webcomponents/CustomListItem.js";

now you must change imports to:

import ListItemStandard from "@ui5/webcomponents/ListItemStandard.js";
import ListItemCustom from "@ui5/webcomponents/ListItemCustom.js";

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

2.0.0-rc.5 (2024-06-06)

Bug Fixes

• ui5-button: adjust screen reader announcement order (#8997) (2d9a16b)
• ui5-calendar: adjust accessibility semantics (#9102) (06891a1), closes #9068 #9069
• ui5-combobox: fix grouping sample (#9085) (2c160d3)
• ui5-date: remove circular dependency (#9137) (9c8d12e)
• ui5-input, ui5-combobox, ui5-multi-combobox: prevent native input autocomplete (#9130) (5d8dbbd)
• ui5-notification-list: improved accessibility (#9070) (5e62d4a)
• ui5-option-custom: show focus outline (#9101) (bf8366e)
• ui5-popup: initialFocus won't work if 'autofocus' is set (#8956) (2c9f775)
• ui5-popup: remove popup from the tab chain (#8955) (aedcdb9), closes #9094
• ui5-shellbar: improved samples accessibility (#8847) (7563e7d), closes #8821

Code Refactoring

• ui5-link: wrap text by default (#9006) (1924b54)
• ui5-radio-button: wrap text by default (#9117) (b8d7bac)

Features

• ui5-menu-item: add endContent slot (dc3cfde), closes #6350
• ui5-select: introduced 'popover' part (#9120) (3c03e17), closes #4503
• ui5-time-picker: introduce open and close events (#9093) (bf2d0aa)

BREAKING CHANGES

• ui5-radio-button: wrapping-type property default value has changed from None to Normal. Before:

<ui5-radio-button text="Option A with long long text"></ui5-radio-button>
<!-- would truncate the text if there is not enough space -->

Now:

<ui5-radio-button text="Option A with long long text"></ui5-radio-button>
<!-- would let the text wrap if there is not enough space -->

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

• ui5-link: wrapping-type property default value has changed from None to Normal. Before:

<ui5-link>some very very very long link</ui5-link> <!-- would truncate the text if there is not enough space -->

Now:

<ui5-link>some very very very long link</ui5-link> <!-- would let the text wrap if there is not enough space -->

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">