Addons: Deprecate key in addon render function as it is not available anymore

code/lib/types/src/modules/addons.ts

@@ -307,7 +307,11 @@ export type BaseStory<TArgs, StoryFnReturnType> =
 
 export interface Addon_RenderOptions {
   active: boolean;
-  key: string;
+  /**
+   * @deprecated You should not use key anymore as of Storybook 7.2 this render method is invoked as a React component.
+   * This property will be removed in 8.0.
+   * */
+  key?: unknown;
 }
 
 /**

code/ui/components/src/legacy/tabs/tabs.stories.tsx

@@ -47,18 +47,12 @@ type Panels = Record<string, Omit<ChildrenList[0], 'id'>>;
 const panels: Panels = {
   test1: {
     title: 'Tab title #1',
-    render: ({ active, key }) =>
-      active ? (
-        <div id="test1" key={key}>
-          CONTENT 1
-        </div>
-      ) : null,
+    render: ({ active }) => (active ? <div id="test1">CONTENT 1</div> : null),
   },
   test2: {
     title: 'Tab title #2',
-    render: ({ active, key }) => (
+    render: ({ active }) => (
       <div
-        key={key}
         id="test2"
         style={{
           background: 'hotpink',
@@ -72,9 +66,9 @@ const panels: Panels = {
   },
   test3: {
     title: 'Tab title #3',
-    render: ({ active, key }) =>
+    render: ({ active }) =>
       active ? (
-        <div id="test3" key={key}>
+        <div id="test3">
           {colours.map((colour, i) => (
             <div
               key={colour}
@@ -89,27 +83,15 @@ const panels: Panels = {
   },
   test4: {
     title: 'Tab title #4',
-    render: ({ active, key }) =>
-      active ? (
-        <div key={key} id="test4">
-          CONTENT 4
-        </div>
-      ) : null,
+    render: ({ active }) => (active ? <div id="test4">CONTENT 4</div> : null),
   },
   test5: {
     title: 'Tab title #5',
-    render: ({ active, key }) =>
-      active ? (
-        <div key={key} id="test5">
-          CONTENT 5
-        </div>
-      ) : null,
+    render: ({ active }) => (active ? <div id="test5">CONTENT 5</div> : null),
   },
   test6: {
     title: 'Tab title #6',
-    render: ({ active, key }) => (
-      <TabWrapper key={key} active={active} render={() => <div>CONTENT 6</div>} />
-    ),
+    render: ({ active }) => <TabWrapper active={active} render={() => <div>CONTENT 6</div>} />,
   },
 };
 

code/ui/manager/src/components/layout/app.mockdata.tsx

@@ -42,22 +42,12 @@ export const panels: Addon_Collection<Addon_BaseType> = {
   test1: {
     title: 'Test 1',
     type: Addon_TypesEnum.PANEL,
-    render: ({ active, key }) =>
-      active ? (
-        <div id="test1" key={key}>
-          TEST 1
-        </div>
-      ) : null,
+    render: ({ active }) => (active ? <div id="test1">TEST 1</div> : null),
   },
   test2: {
     title: 'Test 2',
     type: Addon_TypesEnum.PANEL,
-    render: ({ active, key }) =>
-      active ? (
-        <div id="test2" key={key}>
-          TEST 2
-        </div>
-      ) : null,
+    render: ({ active }) => (active ? <div id="test2">TEST 2</div> : null),
   },
 };
 

code/ui/manager/src/components/panel/panel.stories.tsx

@@ -37,12 +37,7 @@ export const JSXTitles = () => {
         'function-string': {
           type: Addon_TypesEnum.PANEL,
           title: () => 'Test 1',
-          render: ({ active, key }) =>
-            active ? (
-              <div id="test1" key={key}>
-                TEST as string
-              </div>
-            ) : null,
+          render: ({ active }) => (active ? <div id="test1">TEST as string</div> : null),
         },
         'function-jsx': {
           type: Addon_TypesEnum.PANEL,
@@ -54,12 +49,7 @@ export const JSXTitles = () => {
               </Spaced>
             </div>
           ),
-          render: ({ active, key }) =>
-            active ? (
-              <div id="test1" key={key}>
-                TEST with label
-              </div>
-            ) : null,
+          render: ({ active }) => (active ? <div id="test1">TEST with label</div> : null),
         },
         'function-jsx-icon': {
           type: Addon_TypesEnum.PANEL,
@@ -71,12 +61,7 @@ export const JSXTitles = () => {
               </Spaced>
             </div>
           ),
-          render: ({ active, key }) =>
-            active ? (
-              <div id="test1" key={key}>
-                TEST with label
-              </div>
-            ) : null,
+          render: ({ active }) => (active ? <div id="test1">TEST with label</div> : null),
         },
         'function-jsx-state': {
           type: Addon_TypesEnum.PANEL,
@@ -125,12 +110,8 @@ export const JSXTitles = () => {
               </div>
             );
           },
-          render: ({ active, key }) => {
-            return active ? (
-              <div id="test1" key={key}>
-                TEST with timer
-              </div>
-            ) : null;
+          render: ({ active }) => {
+            return active ? <div id="test1">TEST with timer</div> : null;
           },
         },
       }}