From 639e5992eec320c673aaa9eef42ee96e8e2d4e82 Mon Sep 17 00:00:00 2001
From: Bernardo Sunderhus <bernardo.sunderhus@gmail.com>
Date: Mon, 20 Jan 2025 11:36:04 +0100
Subject: [PATCH] bugfix: secondaryContent not displaying properly

---
 ...t-tag-picker-f788c84a-933e-4291-9111-2a6187517663.json | 7 +++++++
 .../TagPickerOption/useTagPickerOptionStyles.styles.ts    | 8 +++++---
 2 files changed, 12 insertions(+), 3 deletions(-)
 create mode 100644 change/@fluentui-react-tag-picker-f788c84a-933e-4291-9111-2a6187517663.json

diff --git a/change/@fluentui-react-tag-picker-f788c84a-933e-4291-9111-2a6187517663.json b/change/@fluentui-react-tag-picker-f788c84a-933e-4291-9111-2a6187517663.json
new file mode 100644
index 00000000000000..3f3abb7239db9f
--- /dev/null
+++ b/change/@fluentui-react-tag-picker-f788c84a-933e-4291-9111-2a6187517663.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "bugfix: secondaryContent not displaying properly",
+  "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 d9ae8758f70399..c8b27a0f42eb16 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
@@ -2,6 +2,7 @@ import { 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';
+import { typographyStyles } from '@fluentui/react-theme';
 
 export const tagPickerOptionClassNames: SlotClassNames<TagPickerOptionSlots> = {
   root: 'fui-TagPickerOption',
@@ -22,6 +23,7 @@ const useStyles = makeStyles({
   secondaryContent: {
     gridColumnStart: 2,
     gridRowStart: 2,
+    ...typographyStyles.caption1,
   },
 
   media: {
@@ -35,6 +37,9 @@ const useStyles = makeStyles({
 export const useTagPickerOptionStyles_unstable = (state: TagPickerOptionState): TagPickerOptionState => {
   'use no memo';
 
+  const styles = useStyles();
+
+  state.root.className = mergeClasses(tagPickerOptionClassNames.root, styles.root, state.root.className);
   useOptionStyles_unstable({
     ...state,
     active: false,
@@ -43,9 +48,6 @@ export const useTagPickerOptionStyles_unstable = (state: TagPickerOptionState):
     checkIcon: undefined,
     selected: false,
   });
-  const styles = useStyles();
-
-  state.root.className = mergeClasses(tagPickerOptionClassNames.root, styles.root, state.root.className);
   if (state.media) {
     state.media.className = mergeClasses(tagPickerOptionClassNames.media, styles.media, state.media.className);
   }