@ui5/webcomponents
Advanced tools
Changelog
2.0.0-rc.6 (2024-06-17)
icon
and endIcon
properties (#9036) (06318cb)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
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.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
Changelog
2.0.0-rc.5 (2024-06-06)
open
and close
events (#9093) (bf2d0aa)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
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 -->
Changelog
2.0.0-rc.4 (2024-05-29)
after-close
to close
(#8967) (d05839d)open
property (#9001) (1c1cea6)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;
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";
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-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..
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.
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.
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.
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";
});
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>
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
features/InputElementsFormSupport.js
feature has been deleted and now, form elements works natively in form elements.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() {
//...
});
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">