docs(compat - Table): outline compatibility (#6405)

Related issue: SAP/ui5-webcomponents#9920
SAP · Sep 25, 2024 · 6759403 · 6759403
1 parent dcd189f
commit 6759403
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 3 deletions.
diff --git a/.storybook/components/Import.tsx b/.storybook/components/Import.tsx
@@ -35,6 +35,8 @@ function FromPath({ packageName, deepPath }: FromPathPropTypes) {
   );
 }
 
+FromPath.displayName = 'FromPath';
+
 export const ImportStatement = ({ moduleNames, packageName }: ImportStatementPropTypes) => {
   if (!moduleNames) {
     return null;
@@ -65,7 +67,7 @@ export const ImportStatement = ({ moduleNames, packageName }: ImportStatementPro
         {paths.map((deepPath) => {
           if (!deepPath) {
             return (
-              <span style={{ fontSize: '14px' }}>
+              <span style={{ fontSize: '14px' }} key="0">
                 {' '}
                 {'{'}
                 {moduleNames.length > 2 ? (
@@ -89,14 +91,14 @@ export const ImportStatement = ({ moduleNames, packageName }: ImportStatementPro
             );
           } else {
             return (
-              <>
+              <Fragment key={deepPath.path}>
                 <span style={{ color: 'rgb(0, 0, 136)', fontSize: '14px' }}>import</span>
                 <span style={{ fontSize: '14px' }}>
                   {' '}
                   {'{'}&nbsp;{deepPath.moduleName}&nbsp;{'}'}{' '}
                 </span>
                 <FromPath packageName={packageName} deepPath={deepPath} />
-              </>
+              </Fragment>
             );
           }
         })}
@@ -106,6 +108,8 @@ export const ImportStatement = ({ moduleNames, packageName }: ImportStatementPro
   );
 };
 
+ImportStatement.displayName = 'ImportStatement';
+
 interface ImportProps {
   /**
    * Names of module/component (e.g. "Button")

diff --git a/packages/compat/src/components/Table/Table.mdx b/packages/compat/src/components/Table/Table.mdx
@@ -1,6 +1,7 @@
 import { ControlsWithNote, DocsHeader, Footer } from '@sb/components';
 import SubcomponentsSection from '@sb/docs/SubcomponentsSection.md?raw';
 import { ArgTypes, Canvas, Description, Markdown, Meta } from '@storybook/blocks';
+import { MessageStrip, Text } from '@ui5/webcomponents-react';
 import { TableCell } from '../TableCell';
 import { TableColumn } from '../TableColumn';
 import { TableGroupRow } from '../TableGroupRow';
@@ -11,6 +12,18 @@ import * as ComponentStories from './Table.stories';
 
 <DocsHeader />
 
+<MessageStrip
+  children={
+    <Text>
+      Using the Table from the <code>compat</code> package and the <code>main</code> package in the same application is
+      not supported!
+    </Text>
+  }
+  design="Critical"
+  hideCloseButton
+/>
+
+<br />
 <br />
 
 ## Example