From d07b5026e91783e7d56a5d5cc4529bb82d276702 Mon Sep 17 00:00:00 2001 From: Marcos Moura Date: Fri, 22 Sep 2023 15:41:10 +0300 Subject: [PATCH 1/2] fix(react-drawer): improve CSS performance by using makeResetStyles --- ...-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 | 26 +++++++---- .../useDrawerOverlayStyles.styles.ts | 2 + .../src/shared/useDrawerBaseStyles.styles.ts | 42 +++++++++-------- 8 files changed, 89 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 00000000000000..5032f896bf2429 --- /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 691c26ca98b59c..e22acf5aec8f32 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 ac3faa71f6abd3..6bf58e12272ded 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 a6899ef3a398bd..1b767ec12f7f1a 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 11f4a5f353d90d..eaa6a25dd67f28 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 eb52b7fa050d32..46475db2cf1a85 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,32 @@ 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, + getDrawerDefaultStyles, + useDrawerBaseClassNames, +} from '../../shared/useDrawerBaseStyles.styles'; export const drawerInlineClassNames: SlotClassNames = { root: 'fui-DrawerInline', }; +const useDrawerResetStyles = makeResetStyles({ + ...getDrawerDefaultStyles(), + 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 +54,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 +68,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 6b147f8669ddc3..8fdde329513e46 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, + getDrawerDefaultStyles, useDrawerBaseClassNames, useDrawerDurationStyles, } from '../../shared/useDrawerBaseStyles.styles'; @@ -20,6 +21,7 @@ export const drawerOverlayClassNames: SlotClassNames = { */ const useDrawerRootStyles = makeStyles({ root: { + ...getDrawerDefaultStyles(), 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 5dad8d699ccc12..8feb8a309ab84f 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 getDrawerDefaultStyles = (): 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], From 3cabfc3019d0f7fbc71f6831ef231a2d4788ecf5 Mon Sep 17 00:00:00 2001 From: Marcos Moura Date: Mon, 25 Sep 2023 11:57:57 +0300 Subject: [PATCH 2/2] fix: convert object into function --- .../DrawerInline/useDrawerInlineStyles.styles.ts | 8 ++------ .../DrawerOverlay/useDrawerOverlayStyles.styles.ts | 4 ++-- .../react-drawer/src/shared/useDrawerBaseStyles.styles.ts | 4 ++-- 3 files changed, 6 insertions(+), 10 deletions(-) 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 46475db2cf1a85..bc43ee0bfee311 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 @@ -4,18 +4,14 @@ import type { SlotClassNames } from '@fluentui/react-utilities'; import { tokens } from '@fluentui/react-theme'; import type { DrawerInlineSlots, DrawerInlineState } from './DrawerInline.types'; -import { - drawerCSSVars, - getDrawerDefaultStyles, - useDrawerBaseClassNames, -} from '../../shared/useDrawerBaseStyles.styles'; +import { drawerCSSVars, drawerDefaultStyles, useDrawerBaseClassNames } from '../../shared/useDrawerBaseStyles.styles'; export const drawerInlineClassNames: SlotClassNames = { root: 'fui-DrawerInline', }; const useDrawerResetStyles = makeResetStyles({ - ...getDrawerDefaultStyles(), + ...drawerDefaultStyles, position: 'relative', opacity: 0, transitionProperty: 'opacity, transform', 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 9586609f288ce4..35e7430cb5958f 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,7 +6,7 @@ import type { SlotClassNames } from '@fluentui/react-utilities'; import type { DrawerOverlaySlots, DrawerOverlayState } from './DrawerOverlay.types'; import { drawerCSSVars, - getDrawerDefaultStyles, + drawerDefaultStyles, useDrawerBaseClassNames, useDrawerDurationStyles, } from '../../shared/useDrawerBaseStyles.styles'; @@ -21,7 +21,7 @@ export const drawerOverlayClassNames: Omit, ' */ const useDrawerRootStyles = makeStyles({ root: { - ...getDrawerDefaultStyles(), + ...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 8feb8a309ab84f..85e96d626dcbc8 100644 --- a/packages/react-components/react-drawer/src/shared/useDrawerBaseStyles.styles.ts +++ b/packages/react-components/react-drawer/src/shared/useDrawerBaseStyles.styles.ts @@ -13,7 +13,7 @@ export const drawerCSSVars = { /** * Default shared styles for the Drawer component */ -export const getDrawerDefaultStyles = (): GriffelStyle => ({ +export const drawerDefaultStyles: GriffelStyle = { ...shorthands.padding(0), ...shorthands.overflow('hidden'), ...shorthands.borderRadius(0), @@ -28,7 +28,7 @@ export const getDrawerDefaultStyles = (): GriffelStyle => ({ alignItems: 'flex-start', justifyContent: 'flex-start', backgroundColor: tokens.colorNeutralBackground1, -}); +}; /** * Shared dynamic styles for the Drawer component