replace ExpandableText with web component

packages/main/src/index.ts

@@ -9,7 +9,6 @@ export { ObjectPageHeader } from './components/ObjectPageHeader/index.js';
 export type { ObjectPageHeaderPropTypes } from './components/ObjectPageHeader/index.js';
 export { ObjectPageTitle } from './components/ObjectPageTitle/index.js';
 export type { ObjectPageTitlePropTypes } from './components/ObjectPageTitle/index.js';
-export * from './components/ExpandableText/index.js';
 export * from './components/FilterBar/index.js';
 export * from './components/FilterGroupItem/index.js';
 export * from './components/FlexBox/index.js';

packages/main/src/internal/withWebComponent.tsx

@@ -192,6 +192,31 @@ export const withWebComponent = <Props extends Record<string, any>, RefType = Ui
       return null;
     }
 
+    // compatibility wrapper for ExpandableText - remove in v3
+    if (tagName === 'ui5-expandable-text') {
+      const renderWhiteSpace = nonWebComponentRelatedProps['renderWhitespace'] ? true : undefined;
+      // @ts-expect-error: overflowMode is available
+      const { ['overflow-mode']: overflowMode, text, ...restRegularProps } = regularProps;
+      const showOverflowInPopover = nonWebComponentRelatedProps['showOverflowInPopover'];
+      return (
+        <Component
+          ref={componentRef}
+          {...booleanProps}
+          {...restRegularProps}
+          {...eventHandlers}
+          {...nonWebComponentRelatedProps}
+          // @ts-expect-error: overflowMode is available
+          overflowMode={overflowMode ?? (showOverflowInPopover ? 'Popover' : 'InPlace')}
+          text={text ?? children}
+          class={className}
+          suppressHydrationWarning
+          data-_render-whitespace={renderWhiteSpace}
+        >
+          {slots}
+        </Component>
+      );
+    }
+
     return (
       <Component
         ref={componentRef}
@@ -201,6 +226,9 @@ export const withWebComponent = <Props extends Record<string, any>, RefType = Ui
         {...nonWebComponentRelatedProps}
         class={className}
         suppressHydrationWarning
+        data-render-whitespace={
+          tagName === 'ui5-expandable-text' && nonWebComponentRelatedProps['renderWhitespace'] ? true : undefined
+        }
       >
         {slots}
         {children}

packages/main/src/components/ExpandableText/ExpandableText.mdx → packages/main/src/webComponents/ExpandableText/ExpandableText.mdx

@@ -1,10 +1,10 @@
-import { ControlsWithNote, DocsHeader, Footer } from '@sb/components';
 import { Canvas, Meta } from '@storybook/blocks';
-import * as ComponentStories from './ExpandableText.stories';
+import { ControlsWithNote, DocsHeader, Footer } from '@sb/components';
+import * as ComponentStories from './ExpandableText.stories.tsx';
 
 <Meta of={ComponentStories} />
 
-<DocsHeader since="1.23.0" />
+<DocsHeader />
 
 <br />
 

packages/main/src/webComponents/ExpandableText/ExpandableText.stories.tsx

@@ -0,0 +1,29 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import ExpandableTextOverflowMode from '@ui5/webcomponents/dist/types/ExpandableTextOverflowMode.js';
+import TextEmptyIndicatorMode from '@ui5/webcomponents/dist/types/TextEmptyIndicatorMode.js';
+import { ExpandableText } from './index.js';
+
+const meta = {
+  title: 'Data Display / ExpandableText',
+  component: ExpandableText,
+  argTypes: {
+    text: { control: 'text' },
+    maxCharacters: { control: 'number' },
+    children: { control: { disable: true } },
+    showOverflowInPopover: { control: { disable: true } }
+    //todo: uncomment once white-space can be applied w/o addCustomCSS
+    // renderWhitespace: { control: { disable: true } }
+  },
+  args: {
+    emptyIndicatorMode: TextEmptyIndicatorMode.Off,
+    overflowMode: ExpandableTextOverflowMode.InPlace,
+    text: `             If "renderWhitespace" is set to true, there will be thirteen white spaces in front and after this sentence.             Lorem ipsum dolor st amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat`,
+    maxCharacters: 100
+  },
+  tags: ['package:@ui5/webcomponents']
+} satisfies Meta<typeof ExpandableText>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};