fix(react-drawer): improve CSS performance by using makeResetStyles (#…

…29263)
microsoft · Sep 25, 2023 · afa2b8e · afa2b8e
1 parent 4942c5f
commit afa2b8e
Show file tree

Hide file tree

Showing 8 changed files with 85 additions and 82 deletions.
diff --git a/change/@fluentui-react-drawer-f56e55ac-7156-425d-b6dc-3c3bffb2be95.json 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": "[email protected]",
+  "dependentChangeType": "patch"
+}
diff --git a/...ges/react-components/react-drawer/src/components/DrawerBody/useDrawerBodyStyles.styles.ts b/...ges/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<DrawerBodySlots> = {
 /**
  * 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/...react-components/react-drawer/src/components/DrawerFooter/useDrawerFooterStyles.styles.ts b/...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<DrawerFooterSlots> = {
 /**
  * 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/...react-components/react-drawer/src/components/DrawerHeader/useDrawerHeaderStyles.styles.ts b/...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<DrawerHeaderSlots> = {
 /**
  * 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/...ct-drawer/src/components/DrawerHeaderNavigation/useDrawerHeaderNavigationStyles.styles.ts b/...ct-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<DrawerHeaderNaviga
 /**
  * Styles for the root slot
  */
-const useStyles = makeStyles({
-  root: {
-    ...shorthands.margin(`calc(${tokens.spacingVerticalS} * -1)`, `calc(${tokens.spacingHorizontalL} * -1)`),
-
-    order: 0,
-  },
+const useStyles = makeResetStyles({
+  ...shorthands.margin(`calc(${tokens.spacingVerticalS} * -1)`, `calc(${tokens.spacingHorizontalL} * -1)`),
 });
 
 /**
@@ -27,7 +23,7 @@ export const useDrawerHeaderNavigationStyles_unstable = (
 ): DrawerHeaderNavigationState => {
   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/...react-components/react-drawer/src/components/DrawerInline/useDrawerInlineStyles.styles.ts b/...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<DrawerInlineSlots> = {
   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/...act-components/react-drawer/src/components/DrawerOverlay/useDrawerOverlayStyles.styles.ts b/...act-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<SlotClassNames<DrawerOverlaySlots>, '
  */
 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
@@ -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],