@ui5/webcomponents-theming

UI5 Web Components - Theming

Provides common theming assets, used by other UI5 Web Components packages, such as main and fiori.

This package is intended for UI5 Web Component development and currently provides no app development related public APIs.

Provided assets

The assets, provided by this package, are additional themes:

import "@ui5/webcomponents-theming/dist/Assets.js";

Note: These assets are already imported by the UI5 Web Components packages that need them.

Resources

• UI5 Web Components - README.md
• UI5 Web Components - Home Page
• 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 (2024-07-03)

Bug Fixes

• dynamic-page: some remarks fixed (#9341) (eb99114)
• fix DateRangePicker test (7f7f663)
• Popup: correct "open" event (#9298) (e84c2e5)
• template result comparison (#9279) (3a02e3e)
• ui5-calendar: add icon dependency (#9289) (165d7bc)
• ui5-calendar: year button accessibility (#9255) (fc18c6d), closes #9107
• ui5-calendar: year button accessibility (#9255) (0b915d6), closes #9107
• ui5-checkbox: adjust focus outline in wrapped mode (#9335) (13f87f5), closes #9254
• ui5-color-palette-popover: enable navigation over the swatches (#9336) (0660ae5)
• ui5-daterange-picker: adjust selected range accessibility semantics (#9251) (88b3ba7), closes #9241
• ui5-link: remove the space between end-icon and text in long links (#9325) (b559431)
• ui5-list: improved items initial rendering (#9283) (2623882), closes #9266
• ui5-message-strip: Remove icon when design changes to a color set (#9229) (4f110d2), closes #9181
• ui5-multi-combobox: collapse the tokenizer on mobile devices picker close (#9291) (74e3c50), closes #9176
• ui5-multi-combobox: collapse tokenizer on n-more collapse (#9367) (1ad4b42), closes #8493
• ui5-rating-indicator: fix test page - remove duplicates (#9364) (d98fc5c)
• ui5-rating-indicator: make rating indicator ACC WCAG 2.2 compliant (#9222) (6503675)
• ui5-segmented-button-item: prevent focus of disabled items (#9239) (ca0509a), closes #9236
• ui5-tab-container: change display (#9274) (f2d94e9), closes #9248
• ui5-tab-container: enhance documentation page (#9271) (a7f99e6), closes #9079 #9248
• ui5-table: adjust unstable loading test (#9267) (3c483a1)
• ui5-table: lint issue is fixed (#9294) (71ea07c)
• ui5-table: remove circular dependency from table and row (#9261) (9932adf)
• ui5-tag: fix styling issues (#9305) (24dd42b)
• UI5Element: component invalidated when children change slots (#9104) (a882721)

Code Refactoring

• rename ListSeparators enum to ListSeparator (#9308) (26bb513)
• ui5-combobox, ui5-multi-combobox: prepare for physical list items (#9307) (3e66cc6), closes #8461
• ui5-combobox, ui5-multi-combobox: prepare for physical list items (#9307) (67c7597), closes #8461
• ui5-illustrated-message: rename IllustrationMessageSize enum (#9302) (6fe2a02), closes #8605 #8461 #7887
• ui5-input: suggestions refactoring (#9092) (36c9c8f), closes #8461 #7890
• ui5-li: replace the usage of image property with image slot (#9089) (391ffaa)
• ui5-view-settings-dialog: change opening api to open property (#9249) (52106cc)

Features

• add property initializers (#8846) (eef0cc9)
• ui5-ai-button: initial implementation (b39548f)
• ui5-flexible-column-layout: enable resize via separators drag-and-drop (#9160) (9b54af4)
• ui5-menu-separator: add new component (#8871) (f7fea29), closes #8461
• ui5-table: add range selection to selection feature (#9205) (55d99d2)
• ui5-table: navigated property for rows (#9292) (6a51172)
• ui5-table: table loading indicator (#9214) (fabc911)
• UI5Element: better support for kebab-case slots (#9106) (e1dd34c)

Reverts

• Revert "WIP: create announcing-v2.mdx" (#9350) (95b90e4), closes #9350 #9346

BREAKING CHANGES

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

<ui5-li image="./img/HT-1022.jpg">Standard List Item</ui5-li>

or the imageContent slot:

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

<ui5-li> Avatar inside image slot
	<ui5-avatar slot="image" shape="Square" initials="ABC" color-scheme="Accent2"></ui5-avatar>
</ui5-li>

Related to https://github.com/SAP/ui5-webcomponents/issues/8461, https://github.com/SAP/ui5-webcomponents/issues/7887, https://github.com/SAP/ui5-webcomponents/issues/9200

• ui5-combobox, ui5-multi-combobox: The ui5-cb-item-group & ui5-mcb-item-group text property is renamed to header-text. If you previously used the text property:

<ui5-cb-item-group text="A"> <ui5-cb-item text="Algeria"></ui5-cb-item> </ui5-cb-item-group> <ui5-mcb-item-group text="A"> <ui5-mcb-item text="Afghanistan"></ui5-mcb-item> </ui5-mcb-item-group> Now you must rename it to header-text: <ui5-cb-item-group header-text="A"> <ui5-cb-item text="Algeria"></ui5-cb-item> </ui5-cb-item-group> <ui5-mcb-item-group header-text="A"> <ui5-mcb-item text="Afghanistan"></ui5-mcb-item> </ui5-mcb-item-group> * **ui5-combobox, ui5-multi-combobox:** The ui5-cb-item-group & ui5-mcb-item-group text property is renamed to header-text. If you previously used the text property: <ui5-cb-item-group text="A"> <ui5-cb-item text="Algeria"></ui5-cb-item> </ui5-cb-item-group> <ui5-mcb-item-group text="A"> <ui5-mcb-item text="Afghanistan"></ui5-mcb-item> </ui5-mcb-item-group> Now you must rename it to header-text: <ui5-cb-item-group header-text="A"> <ui5-cb-item text="Algeria"></ui5-cb-item> </ui5-cb-item-group> <ui5-mcb-item-group header-text="A"> <ui5-mcb-item text="Afghanistan"></ui5-mcb-item> </ui5-mcb-item-group> * The `ListSeparators` (plural form) enum has been renamed to `ListSeparator` (singular form). If you previously imported the `ListSeparators`: ```ts import ListSeparators from "@ui5/webcomponents/dist/types/ListSeparators.js"; import type ListSeparators from "@ui5/webcomponents/dist/types/ListSeparators.js"; ```

Now, you must import the ListSeparator enumeration as follows:

import ListSeparator from "@ui5/webcomponents/dist/types/ListSeparator.js";
import type ListSeparator from "@ui5/webcomponents/dist/types/ListSeparator.js";

Related to: https://github.com/SAP/ui5-webcomponents/issues/8461

• ui5-illustrated-message: 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";

• ui5-input: remove type, description, icon, iconEnd, image from ui5-suggestion-item and introduce ui5-suggestion-item-custom

ui5-suggestion-item:

• type property is removed, use ui5-suggestion-item-custom instead.
• description property is removed, use ui5-suggestion-item-custom instead.
• icon property is removed, use ui5-suggestion-item-custom instead.
• iconEnd property is removed, use ui5-suggestion-item-custom instead.
• image property is removed, use ui5-suggestion-item-custom instead.

ui5-suggestion-group-item:

• renamed to ui5-suggestion-item-group
• text is removed, use headerText instead

ui5-suggestion-item-custom:

• custom suggestion item with open content similar to ui5-li-custom
• to be used for custom scenarios
• to highlight custom items use @ui5/webcomponents-base/dist/util/generateHighlightedMarkup.js

All suggestion items are now physical items and can be overstyled. Grouping now works with via nesting: e.g.

<ui5-input show-suggestions>
  <ui5-suggestion-item-group header-text="Group 1">
    <ui5-suggestion-item text="Group Item 1"></ui5-suggestion-item>
  </ui5-suggestion-item-group>
</ui5-input>

• ui5-view-settings-dialog: Removed show and close methods.

Before, the ui5-view-settings-dialog could be opened and closed by calling show() and close():

const viewSettingsDialog = document.getElementById("exampleID");
viewSettingsDialog.show();
viewSettingsDialog.close();

Now, the dialog is opened and closed by setting the open property to true or false:

const viewSettingsDialog = document.getElementById("exampleID");
viewSettingsDialog.open = true;
viewSettingsDialog.open = false;

fixes: https://github.com/SAP/ui5-webcomponents/issues/9240

• @property decorator must be adapted according to new type parameter
• ui5-menu-separator: startsSection property removed from MenuItems

Before:

<ui5-menu> <ui5-menu-item text="Item A"></ui5-menu-item> <ui5-menu-item text="Item B" starts-section></ui5-menu-item> </ui5-menu>

Now:

<ui5-menu> <ui5-menu-item text="Item A"></ui5-menu-item> <ui5-menu-separator></ui5-menu-separator> <ui5-menu-item text="Item B"></ui5-menu-item> </ui5-menu>