@ui5/webcomponents-base - npm Package Versions

2.0.1 (2024-07-05)

Bug Fixes

• ui5-menu: restore focus to the opener (#9041) (0ada944), closes #9317
• ui5-notification-list: fixed show more test (#9400) (c19c5e3)

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>

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

2.0.0-rc.5 (2024-06-06)

Bug Fixes

• ui5-button: adjust screen reader announcement order (#8997) (2d9a16b)
• ui5-calendar: adjust accessibility semantics (#9102) (06891a1), closes #9068 #9069
• ui5-combobox: fix grouping sample (#9085) (2c160d3)
• ui5-date: remove circular dependency (#9137) (9c8d12e)
• ui5-input, ui5-combobox, ui5-multi-combobox: prevent native input autocomplete (#9130) (5d8dbbd)
• ui5-notification-list: improved accessibility (#9070) (5e62d4a)
• ui5-option-custom: show focus outline (#9101) (bf8366e)
• ui5-popup: initialFocus won't work if 'autofocus' is set (#8956) (2c9f775)
• ui5-popup: remove popup from the tab chain (#8955) (aedcdb9), closes #9094
• ui5-shellbar: improved samples accessibility (#8847) (7563e7d), closes #8821

Code Refactoring

• ui5-link: wrap text by default (#9006) (1924b54)
• ui5-radio-button: wrap text by default (#9117) (b8d7bac)

Features

• ui5-menu-item: add endContent slot (dc3cfde), closes #6350
• ui5-select: introduced 'popover' part (#9120) (3c03e17), closes #4503
• ui5-time-picker: introduce open and close events (#9093) (bf2d0aa)

BREAKING CHANGES

• ui5-radio-button: wrapping-type property default value has changed from None to Normal. Before:

<ui5-radio-button text="Option A with long long text"></ui5-radio-button>
<!-- would truncate the text if there is not enough space -->

Now:

<ui5-radio-button text="Option A with long long text"></ui5-radio-button>
<!-- would let the text wrap if there is not enough space -->

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

• ui5-link: wrapping-type property default value has changed from None to Normal. Before:

<ui5-link>some very very very long link</ui5-link> <!-- would truncate the text if there is not enough space -->

Now:

<ui5-link>some very very very long link</ui5-link> <!-- would let the text wrap if there is not enough space -->