UI5 Web Components - the enterprise-flavored sugar on top of native APIs! Build SAP Fiori user interfaces with the technology of your choice.
accessibilityAttributes (#8810) (49d587c)ui5-badge to Tag ui5-tag (#8884) (4b8c1ee)mode to selectionMode (#8761) (4be1540)activeIcon property (#8803) (f2bcfc1), closes #8461
@ui5/webcomponents-compat (#8849) (779bcdc)show method with open property (#8855) (372d27d), closes #8461
openPicker method with open property (#8749) (d283984)ui5-title: wrapping-type property default value has changed from None to Normal.
Previously long texts would truncate if there is not enough space. Now, long texts would wrap.
ui5-input:
If you have previously attached to 'suggestion-item-preview' event:
input.addEventListener("suggestion-item-preview", event => { const { item, targetRef } = event.detail;});
Now you should attach to 'selection-change' event:
input.addEventListener("selection-change", event => { const { item, targetRef } = event.detail;});
The event details remain the same. The only difference is that item and targetRef may be null, because 'selection-change' event is also fired when the input value no longer matches a selected suggestion.
If you have previously listened to 'suggestion-item-select' event to detect which suggestion item has been selected by the user:
input.addEventListener("suggestion-item-select", event => {
const suggestionItem = event.detail.item;
// do something with the suggestion item
});
Now you can detect which suggestion item was selected if you attach to 'selection-change event', keep the selected item in a variable and during 'change' event check if the input value matches the last selected item:
let suggestionItem;
input.addEventListener("selection-change", (event) => {
suggestionItem = event.detail.item;
});
input.addEventListener("change", (event) => {
if(event.target.value && suggestionItem &&
(event.target.value === suggestionItem.text)){
// do something with the suggestion item
console.log(suggestionItem);
}
});
Accessing the suggestion item under preview was done like this:
const suggestionItemOnPreview = input.previewItem;
Now you can attach to 'selection-change' event and get the previewed suggestion item from the event detail:
input.addEventListener("selection-change", event => {
const suggestionItemOnPreview = event.detail.item;
});
openPicker(), closePicker() and isOpen() methods. If you previously used openPicker() and closePicker():const datePicker = document.getElementById("exampleID");
datePicker.openPicker();
datePicker.closePicker();
Now use the open property respectively:
const datePicker = document.getElementById("exampleID");
datePicker.open = true;
datePicker.open = false;
Related to: https://github.com/SAP/ui5-webcomponents/issues/8461
accessibilityTexts and accessibilityRoles properties are removed. If you have previously used the accessibilityTexts or accessibilityRoles properties:fcl.accessibilityTexts = {
startColumnAccessibleName: "Products list",
midColumnAccessibleName: "Product information",
endColumnAccessibleName: "Product detailed information",
startArrowLeftText: "Collapse products list",
startArrowRightText: "Expand products list",
endArrowLeftText: "Expand product detailed information",
endArrowRightText: "Collapse product detailed information",
startArrowContainerAccessibleName: "Start Arrow Container",
endArrowContainerAccessibleName: "End Arrow Container",
}
fcl.accessibilityRoles = {
startColumnRole: "complementary",
startArrowContainerRole: "navigation",
midColumnRole: "main",
endArrowContainerRole: "navigation",
endColumnRole: "complementary".
}
Now use accessibilityAttributes instead:
fcl.accessibilityAttributes = {
startColumn: {
role: "complementary",
name: "Products list",
},
midColumn: {
role: "main",
name: "Product information",
},
endColumn: {
role: "complementary",
name: "Product detailed information",
},
startArrowLeft: {
name: "Collapse products list",
},
startArrowRight: {
name: "Expand products list",
},
endArrowLeft: {
name: "Expand product detailed information",
},
endArrowRight: {
name: "Collapse product detailed information",
},
startArrowContainer: {
role: "navigation",
name: "Start Arrow Container",
},
endArrowContainer: {
role: "navigation",
name: "End Arrow Container",
},
};
ShellBar's accessibilityTexts and accessibilityRoles properties are removed. If you have previously used the accessibilityTexts or accessibilityRoles properties:
shellbar.accessibilityTexts = {
profileButtonTitle: "John Dow",
logoTitle: "Custom logo title",
}
shellbar.accessibilityRoles = {
logoRole: "link"
};
Now use accessibilityAttributes instead:
shellbar.accessibilityAttributes = {
profile: {
name: "John Dow",
},
logo: {
role: "link"
name: "Custom logo title"
},
};
Related to: https://github.com/SAP/ui5-webcomponents/issues/8461
ui5-badge:<ui5-badge></ui5-badge>
Now use ui5-tag instead:
<ui5-tag></ui5-tag>
Related to: https://github.com/SAP/ui5-webcomponents/issues/8461
ariaHidden , interactive and accessibleRole , previously available in the ui5-icon component, have been removed. They are replaced by a new property named mode that specifies the component's mode.
Alongside this update, a new enumeration IconMode, has been introduced to outline the available options for this property:Image: This is the default setting. It configures the component to internally render role="img".
Interactive: Configures the component to internally render role="button". This mode also supports focus and press handling to enhance interactivity.
Decorative: In this mode, the component internally renders role="presentation" and aria-hidden="true", making it purely decorative without semantic content or interactivity.
Now, you can set the mode of the ui5-icon as it follows:
<ui5-icon id="imageIcon" mode="Image" name="add-equipment"></ui5-icon>
<ui5-icon id="myInteractiveIcon" mode="Interactive" name="add-equipment"></ui5-icon>
<ui5-icon id="decorativeIcon" mode="Decorative" name="add-equipment"></ui5-icon>
Related to: https://github.com/SAP/ui5-webcomponents/issues/8461, https://github.com/SAP/ui5-webcomponents/issues/7887
accessibleRole property for both ui5-li and ui5-list has been updated from a string type to an enum type.
Additionally, the new enums ListItemAccessibleRole and ListAccessibleRole have been introduced for these properties respectively.
The available options for the ui5-li:
ListItem- Represents the ARIA role "listitem". (by default)
MenuItem - Represents the ARIA role "menuitem".
TreeItem - Represents the ARIA role "treeitem".
Option - Represents the ARIA role "option".
None - Represents the ARIA role "none".The available options for the ui5-list:
List- Represents the ARIA role "list". (by default)
Menu - Represents the ARIA role "menu".
Tree - Represents the ARIA role "tree".
ListBox - Represents the ARIA role "listbox".
If you have previously used:
<ui5-li accessible-role="menuitem"> List Item</ui5-li>
<ui5-list accessible-role="tree"> List </ui5-list>
Now use:
<ui5-li accessible-role="MenuItem"> List Item</ui5-li>
<ui5-list accessible-role="Tree"> List </ui5-list>
Related to https://github.com/SAP/ui5-webcomponents/issues/8461, https://github.com/SAP/ui5-webcomponents/issues/7887
@ui5/webcomponents, you need to import it from @ui5/webcomponents-compat:import "@ui5/webcomponents-compat/dist/Table.js"; // ui5-table
import "@ui5/webcomponents-compat/dist/TableColumn.js"; // ui5-table-column
import "@ui5/webcomponents-compat/dist/TableRow.js"; // ui5-table-row`
import "@ui5/webcomponents-compat/dist/TableGroupRow.js";` // ui5-table-group-row
import "@ui5/webcomponents-compat/dist/TableCell.js"; // ui5-table-cell
Related to: https://github.com/SAP/ui5-webcomponents/issues/8461
<ui5-input value-state="Success"></ui5-input>
<ui5-input value-state="Warning"></ui5-input>
<ui5-input value-state="Error"></ui5-input>
<ui5-input value-state="Positive"></ui5-input>
<ui5-input value-state="Critical"></ui5-input>
<ui5-input value-state="Negative"></ui5-input>
Related to: https://github.com/SAP/ui5-webcomponents/issues/8461
open property. If you previously used toast.show() to show the toast, you must now se toast.open=true.ui5-segmentedbutton-item pressed property is called selected now.Previously the application developers could use the ui5-segmentedbutton-item as follows:
<ui5-segmented-button>
<ui5-segmented-button-item pressed> Option 1</ui5-segmented-button-item>
<ui5-segmented-button-item>Option 2</ui5-segmented-button-item>
<ui5-segmented-button-item>Option 3</ui5-segmented-button-item>
</ui5-segmented-button>
Now the application developers should use the ui5-segmentedbutton-item as follows:
<ui5-segmented-button>
<ui5-segmented-button-item selected> Option 1</ui5-segmented-button-item>
<ui5-segmented-button-item>Option 2</ui5-segmented-button-item>
<ui5-segmented-button-item>Option 3</ui5-segmented-button-item>
</ui5-segmented-button>
Related to: https://github.com/SAP/ui5-webcomponents/issues/8461
changeWithClick was renamed to withScroll in the WizardStepChangeEventDetail.JIRA: BGSOFUIRILA-3867
titleLevel property of the ui5-illustrated-messageis removed.
If you have previously used the titleLevel property:<ui5-illustrated-message title-level="H6>
it will no longer work for the component.
Instead, you could set the title of the ui5-illustrated-message on the title slot, as it follows
<ui5-illustrated-message>
<ui5-title slot="title" level="H3">This is a slotted title</ui5-title>
</ui5-illustrated-message>
Related to https://github.com/SAP/ui5-webcomponents/issues/8461, https://github.com/SAP/ui5-webcomponents/issues/7887
SelectionMode and the values it take from SingleSelect and MultiSelect to Single and Multiple. Also deleted deprecated getter - selectedItem and deprecated event detail selectedItem and now can be used with the selectedItems getter and selectedItems event detail.Previously the application developers could set the selection mode as follows:
<ui5-segmented-button id="segButtonMulti" mode="MultiSelect">
<ui5-segmented-button-item>Item</ui5-segmented-button-item>
<ui5-segmented-button-item>Item</ui5-segmented-button-item>
<ui5-segmented-button-item>Click</ui5-segmented-button-item>
<ui5-segmented-button-item>SegmentedButtonItem</ui5-segmented-button-item>
</ui5-segmented-button>
Now the application developers could set the selection mode as follows:
<ui5-segmented-button id="segButtonMulti" selection-mode="Multiple">
<ui5-segmented-button-item>Item</ui5-segmented-button-item>
<ui5-segmented-button-item>Item</ui5-segmented-button-item>
<ui5-segmented-button-item>Click</ui5-segmented-button-item>
<ui5-segmented-button-item>SegmentedButtonItem</ui5-segmented-button-item>
</ui5-segmented-button>
Related to: https://github.com/SAP/ui5-webcomponents/issues/8461
disableScrolling has been renamed, floatingFooter property has been removed and fixedFooter property has been added instead.Related to: https://github.com/SAP/ui5-webcomponents/issues/8461
activeIcon property ha been remove, as the interaction is considered obsolete by the UX design team. if you previously used active-icon:<ui5-split-button id="sbTextActiveIcon" active-icon="accept">Active Icon</ui5-split-button>
it's wont take effect anymore even if set.
Related to https://github.com/SAP/ui5-webcomponents/issues/8461
CSP.js module and the creation of <style> and <link> tags, as all browsers now support adoptedStyleSheets. The following APIs are not available any more and should not be used:import { setUseLinks } from "@ui5/webcomponents-base/dist/CSP.js"
import { setPackageCSSRoot } from "@ui5/webcomponents-base/dist/CSP.js"
import { setPreloadLinks } from "@ui5/webcomponents-base/dist/CSP.js"
ICardHeader interface. If you previously used the interfaceimport type { ICardHeader } from "@ui5/webcomponents-base/dist/Card.js"
Use the CardHeader type instead:
import type CardHeader from "@ui5/webcomponents-base/dist/CardHeader.js"
IUploadCollectionItem interface. If you previously used the interface:import type { IUploadCollectionItem} from "@ui5/webcomponents-fiori/dist/UploadCollection.js"
Use the UploadCollectionItem type instead:
import type UploadCollectionItem from "@ui5/webcomponents-fiori/dist/UploadCollectionItem.js"
Related to https://github.com/SAP/ui5-webcomponents/issues/8461
size property now accepts different values. If you previously used it like:<ui5-busy-indicator size="Small"></ui5-busy-indicator>
Now use the new values instead:
<ui5-busy-indicator size="S"></ui5-busy-indicator>
Related to https://github.com/SAP/ui5-webcomponents/issues/8461
status property and its shadow part have been renamed. If you previously used them:<style>
.cardHeader::part(status) { ... }
</style>
<ui5-card-header status="3 of 10"></ui5-popover>
Now use additionalText instead:
<style>
.cardHeader::part(additional-text) { ... }
</style>
<ui5-card-header class="cardHeader" additional-text="3 of 10"></ui5-card-header>
Related to https://github.com/SAP/ui5-webcomponents/issues/8461
pageIndicatorStyle no longer exists. If you previously used it like:<ui5-carousel page-indicator-style="Numeric"></ui5-carousel>
Now you should use pageIndicatorType instead:
<ui5-carousel page-indicator-type="Numeric"></ui5-carousel>
Related to https://github.com/SAP/ui5-webcomponents/issues/8461
UI5Element#render method in favour of UI5Element#renderer. If you previously used "render"class MyClass extends UI5Element {
static get render() {
return litRenderer;
}
}
start using "renderer"
class MyClass extends UI5Element {
static get renderer() {
return litRenderer;
}
}
npm init @ui5/webcomponents-package used to create JS-based project, however now it will be TypeScript-based project.
If you previously used npm init @ui5/webcomponents-package --enable-typescript to create TypeScript-based project, now it's by default, e.g npm init @ui5/webcomponents-package and --enable-typescript is removed.Left and Right options option have been renamed. If you previously used them to set the placement or the alignment of the popover:<ui5-popover horizontal-align="Left" placement-type="Left"></ui5-popover>
Now use Start or End instead:
<ui5-popover horizontal-align="Start" placement-type="Start"></ui5-popover>
Related to https://github.com/SAP/ui5-webcomponents/issues/8461
soccor icon. Use soccer instead.add-polygone icon. Use add-polygon instead.ui5-package/dist/api.json file, you can now use ui5-package/dist/custom-elements.json
import "@ui5/webcomponents/dist/Assets-static.js";
import "@ui5/webcomponents-icons/dist/Assets-static.js"
use the dynamic equivalent of it:
import "@ui5/webcomponents/dist/Assets.js";
import "@ui5/webcomponents-icons/dist/Assets.js"
Related to: https://github.com/SAP/ui5-webcomponents/issues/8461
selected-dates-change is renamed to selection-change. In addition the event details
values and dates are renamed to selectedValues and selectedDateValues. If you previously used the Calendar event as follows:myCalendar.addEventListener("selected-dates-change", () => {
const values = e.detail.values;
const dates = e.detail.dates;
})
Now you have to use the new event name and details:
myCalendar.addEventListener("selection-change", () => {
const values = event.detail.selectedValues;
const dates = event.detail.selectedDateValues;
})
Related to: https://github.com/SAP/ui5-webcomponents/issues/8461
color is renamed to value. If you previously used the change event of the ColorPicker as follows:<ui5-color-picker color="red"></ui5-color-picker>
Now you have to use it like this:
<ui5-color-picker value="red"></ui5-color-picker>
Related to: https://github.com/SAP/ui5-webcomponents/issues/8461
openPopover and showAt methods are removed in favor of open and opener properties. If you previously used the imperative API:button.addEventListener("click", function(event) {
colorPalettePopover.showAt(this);
});
Now the declarative API should be used instead:
<ui5-button id="opener">Open</ui5-button>
<ui5-color-palette-popover opener="opener">
button.addEventListener("click", function(event) {
colorPalettePopover.open = !colorPalettePopover.open;
});
ui5-bar component is now in main library. If you previously imported the ui5-bar from fiori:import "@ui5/webcomponents-fiori/dist/Bar.js;
Now, import the ui5-bar from main:
import "@ui5/webcomponents/dist/Bar.js";
Related to: https://github.com/SAP/ui5-webcomponents/issues/8461
<ui5-tab id="nestedTab" slot="subTabs"></ui5-tab>
Now use:
<ui5-tab id="nestedTab" slot="items"></ui5-tab>
Relates to https://github.com/SAP/ui5-webcomponents/issues/8461
<ui5-tabcontainer tabs-overflow-mode="StartAndEnd"></ui5-tabcontainer>
Now use:
<ui5-tabcontainer overflow-mode="StartAndEnd"></ui5-tabcontainer>
Relates to https://github.com/SAP/ui5-webcomponents/issues/8461
TabContainerBackgroundDesign, use BackgroundDesign instead.Relates to https://github.com/SAP/ui5-webcomponents/issues/8461
<ui5-tabcontainer show-overflow></ui5-tabcontainer>
now use the overflowButton slot:
<ui5-tabcontainer>
<ui5-button slot="startOverflowButton" id="startOverflowButton">Start</ui5-button>
<ui5-button slot="overflowButton" id="endOverflowButton">End</ui5-button>
</ui5-tabcontainer>
Relates to https://github.com/SAP/ui5-webcomponents/issues/8461
placementType property and the PopoverPlacementType enum have been renamed.
If you have previously used the placementType property and the PopoverPlacementType
<ui5-popover placement-type="Bottom"></ui5-popover>
import PopoverPlacementType from "@ui5/webcomponents/dist/types/PopoverPlacementType.js";
Now use placement instead:
<ui5-placement="Bottom"></ui5-popover>
import PopoverPlacementType from "@ui5/webcomponents/dist/types/PopoverPlacement.js";
Related to https://github.com/SAP/ui5-webcomponents/issues/8461
size property of the ui5--illustrated-message is renamed to design.
If you have previously used the size property:<ui5-illustrated-message size="Dialog">
Now use design instead:
<ui5-illustrated-message design="Dialog">
Related to https://github.com/SAP/ui5-webcomponents/issues/8461, https://github.com/SAP/ui5-webcomponents/issues/7887
separator-style property is renamed to separators and the BreadcrumbsSeparatorStyle enum is renamed to BreadcrumbsSeparator.
If you have previously used the separator-style property:<ui5-breadcrumbs separator-style="Slash">
Now use separators instead:
<ui5-breadcrumbs separators="Slash">
Related to https://github.com/SAP/ui5-webcomponents/issues/8461, https://github.com/SAP/ui5-webcomponents/issues/7887
disabled property of the ui5-option is removed.
If you have previously used the disabled property:<ui5-option disabled>Option</ui5-option>
it will no longer work for the component.
Related to https://github.com/SAP/ui5-webcomponents/issues/8461, https://github.com/SAP/ui5-webcomponents/issues/7887
The items-per-page-s, items-per-page-m, items-per-page-l properties are replaced by a single property items-per-page with value in the following format "S1 M2 L3"
Add XL size and refactor
chore: tests added
fix: xl test
refactor(ui5-carousel): replace items-per-page-s, items-per-page-m, items-per-page-l properties
Address code review coments
Address code review comments
Updates documentation
getPathData (function) instead of pathData (string)If you used icons like this:
import "@ui5/webcomponents-icons/dist/accept.js";
or like this:
import accept from "@ui5/webcomponents-icons/dist/accept.js";
there is no change and no adaptations are required.
In the rare case you imported pathData from icons, for example:
import { pathData, ltr, accData } from "@ui5/webcomponents-icons/dist/accept.js";
console.log(pathData); // String containing the SVG path
you must change your code to, for example:
import { getPathData, ltr, accData } from "@ui5/webcomponents-icons/dist/accept.js";
getPathData().then(pathData => {
console.log(pathData); // String containing the SVG path
});
Related to https://github.com/SAP/ui5-webcomponents/issues/8461
Icon (#8751) (ce55755)tooltip property (#8670) (ef64000)allowCustomValues property have been renamed to noValidation.
If you have previously used the allowCustomValues property
<ui5-multi-combobox allow-custom-values></ui5-multi-combobox>
Now use noValidation instead:
<ui5-multi-combobox no-validation></ui5-multi-combobox>
Related to: https://github.com/SAP/ui5-webcomponents/issues/8461
growingMaxLines property have been renamed to growingMaxRows.busy property of the ui5-list is renamed.
If you have previously used the busy, busyDelay properties:<ui5-list busy busy-delay="500"></ui5-list>
now you must use loading and loadingDelay properties:
<ui5-list loading loading-delay="500"></ui5-list>
disabled property of the ui5-progress-indicator is removed.
If you have previously used the disabled property, it won't take effect:<ui5-progress-indicator disabled value="60"></ui5-progress-indicator>
Related to https://github.com/SAP/ui5-webcomponents/issues/8461, https://github.com/SAP/ui5-webcomponents/issues/7887
selectionMode property no longer accepts "Delete" as value.
If you have previously used it:<ui5-upload-collection selection-mode="Delete"></ui5-upload-collection>
Now omit it completely and use hide-delete-button onto the ui5-upload-collection:
<ui5-upload-collection>
<ui5-upload-collection-item hide-delete-button> </ui5-upload-collection-item>
</ui5-upload-collection>
Related to https://github.com/SAP/ui5-webcomponents/issues/8461
mode property and the ListMode enum have been renamed.
If you have previously used the mode property and the ListMode values:<ui5-list class="list" mode="SingleSelect">
<ui5-list class="list" mode="MultiSelect">
<ui5-upload-collection mode="SingleSelectBegin">
<ui5-upload-collection mode="SingleSelectEnd">
<ui5-tree mode="SingleSelectAuto" >
<ui5-tree mode="None" >
Now use selectionMode and Single, Multiple instead:
<ui5-list class="list" selection-mode="Single">
<ui5-list class="list" selection-mode="Multiple">
<ui5-upload-collection selection-mode="SingleStart">
<ui5-upload-collection selection-mode="SingleEnd">
<ui5-tree selection-mode="SingleAuto">
<ui5-tree selection-mode="None">
Related to https://github.com/SAP/ui5-webcomponents/issues/8461, https://github.com/SAP/ui5-webcomponents/issues/7887
someTab.getTabInsStripDomRef();
someTabSeparator.getTabInsStripDomRef();
Now use:
someTab.getDomRefInStrip();
someTabSeparator.getDomRefInStrip();
Related to: https://github.com/SAP/ui5-webcomponents/issues/8461
Related to https://github.com/SAP/ui5-webcomponents/issues/8461
CSP.js module and the creation of <style> and <link> tags, as all browsers now support adoptedStyleSheets. The following APIs are not available any more and should not be used:import { setUseLinks } from "@ui5/webcomponents-base/dist/CSP.js"
import { setPackageCSSRoot } from "@ui5/webcomponents-base/dist/CSP.js"
import { setPreloadLinks } from "@ui5/webcomponents-base/dist/CSP.js"
ICardHeader interface. If you previously used the interfaceimport type { ICardHeader } from "@ui5/webcomponents-base/dist/Card.js"
Use the CardHeader type instead:
import type CardHeader from "@ui5/webcomponents-base/dist/CardHeader.js"
IUploadCollectionItem interface. If you previously used the interface:import type { IUploadCollectionItem} from "@ui5/webcomponents-fiori/dist/UploadCollection.js"
Use the UploadCollectionItem type instead:
import type UploadCollectionItem from "@ui5/webcomponents-fiori/dist/UploadCollectionItem.js"
Related to https://github.com/SAP/ui5-webcomponents/issues/8461
size property now accepts different values. If you previously used it like:<ui5-busy-indicator size="Small"></ui5-busy-indicator>
Now use the new values instead:
<ui5-busy-indicator size="S"></ui5-busy-indicator>
Related to https://github.com/SAP/ui5-webcomponents/issues/8461
status property and its shadow part have been renamed. If you previously used them:<style>
.cardHeader::part(status) { ... }
</style>
<ui5-card-header status="3 of 10"></ui5-popover>
Now use additionalText instead:
<style>
.cardHeader::part(additional-text) { ... }
</style>
<ui5-card-header class="cardHeader" additional-text="3 of 10"></ui5-card-header>
Related to https://github.com/SAP/ui5-webcomponents/issues/8461
pageIndicatorStyle no longer exists. If you previously used it like:<ui5-carousel page-indicator-style="Numeric"></ui5-carousel>
Now you should use pageIndicatorType instead:
<ui5-carousel page-indicator-type="Numeric"></ui5-carousel>
Related to https://github.com/SAP/ui5-webcomponents/issues/8461
UI5Element#render method in favour of UI5Element#renderer. If you previously used "render"class MyClass extends UI5Element {
static get render() {
return litRenderer;
}
}
start using "renderer"
class MyClass extends UI5Element {
static get renderer() {
return litRenderer;
}
}
npm init @ui5/webcomponents-package used to create JS-based project, however now it will be TypeScript-based project.
If you previously used npm init @ui5/webcomponents-package --enable-typescript to create TypeScript-based project, now it's by default, e.g npm init @ui5/webcomponents-package and --enable-typescript is removed.Left and Right options option have been renamed. If you previously used them to set the placement or the alignment of the popover:<ui5-popover horizontal-align="Left" placement-type="Left"></ui5-popover>
Now use Start or End instead:
<ui5-popover horizontal-align="Start" placement-type="Start"></ui5-popover>
Related to https://github.com/SAP/ui5-webcomponents/issues/8461
soccor icon. Use soccer instead.add-polygone icon. Use add-polygon instead.ui5-package/dist/api.json file, you can now use ui5-package/dist/custom-elements.json
import "@ui5/webcomponents/dist/Assets-static.js";
import "@ui5/webcomponents-icons/dist/Assets-static.js"
use the dynamic equivalent of it:
import "@ui5/webcomponents/dist/Assets.js";
import "@ui5/webcomponents-icons/dist/Assets.js"
Related to: https://github.com/SAP/ui5-webcomponents/issues/8461
selected-dates-change is renamed to selection-change. In addition the event details
values and dates are renamed to selectedValues and selectedDateValues. If you previously used the Calendar event as follows:myCalendar.addEventListener("selected-dates-change", () => {
const values = e.detail.values;
const dates = e.detail.dates;
})
Now you have to use the new event name and details:
myCalendar.addEventListener("selection-change", () => {
const values = event.detail.selectedValues;
const dates = event.detail.selectedDateValues;
})
Related to: https://github.com/SAP/ui5-webcomponents/issues/8461
color is renamed to value. If you previously used the change event of the ColorPicker as follows:<ui5-color-picker color="red"></ui5-color-picker>
Now you have to use it like this:
<ui5-color-picker value="red"></ui5-color-picker>
Related to: https://github.com/SAP/ui5-webcomponents/issues/8461
openPopover and showAt methods are removed in favor of open and opener properties. If you previously used the imperative API:button.addEventListener("click", function(event) {
colorPalettePopover.showAt(this);
});
Now the declarative API should be used instead:
<ui5-button id="opener">Open</ui5-button>
<ui5-color-palette-popover opener="opener">
button.addEventListener("click", function(event) {
colorPalettePopover.open = !colorPalettePopover.open;
});
ui5-bar component is now in main library. If you previously imported the ui5-bar from fiori:import "@ui5/webcomponents-fiori/dist/Bar.js;
Now, import the ui5-bar from main:
import "@ui5/webcomponents/dist/Bar.js";
Related to: https://github.com/SAP/ui5-webcomponents/issues/8461
<ui5-tab id="nestedTab" slot="subTabs"></ui5-tab>
Now use:
<ui5-tab id="nestedTab" slot="items"></ui5-tab>
Relates to https://github.com/SAP/ui5-webcomponents/issues/8461
<ui5-tabcontainer tabs-overflow-mode="StartAndEnd"></ui5-tabcontainer>
Now use:
<ui5-tabcontainer overflow-mode="StartAndEnd"></ui5-tabcontainer>
Relates to https://github.com/SAP/ui5-webcomponents/issues/8461
TabContainerBackgroundDesign, use BackgroundDesign instead.Relates to https://github.com/SAP/ui5-webcomponents/issues/8461
<ui5-tabcontainer show-overflow></ui5-tabcontainer>
now use the overflowButton slot:
<ui5-tabcontainer>
<ui5-button slot="startOverflowButton" id="startOverflowButton">Start</ui5-button>
<ui5-button slot="overflowButton" id="endOverflowButton">End</ui5-button>
</ui5-tabcontainer>
Relates to https://github.com/SAP/ui5-webcomponents/issues/8461
placementType property and the PopoverPlacementType enum have been renamed.
If you have previously used the placementType property and the PopoverPlacementType
<ui5-popover placement-type="Bottom"></ui5-popover>
import PopoverPlacementType from "@ui5/webcomponents/dist/types/PopoverPlacementType.js";
Now use placement instead:
<ui5-placement="Bottom"></ui5-popover>
import PopoverPlacementType from "@ui5/webcomponents/dist/types/PopoverPlacement.js";
Related to https://github.com/SAP/ui5-webcomponents/issues/8461
size property of the ui5--illustrated-message is renamed to design.
If you have previously used the size property:<ui5-illustrated-message size="Dialog">
Now use design instead:
<ui5-illustrated-message design="Dialog">
Related to https://github.com/SAP/ui5-webcomponents/issues/8461, https://github.com/SAP/ui5-webcomponents/issues/7887
separator-style property is renamed to separators and the BreadcrumbsSeparatorStyle enum is renamed to BreadcrumbsSeparator.
If you have previously used the separator-style property:<ui5-breadcrumbs separator-style="Slash">
Now use separators instead:
<ui5-breadcrumbs separators="Slash">
Related to https://github.com/SAP/ui5-webcomponents/issues/8461, https://github.com/SAP/ui5-webcomponents/issues/7887
disabled property of the ui5-option is removed.
If you have previously used the disabled property:<ui5-option disabled>Option</ui5-option>
it will no longer work for the component.
Related to https://github.com/SAP/ui5-webcomponents/issues/8461, https://github.com/SAP/ui5-webcomponents/issues/7887
ITab interface. TabContainer is designed to work only with Tab and TabSeparator classes, so the interface was obsolete.sr, mk, cnr locales (#8534) (5b410d6), closes #8163
open property (#8316) (8f59d16), closes #8072
icon (#8423) (ab97c02), closes #8326
text-placement (#8471) (a494473)highlight property (#8421) (1a3fa61), closes #8317
growintButtonText property added (#8349) (3ad5a90), closes #7028
bar CSS part (#8599) (831fad3), closes #6140
accessibleName and accessibleNameRef (#8631) (0d0d765)