chore: Adding key to inner slot in Stack component (#33578)

microsoft · Jan 7, 2025 · 8f76392 · 8f76392
1 parent 384df0c
commit 8f76392
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 5 deletions.
diff --git a/change/@fluentui-react-94a6046f-d21a-4386-9830-79921b5d4337.json b/change/@fluentui-react-94a6046f-d21a-4386-9830-79921b5d4337.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "chore: Adding key to inner slot in Stack component.",
+  "packageName": "@fluentui/react",
+  "email": "Humberto.Morimoto@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/react/src/components/Stack/Stack.tsx b/packages/react/src/components/Stack/Stack.tsx
@@ -2,6 +2,7 @@
 /** @jsx withSlots */
 import * as React from 'react';
 import { withSlots, createComponent, getSlots } from '@fluentui/foundation-legacy';
+import { useId } from '@fluentui/react-hooks';
 import { css, getNativeProps, htmlElementProperties, warnDeprecations } from '../../Utilities';
 import { styles, GlobalClassNames as StackGlobalClassNames } from './Stack.styles';
 import { StackItem } from './StackItem/StackItem';
@@ -26,6 +27,8 @@ const StackView: IStackComponent['view'] = props => {
     padding: 'tokens.padding',
   });
 
+  const stackInnerId = useId('stack-inner');
+
   const stackChildren = _processStackChildren(props.children, {
     disableShrink,
     enableScopedSelectors,
@@ -42,7 +45,7 @@ const StackView: IStackComponent['view'] = props => {
   if (wrap) {
     return (
       <Slots.root {...nativeProps}>
-        <Slots.inner>{stackChildren}</Slots.inner>
+        <Slots.inner key={stackInnerId}>{stackChildren}</Slots.inner>
       </Slots.root>
     );
   }

diff --git a/...react/src/components/TeachingBubble/__snapshots__/TeachingBubble.deprecated.test.tsx.snap b/...react/src/components/TeachingBubble/__snapshots__/TeachingBubble.deprecated.test.tsx.snap
@@ -326,7 +326,7 @@ exports[`TeachingBubble renders renders with hasCloseIcon which is deprecated 1`
                         margin-right: 4px;
                         margin-top: 0;
                       }
-                  id="id__3"
+                  id="id__4"
                 >
                   Test Primary Button
                 </span>
@@ -481,7 +481,7 @@ exports[`TeachingBubble renders renders with hasCloseIcon which is deprecated 1`
                         margin-right: 4px;
                         margin-top: 0;
                       }
-                  id="id__6"
+                  id="id__7"
                 >
                   Test Secondary Button
                 </span>

diff --git a/packages/react/src/components/TeachingBubble/__snapshots__/TeachingBubble.test.tsx.snap b/packages/react/src/components/TeachingBubble/__snapshots__/TeachingBubble.test.tsx.snap
@@ -610,7 +610,7 @@ exports[`TeachingBubble renders TeachingBubbleContent with buttons correctly 1`]
                         margin-right: 4px;
                         margin-top: 0;
                       }
-                  id="id__3"
+                  id="id__4"
                 >
                   Test Primary Button
                 </span>
@@ -765,7 +765,7 @@ exports[`TeachingBubble renders TeachingBubbleContent with buttons correctly 1`]
                         margin-right: 4px;
                         margin-top: 0;
                       }
-                  id="id__6"
+                  id="id__7"
                 >
                   Test Secondary Button
                 </span>