chore: replace makeStyles with makeResetStyles (#29338)

microsoft · Oct 2, 2023 · eb4533e · eb4533e
1 parent 0e58657
commit eb4533e
Show file tree

Hide file tree

Showing 6 changed files with 201 additions and 218 deletions.
diff --git a/change/@fluentui-react-tree-28a20b5c-2da7-46ae-9716-fe0064f96cd4.json b/change/@fluentui-react-tree-28a20b5c-2da7-46ae-9716-fe0064f96cd4.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "chore: replace makeStyles with makeResetStyles",
+  "packageName": "@fluentui/react-tree",
+  "email": "bernardo.sunderhus@gmail.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/react-components/react-tree/src/components/FlatTree/useFlatTreeStyles.styles.ts b/packages/react-components/react-tree/src/components/FlatTree/useFlatTreeStyles.styles.ts
@@ -1,4 +1,4 @@
-import { makeStyles, mergeClasses } from '@griffel/react';
+import { makeResetStyles, mergeClasses } from '@griffel/react';
 import type { SlotClassNames } from '@fluentui/react-utilities';
 import { tokens } from '@fluentui/react-theme';
 import { FlatTreeSlots, FlatTreeState } from './FlatTree.types';
@@ -7,16 +7,14 @@ export const flatTreeClassNames: SlotClassNames<FlatTreeSlots> = {
   root: 'fui-FlatTree',
 };
 
-const useStyles = makeStyles({
-  root: {
-    display: 'flex',
-    flexDirection: 'column',
-    rowGap: tokens.spacingVerticalXXS,
-  },
+const useBaseStyles = makeResetStyles({
+  display: 'flex',
+  flexDirection: 'column',
+  rowGap: tokens.spacingVerticalXXS,
 });
 
 export const useFlatTreeStyles_unstable = (state: FlatTreeState): FlatTreeState => {
-  const styles = useStyles();
-  state.root.className = mergeClasses(flatTreeClassNames.root, styles.root, state.root.className);
+  const baseStyles = useBaseStyles();
+  state.root.className = mergeClasses(flatTreeClassNames.root, baseStyles, state.root.className);
   return state;
 };
diff --git a/packages/react-components/react-tree/src/components/Tree/useTreeStyles.styles.ts b/packages/react-components/react-tree/src/components/Tree/useTreeStyles.styles.ts
@@ -1,4 +1,4 @@
-import { makeStyles, mergeClasses } from '@griffel/react';
+import { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';
 import type { TreeSlots, TreeState } from './Tree.types';
 import type { SlotClassNames } from '@fluentui/react-utilities';
 import { tokens } from '@fluentui/react-theme';
@@ -7,24 +7,26 @@ export const treeClassNames: SlotClassNames<TreeSlots> = {
   root: 'fui-Tree',
 };
 
+const useBaseStyles = makeResetStyles({
+  display: 'flex',
+  flexDirection: 'column',
+  rowGap: tokens.spacingVerticalXXS,
+});
+
 const useStyles = makeStyles({
-  root: {
-    display: 'flex',
-    flexDirection: 'column',
-    rowGap: tokens.spacingVerticalXXS,
-  },
   subtree: {
     paddingTop: tokens.spacingVerticalXXS,
   },
 });
 
 export const useTreeStyles_unstable = (state: TreeState): TreeState => {
+  const baseStyles = useBaseStyles();
   const styles = useStyles();
   const isSubTree = state.level > 1;
 
   state.root.className = mergeClasses(
     treeClassNames.root,
-    styles.root,
+    baseStyles,
     isSubTree && styles.subtree,
     state.root.className,
   );

diff --git a/packages/react-components/react-tree/src/components/TreeItem/useTreeItemStyles.styles.ts b/packages/react-components/react-tree/src/components/TreeItem/useTreeItemStyles.styles.ts
@@ -1,4 +1,4 @@
-import { GriffelStyle, makeStyles, mergeClasses } from '@griffel/react';
+import { GriffelStyle, makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';
 import type { TreeItemCSSProperties, TreeItemSlots, TreeItemState } from './TreeItem.types';
 import type { SlotClassNames } from '@fluentui/react-utilities';
 import { tokens } from '@fluentui/react-theme';
@@ -9,42 +9,43 @@ export const treeItemClassNames: SlotClassNames<TreeItemSlots> = {
   root: 'fui-TreeItem',
 };
 
+const useBaseStyles = makeResetStyles({
+  position: 'relative',
+  cursor: 'pointer',
+  display: 'flex',
+  flexDirection: 'column',
+  boxSizing: 'border-box',
+  backgroundColor: tokens.colorSubtleBackground,
+  color: tokens.colorNeutralForeground2,
+  paddingRight: tokens.spacingHorizontalNone,
+  ...createFocusOutlineStyle(),
+});
+
 type StaticLevel = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10;
 type StaticLevelProperty = `level${StaticLevel}`;
 
-const useRootStyles = makeStyles({
+const useStyles = makeStyles({
   ...(Object.fromEntries(
     Array.from<never, [StaticLevelProperty, TreeItemCSSProperties]>({ length: 10 }, (_, index) => [
       `level${(index + 1) as StaticLevel}`,
       { [treeItemLevelToken]: index + 1 },
     ]),
   ) as Record<StaticLevelProperty, GriffelStyle>),
-  base: {
-    position: 'relative',
-    cursor: 'pointer',
-    display: 'flex',
-    flexDirection: 'column',
-    boxSizing: 'border-box',
-    backgroundColor: tokens.colorSubtleBackground,
-    color: tokens.colorNeutralForeground2,
-    paddingRight: tokens.spacingHorizontalNone,
-  },
-  focusIndicator: createFocusOutlineStyle(),
 });
 
 /**
  * Apply styling to the TreeItem slots based on the state
  */
 export const useTreeItemStyles_unstable = (state: TreeItemState): TreeItemState => {
-  const rootStyles = useRootStyles();
+  const baseStyles = useBaseStyles();
+  const styles = useStyles();
 
   const { level } = state;
 
   state.root.className = mergeClasses(
     treeItemClassNames.root,
-    isStaticallyDefinedLevel(level) && rootStyles[`level${level}` as StaticLevelProperty],
-    rootStyles.base,
-    rootStyles.focusIndicator,
+    baseStyles,
+    isStaticallyDefinedLevel(level) && styles[`level${level}` as StaticLevelProperty],
     state.root.className,
   );
 

diff --git a/...act-components/react-tree/src/components/TreeItemLayout/useTreeItemLayoutStyles.styles.ts b/...act-components/react-tree/src/components/TreeItemLayout/useTreeItemLayoutStyles.styles.ts
@@ -1,4 +1,4 @@
-import { makeStyles, mergeClasses, shorthands } from '@griffel/react';
+import { makeResetStyles, makeStyles, mergeClasses, shorthands } from '@griffel/react';
 import type { TreeItemLayoutSlots, TreeItemLayoutState } from './TreeItemLayout.types';
 import type { SlotClassNames } from '@fluentui/react-utilities';
 import { tokens, typographyStyles } from '@fluentui/react-theme';
@@ -17,34 +17,35 @@ export const treeItemLayoutClassNames: SlotClassNames<TreeItemLayoutSlots> = {
   selector: 'fui-TreeItemLayout__selector',
 };
 
+const useRootBaseStyles = makeResetStyles({
+  display: 'flex',
+  alignItems: 'center',
+  minHeight: '32px',
+  boxSizing: 'border-box',
+  ...shorthands.gridArea('layout'),
+  ...shorthands.borderRadius(tokens.borderRadiusMedium),
+  ':active': {
+    color: tokens.colorNeutralForeground2Pressed,
+    backgroundColor: tokens.colorSubtleBackgroundPressed,
+    // TODO: stop using treeItemLayoutClassNames.expandIcon for styling
+    [`& .${treeItemLayoutClassNames.expandIcon}`]: {
+      color: tokens.colorNeutralForeground3Pressed,
+    },
+  },
+  ':hover': {
+    color: tokens.colorNeutralForeground2Hover,
+    backgroundColor: tokens.colorSubtleBackgroundHover,
+    // TODO: stop using treeItemLayoutClassNames.expandIcon  for styling
+    [`& .${treeItemLayoutClassNames.expandIcon}`]: {
+      color: tokens.colorNeutralForeground3Hover,
+    },
+  },
+});
+
 /**
  * Styles for the root slot
  */
 const useRootStyles = makeStyles({
-  base: {
-    display: 'flex',
-    alignItems: 'center',
-    minHeight: '32px',
-    boxSizing: 'border-box',
-    ...shorthands.gridArea('layout'),
-    ...shorthands.borderRadius(tokens.borderRadiusMedium),
-    ':active': {
-      color: tokens.colorNeutralForeground2Pressed,
-      backgroundColor: tokens.colorSubtleBackgroundPressed,
-      // TODO: stop using treeItemLayoutClassNames.expandIcon for styling
-      [`& .${treeItemLayoutClassNames.expandIcon}`]: {
-        color: tokens.colorNeutralForeground3Pressed,
-      },
-    },
-    ':hover': {
-      color: tokens.colorNeutralForeground2Hover,
-      backgroundColor: tokens.colorSubtleBackgroundHover,
-      // TODO: stop using treeItemLayoutClassNames.expandIcon  for styling
-      [`& .${treeItemLayoutClassNames.expandIcon}`]: {
-        color: tokens.colorNeutralForeground3Hover,
-      },
-    },
-  },
   leaf: {
     paddingLeft: `calc(var(${treeItemLevelToken}, 1) * ${tokens.spacingHorizontalXXL})`,
   },
@@ -82,67 +83,57 @@ const useRootStyles = makeStyles({
 /**
  * Styles for the action icon slot
  */
-const useActionsStyles = makeStyles({
-  base: {
-    display: 'flex',
-    marginLeft: 'auto',
-    position: 'relative',
-    zIndex: 1,
-    ...shorthands.gridArea('aside'),
-    ...shorthands.padding(0, tokens.spacingHorizontalS),
-  },
+const useActionsBaseStyles = makeResetStyles({
+  display: 'flex',
+  marginLeft: 'auto',
+  position: 'relative',
+  zIndex: 1,
+  ...shorthands.gridArea('aside'),
+  ...shorthands.padding(0, tokens.spacingHorizontalS),
 });
 /**
  * Styles for the action icon slot
  */
-const useAsideStyles = makeStyles({
-  base: {
-    display: 'flex',
-    marginLeft: 'auto',
-    alignItems: 'center',
-    zIndex: 0,
-    ...shorthands.gridArea('aside'),
-    ...shorthands.padding(0, tokens.spacingHorizontalM),
-    ...shorthands.gap(tokens.spacingHorizontalXS),
-  },
+const useAsideBaseStyles = makeResetStyles({
+  display: 'flex',
+  marginLeft: 'auto',
+  alignItems: 'center',
+  zIndex: 0,
+  ...shorthands.gridArea('aside'),
+  ...shorthands.padding(0, tokens.spacingHorizontalM),
+  ...shorthands.gap(tokens.spacingHorizontalXS),
 });
 
 /**
  * Styles for the expand icon slot
  */
-const useExpandIconStyles = makeStyles({
-  base: {
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    minWidth: '24px',
-    boxSizing: 'border-box',
-    color: tokens.colorNeutralForeground3,
-    ...shorthands.flex(0, 0, 'auto'),
-    ...shorthands.padding(tokens.spacingVerticalXS, 0),
-  },
+const useExpandIconBaseStyles = makeResetStyles({
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  minWidth: '24px',
+  boxSizing: 'border-box',
+  color: tokens.colorNeutralForeground3,
+  ...shorthands.flex(0, 0, 'auto'),
+  ...shorthands.padding(tokens.spacingVerticalXS, 0),
 });
 
 /**
  * Styles for the content slot
  */
-const useMainStyles = makeStyles({
-  base: {
-    ...shorthands.padding(0, tokens.spacingHorizontalXXS),
-  },
+const useMainBaseStyles = makeResetStyles({
+  ...shorthands.padding(0, tokens.spacingHorizontalXXS),
 });
 
 /**
  * Styles for the before/after icon slot
  */
-const useIconStyles = makeStyles({
-  base: {
-    display: 'flex',
-    alignItems: 'center',
-    color: tokens.colorNeutralForeground2,
-    lineHeight: tokens.lineHeightBase500,
-    fontSize: tokens.fontSizeBase500,
-  },
+const useIconBaseStyles = makeResetStyles({
+  display: 'flex',
+  alignItems: 'center',
+  color: tokens.colorNeutralForeground2,
+  lineHeight: tokens.lineHeightBase500,
+  fontSize: tokens.fontSizeBase500,
 });
 
 const useIconBeforeStyles = makeStyles({
@@ -169,13 +160,14 @@ const useIconAfterStyles = makeStyles({
 export const useTreeItemLayoutStyles_unstable = (state: TreeItemLayoutState): TreeItemLayoutState => {
   const { main, iconAfter, iconBefore, expandIcon, root, aside, actions, selector } = state;
   const rootStyles = useRootStyles();
-  const actionsStyles = useActionsStyles();
-  const asideStyles = useAsideStyles();
+  const rootBaseStyles = useRootBaseStyles();
+  const actionsBaseStyles = useActionsBaseStyles();
+  const asideBaseStyles = useAsideBaseStyles();
 
-  const mainStyles = useMainStyles();
+  const mainBaseStyles = useMainBaseStyles();
 
-  const expandIconStyles = useExpandIconStyles();
-  const iconStyles = useIconStyles();
+  const expandIconBaseStyles = useExpandIconBaseStyles();
+  const iconBaseStyles = useIconBaseStyles();
   const iconBeforeStyles = useIconBeforeStyles();
   const iconAfterStyles = useIconAfterStyles();
 
@@ -185,27 +177,27 @@ export const useTreeItemLayoutStyles_unstable = (state: TreeItemLayoutState): Tr
 
   root.className = mergeClasses(
     treeItemLayoutClassNames.root,
-    rootStyles.base,
+    rootBaseStyles,
     rootStyles[appearance],
     rootStyles[size],
     rootStyles[itemType],
     root.className,
   );
 
-  main.className = mergeClasses(treeItemLayoutClassNames.main, mainStyles.base, main.className);
+  main.className = mergeClasses(treeItemLayoutClassNames.main, mainBaseStyles, main.className);
 
   if (expandIcon) {
     expandIcon.className = mergeClasses(
       treeItemLayoutClassNames.expandIcon,
-      expandIconStyles.base,
+      expandIconBaseStyles,
       expandIcon.className,
     );
   }
 
   if (iconBefore) {
     iconBefore.className = mergeClasses(
       treeItemLayoutClassNames.iconBefore,
-      iconStyles.base,
+      iconBaseStyles,
       iconBeforeStyles[size],
       iconBefore.className,
     );
@@ -214,24 +206,17 @@ export const useTreeItemLayoutStyles_unstable = (state: TreeItemLayoutState): Tr
   if (iconAfter) {
     iconAfter.className = mergeClasses(
       treeItemLayoutClassNames.iconAfter,
-      iconStyles.base,
+      iconBaseStyles,
       iconAfterStyles[size],
       iconAfter.className,
     );
   }
 
   if (actions) {
-    actions.className = mergeClasses(treeItemLayoutClassNames.actions, actionsStyles.base, actions.className);
+    actions.className = mergeClasses(treeItemLayoutClassNames.actions, actionsBaseStyles, actions.className);
   }
   if (aside) {
-    aside.className = mergeClasses(treeItemLayoutClassNames.aside, asideStyles.base, aside.className);
-  }
-  if (expandIcon) {
-    expandIcon.className = mergeClasses(
-      treeItemLayoutClassNames.expandIcon,
-      expandIconStyles.base,
-      expandIcon.className,
-    );
+    aside.className = mergeClasses(treeItemLayoutClassNames.aside, asideBaseStyles, aside.className);
   }
   if (selector) {
     selector.className = mergeClasses(treeItemLayoutClassNames.selector, selector.className);