Skip to content

feat: update to UI5 Web Components 2.10.0 #7308

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 17 commits into from
May 8, 2025
Merged

feat: update to UI5 Web Components 2.10.0 #7308

Show file tree
Hide file tree
Changes from 15 commits
Commits
Show all changes
17 commits
Select commit Hold shift + click to select a range
e4baa19
update deps
Lukas742 May 7, 2025
c7b619c
run "main" wrapper script
Lukas742 May 7, 2025
73637a6
update `ListItemStandard` implementations
Lukas742 May 7, 2025
b0261f6
version-info
Lukas742 May 7, 2025
62b0ad5
docs(Shellbar): add `ShellBarSearch` subcomponent
Lukas742 May 7, 2025
01b0e67
[ci chromatic]
Lukas742 May 7, 2025
e1b75de
MessageViewsDialog: replace removed `maxWidth`
Lukas742 May 7, 2025
6a920a6
[ci chromatic]
Lukas742 May 7, 2025
303f543
Update index.tsx
Lukas742 May 7, 2025
4c97ad1
cypress-commands: fix `clickUi5ListItemByText`
Lukas742 May 7, 2025
b2bf2f2
Update commands.ts
Lukas742 May 7, 2025
4db27c3
AnalyticalTable: fix tests
Lukas742 May 7, 2025
8f2ffe8
SelectDialog: fix test
Lukas742 May 7, 2025
9b63b1c
VariantManagement: fix tests
Lukas742 May 8, 2025
640362f
Revert "cypress-commands: fix `clickUi5ListItemByText`"
Lukas742 May 8, 2025
02aad87
enable `ShellBarSearch` root import
Lukas742 May 8, 2025
7ea0c9e
cleanup
Lukas742 May 8, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
651 changes: 584 additions & 67 deletions .storybook/custom-element-manifests/fiori.json
View file
Open in desktop

Large diffs are not rendered by default.

399 changes: 346 additions & 53 deletions .storybook/custom-element-manifests/main.json
View file
Open in desktop

Large diffs are not rendered by default.

3 changes: 2 additions & 1 deletion config/version-info.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,5 +51,6 @@
"2.6.0": "2.6.2",
"2.7.0": "2.7.0",
"2.8.0": "2.8.0",
"2.9.0": "2.9.0"
"2.9.0": "2.9.0",
"2.10.0": "2.10.0"
}
12 changes: 3 additions & 9 deletions docs/knowledge-base/ChangeEvents.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,15 +46,9 @@ const onSelectionChange = (event) => {
};

<List mode={ListSelectionMode.MultiSelect} onSelectionChange={onSelectionChange}>
<ListItemStandard additionalText="3" data-custom="custom value of list item 1">
List Item 1
</ListItemStandard>
<ListItemStandard additionalText="2" data-custom="custom value of list item 2">
List Item 2
</ListItemStandard>
<ListItemStandard additionalText="1" data-custom="custom value of list item 3">
List Item 3
</ListItemStandard>
<ListItemStandard additionalText="3" data-custom="custom value of list item 1" text="List Item 1" />
<ListItemStandard additionalText="2" data-custom="custom value of list item 2" text="List Item 2" />
<ListItemStandard additionalText="1" data-custom="custom value of list item 3" text="List Item 3" />
</List>;
```

Expand Down
6 changes: 3 additions & 3 deletions docs/knowledge-base/Styling.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -163,9 +163,9 @@ function MyComponent() {
className="card"
>
<List>
<ListItemStandard description="Software Architect">Richard Wilson</ListItemStandard>
<ListItemStandard description="Visual Designer">Elena Petrova</ListItemStandard>
<ListItemStandard description="Quality Specialist">John Miller</ListItemStandard>
<ListItemStandard description="Software Architect" text="Richard Wilson" />
<ListItemStandard description="Visual Designer" text="Elena Petrova" />
<ListItemStandard description="Quality Specialist" text="John Miller" />
</List>
</Card>
);
Expand Down
12 changes: 6 additions & 6 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,11 +43,11 @@
"@storybook/react": "8.6.12",
"@storybook/react-vite": "8.6.12",
"@storybook/theming": "8.6.12",
"@ui5/webcomponents": "2.9.0",
"@ui5/webcomponents-ai": "2.9.0",
"@ui5/webcomponents-compat": "2.9.0",
"@ui5/webcomponents-fiori": "2.9.0",
"@ui5/webcomponents-icons": "2.9.0",
"@ui5/webcomponents": "2.10.0",
"@ui5/webcomponents-ai": "2.10.0",
"@ui5/webcomponents-compat": "2.10.0",
"@ui5/webcomponents-fiori": "2.10.0",
"@ui5/webcomponents-icons": "2.10.0",
"react": "^19.0.0",
"react-dom": "^19.0.0",
"remark-gfm": "^4.0.0",
Expand All @@ -69,7 +69,7 @@
"@types/node": "^22.0.0",
"@types/react": "^19.0.1",
"@types/react-dom": "^19.0.1",
"@ui5/webcomponents-tools": "2.9.0",
"@ui5/webcomponents-tools": "2.10.0",
"@vitejs/plugin-react": "^4.2.0",
"chromatic": "^11.0.0",
"cssnano": "^7.0.0",
Expand Down
2 changes: 1 addition & 1 deletion packages/ai/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@
"@ui5/webcomponents-react-base": "workspace:~"
},
"peerDependencies": {
"@ui5/webcomponents-ai": "~2.9.0",
"@ui5/webcomponents-ai": "~2.10.0",
"react": "^18 || ^19"
},
"publishConfig": {
Expand Down
2 changes: 1 addition & 1 deletion packages/base/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@
},
"peerDependencies": {
"@types/react": "*",
"@ui5/webcomponents-base": "~2.9.0",
"@ui5/webcomponents-base": "~2.10.0",
"react": "^18 || ^19"
},
"peerDependenciesMeta": {
Expand Down
4 changes: 2 additions & 2 deletions packages/charts/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,8 +39,8 @@
"recharts": "2.15.3"
},
"peerDependencies": {
"@ui5/webcomponents-react": "~2.9.0",
"@ui5/webcomponents-react-base": "~2.9.0",
"@ui5/webcomponents-react": "~2.10.0",
"@ui5/webcomponents-react-base": "~2.10.0",
"react": "^18 || ^19"
},
"publishConfig": {
Expand Down
4 changes: 2 additions & 2 deletions packages/compat/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,8 +41,8 @@
"peerDependencies": {
"@types/react": "*",
"@types/react-dom": "*",
"@ui5/webcomponents-compat": "~2.9.0",
"@ui5/webcomponents-react": "~2.9.0",
"@ui5/webcomponents-compat": "~2.10.0",
"@ui5/webcomponents-react": "~2.10.0",
"react": "^18 || ^19",
"react-dom": "^18 || ^19"
},
Expand Down
4 changes: 2 additions & 2 deletions packages/cypress-commands/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,8 +23,8 @@
"clean": "rimraf dist api-commands.json api-queries.json"
},
"peerDependencies": {
"@ui5/webcomponents": "~2.9.0",
"@ui5/webcomponents-base": "~2.9.0",
"@ui5/webcomponents": "~2.10.0",
"@ui5/webcomponents-base": "~2.10.0",
"cypress": "^12 || ^13 || ^14"
},
"peerDependenciesMeta": {
Expand Down
2 changes: 1 addition & 1 deletion packages/cypress-commands/test/UI5WebComponentsChild.cy.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -125,7 +125,7 @@ describe('UI5 Web Components - Child Commands', () => {
it('click list item', () => {
cy.mount(
<List selectionMode="Multiple">
<ListItemStandard data-testid="s">ListItemStandard</ListItemStandard>
<ListItemStandard data-testid="s" text="ListItemStandard" />
<ListItemCustom data-testid="c">ListItemCustom</ListItemCustom>
</List>
);
Expand Down
8 changes: 4 additions & 4 deletions packages/main/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,10 +57,10 @@
"peerDependencies": {
"@types/react": "*",
"@types/react-dom": "*",
"@ui5/webcomponents": "~2.9.0",
"@ui5/webcomponents-base": "~2.9.0",
"@ui5/webcomponents-fiori": "~2.9.0",
"@ui5/webcomponents-icons": "~2.9.0",
"@ui5/webcomponents": "~2.10.0",
"@ui5/webcomponents-base": "~2.10.0",
"@ui5/webcomponents-fiori": "~2.10.0",
"@ui5/webcomponents-icons": "~2.10.0",
"react": "^18 || ^19",
"react-dom": "^18 || ^19"
},
Expand Down
52 changes: 26 additions & 26 deletions packages/main/src/components/AnalyticalTable/AnalyticalTable.cy.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -111,21 +111,21 @@ describe('AnalyticalTable', () => {

cy.findByText('Name').click();
cy.get('[ui5-popover]').should('be.visible');
cy.findByText('Sort Ascending').shadow().findByRole('listitem').click({ force: true });
cy.get('[ui5-list]').clickUi5ListItemByText('Sort Ascending');
cy.get('@onSortSpy').should('have.been.calledWithMatch', {
detail: { column: { id: 'name' }, sortDirection: 'asc' }
});
cy.get('[aria-rowindex="3"] > [aria-colindex="1"]').should('text', 'C');

cy.findByText('Name').click();
cy.findByText('Clear Sorting').shadow().findByRole('listitem').click({ force: true });
cy.get('[ui5-list]').clickUi5ListItemByText('Clear Sorting');
cy.get('@onSortSpy').should('have.been.calledWithMatch', {
detail: { column: { id: 'name' }, sortDirection: 'clear' }
});
cy.get('[aria-rowindex="3"] > [aria-colindex="1"]').should('text', 'X');

cy.findByText('Name').click();
cy.findByText('Sort Descending').shadow().findByRole('listitem').click({ force: true });
cy.get('[ui5-list]').clickUi5ListItemByText('Sort Descending');
cy.get('@onSortSpy').should('have.been.calledWithMatch', {
detail: { column: { id: 'name' }, sortDirection: 'desc' }
});
Expand Down Expand Up @@ -873,7 +873,7 @@ describe('AnalyticalTable', () => {
cy.findByTestId('isSelected').should('have.text', 'true');

cy.findByText('Friend Name').click();
cy.findByText('Group').realClick();
cy.get('[ui5-list]').clickUi5ListItemByText('Group');
cy.focused()
.should('have.attr', 'data-row-index', '0')
.and('have.attr', 'data-column-index', '2')
Expand All @@ -894,7 +894,7 @@ describe('AnalyticalTable', () => {
cy.findByTestId('isSelected').should('have.text', 'false');

cy.findByText('Friend Name').click();
cy.findByText('Ungroup').realClick();
cy.get('[ui5-list]').clickUi5ListItemByText('Ungroup');
cy.focused()
.should('have.attr', 'data-row-index', '0')
.and('have.attr', 'data-column-index', '3')
Expand Down Expand Up @@ -1560,7 +1560,7 @@ describe('AnalyticalTable', () => {

testAlternateRowColor();
cy.findByText('Name').click();
cy.findByText('Sort Ascending').shadow().findByRole('listitem').click({ force: true });
cy.get('[ui5-list]').clickUi5ListItemByText('Sort Ascending');
testAlternateRowColor();
});

Expand Down Expand Up @@ -2336,22 +2336,22 @@ describe('AnalyticalTable', () => {
cy.get('[data-visible-row-index="1"][data-visible-column-index="1"]').should('have.attr', 'aria-label', 'Age 40 ');

cy.findByText('Name').click();
cy.findByText('Sort Ascending').shadow().findByRole('listitem').click({ force: true });
cy.get('[ui5-list]').clickUi5ListItemByText('Sort Ascending');
cy.get('[data-column-id="name"]').should('have.attr', 'aria-sort', 'ascending');
cy.findByText('Name').click();
cy.findByText('Clear Sorting').shadow().findByRole('listitem').click({ force: true });
cy.get('[ui5-list]').clickUi5ListItemByText('Clear Sorting');
cy.get('[data-column-id="name"]').should('not.have.attr', 'aria-sort');
cy.findByText('Name').click();
cy.findByText('Sort Descending').shadow().findByRole('listitem').click({ force: true });
cy.get('[ui5-list]').clickUi5ListItemByText('Sort Descending');
cy.get('[data-column-id="name"]').should('have.attr', 'aria-sort', 'descending');
cy.findByText('Name').click();
cy.findByText('Sort Ascending').shadow().get('[ui5-input]').typeIntoUi5Input('A{enter}');
cy.get('[text="Sort Ascending"]').shadow().get('[ui5-input]').typeIntoUi5Input('A{enter}');
cy.get('[data-column-id="name"]')
.should('have.attr', 'aria-sort', 'descending')
.and('have.attr', 'aria-label', 'Filtered');

cy.findByText('Name').click();
cy.findByText('Group').shadow().findByRole('listitem').click({ force: true });
cy.get('[ui5-list]').clickUi5ListItemByText('Group');
cy.get('[data-column-id="name"]')
.should('have.attr', 'aria-sort', 'descending')
.and('have.attr', 'aria-label', 'Filtered Grouped');
Expand All @@ -2367,14 +2367,14 @@ describe('AnalyticalTable', () => {
'Name A Grouped, To collapse the row, press the spacebar.'
);
cy.findByText('Name').click();
cy.findByText('Ungroup').shadow().findByRole('listitem').click({ force: true });
cy.get('[ui5-list]').clickUi5ListItemByText('Ungroup');
cy.get('[data-visible-row-index="1"][data-visible-column-index="0"]').should('have.attr', 'aria-label', 'Name A ');
cy.get('[data-column-id="name"]')
.should('have.attr', 'aria-sort', 'descending')
.and('have.attr', 'aria-label', 'Filtered');

cy.findByText('Name').click();
cy.findByText('Sort Ascending').shadow().get('[ui5-input]').typeIntoUi5Input('{selectall}{backspace}{enter}');
cy.get('[text="Sort Ascending"]').shadow().get('[ui5-input]').typeIntoUi5Input('{selectall}{backspace}{enter}');
cy.get('[data-column-id="name"]').should('have.attr', 'aria-sort', 'descending').and('have.attr', 'aria-label', '');

cy.get('[data-column-id="friend.age"]').should('have.attr', 'aria-label', 'Custom Label ');
Expand Down Expand Up @@ -2436,7 +2436,7 @@ describe('AnalyticalTable', () => {

cy.mount(<AnalyticalTable data={[...data, ...data]} columns={columns} visibleRows={5} groupable />);
cy.findByText('Name').click();
cy.findByText('Group').realClick();
cy.get('[ui5-list]').clickUi5ListItemByText('Group');
cy.findByText('A (2)').trigger('keydown', {
key: 'Enter'
});
Expand Down Expand Up @@ -2522,9 +2522,9 @@ describe('AnalyticalTable', () => {

//sort both Name and Age (multi-sort enabled)
cy.findByText('Name').click();
cy.findByText('Sort Ascending').shadow().findByRole('listitem').click({ force: true });
cy.get('[ui5-list]').clickUi5ListItemByText('Sort Ascending');
cy.findByText('Age').click();
cy.findByText('Sort Ascending').shadow().findByRole('listitem').click({ force: true });
cy.get('[ui5-list]').clickUi5ListItemByText('Sort Ascending');

cy.get('[data-column-index="0"][data-row-index="1"]').children().should('have.text', 'A');
cy.get('[data-column-index="1"][data-row-index="1"]').children().should('have.text', '30');
Expand All @@ -2545,7 +2545,7 @@ describe('AnalyticalTable', () => {

//only sort Name2
cy.findByText('Name 2').click();
cy.findByText('Sort Ascending').shadow().findByRole('listitem').click({ force: true });
cy.get('[ui5-list]').clickUi5ListItemByText('Sort Ascending');

cy.get('[data-column-index="0"][data-row-index="1"]').children().should('have.text', 'B');
cy.get('[data-column-index="1"][data-row-index="1"]').children().should('have.text', '60');
Expand Down Expand Up @@ -2753,7 +2753,7 @@ describe('AnalyticalTable', () => {
cy.findByText('Aggregated').should('not.exist');

cy.findByText('Name').click();
cy.findByText('Group').realClick();
cy.get('[ui5-list]').clickUi5ListItemByText('Group');
cy.findByText('Simon').should('be.visible').should('have.length', 1);
cy.findAllByText('Aggregated').should('be.visible').should('have.length', 2);
cy.get('[ui5-icon][name="navigation-right-arrow"]').should('be.visible').should('have.length', 2);
Expand Down Expand Up @@ -2815,17 +2815,17 @@ describe('AnalyticalTable', () => {

cy.mount(<TestComponent orderedIds={['name', 'name2', 'age', 'age2']} />);
cy.findByText('Age').click();
cy.findByText('Sort Ascending').shadow().findByRole('listitem').click({ force: true });
cy.get('[ui5-list]').clickUi5ListItemByText('Sort Ascending');
cy.findByText('Name').click();
cy.findByText('Sort Ascending').shadow().findByRole('listitem').click({ force: true });
cy.get('[ui5-list]').clickUi5ListItemByText('Sort Ascending');

cy.get('[data-visible-row-index="1"][data-visible-column-index="0"]').should('have.text', 'Graham');
cy.get('[data-visible-row-index="1"][data-visible-column-index="1"]').should('have.text', '40');
cy.get('[data-visible-row-index="5"][data-visible-column-index="0"]').should('have.text', 'Kristen');
cy.get('[data-visible-row-index="5"][data-visible-column-index="1"]').should('have.text', '20');

cy.findByText('Name 2').click();
cy.findByText('Sort Descending').shadow().findByRole('listitem').click({ force: true });
cy.get('[ui5-list]').clickUi5ListItemByText('Sort Descending');

cy.get('[data-visible-row-index="1"][data-visible-column-index="0"]').should('have.text', 'Graham');
cy.get('[data-visible-row-index="1"][data-visible-column-index="1"]').should('have.text', '62');
Expand All @@ -2835,7 +2835,7 @@ describe('AnalyticalTable', () => {
cy.get('[data-visible-row-index="5"][data-visible-column-index="2"]').should('have.text', 'Willis');

cy.findByText('Name 2').click();
cy.findByText('Clear Sorting').shadow().findByRole('listitem').click({ force: true });
cy.get('[ui5-list]').clickUi5ListItemByText('Clear Sorting');

cy.get('[data-visible-row-index="1"][data-visible-column-index="0"]').should('have.text', 'Graham');
cy.get('[data-visible-row-index="1"][data-visible-column-index="1"]').should('have.text', '40');
Expand All @@ -2844,17 +2844,17 @@ describe('AnalyticalTable', () => {

cy.mount(<TestComponent orderedIds={['name2']} />);
cy.findByText('Age').click();
cy.findByText('Sort Ascending').shadow().findByRole('listitem').click({ force: true });
cy.get('[ui5-list]').clickUi5ListItemByText('Sort Ascending');
cy.findByText('Name').click();
cy.findByText('Sort Ascending').shadow().findByRole('listitem').click({ force: true });
cy.get('[ui5-list]').clickUi5ListItemByText('Sort Ascending');

cy.get('[data-visible-row-index="1"][data-visible-column-index="0"]').should('have.text', 'Kristen');
cy.get('[data-visible-row-index="1"][data-visible-column-index="1"]').should('have.text', '20');
cy.get('[data-visible-row-index="5"][data-visible-column-index="0"]').should('have.text', 'Peter');
cy.get('[data-visible-row-index="5"][data-visible-column-index="1"]').should('have.text', '40');

cy.findByText('Age 2').click();
cy.findByText('Sort Ascending').shadow().findByRole('listitem').click({ force: true });
cy.get('[ui5-list]').clickUi5ListItemByText('Sort Ascending');

cy.get('[data-visible-row-index="1"][data-visible-column-index="0"]').should('have.text', 'Kristen');
cy.get('[data-visible-row-index="1"][data-visible-column-index="1"]').should('have.text', '20');
Expand All @@ -2864,7 +2864,7 @@ describe('AnalyticalTable', () => {
cy.get('[data-visible-row-index="5"][data-visible-column-index="3"]').should('have.text', '18');

cy.findByText('Name 2').click();
cy.findByText('Sort Ascending').shadow().findByRole('listitem').click({ force: true });
cy.get('[ui5-list]').clickUi5ListItemByText('Sort Ascending');
cy.get('[data-visible-row-index="1"][data-visible-column-index="0"]').should('have.text', 'Kristen');
cy.get('[data-visible-row-index="1"][data-visible-column-index="1"]').should('have.text', '20');
cy.get('[data-visible-row-index="1"][data-visible-column-index="2"]').should('have.text', 'Alissa');
Expand Down
35 changes: 20 additions & 15 deletions packages/main/src/components/AnalyticalTable/defaults/Column/ColumnHeaderModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -195,24 +195,26 @@ export const ColumnHeaderModal = (instance: TableInstanceWithPopoverProps) => {
data-component-name="ATHeaderPopoverList"
>
{isSortedAscending && (
<ListItemStandard type={ListItemType.Active} icon={iconDecline} data-sort="clear">
{clearSortingText}
</ListItemStandard>
<ListItemStandard type={ListItemType.Active} icon={iconDecline} data-sort="clear" text={clearSortingText} />
)}
{showSort && !isSortedAscending && (
<ListItemStandard type={ListItemType.Active} icon={iconSortAscending} data-sort="asc">
{sortAscendingText}
</ListItemStandard>
<ListItemStandard
type={ListItemType.Active}
icon={iconSortAscending}
data-sort="asc"
text={sortAscendingText}
/>
)}
{showSort && !isSortedDescending && (
<ListItemStandard type={ListItemType.Active} icon={iconSortDescending} data-sort="desc">
{sortDescendingText}
</ListItemStandard>
<ListItemStandard
type={ListItemType.Active}
icon={iconSortDescending}
data-sort="desc"
text={sortDescendingText}
/>
)}
{isSortedDescending && (
<ListItemStandard type={ListItemType.Active} icon={iconDecline} data-sort="clear">
{clearSortingText}
</ListItemStandard>
<ListItemStandard type={ListItemType.Active} icon={iconDecline} data-sort="clear" text={clearSortingText} />
)}
{showFilter && (
<ListItemCustom type={ListItemType.Inactive} onKeyDown={handleCustomLiKeyDown} accessibleName={filterText}>
Expand Down Expand Up @@ -244,9 +246,12 @@ export const ColumnHeaderModal = (instance: TableInstanceWithPopoverProps) => {
</ListItemCustom>
)}
{showGroup && (
<ListItemStandard type={ListItemType.Active} icon={iconGroup} data-sort={'group'}>
{column.isGrouped ? ungroupText : groupText}
</ListItemStandard>
<ListItemStandard
type={ListItemType.Active}
icon={iconGroup}
data-sort={'group'}
text={column.isGrouped ? ungroupText : groupText}
/>
)}
</List>
</Popover>
Expand Down
Loading
Loading