@ui5/webcomponents-compat

UI5 Web Components - Compatibility

Provides Table web component for compatibility (previously part of the "@ui5/webcomponents" package), while brand new Table web component is being developed and will replace it in the "@ui5/webcomponents" package.

Note: The package is available since 2.0 and will be available until the next major release (3.0) when it will be removed as the Table "@ui5/webcomponents" will finally replace it.

Provided components

Web Component	Tag name	Module import
Table	ui5-table	import "@ui5/webcomponents-compat/dist/Table.js";
Table Column	ui5-table-column	import "@ui5/webcomponents-compat/dist/TableColumn.js";
Table Row	ui5-table-row	import "@ui5/webcomponents-compat/dist/TableRow.js";
Table Group Row	ui5-table-group-row	import "@ui5/webcomponents-compat/dist/TableGroupRow.js";
Table Cell	ui5-table-cell	import "@ui5/webcomponents-compat/dist/TableCell.js";

Provided assets

Assets	Module	Notes
i18n, themes	@ui5/webcomponents-compat/dist/Assets.js	Theming parameters and translations for the components

Resources

• UI5 Web Components - README.md
• UI5 Web Components - Playground and API Reference

Support

We welcome all comments, suggestions, questions, and bug reports. Please follow our Support Guidelines on how to report an issue, or chat with us in the #webcomponents channel of the OpenUI5 Community Slack.

Contribute

Please check our Contribution Guidelines.

License

Copyright (c) 2019 SAP SE or an SAP affiliate company. All rights reserved. This file is licensed under the Apache Software License, Version 2.0 except as noted otherwise in the LICENSE file.

Changelog

2.0.0-rc.6 (2024-06-17)

Bug Fixes

• framework: set dataTransfer.effectAllowed only for UI5 elements (#9136) (28f6a2d)
• ui5-barcode-scanner-dialog: properly fire 'close' event (#9193) (db099f1), closes #9177
• ui5-busy-indicator: add block layer (#9208) (ba4ddb3), closes #9079
• ui5-button: fix tab chaining in lists (#9148) (9fdf617)
• ui5-carousel: selected state is added to item (#9184) (ced0f35)
• ui5-date-picker: adjust unstable tests (#9223) (3b049c8), closes #9033
• ui5-date-picker: provide accessible name to the popover (#8693) (26dee35), closes #8598
• ui5-dialog: fix focusing when dialog is open from OpenUI5 dialog (#9183) (d067e13)
• ui5-file-uploader: apply focus properly from inside of a popover (#9162) (2283e9e), closes #9090
• ui5-li-notification: enhance accessibility (#9192) (cc34cea), closes #9161
• ui5-list-item: move styles back from shadow DOM element to :host (#9155) (68cdd20)
• ui5-list: adjust failing test (#9191) (55e477c), closes #9173
• ui5-multi-combobox: correct lint error (#9157) (55cd3aa)
• ui5-notification-list: change host to display:block (#9139) (efb4791)
• ui5-segmented-button-item: add padding to icon when item is not in icon-only mode (#9180) (a3fd241), closes #9172
• ui5-shellbar: add tooltip for shellbar items (#9143) (c39c18a)
• ui5-side-navigation: group name is announced one time by screen … (#9207) (4f18dfd)
• ui5-special-date: respect format-pattern (#9086) (105c311)
• ui5-step-input: check for inner input before using value (#9212) (1b9fb61)
• ui5-tree-item: ensure correct cursor style (#9152) (d196583), closes #9146

Code Refactoring

• ui5-checkbox: wrap text by default (#9165) (ba1c583)
• ui5-li, ui5-li-custom: rename classes (#9158) (8f5b679)
• ui5-side-navigation-item: remove wholeItemToggleable property (#9164) (37b2181), closes #9057
• ui5-tag: wrap text by default (#9126) (96704b8)

Features

• ui5-ai-prompt-input: initial (experimental) implementation (#9078) (9dcdfdb)
• ui5-grid: implementing new grid component (#8362) (04d291d)
• ui5-link: introduce icon and endIcon properties (#9036) (06318cb)
• ui5-toolbar: design property added (#9147) (dc3dfe0)

BREAKING CHANGES

• ui5-checkbox: 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

• ui5-side-navigation-item: the 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.
• ui5-tag: 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