From 0fe4903d9d2d932e20c790e25683da7179758c24 Mon Sep 17 00:00:00 2001 From: Oleksandr Fediashov Date: Thu, 13 Oct 2022 15:57:13 +0200 Subject: [PATCH] chore: refactor styles for Button --- ...-9d2cbb68-9215-4318-ad2a-99ab636a11cd.json | 7 + ...-b61e9cf0-13d7-4738-883a-48c34d57d26e.json | 7 + .../src/components/Button/useButtonStyles.ts | 184 +++++++++--------- .../react-components/src/index.ts | 2 + 4 files changed, 106 insertions(+), 94 deletions(-) create mode 100644 change/@fluentui-react-button-9d2cbb68-9215-4318-ad2a-99ab636a11cd.json create mode 100644 change/@fluentui-react-components-b61e9cf0-13d7-4738-883a-48c34d57d26e.json diff --git a/change/@fluentui-react-button-9d2cbb68-9215-4318-ad2a-99ab636a11cd.json b/change/@fluentui-react-button-9d2cbb68-9215-4318-ad2a-99ab636a11cd.json new file mode 100644 index 00000000000000..b7e5109694631b --- /dev/null +++ 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": "olfedias@microsoft.com", + "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 new file mode 100644 index 00000000000000..438ab4abb3a0ce --- /dev/null +++ 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": "olfedias@microsoft.com", + "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 index 148daa26a7d2d8..78438b0a3db250 100644 --- 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 index d0a6c3c32f7fcb..473e933431c869 100644 --- 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,