From afa2b8ebd2a09cbb1af23888736c7e3a21ec4a90 Mon Sep 17 00:00:00 2001 From: Marcos Moura Date: Mon, 25 Sep 2023 12:50:11 +0300 Subject: [PATCH] fix(react-drawer): improve CSS performance by using makeResetStyles (#29263) --- ...-f56e55ac-7156-425d-b6dc-3c3bffb2be95.json | 7 +++ .../DrawerBody/useDrawerBodyStyles.styles.ts | 46 +++++++++---------- .../useDrawerFooterStyles.styles.ts | 18 ++++---- .../useDrawerHeaderStyles.styles.ts | 18 ++++---- .../useDrawerHeaderNavigationStyles.styles.ts | 12 ++--- .../useDrawerInlineStyles.styles.ts | 22 +++++---- .../useDrawerOverlayStyles.styles.ts | 2 + .../src/shared/useDrawerBaseStyles.styles.ts | 42 +++++++++-------- 8 files changed, 85 insertions(+), 82 deletions(-) create mode 100644 change/@fluentui-react-drawer-f56e55ac-7156-425d-b6dc-3c3bffb2be95.json diff --git a/change/@fluentui-react-drawer-f56e55ac-7156-425d-b6dc-3c3bffb2be95.json b/change/@fluentui-react-drawer-f56e55ac-7156-425d-b6dc-3c3bffb2be95.json new file mode 100644 index 0000000000000..5032f896bf242 --- /dev/null +++ b/change/@fluentui-react-drawer-f56e55ac-7156-425d-b6dc-3c3bffb2be95.json @@ -0,0 +1,7 @@ +{ + "type": "prerelease", + "comment": "fix: improve performance of CSS classes", + "packageName": "@fluentui/react-drawer", + "email": "marcosvmmoura@gmail.com", + "dependentChangeType": "patch" +} diff --git a/packages/react-components/react-drawer/src/components/DrawerBody/useDrawerBodyStyles.styles.ts b/packages/react-components/react-drawer/src/components/DrawerBody/useDrawerBodyStyles.styles.ts index 691c26ca98b59..e22acf5aec8f3 100644 --- a/packages/react-components/react-drawer/src/components/DrawerBody/useDrawerBodyStyles.styles.ts +++ b/packages/react-components/react-drawer/src/components/DrawerBody/useDrawerBodyStyles.styles.ts @@ -1,4 +1,4 @@ -import { makeStyles, mergeClasses, shorthands } from '@griffel/react'; +import { makeResetStyles, mergeClasses, shorthands } from '@griffel/react'; import { tokens } from '@fluentui/react-theme'; import type { SlotClassNames } from '@fluentui/react-utilities'; @@ -11,33 +11,31 @@ export const drawerBodyClassNames: SlotClassNames = { /** * Styles for the root slot */ -const useStyles = makeStyles({ - root: { - ...shorthands.margin('-1px', 0), - ...shorthands.padding('1px', tokens.spacingHorizontalXXL), - ...shorthands.overflow('auto'), - ...shorthands.flex(1), +const useStyles = makeResetStyles({ + ...shorthands.margin('-1px', 0), + ...shorthands.padding('1px', tokens.spacingHorizontalXXL), + ...shorthands.overflow('auto'), + ...shorthands.flex(1), - alignSelf: 'stretch', + alignSelf: 'stretch', - // A "good hack" to display top and bottom borders based on the scroll position - backgroundImage: `linear-gradient(to top, ${tokens.colorNeutralBackground1}, ${tokens.colorNeutralBackground1}), + // A "good hack" to display top and bottom borders based on the scroll position + backgroundImage: `linear-gradient(to top, ${tokens.colorNeutralBackground1}, ${tokens.colorNeutralBackground1}), linear-gradient(to top, ${tokens.colorNeutralBackground1}, ${tokens.colorNeutralBackground1}), linear-gradient(to top, ${tokens.colorNeutralStroke1}, ${tokens.colorNeutralBackground1}), linear-gradient(to bottom, ${tokens.colorNeutralStroke1}, ${tokens.colorNeutralBackground1})`, - 'background-position': 'bottom center, top center, bottom center, top center', - backgroundRepeat: 'no-repeat', - backgroundColor: tokens.colorNeutralBackground1, - backgroundSize: '100% 2px, 100% 2px, 100% 1px, 100% 1px', - backgroundAttachment: 'local, local, scroll, scroll', - - ':last-child': { - paddingBottom: `calc(${tokens.spacingHorizontalXXL} + 1px)`, - }, - - ':first-child': { - paddingTop: `calc(${tokens.spacingHorizontalXXL} + 1px)`, - }, + 'background-position': 'bottom center, top center, bottom center, top center', + backgroundRepeat: 'no-repeat', + backgroundColor: tokens.colorNeutralBackground1, + backgroundSize: '100% 2px, 100% 2px, 100% 1px, 100% 1px', + backgroundAttachment: 'local, local, scroll, scroll', + + ':last-child': { + paddingBottom: `calc(${tokens.spacingHorizontalXXL} + 1px)`, + }, + + ':first-child': { + paddingTop: `calc(${tokens.spacingHorizontalXXL} + 1px)`, }, }); @@ -47,7 +45,7 @@ const useStyles = makeStyles({ export const useDrawerBodyStyles_unstable = (state: DrawerBodyState): DrawerBodyState => { const styles = useStyles(); - state.root.className = mergeClasses(drawerBodyClassNames.root, styles.root, state.root.className); + state.root.className = mergeClasses(drawerBodyClassNames.root, styles, state.root.className); return state; }; diff --git a/packages/react-components/react-drawer/src/components/DrawerFooter/useDrawerFooterStyles.styles.ts b/packages/react-components/react-drawer/src/components/DrawerFooter/useDrawerFooterStyles.styles.ts index ac3faa71f6abd..6bf58e12272de 100644 --- a/packages/react-components/react-drawer/src/components/DrawerFooter/useDrawerFooterStyles.styles.ts +++ b/packages/react-components/react-drawer/src/components/DrawerFooter/useDrawerFooterStyles.styles.ts @@ -1,4 +1,4 @@ -import { makeStyles, mergeClasses, shorthands } from '@griffel/react'; +import { makeResetStyles, mergeClasses, shorthands } from '@griffel/react'; import { tokens } from '@fluentui/react-theme'; import type { SlotClassNames } from '@fluentui/react-utilities'; @@ -11,15 +11,13 @@ export const drawerFooterClassNames: SlotClassNames = { /** * Styles for the root slot */ -const useStyles = makeStyles({ - root: { - ...shorthands.padding(tokens.spacingVerticalL, tokens.spacingHorizontalXXL, tokens.spacingVerticalXXL), +const useStyles = makeResetStyles({ + ...shorthands.padding(tokens.spacingVerticalL, tokens.spacingHorizontalXXL, tokens.spacingVerticalXXL), - display: 'flex', - justifyContent: 'flex-start', - alignItems: 'center', - columnGap: tokens.spacingHorizontalS, - }, + display: 'flex', + justifyContent: 'flex-start', + alignItems: 'center', + columnGap: tokens.spacingHorizontalS, }); /** @@ -28,7 +26,7 @@ const useStyles = makeStyles({ export const useDrawerFooterStyles_unstable = (state: DrawerFooterState): DrawerFooterState => { const styles = useStyles(); - state.root.className = mergeClasses(drawerFooterClassNames.root, styles.root, state.root.className); + state.root.className = mergeClasses(drawerFooterClassNames.root, styles, state.root.className); return state; }; diff --git a/packages/react-components/react-drawer/src/components/DrawerHeader/useDrawerHeaderStyles.styles.ts b/packages/react-components/react-drawer/src/components/DrawerHeader/useDrawerHeaderStyles.styles.ts index a6899ef3a398b..1b767ec12f7f1 100644 --- a/packages/react-components/react-drawer/src/components/DrawerHeader/useDrawerHeaderStyles.styles.ts +++ b/packages/react-components/react-drawer/src/components/DrawerHeader/useDrawerHeaderStyles.styles.ts @@ -1,4 +1,4 @@ -import { makeStyles, mergeClasses, shorthands } from '@griffel/react'; +import { makeResetStyles, mergeClasses, shorthands } from '@griffel/react'; import { tokens } from '@fluentui/react-theme'; import type { SlotClassNames } from '@fluentui/react-utilities'; @@ -11,15 +11,13 @@ export const drawerHeaderClassNames: SlotClassNames = { /** * Styles for the root slot */ -const useStyles = makeStyles({ - root: { - ...shorthands.padding(tokens.spacingVerticalXXL, tokens.spacingHorizontalXXL, tokens.spacingVerticalS), - ...shorthands.gap(tokens.spacingHorizontalS), +const useStyles = makeResetStyles({ + ...shorthands.padding(tokens.spacingVerticalXXL, tokens.spacingHorizontalXXL, tokens.spacingVerticalS), + ...shorthands.gap(tokens.spacingHorizontalS), - alignSelf: 'stretch', - display: 'flex', - flexDirection: 'column', - }, + alignSelf: 'stretch', + display: 'flex', + flexDirection: 'column', }); /** @@ -28,7 +26,7 @@ const useStyles = makeStyles({ export const useDrawerHeaderStyles_unstable = (state: DrawerHeaderState): DrawerHeaderState => { const styles = useStyles(); - state.root.className = mergeClasses(drawerHeaderClassNames.root, styles.root, state.root.className); + state.root.className = mergeClasses(drawerHeaderClassNames.root, styles, state.root.className); return state; }; diff --git a/packages/react-components/react-drawer/src/components/DrawerHeaderNavigation/useDrawerHeaderNavigationStyles.styles.ts b/packages/react-components/react-drawer/src/components/DrawerHeaderNavigation/useDrawerHeaderNavigationStyles.styles.ts index 11f4a5f353d90..eaa6a25dd67f2 100644 --- a/packages/react-components/react-drawer/src/components/DrawerHeaderNavigation/useDrawerHeaderNavigationStyles.styles.ts +++ b/packages/react-components/react-drawer/src/components/DrawerHeaderNavigation/useDrawerHeaderNavigationStyles.styles.ts @@ -1,4 +1,4 @@ -import { makeStyles, mergeClasses, shorthands } from '@griffel/react'; +import { makeResetStyles, mergeClasses, shorthands } from '@griffel/react'; import { tokens } from '@fluentui/react-theme'; import type { SlotClassNames } from '@fluentui/react-utilities'; @@ -11,12 +11,8 @@ export const drawerHeaderNavigationClassNames: SlotClassNames { const styles = useStyles(); - state.root.className = mergeClasses(drawerHeaderNavigationClassNames.root, styles.root, state.root.className); + state.root.className = mergeClasses(drawerHeaderNavigationClassNames.root, styles, state.root.className); return state; }; diff --git a/packages/react-components/react-drawer/src/components/DrawerInline/useDrawerInlineStyles.styles.ts b/packages/react-components/react-drawer/src/components/DrawerInline/useDrawerInlineStyles.styles.ts index eb52b7fa050d3..bc43ee0bfee31 100644 --- a/packages/react-components/react-drawer/src/components/DrawerInline/useDrawerInlineStyles.styles.ts +++ b/packages/react-components/react-drawer/src/components/DrawerInline/useDrawerInlineStyles.styles.ts @@ -1,27 +1,28 @@ import * as React from 'react'; -import { makeStyles, mergeClasses, shorthands } from '@griffel/react'; +import { makeResetStyles, makeStyles, mergeClasses, shorthands } from '@griffel/react'; import type { SlotClassNames } from '@fluentui/react-utilities'; import { tokens } from '@fluentui/react-theme'; import type { DrawerInlineSlots, DrawerInlineState } from './DrawerInline.types'; -import { drawerCSSVars, useDrawerBaseClassNames } from '../../shared/useDrawerBaseStyles.styles'; +import { drawerCSSVars, drawerDefaultStyles, useDrawerBaseClassNames } from '../../shared/useDrawerBaseStyles.styles'; export const drawerInlineClassNames: SlotClassNames = { root: 'fui-DrawerInline', }; +const useDrawerResetStyles = makeResetStyles({ + ...drawerDefaultStyles, + position: 'relative', + opacity: 0, + transitionProperty: 'opacity, transform', + willChange: 'opacity, transform', +}); + /** * Styles for the root slot */ const separatorValues = ['1px', 'solid', tokens.colorNeutralBackground3] as const; const useDrawerRootStyles = makeStyles({ - root: { - position: 'relative', - opacity: 0, - transitionProperty: 'opacity, transform', - willChange: 'opacity, transform', - }, - /* Separator */ separatorStart: { ...shorthands.borderRight(...separatorValues), @@ -49,6 +50,7 @@ const useDrawerRootStyles = makeStyles({ * Apply styling to the DrawerInline slots based on the state */ export const useDrawerInlineStyles_unstable = (state: DrawerInlineState): DrawerInlineState => { + const resetStyles = useDrawerResetStyles(); const baseClassNames = useDrawerBaseClassNames(state); const rootStyles = useDrawerRootStyles(); @@ -62,8 +64,8 @@ export const useDrawerInlineStyles_unstable = (state: DrawerInlineState): Drawer state.root.className = mergeClasses( drawerInlineClassNames.root, + resetStyles, baseClassNames, - rootStyles.root, separatorClass, rootStyles[state.position], state.motion.active && rootStyles.visible, diff --git a/packages/react-components/react-drawer/src/components/DrawerOverlay/useDrawerOverlayStyles.styles.ts b/packages/react-components/react-drawer/src/components/DrawerOverlay/useDrawerOverlayStyles.styles.ts index 41f2a6b5ce035..35e7430cb5958 100644 --- a/packages/react-components/react-drawer/src/components/DrawerOverlay/useDrawerOverlayStyles.styles.ts +++ b/packages/react-components/react-drawer/src/components/DrawerOverlay/useDrawerOverlayStyles.styles.ts @@ -6,6 +6,7 @@ import type { SlotClassNames } from '@fluentui/react-utilities'; import type { DrawerOverlaySlots, DrawerOverlayState } from './DrawerOverlay.types'; import { drawerCSSVars, + drawerDefaultStyles, useDrawerBaseClassNames, useDrawerDurationStyles, } from '../../shared/useDrawerBaseStyles.styles'; @@ -20,6 +21,7 @@ export const drawerOverlayClassNames: Omit, ' */ const useDrawerRootStyles = makeStyles({ root: { + ...drawerDefaultStyles, position: 'fixed', top: 0, bottom: 0, diff --git a/packages/react-components/react-drawer/src/shared/useDrawerBaseStyles.styles.ts b/packages/react-components/react-drawer/src/shared/useDrawerBaseStyles.styles.ts index 5dad8d699ccc1..85e96d626dcbc 100644 --- a/packages/react-components/react-drawer/src/shared/useDrawerBaseStyles.styles.ts +++ b/packages/react-components/react-drawer/src/shared/useDrawerBaseStyles.styles.ts @@ -1,4 +1,4 @@ -import { makeStyles, mergeClasses, shorthands } from '@griffel/react'; +import { GriffelStyle, makeStyles, mergeClasses, shorthands } from '@griffel/react'; import { tokens } from '@fluentui/react-theme'; import { DrawerBaseState } from './DrawerBase.types'; @@ -11,26 +11,29 @@ export const drawerCSSVars = { }; /** - * Styles for the root slot + * Default shared styles for the Drawer component */ -export const useDrawerBaseStyles = makeStyles({ - root: { - ...shorthands.padding(0), - ...shorthands.overflow('hidden'), - ...shorthands.borderRadius(0), - ...shorthands.border(0), +export const drawerDefaultStyles: GriffelStyle = { + ...shorthands.padding(0), + ...shorthands.overflow('hidden'), + ...shorthands.borderRadius(0), + ...shorthands.border(0), - width: `var(${drawerCSSVars.drawerSizeVar})`, - maxWidth: '100vw', - height: 'auto', - boxSizing: 'border-box', - display: 'flex', - flexDirection: 'column', - alignItems: 'flex-start', - justifyContent: 'flex-start', - backgroundColor: tokens.colorNeutralBackground1, - }, + width: `var(${drawerCSSVars.drawerSizeVar})`, + maxWidth: '100vw', + height: 'auto', + boxSizing: 'border-box', + display: 'flex', + flexDirection: 'column', + alignItems: 'flex-start', + justifyContent: 'flex-start', + backgroundColor: tokens.colorNeutralBackground1, +}; +/** + * Shared dynamic styles for the Drawer component + */ +const useDrawerStyles = makeStyles({ /* Motion */ entering: { transitionTimingFunction: tokens.curveDecelerateMid, @@ -85,11 +88,10 @@ export const useDrawerDurationStyles = makeStyles({ }); export const useDrawerBaseClassNames = ({ position, size, motion }: DrawerBaseState) => { - const baseStyles = useDrawerBaseStyles(); + const baseStyles = useDrawerStyles(); const durationStyles = useDrawerDurationStyles(); return mergeClasses( - baseStyles.root, baseStyles[position], durationStyles[size], baseStyles[size],