bugfix(react-tag-picker): regression from #33689

Author: bsunderhus

change/@fluentui-react-tag-picker-47947df9-46a1-4b10-b5b4-30965038a3c8.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "bugfix: regression from #33689",
+  "packageName": "@fluentui/react-tag-picker",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

packages/react-components/react-tag-picker/library/src/components/TagPickerOption/useTagPickerOptionStyles.styles.ts

@@ -1,4 +1,4 @@
-import { makeStyles, mergeClasses } from '@griffel/react';
+import { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';
 import type { SlotClassNames } from '@fluentui/react-utilities';
 import type { TagPickerOptionSlots, TagPickerOptionState } from './TagPickerOption.types';
 import { useOptionStyles_unstable } from '@fluentui/react-combobox';
@@ -10,25 +10,26 @@ export const tagPickerOptionClassNames: SlotClassNames<TagPickerOptionSlots> = {
   secondaryContent: 'fui-TagPickerOption__secondaryContent',
 };
 
-/**
- * Styles for the root slot
- */
-const useStyles = makeStyles({
-  root: {
+const useRootBaseStyle = makeResetStyles({
+  display: 'flex',
+  alignItems: 'center',
+});
+
+const useRootStyles = makeStyles({
+  secondaryContent: {
     display: 'grid',
     gridTemplateColumns: 'auto 1fr',
-    alignItems: 'center',
   },
+});
 
-  secondaryContent: {
-    gridColumnStart: 2,
-    gridRowStart: 2,
-    ...typographyStyles.caption1,
-  },
+const useSecondaryContentBaseStyle = makeResetStyles({
+  gridColumnStart: 2,
+  gridRowStart: 2,
+  ...typographyStyles.caption1,
+});
 
-  media: {
-    gridRowStart: 'span 2',
-  },
+const useMediaBaseStyle = makeResetStyles({
+  gridRowStart: 'span 2',
 });
 
 /**
@@ -37,9 +38,17 @@ const useStyles = makeStyles({
 export const useTagPickerOptionStyles_unstable = (state: TagPickerOptionState): TagPickerOptionState => {
   'use no memo';
 
-  const styles = useStyles();
+  const rootBaseStyle = useRootBaseStyle();
+  const rootStyles = useRootStyles();
+  const secondaryContentBaseStyle = useSecondaryContentBaseStyle();
+  const mediaBaseStyle = useMediaBaseStyle();
 
-  state.root.className = mergeClasses(tagPickerOptionClassNames.root, styles.root, state.root.className);
+  state.root.className = mergeClasses(
+    tagPickerOptionClassNames.root,
+    rootBaseStyle,
+    state.secondaryContent && rootStyles.secondaryContent,
+    state.root.className,
+  );
   useOptionStyles_unstable({
     ...state,
     active: false,
@@ -49,13 +58,13 @@ export const useTagPickerOptionStyles_unstable = (state: TagPickerOptionState):
     selected: false,
   });
   if (state.media) {
-    state.media.className = mergeClasses(tagPickerOptionClassNames.media, styles.media, state.media.className);
+    state.media.className = mergeClasses(tagPickerOptionClassNames.media, mediaBaseStyle, state.media.className);
   }
 
   if (state.secondaryContent) {
     state.secondaryContent.className = mergeClasses(
       tagPickerOptionClassNames.secondaryContent,
-      styles.secondaryContent,
+      secondaryContentBaseStyle,
       state.secondaryContent.className,
     );
   }

packages/react-components/react-tag-picker/stories/src/TagPicker/TagPickerDefault.stories.tsx

@@ -53,7 +53,6 @@ export const Default = () => {
           {tagPickerOptions.length > 0 ? (
             tagPickerOptions.map(option => (
               <TagPickerOption
-                secondaryContent="Microsoft FTE"
                 media={<Avatar shape="square" aria-hidden name={option} color="colorful" />}
                 value={option}
                 key={option}