v2.0.0-rc.0

2.0.0-rc.0 (2024-04-09)

Bug Fixes

• ui5-flexible-column-layout: improved separators borders (#8639) (367ca80), closes #8307
• ui5-multi-input: fix failing popover test (#8662) (3234747)
• ui5-multi-input: prevent double value state message on nMore open (#8638) (ed7b3ba), closes #8586
• ui5-multi-input: prevent double value state message on nMore open (#8666) (fdbf442), closes #8638 #8586
• ui5-upload-collection: update ui5-upload-collection Drag and Drop overlay color (#8616) (73f713e)

Code Refactoring

• ui5-list, ui5-tree, ui5-upload-collection: rename mode to selectionMode (#8657) (d53b3b2)
• ui5-list: renamed busy, busyDelay to loading, loadingDelay (#8686) (38e4df4), closes #8461 #7887
• ui5-progress-indicator: remove disabled property (#8683) (5e5c40a)
• ui5-tab, ui5-tab-separator: rename getTabInStripDomRef to getDomRefInStrip (#8653) (773237f)
• ui5-tabcontainer: remove fixed property (#8676) (98052e1), closes #8461
• ui5-upload-collection: remove Delete selection mode (#8607) (926ae75)

Features

• ui5-*: new focus handling for desktop and mobile (#8590) (b6a33e0)
• ui5-checkbox: update focus handling (#8553) (ce28296), closes #8320

BREAKING CHANGES

• ui5-list: The 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>

• ui5-progress-indicator: The 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 #8461, #7887

• ui5-tabcontainer: Property "fixed" is removed and there is no alternative provided. The TabContainer is no longer expandable/collapsible via use interaction. You can still show the TabContainer collapsed via the "collapsed" property.
• ui5-upload-collection: The 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 #8461

• ui5-list, ui5-tree, ui5-upload-collection: The 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 #8461, #7887

• ui5-tab, ui5-tab-separator: If previously you have used:

someTab.getTabInsStripDomRef();
someTabSeparator.getTabInsStripDomRef();

Now use:

someTab.getDomRefInStrip();
someTabSeparator.getDomRefInStrip();

Related to: #8461

• "Device#isIE" method has been removed and no longer available

Related to #8461

• Removed the 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"

• Removed the ICardHeader interface. If you previously used the interface

import type { ICardHeader } from "@ui5/webcomponents-base/dist/Card.js"

Use the CardHeader type instead:

import type CardHeader from "@ui5/webcomponents-base/dist/CardHeader.js"

• Removed the 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 #8461

• The 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 #8461

• The 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 #8461

• The 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 #8461

• Removed 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;
    }
}

• Remove JavaScript template option from @ui5/create-webcomponents-package
  Previously 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.
• The 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 #8461

• docs: deploy v2 preview
• Remove soccor icon. Use soccer instead.
• Remove add-polygone icon. Use add-polygon instead.
• The JSDoc plugin has been removed, and the generation of api.json has stopped. If you previously relied on the ui5-package/dist/api.json file, you can now use ui5-package/dist/custom-elements.json
• All Assets-static.js modules are removed. If you previously imported any Assets-static.js module from any package:

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: #8461

• The event 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: #8461

• The property 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: #8461

• JavaScript projects may not function properly with the tools package.
• The 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;
});

• The 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: #8461

• If you have previously used:

<ui5-tab id="nestedTab" slot="subTabs"></ui5-tab>

Now use:

<ui5-tab id="nestedTab" slot="items"></ui5-tab>

Relates to #8461

• If you have previously used:

<ui5-tabcontainer tabs-overflow-mode="StartAndEnd"></ui5-tabcontainer>

Now use:

<ui5-tabcontainer overflow-mode="StartAndEnd"></ui5-tabcontainer>

Relates to #8461

• If you previously imported TabContainerBackgroundDesign, use BackgroundDesign instead.

Relates to #8461

• The showOverflow property is removed. If previously you have used:

<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 #8461

• The 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 #8461

• The 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 #8461, #7887

• The 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 #8461, #7887

• The 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 #8461, #7887

• You can no longer import and implement the ITab interface. TabContainer is designed to work only with Tab and TabSeparator classes, so the interface was obsolete.