chore: refactor styles for Button

microsoft · Nov 1, 2022 · 0fe4903 · 0fe4903
1 parent c619ba0
commit 0fe4903
Show file tree

Hide file tree

Showing 4 changed files with 106 additions and 94 deletions.
diff --git a/change/@fluentui-react-button-9d2cbb68-9215-4318-ad2a-99ab636a11cd.json b/change/@fluentui-react-button-9d2cbb68-9215-4318-ad2a-99ab636a11cd.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "chore: refactor to use makeResetStyles",
+  "packageName": "@fluentui/react-button",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-components-b61e9cf0-13d7-4738-883a-48c34d57d26e.json b/change/@fluentui-react-components-b61e9cf0-13d7-4738-883a-48c34d57d26e.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "chore: add exports for CSS extraction in Griffel",
+  "packageName": "@fluentui/react-components",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/react-components/react-button/src/components/Button/useButtonStyles.ts b/packages/react-components/react-button/src/components/Button/useButtonStyles.ts
@@ -1,7 +1,7 @@
 import { iconFilledClassName, iconRegularClassName } from '@fluentui/react-icons';
 import { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';
 import { tokens } from '@fluentui/react-theme';
-import { shorthands, makeStyles, mergeClasses } from '@griffel/react';
+import { shorthands, makeStyles, makeResetStyles, mergeClasses } from '@griffel/react';
 import type { SlotClassNames } from '@fluentui/react-utilities';
 import type { ButtonSlots, ButtonState } from './Button.types';
 
@@ -15,93 +15,111 @@ const iconSpacingVar = '--fui-Button__icon--spacing';
 const buttonSpacingSmall = '3px';
 const buttonSpacingMedium = '5px';
 
-const useRootStyles = makeStyles({
-  // Base styles
-  base: {
-    alignItems: 'center',
-    boxSizing: 'border-box',
-    display: 'inline-flex',
-    justifyContent: 'center',
-    textDecorationLine: 'none',
-    verticalAlign: 'middle',
+const useBaseClassName = makeResetStyles({
+  alignItems: 'center',
+  boxSizing: 'border-box',
+  display: 'inline-flex',
+  justifyContent: 'center',
+  textDecorationLine: 'none',
+  verticalAlign: 'middle',
 
-    ...shorthands.margin(0),
+  margin: 0,
+  overflow: 'hidden',
 
-    ...shorthands.overflow('hidden'),
+  backgroundColor: tokens.colorNeutralBackground1,
+  color: tokens.colorNeutralForeground1,
+  border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke1}`,
 
-    backgroundColor: tokens.colorNeutralBackground1,
-    color: tokens.colorNeutralForeground1,
-    ...shorthands.border(tokens.strokeWidthThin, 'solid', tokens.colorNeutralStroke1),
+  fontFamily: tokens.fontFamilyBase,
+  outlineStyle: 'none',
 
-    fontFamily: tokens.fontFamilyBase,
+  ':hover': {
+    backgroundColor: tokens.colorNeutralBackground1Hover,
+    borderColor: tokens.colorNeutralStroke1Hover,
+    color: tokens.colorNeutralForeground1Hover,
 
-    outlineStyle: 'none',
-
-    ':hover': {
-      backgroundColor: tokens.colorNeutralBackground1Hover,
-      ...shorthands.borderColor(tokens.colorNeutralStroke1Hover),
-      color: tokens.colorNeutralForeground1Hover,
+    cursor: 'pointer',
 
-      cursor: 'pointer',
-
-      [`& .${iconFilledClassName}`]: {
-        display: 'inline',
-      },
-      [`& .${iconRegularClassName}`]: {
-        display: 'none',
-      },
+    [`& .${iconFilledClassName}`]: {
+      display: 'inline',
     },
+    [`& .${iconRegularClassName}`]: {
+      display: 'none',
+    },
+  },
 
-    ':hover:active': {
-      backgroundColor: tokens.colorNeutralBackground1Pressed,
-      ...shorthands.borderColor(tokens.colorNeutralStroke1Pressed),
-      color: tokens.colorNeutralForeground1Pressed,
+  ':hover:active': {
+    backgroundColor: tokens.colorNeutralBackground1Pressed,
+    borderColor: tokens.colorNeutralStroke1Pressed,
+    color: tokens.colorNeutralForeground1Pressed,
 
-      outlineStyle: 'none',
+    outlineStyle: 'none',
 
-      [`& .${iconFilledClassName}`]: {
-        display: 'inline',
-      },
-      [`& .${iconRegularClassName}`]: {
-        display: 'none',
-      },
+    [`& .${iconFilledClassName}`]: {
+      display: 'inline',
+    },
+    [`& .${iconRegularClassName}`]: {
+      display: 'none',
     },
   },
 
+  padding: `${buttonSpacingMedium} ${tokens.spacingHorizontalM}`,
+  minWidth: '96px',
+  borderRadius: tokens.borderRadiusMedium,
+
+  fontSize: tokens.fontSizeBase300,
+  fontWeight: tokens.fontWeightSemibold,
+  lineHeight: tokens.lineHeightBase300,
+
   // Transition styles
-  transition: {
-    transitionDuration: '100ms',
-    transitionProperty: 'background, border, color',
-    transitionTimingFunction: 'cubic-bezier(0.33, 0, 0.67, 1)',
 
-    '@media screen and (prefers-reduced-motion: reduce)': {
-      transitionDuration: '0.01ms',
-    },
+  transitionDuration: '100ms',
+  transitionProperty: 'background, border, color',
+  transitionTimingFunction: 'cubic-bezier(0.33, 0, 0.67, 1)',
+
+  '@media screen and (prefers-reduced-motion: reduce)': {
+    transitionDuration: '0.01ms',
   },
 
   // High contrast styles
-  highContrast: {
-    '@media (forced-colors: active)': {
-      ':focus': {
-        ...shorthands.borderColor('ButtonText'),
-      },
 
-      ':hover': {
-        backgroundColor: 'HighlightText',
-        ...shorthands.borderColor('Highlight'),
-        color: 'Highlight',
-        forcedColorAdjust: 'none',
-      },
+  '@media (forced-colors: active)': {
+    ':focus': {
+      borderColor: 'ButtonText',
+    },
 
-      ':hover:active': {
-        backgroundColor: 'HighlightText',
-        ...shorthands.borderColor('Highlight'),
-        color: 'Highlight',
-        forcedColorAdjust: 'none',
-      },
+    ':hover': {
+      backgroundColor: 'HighlightText',
+      borderColor: 'Highlight',
+      color: 'Highlight',
+      forcedColorAdjust: 'none',
+    },
+
+    ':hover:active': {
+      backgroundColor: 'HighlightText',
+      borderColor: 'Highlight',
+      color: 'Highlight',
+      forcedColorAdjust: 'none',
     },
   },
 
+  // Focus styles
+
+  ...createCustomFocusIndicatorStyle({
+    ...shorthands.borderColor(tokens.colorTransparentStroke),
+    ...shorthands.borderRadius(tokens.borderRadiusMedium),
+    outlineColor: tokens.colorTransparentStroke,
+    outlineWidth: tokens.strokeWidthThick,
+    outlineStyle: 'solid',
+    boxShadow: `
+      ${tokens.shadow4},
+      0 0 0 2px ${tokens.colorStrokeFocus2}
+    `,
+    zIndex: 1,
+  }),
+});
+
+const useRootStyles = makeStyles({
   // Appearance variations
   outline: {
     backgroundColor: tokens.colorTransparentBackground,
@@ -193,15 +211,7 @@ const useRootStyles = makeStyles({
     lineHeight: tokens.lineHeightBase200,
   },
   medium: {
-    ...shorthands.padding(buttonSpacingMedium, tokens.spacingHorizontalM),
-
-    minWidth: '96px',
-
-    ...shorthands.borderRadius(tokens.borderRadiusMedium),
-
-    fontSize: tokens.fontSizeBase300,
-    fontWeight: tokens.fontWeightSemibold,
-    lineHeight: tokens.lineHeightBase300,
+    /* defined in base styles */
   },
   large: {
     ...shorthands.padding(tokens.spacingVerticalS, tokens.spacingHorizontalL),
@@ -335,18 +345,6 @@ const useRootDisabledStyles = makeStyles({
 });
 
 const useRootFocusStyles = makeStyles({
-  base: createCustomFocusIndicatorStyle({
-    ...shorthands.borderColor(tokens.colorTransparentStroke),
-    outlineColor: tokens.colorTransparentStroke,
-    outlineWidth: tokens.strokeWidthThick,
-    outlineStyle: 'solid',
-    boxShadow: `
-      ${tokens.shadow4},
-      0 0 0 2px ${tokens.colorStrokeFocus2}
-    `,
-    zIndex: 1,
-  }),
-
   // Shape variations
   circular: createCustomFocusIndicatorStyle({
     ...shorthands.borderRadius(tokens.borderRadiusCircular),
@@ -368,9 +366,9 @@ const useRootFocusStyles = makeStyles({
   small: createCustomFocusIndicatorStyle({
     ...shorthands.borderRadius(tokens.borderRadiusSmall),
   }),
-  medium: createCustomFocusIndicatorStyle({
-    ...shorthands.borderRadius(tokens.borderRadiusMedium),
-  }),
+  medium: {
+    /* defined in base styles */
+  },
   large: createCustomFocusIndicatorStyle({
     ...shorthands.borderRadius(tokens.borderRadiusLarge),
   }),
@@ -450,6 +448,7 @@ const useIconStyles = makeStyles({
 });
 
 export const useButtonStyles_unstable = (state: ButtonState): ButtonState => {
+  const baseClassName = useBaseClassName();
   const rootStyles = useRootStyles();
   const rootDisabledStyles = useRootDisabledStyles();
   const rootFocusStyles = useRootFocusStyles();
@@ -460,12 +459,10 @@ export const useButtonStyles_unstable = (state: ButtonState): ButtonState => {
 
   state.root.className = mergeClasses(
     buttonClassNames.root,
+    baseClassName,
 
-    // Root styles
-    rootStyles.base,
-    rootStyles.transition,
-    rootStyles.highContrast,
     appearance && rootStyles[appearance],
+
     rootStyles[size],
     rootStyles[shape],
 
@@ -475,7 +472,6 @@ export const useButtonStyles_unstable = (state: ButtonState): ButtonState => {
     appearance && (disabled || disabledFocusable) && rootDisabledStyles[appearance],
 
     // Focus styles
-    rootFocusStyles.base,
     appearance === 'primary' && rootFocusStyles.primary,
     rootFocusStyles[size],
     rootFocusStyles[shape],

diff --git a/packages/react-components/react-components/src/index.ts b/packages/react-components/react-components/src/index.ts
@@ -2,6 +2,8 @@
 export {
   __css,
   __styles,
+  __resetStyles,
+  __resetCSS,
   createDOMRenderer,
   makeStaticStyles,
   makeStyles,