@ui5/webcomponents-icons-business-suite

UI5 Web Components - SAP Business Suite Icons

Provides assets for the rich business-suite icon collection.

Icon asset	Module import
All icons (~73KB zipped)	import "@ui5/webcomponents-icons-business-suite/dist/AllIcons.js";
1x2 grid layout icon	import "@ui5/webcomponents-icons-business-suite/dist/1x2-grid-layout.js";
2x1 grid layout icon	import "@ui5/webcomponents-icons-business-suite/dist/2x1-grid-layout.js";
...	...
Year icon	import "@ui5/webcomponents-icons-business-suite/dist/year.js";

Note: The @ui5/webcomponents-icons-business-suite package does not provide any web components per se, but rather icon assets, usable by other web components such as ui5-icon. You could import all icons, but it's recommended to import just the ones that your app will actually use.

Usage

Since this is a non-default icon collection, all names have to be prefixed with the collection name and a / separator when used by web components.

Example usage with <ui5-icon> web component:

<ui5-icon name="business-suite/1x2-grid-layout"></ui5-icon>

The package provides two versions of each icon (SAP Business Suite Icons v1 and SAP Business Suite Icons v2). If you don't specify the versioned collection name, like in the example above:

<ui5-icon name="business-suite/1x2-grid-layout"></ui5-icon>

the framework will detect the current theme and render the corresponding icon - from SAP Icons Business suite V2 (collection name business-suite-v2) for SAP Horizon theme family (sap_horizon, sap_horizon_dark, etc.), and from SAP Icons Business suite V1 (collection name business-suite-v1) for all the rest (sap_fiori_3, sap_fiori_3_dark, etc.).

Collections business-suite-v1 and business-suite-v2

In case you want to always display the SAP Icons Business suite V1 icons in all themes, you can set it explicitly via the business-suite-v1 collection name:

<ui5-icon name="business-suite-v1/answered"></ui5-icon>

The same applies if you want to always display the SAP Icons Business suite V2 icons. You can set it explicitly via the business-suite-v2 collection name:

<ui5-icon name="business-suite-v2/answered"></ui5-icon>

For a full list of the icons in the business-suite collection, click here.

Resources

• UI5 Web Components - README.md
• UI5 Web Components - Home Page
• UI5 Web Components - Using Icons

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>