feat: update to UI5 Web Components 2.0 RC (#5861)

BREAKING CHANGE: updated UI5 Web Components to v2. All [breaking changes](https://sap.github.io/ui5-webcomponents/nightly/docs/Migrating%20to%20version%202.0%20guide/) apply to this project as well.
BREAKING CHANGE: `ActionSheet`: prop `placementType` has been renamed to `placement`, `onAfterClose` to `onClose` and `onAfterOpen` to `onOpen`
BREAKING CHANGE: the `Badge` component has been renamed to `Tag`
BREAKING CHANGE: the `ComboBoxGroupItem` component has been renamed to `ComboBoxItemGroup`
BREAKING CHANGE: the `GroupHeaderListItem` component has been renamed to `ListItemGroup`
BREAKING CHANGE: the `NotificationAction` component has been removed. You can use the `Menu` component instead.
BREAKING CHANGE: the `SelectMenu` and `SelectMenuOption` components have been removed. The `Select` and `Option` now allow custom content.
BREAKING CHANGE: `SelectDialog`: renamed prop `mode` to `selectionMode` to be aligned with new List API, `onAfterClose` to `onClose` and `onAfterOpen` to `onOpen`

---------

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

Author: MarcusNotheis

.storybook/components/ArgTypesWithNote.tsx

@@ -1,5 +1,6 @@
 import { ArgTypes } from '@storybook/blocks';
-import { MessageStrip, MessageStripDesign } from '@ui5/webcomponents-react';
+import MessageStripDesign from '@ui5/webcomponents/dist/types/MessageStripDesign.js';
+import { MessageStrip } from '@ui5/webcomponents-react';
 import { ComponentProps, ReactNode } from 'react';
 import classes from './ArgTypesWithNote.module.css';
 

.storybook/components/ControlsWithNote.tsx

@@ -1,5 +1,6 @@
 import { Controls } from '@storybook/blocks';
-import { MessageStrip, MessageStripDesign } from '@ui5/webcomponents-react';
+import MessageStripDesign from '@ui5/webcomponents/dist/types/MessageStripDesign.js';
+import { MessageStrip } from '@ui5/webcomponents-react';
 import { ComponentProps, ReactNode } from 'react';
 import classes from './ControlsWithNote.module.css';
 import { DomRefTable } from './DomRefTable';

.storybook/components/DocsHeader.tsx

@@ -1,8 +1,8 @@
 import { Description, DocsContext, Subtitle, Title } from '@storybook/addon-docs';
 import copyIcon from '@ui5/webcomponents-icons/dist/copy';
+import ButtonDesign from '@ui5/webcomponents/dist/types/ButtonDesign.js';
 import {
   Button,
-  ButtonDesign,
   FlexBox,
   FlexBoxAlignItems,
   Label,

.storybook/components/DomRefTable.tsx

@@ -1,5 +1,6 @@
 import { DocsContext, Heading } from '@storybook/blocks';
-import { Badge, BadgeDesign, Link, MessageStrip, Popover } from '@ui5/webcomponents-react';
+import { Tag, Link, MessageStrip, Popover } from '@ui5/webcomponents-react';
+import TagDesign from '@ui5/webcomponents/dist/types/TagDesign.js';
 import type * as CEM from '@ui5/webcomponents-tools/lib/cem/types';
 import type { ReactNode } from 'react';
 import { Fragment, useContext, useRef } from 'react';
@@ -99,9 +100,9 @@ export function DomRefTable() {
                       {row.deprecated && (
                         <>
                           <br />
-                          <Badge
+                          <Tag
                             className={classes.deprecationInfoBadge}
-                            design={BadgeDesign.Critical}
+                            design={TagDesign.Critical}
                             interactive={typeof row.deprecated === 'string'}
                             onClick={
                               typeof row.deprecated === 'string'
@@ -113,7 +114,7 @@ export function DomRefTable() {
                             }
                           >
                             deprecated
-                          </Badge>
+                          </Tag>
                         </>
                       )}
                     </td>

.storybook/components/Footer.tsx

@@ -1,16 +1,16 @@
 import {
   Button,
-  ButtonDesign,
   FlexBox,
   FlexBoxAlignItems,
   FlexBoxJustifyContent,
   FlexBoxWrap,
   Label,
   Link,
-  Popover,
-  PopoverPlacementType,
-  WrappingType
+  Popover
 } from '@ui5/webcomponents-react';
+import ButtonDesign from '@ui5/webcomponents/dist/types/ButtonDesign.js';
+import PopoverPlacement from '@ui5/webcomponents/dist/types/PopoverPlacement.js';
+import WrappingType from '@ui5/webcomponents/dist/types/WrappingType.js';
 import { useRef } from 'react';
 import { createPortal } from 'react-dom';
 import BestRunLogo from '../../assets/SAP_Best_R_grad_blk_scrn.png';
@@ -63,7 +63,7 @@ export const Footer = ({ style }) => {
         <Popover
           headerText={'Privacy Statement'}
           ref={popoverRef}
-          placementType={PopoverPlacementType.Top}
+          placementType={PopoverPlacement.Top}
           data-ui5-compact-size
           style={{ width: '360px', maxWidth: '100%' }}
         >

.storybook/components/LabelWithWrapping.tsx

@@ -1,4 +1,5 @@
-import { Label, WrappingType } from '@ui5/webcomponents-react';
+import { Label } from '@ui5/webcomponents-react';
+import WrappingType from '@ui5/webcomponents/dist/types/WrappingType.js';
 
 //mdx adds a paragraph to children if added inline, this component prevents that.
 export const LabelWithWrapping = ({ children }) => {

.storybook/components/ProjectTemplate.tsx

@@ -1,15 +1,7 @@
 import TsLogo from '@sb/images/logo-ts.png';
-import {
-  Avatar,
-  Card,
-  CardHeader,
-  Link,
-  LinkDesign,
-  MessageStrip,
-  MessageStripDesign,
-  Text,
-  ThemeProvider
-} from '@ui5/webcomponents-react';
+import LinkDesign from '@ui5/webcomponents/dist/types/LinkDesign.js';
+import MessageStripDesign from '@ui5/webcomponents/dist/types/MessageStripDesign.js';
+import { Avatar, Card, CardHeader, Link, MessageStrip, Text, ThemeProvider } from '@ui5/webcomponents-react';
 import { clsx } from 'clsx';
 import { ReactNode } from 'react';
 import { addCustomCSSWithScoping } from '../../packages/main/src/internal/addCustomCSSWithScoping';
@@ -79,7 +71,7 @@ export function ProjectTemplate(props: ProjectTemplatePropTypes) {
           {deprecationNotice && (
             <MessageStrip
               hideCloseButton
-              design={MessageStripDesign.Warning}
+              design={MessageStripDesign.Critical}
               children={deprecationNotice}
               className={classes.deprecationNotice}
             />