diff --git a/change/@fluentui-react-94a6046f-d21a-4386-9830-79921b5d4337.json b/change/@fluentui-react-94a6046f-d21a-4386-9830-79921b5d4337.json new file mode 100644 index 0000000000000..fe47255a1a839 --- /dev/null +++ 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 index 3caa6aa3d37fb..259f45c7a26fc 100644 --- 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 ( - {stackChildren} + {stackChildren} ); } diff --git a/packages/react/src/components/TeachingBubble/__snapshots__/TeachingBubble.deprecated.test.tsx.snap b/packages/react/src/components/TeachingBubble/__snapshots__/TeachingBubble.deprecated.test.tsx.snap index 538429c8d9bda..1cadc860cd9c6 100644 --- a/packages/react/src/components/TeachingBubble/__snapshots__/TeachingBubble.deprecated.test.tsx.snap +++ b/packages/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 @@ -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 diff --git a/packages/react/src/components/TeachingBubble/__snapshots__/TeachingBubble.test.tsx.snap b/packages/react/src/components/TeachingBubble/__snapshots__/TeachingBubble.test.tsx.snap index 9fd15c657e6be..15cbda84535c9 100644 --- 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 @@ -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