bugfix: secondaryContent not displaying properly

microsoft · Jan 20, 2025 · 639e599 · 639e599
1 parent cc1756e
commit 639e599
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 3 deletions.
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
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "bugfix: secondaryContent not displaying properly",
+  "packageName": "@fluentui/react-tag-picker",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}
diff --git a/...eact-tag-picker/library/src/components/TagPickerOption/useTagPickerOptionStyles.styles.ts b/...eact-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);
   }