diff --git a/change/@fluentui-react-tree-28a20b5c-2da7-46ae-9716-fe0064f96cd4.json b/change/@fluentui-react-tree-28a20b5c-2da7-46ae-9716-fe0064f96cd4.json new file mode 100644 index 0000000000000..3246c82b56f9b --- /dev/null +++ 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 index 2079cc20cf75a..160dd6d64aba1 100644 --- 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 = { 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 index 780b2b2f50c8a..8bd7b537105b2 100644 --- 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 = { 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 index 42c8272f7cc39..60133a89f2963 100644 --- 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 = { 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({ length: 10 }, (_, index) => [ `level${(index + 1) as StaticLevel}`, { [treeItemLevelToken]: index + 1 }, ]), ) as Record), - 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/packages/react-components/react-tree/src/components/TreeItemLayout/useTreeItemLayoutStyles.styles.ts b/packages/react-components/react-tree/src/components/TreeItemLayout/useTreeItemLayoutStyles.styles.ts index 15947bb335b63..a9b8ee6500229 100644 --- a/packages/react-components/react-tree/src/components/TreeItemLayout/useTreeItemLayoutStyles.styles.ts +++ b/packages/react-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 = { 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,19 +177,19 @@ 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, ); } @@ -205,7 +197,7 @@ export const useTreeItemLayoutStyles_unstable = (state: TreeItemLayoutState): Tr 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); diff --git a/packages/react-components/react-tree/src/components/TreeItemPersonaLayout/useTreeItemPersonaLayoutStyles.styles.ts b/packages/react-components/react-tree/src/components/TreeItemPersonaLayout/useTreeItemPersonaLayoutStyles.styles.ts index 40a5012a86461..94201cddf5aa3 100644 --- a/packages/react-components/react-tree/src/components/TreeItemPersonaLayout/useTreeItemPersonaLayoutStyles.styles.ts +++ b/packages/react-components/react-tree/src/components/TreeItemPersonaLayout/useTreeItemPersonaLayoutStyles.styles.ts @@ -1,6 +1,6 @@ import type { TreeItemPersonaLayoutSlots, TreeItemPersonaLayoutState } from './TreeItemPersonaLayout.types'; import type { SlotClassNames } from '@fluentui/react-utilities'; -import { makeStyles, mergeClasses, shorthands } from '@griffel/react'; +import { makeResetStyles, makeStyles, mergeClasses, shorthands } from '@griffel/react'; import { tokens, typographyStyles } from '@fluentui/react-theme'; import { treeItemLevelToken } from '../../utils/tokens'; import { useTreeItemContext_unstable } from '../../contexts/treeItemContext'; @@ -16,37 +16,38 @@ export const treeItemPersonaLayoutClassNames: SlotClassNames { + const rootBaseStyles = useRootBaseStyles(); const rootStyles = useRootStyles(); - const mediaStyles = useMediaStyles(); - const descriptionStyles = useDescriptionStyles(); - const actionsStyles = useActionsStyles(); - const asideStyles = useAsideStyles(); - const expandIconStyles = useExpandIconStyles(); + const mediaBaseStyles = useMediaBaseStyles(); + const descriptionBaseStyles = useDescriptionBaseStyles(); + const actionsBaseStyles = useActionsBaseStyles(); + const asideBaseStyles = useAsideBaseStyles(); + const expandIconBaseStyles = useExpandIconBaseStyles(); + const mainBaseStyles = useMainBaseStyles(); const mainStyles = useMainStyles(); const itemType = useTreeItemContext_unstable(ctx => ctx.itemType); state.root.className = mergeClasses( treeItemPersonaLayoutClassNames.root, - rootStyles.base, + rootBaseStyles, rootStyles[itemType], state.root.className, ); - state.media.className = mergeClasses(treeItemPersonaLayoutClassNames.media, mediaStyles.base, state.media.className); + state.media.className = mergeClasses(treeItemPersonaLayoutClassNames.media, mediaBaseStyles, state.media.className); if (state.main) { state.main.className = mergeClasses( treeItemPersonaLayoutClassNames.main, - mainStyles.base, + mainBaseStyles, state.description && mainStyles.withDescription, state.main.className, ); @@ -173,28 +167,24 @@ export const useTreeItemPersonaLayoutStyles_unstable = ( if (state.description) { state.description.className = mergeClasses( treeItemPersonaLayoutClassNames.description, - descriptionStyles.base, + descriptionBaseStyles, state.description.className, ); } if (state.actions) { state.actions.className = mergeClasses( treeItemPersonaLayoutClassNames.actions, - actionsStyles.base, + actionsBaseStyles, state.actions.className, ); } if (state.aside) { - state.aside.className = mergeClasses( - treeItemPersonaLayoutClassNames.aside, - asideStyles.base, - state.aside.className, - ); + state.aside.className = mergeClasses(treeItemPersonaLayoutClassNames.aside, asideBaseStyles, state.aside.className); } if (state.expandIcon) { state.expandIcon.className = mergeClasses( treeItemPersonaLayoutClassNames.expandIcon, - expandIconStyles.base, + expandIconBaseStyles, state.expandIcon.className, ); }