From 300ae3149902429c66ba3d35a6fbe6cff5c03e04 Mon Sep 17 00:00:00 2001
From: Bernardo Sunderhus <bernardo.sunderhus@gmail.com>
Date: Thu, 30 Jan 2025 09:29:29 +0100
Subject: [PATCH] bugfix(react-tag-picker): regression from #33689

---
 ...-47947df9-46a1-4b10-b5b4-30965038a3c8.json |  7 +++
 .../useTagPickerOptionStyles.styles.ts        | 47 +++++++++++--------
 .../TagPicker/TagPickerDefault.stories.tsx    |  1 -
 3 files changed, 35 insertions(+), 20 deletions(-)
 create mode 100644 change/@fluentui-react-tag-picker-47947df9-46a1-4b10-b5b4-30965038a3c8.json

diff --git a/change/@fluentui-react-tag-picker-47947df9-46a1-4b10-b5b4-30965038a3c8.json b/change/@fluentui-react-tag-picker-47947df9-46a1-4b10-b5b4-30965038a3c8.json
new file mode 100644
index 00000000000000..05f5bfc1c579e2
--- /dev/null
+++ b/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": "bernardo.sunderhus@gmail.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/react-components/react-tag-picker/library/src/components/TagPickerOption/useTagPickerOptionStyles.styles.ts b/packages/react-components/react-tag-picker/library/src/components/TagPickerOption/useTagPickerOptionStyles.styles.ts
index c8b27a0f42eb16..15e15148601f88 100644
--- a/packages/react-components/react-tag-picker/library/src/components/TagPickerOption/useTagPickerOptionStyles.styles.ts
+++ b/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,
     );
   }
diff --git a/packages/react-components/react-tag-picker/stories/src/TagPicker/TagPickerDefault.stories.tsx b/packages/react-components/react-tag-picker/stories/src/TagPicker/TagPickerDefault.stories.tsx
index 9349c5c141a53f..d9587f8760e2d3 100644
--- a/packages/react-components/react-tag-picker/stories/src/TagPicker/TagPickerDefault.stories.tsx
+++ b/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}