v2.0.0-rc.4
Pre-release2.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
toclose
(#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 forui5-li-notification-group
andui5-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 theui5-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.
- The
CoPilotAnimation
feature of theui5-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.
- The
copilotDomRef
getter of theui5-shellbar
is removed.
If you have previously used the copilotDomRef
public getter:
shellbar.copilotDomRef
it will no longer work for the component.
- The
co-pilot-click
event of theui5-shellbar
is removed.
If you have previously used theco-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:
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 toclose
. If you previously used it like:
toast.addEventListener("after-close", (event) => {
});
Now you have to use it like:
toast.addEventListener("close", (event) => {
});
Related to: #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:
Now they are declared using a ui5-date-range:
* **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">