diff --git a/change/@fluentui-react-tags-preview-dc347c41-7d4f-4d1c-8915-938cbbadba34.json b/change/@fluentui-react-tags-preview-dc347c41-7d4f-4d1c-8915-938cbbadba34.json new file mode 100644 index 00000000000000..9a6c7ef154fbbc --- /dev/null +++ b/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" +} diff --git a/packages/react-components/react-tags-preview/src/components/InteractionTag/useInteractionTagStyles.styles.ts b/packages/react-components/react-tags-preview/src/components/InteractionTag/useInteractionTagStyles.styles.ts index c2dbc4644b669a..d2a604166835b0 100644 --- a/packages/react-components/react-tags-preview/src/components/InteractionTag/useInteractionTagStyles.styles.ts +++ b/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 = { 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, diff --git a/packages/react-components/react-tags-preview/src/components/InteractionTagPrimary/useInteractionTagPrimaryStyles.styles.ts b/packages/react-components/react-tags-preview/src/components/InteractionTagPrimary/useInteractionTagPrimaryStyles.styles.ts index d072e495c7ee61..d4bed543083aa7 100644 --- a/packages/react-components/react-tags-preview/src/components/InteractionTagPrimary/useInteractionTagPrimaryStyles.styles.ts +++ b/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 { + 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, ); } diff --git a/packages/react-components/react-tags-preview/src/components/InteractionTagSecondary/useInteractionTagSecondaryStyles.styles.ts b/packages/react-components/react-tags-preview/src/components/InteractionTagSecondary/useInteractionTagSecondaryStyles.styles.ts index eda203e715e876..bfcf73932a4ffd 100644 --- a/packages/react-components/react-tags-preview/src/components/InteractionTagSecondary/useInteractionTagSecondaryStyles.styles.ts +++ b/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,6 +130,7 @@ const useRootDisabledStyles = makeStyles({ export const useInteractionTagSecondaryStyles_unstable = ( state: InteractionTagSecondaryState, ): InteractionTagSecondaryState => { + const rootBaseClassName = useRootBaseClassName(); const rootStyles = useRootStyles(); const rootDisabledStyles = useRootDisabledStyles(); @@ -137,7 +138,7 @@ export const useInteractionTagSecondaryStyles_unstable = ( state.root.className = mergeClasses( interactionTagSecondaryClassNames.root, - rootStyles.base, + rootBaseClassName, state.disabled ? rootDisabledStyles[appearance] : rootStyles[appearance], rootStyles[shape], rootStyles[size], diff --git a/packages/react-components/react-tags-preview/src/components/Tag/useTagStyles.styles.ts b/packages/react-components/react-tags-preview/src/components/Tag/useTagStyles.styles.ts index 06338e12c6d2e0..4f3f93469225d3 100644 --- a/packages/react-components/react-tags-preview/src/components/Tag/useTagStyles.styles.ts +++ b/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, ); }