[UI5 Web Components 2.0] Changes suggestion list [Topic P] #7887

ilhan007 · 2023-11-21T12:28:23Z

Issue Description

The goal is to gather a list with breaking changes that you are willing to do to improve/simplify the components API.

list deprecated APIs within your components that should be removed with 2.0
list APIs that we would like to improve and change before releasing 2.0

There is already this issue #4460 with changes we already identified, so first take a look of it - it could be that some of your suggestions are already proposed.

dobrinyonkov · 2024-02-05T12:16:34Z

Internal Reference: BGSOFUIPIRIN-6407

IllustratedMessage

title property deprecate prior 2.0 and remove after 2.0 (slot is available)
subtitle property deprecate prior 2.0 and remove after 2.0 (slot is available)

Decision

slots title, subtitle remain

Changes suggested

remove titleLevel (as long we refactor the template and styles, so the title slot receives the responsive styling, because then users can use the ui5-title with level from outside)
add part="title" on the wrapper element (similar to subtitle) to allow complete customisation. (this is not a breaking change, but enhancement)

Progress Indicator

disabled property removal

Changes
=> remove disabled property

Select Option

disabled property removal

Changes
=> remove disabled property

SelectMenu

the component has been developed to allow adding custom options, but with the popover API, the standard options will allow custom content and the component becomes obsolete

Changes
=> remove the component and its associated compoennts.

Toolbar

Toolbar Popover API Redesign: (not sure here because items need to be displayed differently in both places, maybe a hybrid solution) The introduction of the popover API can replace abstract items concept for the Toolbar popover. This will enable a more flexible and dynamic approach to managing toolbar items.
ToolbarItem Class Structure: We are considering the replacement of the base class for ToolbarItem with an interface. This should be done if the popover API is implemented. Physical items can implement the new interface and fit toolbar API as supported components.

TODO [Team Pirin]
=> New design is evaluated that can affect the API decision, so deeper research needed - explore the design, follow up with SAP Design if needed to learn more.

TreeItem

A custom TreeItem component was developed that allows for custom content. The existing TreeItem capabilities can also be covered by it. (perhaps the content slot should be made default and sub nodes slot may need to be introduced)

Decision
=> remains as it is to avoid fighting properties - the slot vs the props

Flexible Column Layout

The hideArrows feature will become redundant and therefore removed following the introduction of drag-and-resize functionality.

Decision
=> remains as it is, as the drag and drop feature is unlikely to become available for 2.0. Remains candidate for later major version.

ShellBar

deprecation or rename of copilot, copilotDomRef, and showCoPilot properties. Also refactoring can increase customisability through slots. (Not sure about the customisation impacts and risks)

TODO [Team Pirin]

=> property to show/hide (as showCoPilot) or to get Joule's Dom ref (as copilotDomRef) may remain, but we need to check how to name it properly avoiding using "Joule" as concepts often changes. Explore the options to keep using co-pilot, if this will cause confusion or digital assistant.
=> the option to provide slot is the most flexible, the users should then provide toggle-button with "da" icon, which is not bad, but you have to maintain certain position and make sure it never overflow and again give the slot name, which we could not find a generic name for. Feel free to suggest solution in this direction as well.

CoPilot Animation removal - coPilot animation is no longer used and needed

Changes
=> remove CoPilot Animation feature

nnaydenow · 2024-02-13T13:34:14Z

Investigate how we can simplify ListItems' hierarchy

dobrinyonkov · 2024-02-13T13:56:20Z

With the modern themes, the List modes values seems to be just 3 now. Deprecate the redundant ones:

Decision:
=> options remain as it turns out SingleSelect and SingleSelectAuto have different behaviour.

Changes:
=> rename
SingleSelectBegin to SingleStart
SingleSelect to Single
MultiSelect to Multiple
SingleSelectEnd to SingleEnd

ilhan007 · 2024-03-01T10:46:22Z

Transferring from the central item

"Deprecate and remove the image property of the standard list item, since new slot avatar will be introduced.
#5594"

Changes:
=> remove property image
=> rename slot imageContent to image

ilhan007 · 2024-03-07T19:07:43Z

Extarnal feedback

ui5-breadcrumbs:

design: is used to differentiate between showing or hiding the current page. It would be safer to use a boolean attribute here that could be called hide-current-page. This would from my perspective be more consistent with other attributes.
=> remain as it is
separator-style: there is another attribute for the ui5-list called separator that accepts setting the separator style, maybe this could also be used here instead of having a similar attribute.

Changes:
=> rename separator-style to separators.

ui5-illustrated-message:

size: the ui5-illustrated-message component also offers a size attribute which is set with semantic values “Auto”, “Base”, “Spot”, “Dialog”, “Scene”, which for me could also be values for a mode or design attribute instead as the size aspect of this property is not directly clear.

Changes:
=> change size to design.

ui5-list

busy: how to handle the busy state with the components is very different. Only 3 components have a busy state, all others require the combination with the busy-indicator component. It would be good to have more consistency here.

Changes:
=> rename busy to loading
=> rename mode to selectionMode
=> ListMode : SingleSelect -> Single, MultiSelect -> Multiple
=> rename ListMode to ListSelectionMode

…#8605) Renames the `size` property of the `ui5-illustrated-message` to `design`. The semantic values `Auto`, `Base`, `Spot`, `Dialog`, `Scene` and size aspect of this property is not directly clear. BREAKING CHANGE: The `size` property of the `ui5--illustrated-message` is renamed to `design`. If you have previously used the `size` property: ```html <ui5-illustrated-message size="Dialog"> ``` Now use `design` instead: ```html <ui5-illustrated-message design="Dialog"> ``` Related to #8461, #7887

…rators` (#8600) Renames the `separator-style` property of `ui5-breadcrumbs` to `separators`. Also the `BreadcrumbsSeparatorStyle` enum is renamed to `BreadcrumbsSeparator`. BREAKING CHANGE: 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: ```html <ui5-breadcrumbs separator-style="Slash"> ``` Now use `separators` instead: ```html <ui5-breadcrumbs separators="Slash"> ``` Related to #8461, #7887

Removes the `disabled` property of the `ui5-option`, since UX and ACC standards suggest to not include any disabled items in the dropdown. BREAKING CHANGE: The `disabled` property of the `ui5-option` is removed. If you have previously used the `disabled` property: ```html <ui5-option disabled>Option</ui5-option> ``` it will no longer work for the component. Related to #8461, #7887

* refactor(framework): remove internet explorer related checks (#8494) Internet Explorer as is no longer supported. With this change, we're removing all Internet Explorer-related checks from the framework. BREAKING CHANGE: "Device#isIE" method has been removed and no longer available Related to #8461 * refactor(framework): remove the CSP module (#8496) Previously, we used <style> and <link> tags to style web components due to the lack of browser support for adoptedStyleSheets. However, as latest version of all relevant browsers now support "adoptedStyleSheets", we are removing all additional functionality that was implemented to compensate for the missing support and rely entirely on "adoptedStyleSheets". As a result, there is no need of additional handling to full-fill Content Security Policy (CSP) requirements, because adoptedStyleSheets are CSP compliant. BREAKING CHANGE: 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: ```ts 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" ``` Related to [#8461](#8461) * refactor(ui5-card): remove ICardHeader interface (#8497) Removes the `ICardHeader` interface as no other header types are currently supported or requested. BREAKING CHANGE: Removed the `ICardHeader` interface. If you previously used the interface ```ts import type { ICardHeader } from "@ui5/webcomponents-base/dist/Card.js" ``` Use the CardHeader type instead: ```ts import type CardHeader from "@ui5/webcomponents-base/dist/CardHeader.js" ``` Related to [#8461](#8461) * refactor(ui5-upload-collection): remove IUploadCollectionItem interface (#8504) Removes the `IUploadCollectionItem` interface as no other item types are currently supported or requested. BREAKING CHANGE: Removed the `IUploadCollectionItem` interface. If you previously used the interface: ```js import type { IUploadCollectionItem} from "@ui5/webcomponents-fiori/dist/UploadCollection.js" ``` Use the `UploadCollectionItem` type instead: ```js import type UploadCollectionItem from "@ui5/webcomponents-fiori/dist/UploadCollectionItem.js" ``` Related to #8461 * refactor(ui5-busy-indicator): rename BusyIndicatorSize values to S, M and L (#8509) Renames the values of BusyIndicatorSize from "Small", "Medium" and "Large" to "S", "M" and "L". BREAKING CHANGE: The `size` property now accepts different values. If you previously used it like: ```html <ui5-busy-indicator size="Small"></ui5-busy-indicator> ``` Now use the new values instead: ```html <ui5-busy-indicator size="S"></ui5-busy-indicator> ``` Related to #8461 * refactor(ui5-card-header): rename status to additionalText (#8507) Renames the `status` property to `additionalText` and its shadow part. BREAKING CHANGE: The `status` property and its shadow part have been renamed. If you previously used them: ```html <style> .cardHeader::part(status) { ... } </style> <ui5-card-header status="3 of 10"></ui5-popover> ``` Now use `additionalText` instead: ```html <style> .cardHeader::part(additional-text) { ... } </style> <ui5-card-header class="cardHeader" additional-text="3 of 10"></ui5-card-header> ``` Related to #8461 * refactor(ui5-carousel): rename pageIndicatorStyle to pageIndicatorType (#8511) Renames the property `pageIndicatorStyle` to `pageIndicatorType` and enumeration `PageIndicatorStyle` to `PageIndicatorType`. BREAKING CHANGE: The `pageIndicatorStyle` no longer exists. If you previously used it like: ```html <ui5-carousel page-indicator-style="Numeric"></ui5-carousel> ``` Now you should use `pageIndicatorType` instead: ```html <ui5-carousel page-indicator-type="Numeric"></ui5-carousel> ``` Related to #8461 * refactor(framework): remove render method (#8501) Removed the deprecated `UI5Element#render` method of the UI5Element class and replaced it with `UI5Element#renderer`. BREAKING CHANGE: Removed `UI5Element#render` method in favour of `UI5Element#renderer`. If you previously used "render" ```js class MyClass extends UI5Element { static get render() { return litRenderer; } } ``` start using "renderer" ```ts class MyClass extends UI5Element { static get renderer() { return litRenderer; } } ``` Related to [#8461](#8461) * refactor(tools): remove js option from generation templates (#8503) With the release of version 2.0, we strongly encourage component development to be done in TypeScript. Consequently, we are discontinuing the option to generate JavaScript projects and components, as the tooling will no longer support them by default. BREAKING CHANGE: 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. Related to [#8461](#8461) * chore: remove unused command (#8506) * refactor(ui5-popover): rename PopoverHorizontalAlign and PopoverPlacementType values (#8502) Renames the `Left` and `Right` values of `PopoverHorizontalAlign` and `PopoverPlacementType` to `Start` and `End`. BREAKING CHANGE: The `Left` and `Right` options option have been renamed. If you previously used them to set the placement or the alignment of the popover: ```html <ui5-popover horizontal-align="Left" placement-type="Left"></ui5-popover> ``` Now use `Start` or `End` instead: ```html <ui5-popover horizontal-align="Start" placement-type="Start"></ui5-popover> ``` Related to #8461 * docs: deploy v2 preview * refactor(icons): remove soccor icon (#8524) The icon `soccor` was introduced with a typo. With this update, we are removing the incorrect icon by replacing it with the icon with the correct name, `soccer`. Before: ```html <ui5-icon name="soccor"></ui5-icon ``` After: ```html <ui5-icon name="soccer"></ui5-icon ``` BREAKING CHANGE: Remove `soccor` icon. Use `soccer` instead. Related to #8461 * refactor(icons-business-suite): remove add-polygone icon (#8525) The icon `add-polygone` was introduced with a typo. With this update, we are removing the incorrect icon by replacing it with the icon with the correct name, `add-polygon`. Before: ```html <ui5-icon name="business-suite/add-polygone"></ui5-icon ``` After: ```html <ui5-icon name="business-suite/add-polygon"></ui5-icon ``` BREAKING CHANGE: Remove `add-polygone` icon. Use `add-polygon` instead. Related to #8461 * refactor(tools): remove jsdoc plugin (#8518) Previously, the custom JSDoc plugin was replaced with @custom-elements-manifest/analyzer for generating JSON descriptions of component metadata. With this replacement, the plugin has become redundant. BREAKING CHANGE: 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` Related to: #8461 * refactor: remove all Assets-static.js modules (#8526) Remove all Assets-static.js modules in favour of their dynamic counterparts - the Assets.js modules. BREAKING CHANGE: All Assets-static.js modules are removed. If you previously imported any Assets-static.js module from any package: ```ts import "@ui5/webcomponents/dist/Assets-static.js"; import "@ui5/webcomponents-icons/dist/Assets-static.js" ``` use the dynamic equivalent of it: ```ts import "@ui5/webcomponents/dist/Assets.js"; import "@ui5/webcomponents-icons/dist/Assets.js" ``` Related to: #8461 * refactor(ui5-calendar): rename `selected-dates-change` to `selection-change` and rename few event details (#8529) Renames the `selected-dates-change ` event name of the Calendar to `selection-change` and the names of two event details - `values` and `dates` to `selectedValues` and `selectedDateValues` respectively. BREAKING CHANGE: 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: ```ts 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: ```ts myCalendar.addEventListener("selection-change", () => { const values = event.detail.selectedValues; const dates = event.detail.selectedDateValues; }) ``` Related to: #8461 * docs: update keyboard keys abbreviations (#8528) * docs: update keyboard key abbreviation * chore: update * chore: update * chore: update * Update docusaurus.config.ts * docs: add reset button in playground (#8531) * Update index.js * chore: update chromedriver (#8532) * chore: update LocaleData.ts UI5 version 1.103.0 is out of support. Update to latest stable version 1.120.5. * feat(framework): support sr, mk, cnr locales (#8534) The following languages mk_MK, cnr_ME and sr_Cyrl_RS locales and languages are now available and supported by the framework and displayed by the relevant components. To do so, the PR updates the internal openui5 core dependency from 1.120.3 to 1.120.5 Fixes: #8163 * docs(ui5-segmented-button-item): add notes to inherited properties (#8527) Marking properties in documentation that have no effect over the control. * chore: update yarn.lock * refactor(ui5-color-picker): rename `color` to `value` (#8538) Renames the `color` property name of the ColorPicker to `value` and the names of two private properties. BREAKING CHANGE: The property `color` is renamed to `value`. If you previously used the change event of the ColorPicker as follows: ```html <ui5-color-picker color="red"></ui5-color-picker> ``` Now you have to use it like this: ```html <ui5-color-picker value="red"></ui5-color-picker> ``` Related to: #8461 * refactor(tools): enable TypeScript as default (#8521) With this update, TypeScript is now enabled by default for the 'tools' package, along with cleanup for the configuration options. BREAKING CHANGE: JavaScript projects may not function properly with the tools package. Related to: #8461 * refactor(ui5-color-palette): remove deprecated APIs (#8542) Removes the `openPopover` and `showAt` methods from the `ui5-color-palette-popover`. BREAKING CHANGE: The `openPopover` and `showAt` methods are removed in favor of `open` and `opener` properties. If you previously used the imperative API: ```js button.addEventListener("click", function(event) { colorPalettePopover.showAt(this); }); ``` Now the declarative API should be used instead: ```html <ui5-button id="opener">Open</ui5-button> <ui5-color-palette-popover opener="opener"> ``` ```js button.addEventListener("click", function(event) { colorPalettePopover.open = !colorPalettePopover.open; }); ``` Related to: #8461 * refactor(ui5-bar): move to `main` (#8548) Change the library of the `ui5-bar `component from `fiori` to `main`. BREAKING CHANGE: The `ui5-bar` component is now in `main` library. If you previously imported the `ui5-bar` from `fiori`: ```ts import "@ui5/webcomponents-fiori/dist/Bar.js; ``` Now, import the `ui5-bar` from `main`: ```ts import "@ui5/webcomponents/dist/Bar.js"; ``` Related to: #8461 * chore(ui5-bar): fix import in samples (#8555) * refactor(ui5-tab): rename `subTabs` slot to `items` (#8559) Renames 'subTabs' slot of ui5-tab to 'items'. BREAKING CHANGE: If you have previously used: ```html <ui5-tab id="nestedTab" slot="subTabs"></ui5-tab> ``` Now use: ```html <ui5-tab id="nestedTab" slot="items"></ui5-tab> ``` Relates to #8461 * refactor(ui5-tabcontainer): rename `tabs-overflow-mode` to `overflow-mode` (#8565) Renames tabs-overflow-mode to overflow-mode BREAKING CHANGE: If you have previously used: ```html <ui5-tabcontainer tabs-overflow-mode="StartAndEnd"></ui5-tabcontainer> ``` Now use: ```html <ui5-tabcontainer overflow-mode="StartAndEnd"></ui5-tabcontainer> ``` Relates to #8461 * refactor(ui5-tabcontainer): remove TabContainerBackgroundDesign enume… (#8570) Removes `TabContainerBackgroundDesign` enum in favour of `BackgroundDesign` enum. BREAKING CHANGE: If you previously imported `TabContainerBackgroundDesign`, use `BackgroundDesign` instead. Relates to #8461 * chore: enable tree tests (#8558) Co-authored-by: Nayden Naydenov <[email protected]> * chore(release): publish v1.24.0-rc.3 [ci skip] * refactor(ui5-tabcontainer): remove deprecated showOverflow property (#8568) Removes the deprecated showOverflow property. BREAKING CHANGE: The showOverflow property is removed. If previously you have used: ```html <ui5-tabcontainer show-overflow></ui5-tabcontainer> ``` now use the overflowButton slot: ```html <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 * refactor(ui5-popover): rename property placementType to placement (#8596) Renames the `placementType` property of `ui5-popover`. Also renames the `PopoverPlacementType` enum to `PopoverPlacement`. BREAKING CHANGE: The `placementType` property and the `PopoverPlacementType` enum have been renamed. If you have previously used the `placementType` property and the `PopoverPlacementType` ```html <ui5-popover placement-type="Bottom"></ui5-popover> ``` ```js import PopoverPlacementType from "@ui5/webcomponents/dist/types/PopoverPlacementType.js"; ``` Now use `placement` instead: ```html <ui5-placement="Bottom"></ui5-popover> ``` ```js import PopoverPlacementType from "@ui5/webcomponents/dist/types/PopoverPlacement.js"; ``` Related to #8461 * framework: enable popover API (#8192) * chore: integrate the popover API with OpenUI5 (#8606) * refactor(ui5-illustrated-message): rename `size` property to `design` (#8605) Renames the `size` property of the `ui5-illustrated-message` to `design`. The semantic values `Auto`, `Base`, `Spot`, `Dialog`, `Scene` and size aspect of this property is not directly clear. BREAKING CHANGE: The `size` property of the `ui5--illustrated-message` is renamed to `design`. If you have previously used the `size` property: ```html <ui5-illustrated-message size="Dialog"> ``` Now use `design` instead: ```html <ui5-illustrated-message design="Dialog"> ``` Related to #8461, #7887 * refactor(ui5-breadcrumbs): rename property `separator-style` to `separators` (#8600) Renames the `separator-style` property of `ui5-breadcrumbs` to `separators`. Also the `BreadcrumbsSeparatorStyle` enum is renamed to `BreadcrumbsSeparator`. BREAKING CHANGE: 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: ```html <ui5-breadcrumbs separator-style="Slash"> ``` Now use `separators` instead: ```html <ui5-breadcrumbs separators="Slash"> ``` Related to #8461, #7887 * refactor(ui5-option): remove disabled property (#8602) Removes the `disabled` property of the `ui5-option`, since UX and ACC standards suggest to not include any disabled items in the dropdown. BREAKING CHANGE: The `disabled` property of the `ui5-option` is removed. If you have previously used the `disabled` property: ```html <ui5-option disabled>Option</ui5-option> ``` it will no longer work for the component. Related to #8461, #7887 * refactor(ui5-tabcontainer): delete ITab interface (#8593) - Removes `ITab` interface. TabContainer already works only with Tab and TabSeparator, therefore `ITab` only adds extra complexity. - Replaces `isInline`, `forcedMixedMode`, `forcedPosinset`, `forcedSetsize`, `isTopLevelTab`, `getElementInStrip` with 2 new methods: `receiveStripInfo(info)` and `receiveOverflowInfo(info)`. This way it is clear that those properties are not expected to be set by the Tab or TabSeparator, but are provided by the TabContainer in specific point in time - Makes `getTabInStripDomRef` return type match `UI5Element#getDomRef` BREAKING CHANGE: 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.

…electionMode (#8657) Renames the `mode` property of `ui5-list`, `ui5-tree` and `ui5-upload-collection` to `selectionMode`. Also renames the `ListMode` enum to `ListSelectionMode` and its values as it follows: `SingleSelect` is renamed to `Single` `MultiSelect` is renamed to `Multiple` `SingleSelectBegin` is renamed to `SingleStart` `SingleSelectEnd` is renamed to `SingleEnd` `SingleSelectAuto` is renamed to `SingleAuto` BREAKING CHANGE: The `mode` property and the `ListMode` enum have been renamed. If you have previously used the `mode` property and the `ListMode` values: ```html <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: ```html <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

Related: SAP#8461 SAP#7887

Removes the `disabled` property of the `ui5-progress-indicator`. The Progress Indicator isn't an interactive element, therefore the disabled property make no sense. Also aria-disabled is deprecated on the `progressbar` role since ARIA 1.2 . BREAKING CHANGE: The `disabled` property of the `ui5-progress-indicator` is removed. If you have previously used the `disabled` property, it won't take effect: ```html <ui5-progress-indicator disabled value="60"></ui5-progress-indicator> ``` Related to #8461, #7887

…8686) Renames the `busy`, `busyDelay` property of the `ui5-list` to `loading` and `loadingDelay`. BREAKING CHANGE: The `busy` property of the `ui5-list` is renamed. If you have previously used the `busy`, `busyDelay` properties: ```html <ui5-list busy busy-delay="500"></ui5-list> ``` now you must use `loading` and `loadingDelay` properties: ```html <ui5-list loading loading-delay="500"></ui5-list> ``` Related: #8461 #7887

#8815) Removes the `accessibleRoleDescription` property of the `ui5-tree`, `ui5-list`, `ui5-li`, since it is not used Related to #8461, #7887

Removes the `titleLevel` property of the `ui5-illustrated-message`, since users can set the required title level on the title slot. Also, now the the slotted element has proper styles and responsiveness. BREAKING CHANGE: The `titleLevel` property of the `ui5-illustrated-message`is removed. If you have previously used the `titleLevel` property: ```html <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 ```html <ui5-illustrated-message> <ui5-title slot="title" level="H3">This is a slotted title</ui5-title> </ui5-illustrated-message> ``` Related to #8461, #7887

Changes the type of `accessibleRole` property for both `ui5-li` and `ui5-list`. BREAKING CHANGE: The `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: ```html <ui5-li accessible-role="menuitem"> List Item</ui5-li> <ui5-list accessible-role="tree"> List </ui5-list> ``` Now use: ```html <ui5-li accessible-role="MenuItem"> List Item</ui5-li> <ui5-list accessible-role="Tree"> List </ui5-list> ``` Related to #8461, #7887

The private `title` property, previously available in the `ui5-option` component, has been removed. It is replaced by a new property named `tooltip`, used for defining the text of the tooltip that would be displayed for the `ui5-option` component. Now, you can set the tooltip of the `ui5-option` as it follows: ```html <ui5-select id="selectTooltip"> <ui5-option tooltip="Cozy">Cozy</ui5-option> <ui5-option tooltip="Compact">Compact</ui5-option> <ui5-option selected tooltip="Condensed">Condensed</ui5-option> </ui5-select> ``` Related to: #8461, #7887

The properties `ariaHidden` , `interactive` and `accessibleRole` , previously available in the `ui5-icon` component, have been removed. They are replaced by a new property named `mode`. BREAKING CHANGE: The properties `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: ```html <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: #8461, #7887

The drag&drop feature for both `ui5-tree` and `ui5-list` components is now public. Updated documentation and new samples have been added to assist with implementation. Related to #8461, #7887

Removes the ui5-select-menu and ui5-select-menu-option components. BREAKING CHANGE: 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. Related to #8461, #7887

Тhe `showCoPilot` property and the `co-pilot-click` event of the `ui5-shellbar` have been removed. In their place we now have a public slot called `assistant`. We recommend using `ui5-toggle-button` with `sap-icon://da` and `sap-icon://da-2` icons (see the examples below). BREAKING CHANGE: 1. The `showCoPilot` property of the `ui5-shellbar` is removed. If you have previously used the `showCoPilot` property: ```html <ui5-shellbar show-co-pilot></ui5-shellbar> ``` it will no longer work for the component. 2. The `CoPilotAnimation` feature of the `ui5-shellbar` is removed. If you have previously used the `CoPilotAnimation` feature: ```js import CoPilotAnimation from "@ui5/webcomponents-fiori/dist/features/CoPilotAnimation.js" ``` it will no longer work for the component. 3. The `copilotDomRef` getter of the `ui5-shellbar` is removed. If you have previously used the `copilotDomRef` public getter: ```js shellbar.copilotDomRef ``` it will no longer work for the component. 4. The `co-pilot-click` event of the `ui5-shellbar` is removed. If you have previously used the `co-pilot-click` public event: ```js 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: ```html <ui5-shellbar> <ui5-toggle-button id="assistant" icon="sap-icon://da" slot="assistant"></ui5-toggle-button> </ui5-shellbar> ``` JavaScript: ```js assistant.addEventListener("click", function (event) { const toggleButton = event.target; toggleButton.icon = toggleButton.pressed ? "sap-icon://da-2" : "sap-icon://da"; }); ``` Related to #8461, #7887

The text of `ui5-checkbox` now wraps by default. BREAKING CHANGE: `wrapping-type` property default value has changed from `None` to `Normal`. Before: ```html <ui5-checkbox text=Some very very very very long text"></ui5-checkbox> ``` Now: ```html <ui5-checkbox text=Some very very very very long text"></ui5-checkbox>  ``` Related to #8461, #7887

The selected property of the ui5-li has been redefined within the class where it is actively utilized. Despite this change, it remains accessible to all components that rely on it. Related to #8461, #7887 --------- Co-authored-by: Peter Skelin <[email protected]> Co-authored-by: Dobrin Dimchev <[email protected]>

#9302) As follow up of #8605 the enumeration of the design property is renamed to IllustrationMessageDesign Additionally, since tags are adjusted to 2.0.0 BREAKING CHANGE: The enum IllustrationMessageSize is renamed to IllustrationMessageDesign. If you have previously imported the enum: import IllustrationMessageSize from "@ui5/webcomponents-base/dist/types/IllustrationMessageSize.js"; Now import IllustrationMessageDesign instead: import IllustrationMessageDesign from "@ui5/webcomponents-base/dist/types/IllustrationMessageDesign.js"; Related to #8461, #7887

…#9089) Removes the `image` property of the `ui5-li` and renames the `imageContent` slot to `image`. BREAKING CHANGE: The `image` property of the `ui5-li` is removed and the `imageContent` slot is renamed to `image`. If you have previously used the `image` property: ```html <ui5-li image="./img/HT-1022.jpg">Standard List Item</ui5-li> ``` or the `imageContent` slot: ```html <ui5-li> Avatar inside imageContent slot <ui5-avatar slot="imageContent" shape="Square" initials="ABC" color-scheme="Accent2"></ui5-avatar> </ui5-li> ``` Now use `image` slot instead: ```html <ui5-li> Avatar inside image slot <ui5-avatar slot="image" shape="Square" initials="ABC" color-scheme="Accent2"></ui5-avatar> </ui5-li> ``` Related to #8461, #7887, #9200

ilhan007 added TOPIC P API labels Nov 21, 2023

ilhan007 assigned jdichev and dobrinyonkov Nov 21, 2023

ilhan007 added the 2.0 label Jan 26, 2024

s-todorova mentioned this issue Feb 22, 2024

[UI5 Web Components 2.0] Changes suggestion list [Topic RD] #7889

Closed

yanaminkova mentioned this issue Apr 3, 2024

refactor(ui5-illustrated-message): remove titleLevel property #8614

Closed

This was referenced Apr 3, 2024

refactor(ui5-illustrated-message): remove titleLevel property #8617

Closed

refactor(ui5-illustrated-message): remove titleLevel property #8618

Closed

yanaminkova mentioned this issue Apr 5, 2024

refactor(ui5-list, ui5-tree, ui5-upload-collection): rename mode to selectionMode #8657

Merged

yanaminkova mentioned this issue Apr 8, 2024

refactor(ui5-progress-indicator): remove disabled property #8683

Merged

plamenivanov91 added a commit to plamenivanov91/ui5-webcomponents that referenced this issue Apr 8, 2024

refactor(ui5-list): renamed busy property

063f6dd

Related: SAP#8461 SAP#7887

plamenivanov91 mentioned this issue Apr 8, 2024

refactor(ui5-list): renamed busy, busyDelay to loading, loadingDelay #8686

Merged

yanaminkova mentioned this issue Apr 8, 2024

refactor(ui5-li): remove image property and rename imageContent slot #8690

Closed

yanaminkova mentioned this issue Apr 24, 2024

refactor(ui5-icon): add mode property #8834

Merged

yanaminkova added a commit that referenced this issue Apr 24, 2024

refactor(ui5-tree, ui5-list, ui5-li): removes accessibleRoleDescripti… (

7124157

#8815) Removes the `accessibleRoleDescription` property of the `ui5-tree`, `ui5-list`, `ui5-li`, since it is not used Related to #8461, #7887

dobrinyonkov mentioned this issue May 7, 2024

refactor(ui5-option): make options physical elements #8903

Merged

This was referenced May 7, 2024

feat(ui5-list,ui5-tree): make drag&drop feature public #8904

Merged

docs(ui5-icon): update IconMode documentation #8906

Merged

plamenivanov91 mentioned this issue May 14, 2024

refactor(ui5-shellbar): introducing assistant slot #8963

Merged

This was referenced May 28, 2024

refactor(ui5-li): replace the usage of image property with image slot #9075

Closed

refactor(ui5-li): replace the usage of image property with image slot #9089

Merged

This was referenced Jun 10, 2024

refactor(ui5-checkbox): wrap text by default #9165

Merged

DRAFT: refactor(ui5-li): wrap by default #9178

Closed

yanaminkova mentioned this issue Jun 19, 2024

refactor(ui5-li): selected property changed to private #9246

Merged

petyabegovska added this to Planning - Topic P Jun 21, 2024

petyabegovska moved this to In Progress in Planning - Topic P Jun 21, 2024

dobrinyonkov mentioned this issue Jun 26, 2024

refactor(ui5-illustrated-message): rename IllustrationMessageSize enum #9302

Merged

dobrinyonkov closed this as completed Oct 16, 2024

github-project-automation bot moved this from In Progress to Completed in Planning - Topic P Oct 16, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[UI5 Web Components 2.0] Changes suggestion list [Topic P] #7887

[UI5 Web Components 2.0] Changes suggestion list [Topic P] #7887

ilhan007 commented Nov 21, 2023

dobrinyonkov commented Feb 5, 2024 •

edited by ilhan007

Loading

nnaydenow commented Feb 13, 2024

dobrinyonkov commented Feb 13, 2024 •

edited by ilhan007

Loading

ilhan007 commented Mar 1, 2024 •

edited

Loading

ilhan007 commented Mar 7, 2024 •

edited

Loading

[UI5 Web Components 2.0] Changes suggestion list [Topic P] #7887

[UI5 Web Components 2.0] Changes suggestion list [Topic P] #7887

Comments

ilhan007 commented Nov 21, 2023

Issue Description

dobrinyonkov commented Feb 5, 2024 • edited by ilhan007 Loading

IllustratedMessage

Progress Indicator

Select Option

SelectMenu

Toolbar

TreeItem

Flexible Column Layout

ShellBar

nnaydenow commented Feb 13, 2024

dobrinyonkov commented Feb 13, 2024 • edited by ilhan007 Loading

ilhan007 commented Mar 1, 2024 • edited Loading

ilhan007 commented Mar 7, 2024 • edited Loading

dobrinyonkov commented Feb 5, 2024 •

edited by ilhan007

Loading

dobrinyonkov commented Feb 13, 2024 •

edited by ilhan007

Loading

ilhan007 commented Mar 1, 2024 •

edited

Loading

ilhan007 commented Mar 7, 2024 •

edited

Loading