From 67594033230351eb162867a5092529b938398b14 Mon Sep 17 00:00:00 2001
From: Lukas Harbarth <lukas.harbarth@sap.com>
Date: Wed, 25 Sep 2024 14:24:37 +0200
Subject: [PATCH] docs(compat - Table): outline compatibility (#6405)

Related issue: https://github.com/SAP/ui5-webcomponents/issues/9920
---
 .storybook/components/Import.tsx               | 10 +++++++---
 packages/compat/src/components/Table/Table.mdx | 13 +++++++++++++
 2 files changed, 20 insertions(+), 3 deletions(-)

diff --git a/.storybook/components/Import.tsx b/.storybook/components/Import.tsx
index 6a5ae2c5bc7..a83783f738a 100644
--- 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
index ca24afa0334..7b2a7769042 100644
--- 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