From ddd5193201a540d8753fbe70480303e13a2d3c9d Mon Sep 17 00:00:00 2001 From: Oleksandr Fediashov Date: Mon, 8 Nov 2021 12:17:42 +0100 Subject: [PATCH] fix(react-switch): update styles to not use CSS shorthands --- ...-96098242-67b8-4fd3-84a1-0852fe1ce386.json | 7 + packages/react-switch/src/Switch.stories.tsx | 181 +----------------- .../src/components/Switch/useSwitchStyles.ts | 54 +++--- 3 files changed, 38 insertions(+), 204 deletions(-) create mode 100644 change/@fluentui-react-switch-96098242-67b8-4fd3-84a1-0852fe1ce386.json diff --git a/change/@fluentui-react-switch-96098242-67b8-4fd3-84a1-0852fe1ce386.json b/change/@fluentui-react-switch-96098242-67b8-4fd3-84a1-0852fe1ce386.json new file mode 100644 index 00000000000000..782739479b6bb3 --- /dev/null +++ b/change/@fluentui-react-switch-96098242-67b8-4fd3-84a1-0852fe1ce386.json @@ -0,0 +1,7 @@ +{ + "type": "prerelease", + "comment": "update styles to not use CSS shorthands", + "packageName": "@fluentui/react-switch", + "email": "olfedias@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/packages/react-switch/src/Switch.stories.tsx b/packages/react-switch/src/Switch.stories.tsx index 70d40b95ece58f..78937d533698e4 100644 --- a/packages/react-switch/src/Switch.stories.tsx +++ b/packages/react-switch/src/Switch.stories.tsx @@ -1,13 +1,5 @@ import * as React from 'react'; -import { makeStyles } from '@fluentui/react-make-styles'; -// https://github.com/microsoft/fluentui/pull/18695#issuecomment-868432982 -// eslint-disable-next-line @typescript-eslint/ban-ts-comment -// @ts-ignore -import { teamsLightTheme } from '@fluentui/react-theme'; -// https://github.com/microsoft/fluentui/pull/18695#issuecomment-868432982 -// eslint-disable-next-line @typescript-eslint/ban-ts-comment -// @ts-ignore -import { FluentProvider } from '@fluentui/react-provider'; +import { shorthands, makeStyles } from '@fluentui/react-make-styles'; import { Switch, SwitchProps } from './components/Switch/index'; // https://github.com/microsoft/fluentui/pull/18695#issuecomment-868432982 // eslint-disable-next-line @typescript-eslint/ban-ts-comment @@ -19,145 +11,7 @@ const useStyles = makeStyles({ root: { display: 'flex', flexDirection: 'column', - gap: '10px', - }, -}); - -const useIosStyles = makeStyles({ - root: { - width: '50px', - height: '30px', - - ':hover .fui-Switch-thumb': { - ':before': { - background: 'white', - }, - }, - - ':active .fui-Switch-thumb': { - ':before': { - background: 'white', - }, - }, - - ':hover .fui-Switch-track': { - // Unchecked - ':before': { - borderColor: 'none', - }, - - // Checked - ':after': { - background: '#4cd964', - }, - }, - - ':active .fui-Switch-track': { - ':before': { - borderColor: 'none', - }, - ':after': { - background: '#4cd964', - }, - }, - }, - - thumbWrapper: { - left: 'calc(26px * .56)', - right: 'calc(26px * .56)', - }, - - thumb: { - width: '27px', - height: '27px', - boxShadow: ` - 0px 3px 8px 0px rgba(0, 0, 0, 0.15), - 0px 3px 1px 0px rgba(0, 0, 0, 0.06) - `, - ':before': { - opacity: 1, - background: 'white', - }, - ':after': { - opacity: 1, - background: 'white', - }, - }, - - track: { - ':after': { - background: '#4cd964', - border: 'none', - }, - ':before': { - background: 'white', - border: '1px solid #e0e0e0', - }, - }, -}); - -const useMaterialStyles = makeStyles({ - root: { - width: '34px', - height: '14px', - - ':hover .fui-Switch-thumb': { - ':before': { - background: 'white', - }, - ':after': { - background: '#f50057', - }, - }, - - ':hover .fui-Switch-track': { - ':before': { - background: '#9f9f9f', - }, - ':after': { - background: '#fa80ab', - border: 'none', - }, - }, - - ':active .fui-Switch-track': { - ':before': { - background: '#9f9f9f', - }, - ':after': { - background: '#fa80ab', - border: 'none', - }, - }, - }, - - thumbWrapper: { - transition: 'transform 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms', - left: 'calc(20px * .4)', - right: 'calc(20px * .4)', - }, - - thumb: { - width: '20px', - height: '20px', - boxShadow: '0px 2px 1px -1px rgb(0 0 0 / 20%), 0px 1px 1px 0px rgb(0 0 0 / 14%), 0px 1px 3px 0px rgb(0 0 0 / 12%)', - ':before': { - background: 'white', - }, - ':after': { - background: '#f50057', - }, - }, - - track: { - ':before': { - background: '#9f9f9f', - border: 'none', - }, - ':after': { - background: '#fa80ab', - border: 'none', - }, + ...shorthands.gap('10px'), }, }); @@ -183,37 +37,6 @@ export const BasicSwitchExample = (props: SwitchProps) => { ); }; -export const CustomSwitchExample = (props: SwitchProps) => { - const styles = useStyles(); - const iosStyles = useIosStyles(); - const materialStyles = useMaterialStyles(); - - return ( -
- - - - - - - - -
- ); -}; - export default { title: 'Components/Switch', component: Switch, diff --git a/packages/react-switch/src/components/Switch/useSwitchStyles.ts b/packages/react-switch/src/components/Switch/useSwitchStyles.ts index bb2ac1ab2442eb..19e645e6214ba6 100644 --- a/packages/react-switch/src/components/Switch/useSwitchStyles.ts +++ b/packages/react-switch/src/components/Switch/useSwitchStyles.ts @@ -1,4 +1,4 @@ -import { makeStyles, mergeClasses } from '@fluentui/react-make-styles'; +import { shorthands, makeStyles, mergeClasses } from '@fluentui/react-make-styles'; import { createFocusOutlineStyle } from '@fluentui/react-tabster'; import type { SwitchState } from './Switch.types'; @@ -29,7 +29,7 @@ const useRootStyles = makeStyles({ unchecked: theme => ({ [`:hover .${thumbClassName}`]: { ':before': { - background: theme.colorNeutralStrokeAccessibleHover, + backgroundColor: theme.colorNeutralStrokeAccessibleHover, }, }, @@ -43,13 +43,13 @@ const useRootStyles = makeStyles({ checked: theme => ({ [`:hover .${trackClassName}`]: { ':after': { - background: theme.colorBrandBackgroundHover, + backgroundColor: theme.colorBrandBackgroundHover, }, }, [`:active .${trackClassName}`]: { ':after': { - background: theme.colorBrandBackgroundPressed, + backgroundColor: theme.colorBrandBackgroundPressed, }, }, }), @@ -76,7 +76,9 @@ const useTrackStyles = makeStyles({ position: 'absolute', width: '100%', height: '100%', - transition: 'background .1s cubic-bezier(0.33, 0.0, 0.67, 1)', + transitionProperty: 'backgroundColor', + transitionDuration: '0.1s', + transitionTimingFunction: 'cubic-bezier(0.33, 0, 0.67, 1)', touchAction: 'none', pointerEvents: 'none', @@ -87,7 +89,7 @@ const useTrackStyles = makeStyles({ bottom: '0px', right: '0px', boxSizing: 'border-box', - borderRadius: '999px', + ...shorthands.borderRadius('999px'), content: "''", opacity: 'var(--switch-unchecked-opacity)', }, @@ -99,7 +101,7 @@ const useTrackStyles = makeStyles({ bottom: '0px', right: '0px', boxSizing: 'border-box', - borderRadius: '999px', + ...shorthands.borderRadius('999px'), content: "''", opacity: 'var(--switch-checked-opacity)', }, @@ -107,28 +109,28 @@ const useTrackStyles = makeStyles({ unchecked: theme => ({ ':before': { - border: `1px solid ${theme.colorNeutralStrokeAccessible}`, - background: 'none', + ...shorthands.border('1px', 'solid', theme.colorNeutralStrokeAccessible), + backgroundColor: 'transparent', }, }), checked: theme => ({ ':after': { - background: theme.colorBrandBackground, - border: 'none', + backgroundColor: theme.colorBrandBackground, + ...shorthands.borderStyle('none'), }, }), disabledUnchecked: theme => ({ ':before': { - border: `1px solid ${theme.colorNeutralStrokeDisabled}`, + ...shorthands.border('1px', 'solid', theme.colorNeutralStrokeDisabled), }, }), disabledChecked: theme => ({ ':after': { - border: `1px solid ${theme.colorTransparentStrokeDisabled}`, - background: theme.colorNeutralBackgroundDisabled, + ...shorthands.border('1px', 'solid', theme.colorTransparentStrokeDisabled), + backgroundColor: theme.colorNeutralBackgroundDisabled, }, }), }); @@ -157,10 +159,12 @@ const useThumbStyles = makeStyles({ width: 'var(--switch-thumb-size)', height: 'var(--switch-thumb-size)', boxSizing: 'border-box', - borderRadius: theme.borderRadiusCircular, + ...shorthands.borderRadius(theme.borderRadiusCircular), top: '50%', transform: 'translate(-50%, -50%)', - transition: 'background .1s cubic-bezier(0.33, 0.0, 0.67, 1)', + transitionProperty: 'backgroundColor', + transitionDuration: '0.1s', + transitionTimingFunction: 'cubic-bezier(0.33, 0, 0.67, 1)', touchAction: 'none', pointerEvents: 'none', @@ -170,7 +174,7 @@ const useThumbStyles = makeStyles({ left: '0px', bottom: '0px', right: '0px', - borderRadius: theme.borderRadiusCircular, + ...shorthands.borderRadius(theme.borderRadiusCircular), content: "''", opacity: 'var(--switch-unchecked-opacity)', }, @@ -181,7 +185,7 @@ const useThumbStyles = makeStyles({ left: '0px', bottom: '0px', right: '0px', - borderRadius: theme.borderRadiusCircular, + ...shorthands.borderRadius(theme.borderRadiusCircular), content: "''", opacity: 'var(--switch-checked-opacity)', }, @@ -189,26 +193,26 @@ const useThumbStyles = makeStyles({ unchecked: theme => ({ ':before': { - background: theme.colorNeutralStrokeAccessible, + backgroundColor: theme.colorNeutralStrokeAccessible, }, }), checked: theme => ({ ':after': { - background: theme.colorNeutralForegroundOnBrand, + backgroundColor: theme.colorNeutralForegroundOnBrand, }, }), disabledUnchecked: theme => ({ ':before': { - border: `1px solid ${theme.colorNeutralForegroundDisabled}`, - background: theme.colorNeutralBackground1, + ...shorthands.border('1px', 'solid', theme.colorNeutralForegroundDisabled), + backgroundColor: theme.colorNeutralBackground1, }, }), disabledChecked: theme => ({ ':after': { - background: theme.colorNeutralForegroundDisabled, + backgroundColor: theme.colorNeutralForegroundDisabled, }, }), }); @@ -231,8 +235,8 @@ const useInputStyle = makeStyles({ input: { opacity: 0, position: 'absolute', - padding: 0, - margin: 0, + ...shorthands.padding(0), + ...shorthands.margin(0), width: '100%', height: '100%', touchAction: 'none',