feat: update to @ui5/webcomonents 2.0.0-rc.6 (#5940)

BREAKING CHANGE: the `StandardListItem` has been replaced with the
`ListItemStandard` component
BREAKING CHANGE: the `CustomListItem` has been replaced with the
`ListItemCustom` component
BREAKING CHANGE: the `MultiComboBoxGroupItem` has been replaced with the
`MultiComboBoxItemGroup` component
BREAKING CHANGE: the `TableGroupRow` component has been deleted
BREAKING CHANGE: the `TableColumn` component has been replaced with the
`TableHeaderCell` component
BREAKING CHANGE: **VariantManagement**: the `portalContainer` prop has
been removed as it is no longer needed.

---------

Co-authored-by: Lukas Harbarth <[email protected]>

Author: MarcusNotheis

.storybook/components/ProductsTable.tsx

@@ -4,7 +4,8 @@ import {
   Label,
   Table,
   TableCell,
-  TableColumn,
+  TableHeaderCell,
+  TableHeaderRow,
   TableRow,
   Text
 } from '@ui5/webcomponents-react';
@@ -13,13 +14,13 @@ import { ProductCollection } from './products.json';
 export const ProductsTable = () => {
   return (
     <Table
-      columns={
-        <>
-          <TableColumn>Product</TableColumn>
-          <TableColumn>Supplier</TableColumn>
-          <TableColumn>Dimensions</TableColumn>
-          <TableColumn>Price</TableColumn>
-        </>
+      headerRow={
+        <TableHeaderRow>
+          <TableHeaderCell>Product</TableHeaderCell>
+          <TableHeaderCell>Supplier</TableHeaderCell>
+          <TableHeaderCell>Dimensions</TableHeaderCell>
+          <TableHeaderCell>Price</TableHeaderCell>
+        </TableHeaderRow>
       }
     >
       {ProductCollection.map((product) => {

.storybook/custom-element-manifests/fiori.json

@@ -47,12 +47,13 @@ export function useGetCem() {
   }
 }
 const replaceSubComps = {
-  ListItemBase: ['StandardListItem', 'CustomListItem', 'ListItemGroup'],
+  ListItemBase: ['ListItemStandard', 'ListItemCustom', 'ListItemGroup'],
   InputSuggestionItem: ['SuggestionItem', 'SuggestionGroupItem'],
   NotificationListItemBase: ['NotificationListItem'],
   ToolbarItem: ['ToolbarSeparatorV2', 'ToolbarSpacerV2', 'ToolbarButton', 'ToolbarSelect', 'ToolbarSelectOption'],
   TreeItemBase: ['TreeItem', 'TreeItemCustom'],
-  AvatarGroupItem: ['Avatar']
+  AvatarGroupItem: ['Avatar'],
+  TableFeature: ['TableGrowing', 'TableSelection']
 };
 
 function findSubComponentsRecursively(moduleName: string, cem: any): string[] {

.storybook/custom-element-manifests/main.json

@@ -46,15 +46,15 @@ const onSelectionChange = (event) => {
 };
 
 <List mode={ListSelectionMode.MultiSelect} onSelectionChange={onSelectionChange}>
-  <StandardListItem additionalText="3" data-custom="custom value of list item 1">
+  <ListItemStandard additionalText="3" data-custom="custom value of list item 1">
     List Item 1
-  </StandardListItem>
-  <StandardListItem additionalText="2" data-custom="custom value of list item 2">
+  </ListItemStandard>
+  <ListItemStandard additionalText="2" data-custom="custom value of list item 2">
     List Item 2
-  </StandardListItem>
-  <StandardListItem additionalText="1" data-custom="custom value of list item 3">
+  </ListItemStandard>
+  <ListItemStandard additionalText="1" data-custom="custom value of list item 3">
     List Item 3
-  </StandardListItem>
+  </ListItemStandard>
 </List>;
 ```
 

.storybook/utils.ts

@@ -1,9 +1,9 @@
+import { Footer, TableOfContent } from '@sb/components';
 import { Meta } from '@storybook/addon-docs';
+import { MessageStrip, ThemeProvider } from '@ui5/webcomponents-react';
 import MessageStripDesign from '@ui5/webcomponents/dist/types/MessageStripDesign.js';
+import { CssPartsExample } from '../styling/CssPartsExample';
 import { MyCustomElement } from '../styling/MyCustomElement';
-import { TableShadowRootExample } from '../styling/TableShadowRootExample';
-import { MessageStrip, ThemeProvider } from '@ui5/webcomponents-react';
-import { Footer, TableOfContent } from '@sb/components';
 
 <Meta title="Styling" />
 
@@ -137,58 +137,48 @@ With the help of this attribute it's possible styling the respective element, by
 
 ### Example
 
-<TableShadowRootExample />
+<CssPartsExample />
 
 <br />
 <br />
 
 <details>
 
+{' '}
+
 <summary>Show Code</summary>
 
 ```css
-.thGreen::part(column) {
+.card::part(root) {
   background-color: lightgreen;
 }
-.trBlue::part(row) {
-  background-color: lightblue;
+.card::part(content) {
+  transform: rotate(180deg);
 }
 ```
 
 ```jsx
-const TableComponent = () => {
+function MyComponent() {
   return (
-    <Table
-      columns={
-        <>
-          <TableColumn className="thGreen">
-            <Label>Product</Label>
-          </TableColumn>
-          <TableColumn>
-            <Label>Price</Label>
-          </TableColumn>
-        </>
+    <Card
+      header={
+        <CardHeader
+          additionalText="3 of 5"
+          avatar={<Icon name="person-placeholder" />}
+          subtitleText="Direct Reports"
+          titleText="TeamSpace"
+        />
       }
+      className="card"
     >
-      <TableRow className="trBlue">
-        <TableCell>
-          <Label>Notebook Basic</Label>
-        </TableCell>
-        <TableCell>
-          <Label>956EUR</Label>
-        </TableCell>
-      </TableRow>
-      <TableRow>
-        <TableCell>
-          <Label>Notebook Basic 17HT-1001</Label>
-        </TableCell>
-        <TableCell>
-          <Label>1249EUR</Label>
-        </TableCell>
-      </TableRow>
-    </Table>
+      <List>
+        <ListItemStandard description="Software Architect">Richard Wilson</ListItemStandard>
+        <ListItemStandard description="Visual Designer">Elena Petrova</ListItemStandard>
+        <ListItemStandard description="Quality Specialist">John Miller</ListItemStandard>
+      </List>
+    </Card>
   );
-};
+}
 ```
 
 </details>

docs/knowledge-base/ChangeEvents.mdx

@@ -0,0 +1,6 @@
+.card::part(root) {
+  background-color: lightgreen;
+}
+.card::part(content) {
+  transform: rotate(180deg);
+}

docs/knowledge-base/Styling.mdx

@@ -0,0 +1,13 @@
+import { composeStories } from '@storybook/react';
+import * as CardStories from '../../packages/main/src/webComponents/Card/Card.stories.js';
+import './CssPartsExample.css';
+
+const { Default: CardComponent } = composeStories(CardStories);
+
+export const CssPartsExample = () => {
+  return (
+    <div>
+      <CardComponent className="card" />
+    </div>
+  );
+};

docs/styling/CssPartsExample.css

@@ -25,7 +25,7 @@
     "wrappers:main": "WITH_WEB_COMPONENT_IMPORT_PATH='../../internal/withWebComponent.js' INTERFACES_IMPORT_PATH='../../types/index.js' node packages/cli/dist/bin/index.js create-wrappers --packageName @ui5/webcomponents --out ./packages/main/src/webComponents --additionalComponentNote 'This is a UI5 Web Component! [Repository](https://github.com/SAP/ui5-webcomponents) | [Documentation](https://sap.github.io/ui5-webcomponents/)'",
     "wrappers:fiori": "WITH_WEB_COMPONENT_IMPORT_PATH='../../internal/withWebComponent.js' INTERFACES_IMPORT_PATH='../../types/index.js' node packages/cli/dist/bin/index.js create-wrappers --packageName @ui5/webcomponents-fiori --out ./packages/main/src/webComponents --additionalComponentNote 'This is a UI5 Web Component! [Repository](https://github.com/SAP/ui5-webcomponents) | [Documentation](https://sap.github.io/ui5-webcomponents/)'",
     "wrappers:compat": "node packages/cli/dist/bin/index.js create-wrappers --packageName @ui5/webcomponents-compat --out ./packages/compat/src/components --additionalComponentNote 'This is a UI5 Web Component! [Repository](https://github.com/SAP/ui5-webcomponents) | [Documentation](https://sap.github.io/ui5-webcomponents/)' && prettier --log-level silent --write ./packages/compat/src/components && eslint --ext .ts,.tsx --fix ./packages/compat/src/components/*/index.tsx",
-    "create-webcomponents-wrapper": "yarn run build && yarn run wrappers:main && yarn run wrappers:fiori && yarn run wrappers:compat && prettier --log-level silent --write ./packages/main/src/webComponents && eslint --ext .ts,.tsx --fix ./packages/main/src/webComponents/*/index.tsx && yarn run sb:prepare-cem",
+    "create-webcomponents-wrapper": "(cd packages/cli && tsc) && yarn run wrappers:main && yarn run wrappers:fiori && yarn run wrappers:compat && prettier --log-level silent --write ./packages/main/src/webComponents && eslint --ext .ts,.tsx --fix ./packages/main/src/webComponents/*/index.tsx && yarn run sb:prepare-cem",
     "chromatic": "cross-env STORYBOOK_ENV=chromatic npx chromatic --build-script-name build:storybook",
     "postinstall": "husky && yarn setup",
     "create-cypress-commands-docs": "typedoc && rimraf temp/typedoc",
@@ -40,10 +40,10 @@
     "@storybook/react": "8.0.10",
     "@storybook/react-vite": "8.0.10",
     "@storybook/theming": "8.0.10",
-    "@ui5/webcomponents": "2.0.0-rc.5",
-    "@ui5/webcomponents-compat": "2.0.0-rc.5",
-    "@ui5/webcomponents-fiori": "2.0.0-rc.5",
-    "@ui5/webcomponents-icons": "2.0.0-rc.5",
+    "@ui5/webcomponents": "2.0.0-rc.6",
+    "@ui5/webcomponents-compat": "2.0.0-rc.6",
+    "@ui5/webcomponents-fiori": "2.0.0-rc.6",
+    "@ui5/webcomponents-icons": "2.0.0-rc.6",
     "react": "19.0.0-rc-fb9a90fa48-20240614",
     "react-dom": "19.0.0-rc-fb9a90fa48-20240614",
     "remark-gfm": "^4.0.0",
@@ -65,7 +65,7 @@
     "@types/use-sync-external-store": "^0.0.6",
     "@typescript-eslint/eslint-plugin": "^7.0.0",
     "@typescript-eslint/parser": "^7.0.0",
-    "@ui5/webcomponents-tools": "2.0.0-rc.5",
+    "@ui5/webcomponents-tools": "2.0.0-rc.6",
     "@vitejs/plugin-react": "^4.2.0",
     "chromatic": "^11.0.0",
     "cssnano": "^7.0.0",

docs/styling/CssPartsExample.tsx

@@ -30,7 +30,7 @@
   },
   "peerDependencies": {
     "@types/react": "*",
-    "@ui5/webcomponents-base": "2.0.0-rc.5",
+    "@ui5/webcomponents-base": "2.0.0-rc.6",
     "react": "^16.14.0 || ^17 || ^18 || ^19"
   },
   "peerDependenciesMeta": {

docs/styling/TableShadowRootExample.tsx

@@ -79,6 +79,7 @@
       "newComponent": "ComboBoxItemGroup"
     },
     "CustomListItem": {
+      "newComponent": "ListItemCustom",
       "renamedEnums": {
         "highlight": "HighlightTypes"
       }
@@ -182,6 +183,17 @@
         "mode": "ListMode"
       }
     },
+    "ListItemCustom": {
+      "renamedEnums": {
+        "highlight": "HighlightTypes"
+      }
+    },
+    "ListItemStandard": {
+      "renamedEnums": {
+        "highlight": "HighlightTypes",
+        "additionalTextState": "ValueState"
+      }
+    },
     "ListItemGroup": {},
     "MediaGallery": {},
     "MediaGalleryItem": {},
@@ -222,8 +234,18 @@
         "valueState": "ValueState"
       }
     },
-    "MultiComboBoxGroupItem": {},
+    "MultiComboBoxGroupItem": {
+      "newComponent": "MultiComboBoxItemGroup",
+      "changedProps": {
+        "onOpenChange": "onOpen"
+      }
+    },
     "MultiComboBoxItem": {},
+    "MultiComboBoxItemGroup": {
+      "changedProps": {
+        "onOpenChange": "onOpen"
+      }
+    },
     "MultiInput": {
       "changedProps": {
         "onSuggestionItemPreview": "onSelectionChange"
@@ -349,7 +371,8 @@
     "SideNavigationItem": {
       "changedProps": {
         "title": "tooltip"
-      }
+      },
+      "removedProps": ["wholeItemToggleable"]
     },
     "SideNavigationSubItem": {
       "changedProps": {
@@ -363,6 +386,7 @@
       "removedProps": ["activeIcon"]
     },
     "StandardListItem": {
+      "newComponent": "ListItemStandard",
       "renamedEnums": {
         "highlight": "HighlightTypes",
         "additionalTextState": "ValueState"
@@ -392,6 +416,37 @@
       "removedProps": ["fixed", "showOverflow"]
     },
     "TabSeparator": {},
+    "Table": {
+      "comment": "noDataText is now noData slot",
+      "changedProps": {
+        "busy": "loading",
+        "columns": "headerRow"
+      },
+      "removedProps": [
+        "busyDelay",
+        "growing",
+        "growingButtonSubtext",
+        "growingButtonText",
+        "mode",
+        "hideNoData",
+        "stickyColumnHeader",
+        "onLoadMore",
+        "onPopinChange",
+        "onSelectionChange"
+      ]
+    },
+    "TableCell": {},
+    "TableColumn": {
+      "newComponent": "TableHeaderCell",
+      "removedProps": ["demandPopin", "popinDisplay", "popinText"]
+    },
+    "TableRow": {
+      "comment": "type=Interactive becomes interactive=true",
+      "changedProps": {
+        "type": "interactive"
+      },
+      "removedProps": ["navigated", "selected"]
+    },
     "TextArea": {
       "changedProps": {
         "growingMaxLines": "growingMaxRows"
@@ -461,6 +516,9 @@
       }
     },
     "UploadCollectionItem": {},
+    "VariantManagement": {
+      "removedProps": ["portalContainer"]
+    },
     "ViewSettingsDialog": {},
     "Wizard": {},
     "WizardStep": {}
@@ -572,5 +630,14 @@
       "MultiSelect": "Multiple"
     }
   },
-  "wrappingTypeComponents": ["Badge", "CheckBox", "Label", "Link", "Title", "RadioButton", "NotificationListItem"]
+  "wrappingTypeComponents": [
+    "Badge",
+    "CheckBox",
+    "Label",
+    "Link",
+    "Title",
+    "RadioButton",
+    "NotificationListItem",
+    "Tag"
+  ]
 }