chore(react-tags-preview): use makeResetStyles for base styles

change/@fluentui-react-tags-preview-dc347c41-7d4f-4d1c-8915-938cbbadba34.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "chore: use makeResetStyles to reduce classNames",
+  "packageName": "@fluentui/react-tags-preview",
+  "email": "yuanboxue@microsoft.com",
+  "dependentChangeType": "patch"
+}

packages/react-components/react-tags-preview/src/components/InteractionTag/useInteractionTagStyles.styles.ts

@@ -1,4 +1,4 @@
-import { makeStyles, mergeClasses, shorthands } from '@griffel/react';
+import { makeResetStyles, makeStyles, mergeClasses, shorthands } from '@griffel/react';
 import type { InteractionTagSlots, InteractionTagState } from './InteractionTag.types';
 import type { SlotClassNames } from '@fluentui/react-utilities';
 import { tokens } from '@fluentui/react-theme';
@@ -7,14 +7,14 @@ export const interactionTagClassNames: SlotClassNames<InteractionTagSlots> = {
   root: 'fui-InteractionTag',
 };
 
-const useRootStyles = makeStyles({
-  base: {
-    display: 'inline-flex',
-    alignItems: 'center',
-    boxSizing: 'border-box',
-    width: 'fit-content',
-  },
+const useRootBaseClassName = makeResetStyles({
+  display: 'inline-flex',
+  alignItems: 'center',
+  boxSizing: 'border-box',
+  width: 'fit-content',
+});
 
+const useRootStyles = makeStyles({
   rounded: shorthands.borderRadius(tokens.borderRadiusMedium),
   circular: shorthands.borderRadius(tokens.borderRadiusCircular),
 
@@ -33,13 +33,14 @@ const useRootStyles = makeStyles({
  * Apply styling to the InteractionTag slots based on the state
  */
 export const useInteractionTagStyles_unstable = (state: InteractionTagState): InteractionTagState => {
+  const rootBaseClassName = useRootBaseClassName();
   const rootStyles = useRootStyles();
 
   const { shape, size } = state;
 
   state.root.className = mergeClasses(
     interactionTagClassNames.root,
-    rootStyles.base,
+    rootBaseClassName,
     rootStyles[shape],
     rootStyles[size],
     state.root.className,

packages/react-components/react-tags-preview/src/components/InteractionTagPrimary/useInteractionTagPrimaryStyles.styles.ts

@@ -1,4 +1,4 @@
-import { makeStyles, mergeClasses, shorthands } from '@griffel/react';
+import { makeResetStyles, makeStyles, mergeClasses, shorthands } from '@griffel/react';
 import type { InteractionTagPrimarySlots, InteractionTagPrimaryState } from './InteractionTagPrimary.types';
 import type { SlotClassNames } from '@fluentui/react-utilities';
 import { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';
@@ -8,7 +8,7 @@ import {
   useIconStyles,
   useMediaStyles,
   usePrimaryTextStyles,
-  useSecondaryTextStyles,
+  useSecondaryTextBaseClassName,
   useTagWithSecondaryTextContrastStyles,
 } from '../Tag/useTagStyles.styles';
 
@@ -20,34 +20,32 @@ export const interactionTagPrimaryClassNames: SlotClassNames<InteractionTagPrima
   secondaryText: 'fui-InteractionTagPrimary__secondaryText',
 };
 
-const useRootStyles = makeStyles({
-  base: {
-    // TODO use makeResetStyle when styles are settled
-
-    // reset default button style:
-    color: 'inherit',
-    fontFamily: 'inherit',
-    ...shorthands.padding(0),
-    ...shorthands.borderStyle('none'),
-    appearance: 'button',
-    textAlign: 'unset',
-    backgroundColor: 'transparent',
-
-    display: 'inline-grid',
-    height: '100%',
-    alignItems: 'center',
-    gridTemplateAreas: `
-    "media primary  "
-    "media secondary"
-    `,
-
-    ...shorthands.border(tokens.strokeWidthThin, 'solid', tokens.colorTransparentStroke),
-    ...createCustomFocusIndicatorStyle({
-      ...shorthands.outline(tokens.strokeWidthThick, 'solid', tokens.colorStrokeFocus2),
-      zIndex: 1,
-    }),
-  },
+const useRootBaseClassName = makeResetStyles({
+  // reset default button style:
+  color: 'inherit',
+  fontFamily: 'inherit',
+  padding: '0px',
+  borderStyle: 'none',
+  appearance: 'button',
+  textAlign: 'unset',
+  backgroundColor: 'transparent',
+
+  display: 'inline-grid',
+  height: '100%',
+  alignItems: 'center',
+  gridTemplateAreas: `
+  "media primary  "
+  "media secondary"
+  `,
+
+  border: `${tokens.strokeWidthThin} solid ${tokens.colorTransparentStroke}`,
+  ...createCustomFocusIndicatorStyle({
+    ...shorthands.outline(tokens.strokeWidthThick, 'solid', tokens.colorStrokeFocus2),
+    zIndex: 1,
+  }),
+});
 
+const useRootStyles = makeStyles({
   filled: {
     backgroundColor: tokens.colorNeutralBackground3,
     color: tokens.colorNeutralForeground2,
@@ -180,6 +178,7 @@ const useRootWithSecondaryActionStyles = makeStyles({
 export const useInteractionTagPrimaryStyles_unstable = (
   state: InteractionTagPrimaryState,
 ): InteractionTagPrimaryState => {
+  const rootBaseClassName = useRootBaseClassName();
   const rootStyles = useRootStyles();
   const rootDisabledAppearances = useRootDisabledAppearances();
   const rootWithoutMediaStyles = useRootWithoutMediaStyles();
@@ -188,7 +187,7 @@ export const useInteractionTagPrimaryStyles_unstable = (
   const iconStyles = useIconStyles();
   const mediaStyles = useMediaStyles();
   const primaryTextStyles = usePrimaryTextStyles();
-  const secondaryTextStyles = useSecondaryTextStyles();
+  const secondaryTextBaseClassName = useSecondaryTextBaseClassName();
 
   const tagWithSecondaryTextContrastStyles = useTagWithSecondaryTextContrastStyles();
 
@@ -197,7 +196,7 @@ export const useInteractionTagPrimaryStyles_unstable = (
   state.root.className = mergeClasses(
     interactionTagPrimaryClassNames.root,
 
-    rootStyles.base,
+    rootBaseClassName,
     state.disabled ? rootDisabledAppearances[appearance] : rootStyles[appearance],
     rootStyles[shape],
     rootStyles[size],
@@ -242,7 +241,7 @@ export const useInteractionTagPrimaryStyles_unstable = (
   if (state.secondaryText) {
     state.secondaryText.className = mergeClasses(
       interactionTagPrimaryClassNames.secondaryText,
-      secondaryTextStyles.base,
+      secondaryTextBaseClassName,
       state.secondaryText.className,
     );
   }

packages/react-components/react-tags-preview/src/components/InteractionTagSecondary/useInteractionTagSecondaryStyles.styles.ts

@@ -1,4 +1,4 @@
-import { makeStyles, mergeClasses, shorthands } from '@griffel/react';
+import { makeResetStyles, makeStyles, mergeClasses, shorthands } from '@griffel/react';
 import type { InteractionTagSecondarySlots, InteractionTagSecondaryState } from './InteractionTagSecondary.types';
 import type { SlotClassNames } from '@fluentui/react-utilities';
 import { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';
@@ -12,31 +12,31 @@ const mediumIconSize = '20px';
 const smallIconSize = '16px';
 const extraSmallIconSize = '12px';
 
-const useRootStyles = makeStyles({
-  base: {
-    // reset default button style:
-    color: 'inherit',
-    fontFamily: 'inherit',
-    ...shorthands.padding(0),
-    ...shorthands.borderStyle('none'),
-    appearance: 'button',
-    textAlign: 'unset',
-    backgroundColor: 'transparent',
+const useRootBaseClassName = makeResetStyles({
+  // reset default button style:
+  color: 'inherit',
+  fontFamily: 'inherit',
+  padding: '0px',
+  borderStyle: 'none',
+  appearance: 'button',
+  textAlign: 'unset',
+  backgroundColor: 'transparent',
 
-    display: 'flex',
-    height: '100%',
-    alignItems: 'center',
+  display: 'flex',
+  height: '100%',
+  alignItems: 'center',
 
-    ...createCustomFocusIndicatorStyle(shorthands.outline(tokens.strokeWidthThick, 'solid', tokens.colorStrokeFocus2)),
+  ...createCustomFocusIndicatorStyle(shorthands.outline(tokens.strokeWidthThick, 'solid', tokens.colorStrokeFocus2)),
 
-    ...shorthands.border(tokens.strokeWidthThin, 'solid', tokens.colorTransparentStroke),
+  border: `${tokens.strokeWidthThin} solid ${tokens.colorTransparentStroke}`,
 
-    // divider:
-    borderLeftColor: tokens.colorNeutralStroke1,
-    borderTopLeftRadius: tokens.borderRadiusNone,
-    borderBottomLeftRadius: tokens.borderRadiusNone,
-  },
+  // divider:
+  borderLeftColor: tokens.colorNeutralStroke1,
+  borderTopLeftRadius: tokens.borderRadiusNone,
+  borderBottomLeftRadius: tokens.borderRadiusNone,
+});
 
+const useRootStyles = makeStyles({
   filled: {
     backgroundColor: tokens.colorNeutralBackground3,
     color: tokens.colorNeutralForeground2,
@@ -130,14 +130,15 @@ const useRootDisabledStyles = makeStyles({
 export const useInteractionTagSecondaryStyles_unstable = (
   state: InteractionTagSecondaryState,
 ): InteractionTagSecondaryState => {
+  const rootBaseClassName = useRootBaseClassName();
   const rootStyles = useRootStyles();
   const rootDisabledStyles = useRootDisabledStyles();
 
   const { shape, size, appearance } = state;
 
   state.root.className = mergeClasses(
     interactionTagSecondaryClassNames.root,
-    rootStyles.base,
+    rootBaseClassName,
     state.disabled ? rootDisabledStyles[appearance] : rootStyles[appearance],
     rootStyles[shape],
     rootStyles[size],

packages/react-components/react-tags-preview/src/components/Tag/useTagStyles.styles.ts

@@ -1,4 +1,4 @@
-import { makeStyles, mergeClasses, shorthands } from '@griffel/react';
+import { makeResetStyles, makeStyles, mergeClasses, shorthands } from '@griffel/react';
 import type { TagSlots, TagState } from './Tag.types';
 import type { SlotClassNames } from '@fluentui/react-utilities';
 import { tokens, typographyStyles } from '@fluentui/react-theme';
@@ -24,28 +24,26 @@ const mediumIconSize = '20px';
 const smallIconSize = '16px';
 const extraSmallIconSize = '12px';
 
-const useRootStyles = makeStyles({
-  base: {
-    // TODO use makeResetStyle when styles are settled
-
-    // reset default button style:
-    fontFamily: 'inherit',
-    ...shorthands.padding(0),
-    appearance: 'button',
-    textAlign: 'unset',
-
-    display: 'inline-grid',
-    alignItems: 'center',
-    gridTemplateAreas: `
-    "media primary   dismissIcon"
-    "media secondary dismissIcon"
-    `,
-    boxSizing: 'border-box',
-    width: 'fit-content',
-
-    ...shorthands.border(tokens.strokeWidthThin, 'solid', tokens.colorTransparentStroke),
-  },
+const useRootBaseClassName = makeResetStyles({
+  // reset default button style:
+  fontFamily: 'inherit',
+  padding: '0px',
+  appearance: 'button',
+  textAlign: 'unset',
+
+  display: 'inline-grid',
+  alignItems: 'center',
+  gridTemplateAreas: `
+  "media primary   dismissIcon"
+  "media secondary dismissIcon"
+  `,
+  boxSizing: 'border-box',
+  width: 'fit-content',
+
+  border: `${tokens.strokeWidthThin} solid ${tokens.colorTransparentStroke}`,
+});
 
+const useRootStyles = makeStyles({
   filled: {
     backgroundColor: tokens.colorNeutralBackground3,
     color: tokens.colorNeutralForeground2,
@@ -295,20 +293,19 @@ export const useTagWithSecondaryTextContrastStyles = makeStyles({
   },
 });
 
-export const useSecondaryTextStyles = makeStyles({
-  base: {
-    ...shorthands.gridArea('secondary'),
-    paddingLeft: tokens.spacingHorizontalXXS,
-    paddingRight: tokens.spacingHorizontalXXS,
-    ...typographyStyles.caption2,
-    whiteSpace: 'nowrap',
-  },
+export const useSecondaryTextBaseClassName = makeResetStyles({
+  gridArea: 'secondary',
+  paddingLeft: tokens.spacingHorizontalXXS,
+  paddingRight: tokens.spacingHorizontalXXS,
+  ...typographyStyles.caption2,
+  whiteSpace: 'nowrap',
 });
 
 /**
  * Apply styling to the Tag slots based on the state
  */
 export const useTagStyles_unstable = (state: TagState): TagState => {
+  const rootBaseClassName = useRootBaseClassName();
   const rootStyles = useRootStyles();
   const rootDisabledStyles = useRootDisabledStyles();
   const rootWithoutMediaStyles = useRootWithoutMediaStyles();
@@ -318,7 +315,7 @@ export const useTagStyles_unstable = (state: TagState): TagState => {
   const mediaStyles = useMediaStyles();
   const dismissIconStyles = useDismissIconStyles();
   const primaryTextStyles = usePrimaryTextStyles();
-  const secondaryTextStyles = useSecondaryTextStyles();
+  const secondaryTextBaseClassName = useSecondaryTextBaseClassName();
 
   const tagWithSecondaryTextContrastStyles = useTagWithSecondaryTextContrastStyles();
 
@@ -327,7 +324,7 @@ export const useTagStyles_unstable = (state: TagState): TagState => {
   state.root.className = mergeClasses(
     tagClassNames.root,
 
-    rootStyles.base,
+    rootBaseClassName,
 
     state.disabled ? rootDisabledStyles[appearance] : rootStyles[appearance],
     rootStyles[shape],
@@ -367,7 +364,7 @@ export const useTagStyles_unstable = (state: TagState): TagState => {
   if (state.secondaryText) {
     state.secondaryText.className = mergeClasses(
       tagClassNames.secondaryText,
-      secondaryTextStyles.base,
+      secondaryTextBaseClassName,
       state.secondaryText.className,
     );
   }