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