fix: BreadcrumbItem should use makeResetStyles for base styles (micro…

…soft#29278) * Added makeResetStyles and disableFocusable prop * change files
tomi-msft · Sep 25, 2023 · 5b6536c · 5b6536c
1 parent aef09fc
commit 5b6536c
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 18 deletions.
diff --git a/change/@fluentui-react-breadcrumb-preview-7e120363-acbe-4042-a23f-87482c4bb9f1.json b/change/@fluentui-react-breadcrumb-preview-7e120363-acbe-4042-a23f-87482c4bb9f1.json
@@ -0,0 +1,7 @@
+{
+ "type": "patch",
+ "comment": "fix: used makeResetStyles instead of makeStyles",
+ "packageName": "@fluentui/react-breadcrumb-preview",
+ "email": "vkozlova@microsoft.com",
+ "dependentChangeType": "patch"
+}
diff --git a/...s/react-components/react-breadcrumb-preview/etc/react-breadcrumb-preview.api.md b/...s/react-components/react-breadcrumb-preview/etc/react-breadcrumb-preview.api.md
@@ -26,7 +26,7 @@ export const BreadcrumbButton: ForwardRefComponent<BreadcrumbButtonProps>;
 export const breadcrumbButtonClassNames: SlotClassNames<BreadcrumbButtonSlots>;
 
 // @public
-export type BreadcrumbButtonProps = ComponentProps<BreadcrumbButtonSlots> & Pick<BreadcrumbProps, 'appearance' | 'size'> & Pick<ButtonProps, 'disabled'> & {
+export type BreadcrumbButtonProps = ComponentProps<BreadcrumbButtonSlots> & Pick<BreadcrumbProps, 'appearance' | 'size'> & Pick<ButtonProps, 'disabled' | 'disabledFocusable'> & {
  current?: boolean;
 };
 

diff --git a/...onents/react-breadcrumb-preview/src/components/BreadcrumbButton/BreadcrumbButton.types.ts b/...onents/react-breadcrumb-preview/src/components/BreadcrumbButton/BreadcrumbButton.types.ts
@@ -9,7 +9,7 @@ export type BreadcrumbButtonSlots = ButtonSlots;
  */
 export type BreadcrumbButtonProps = ComponentProps<BreadcrumbButtonSlots> &
  Pick<BreadcrumbProps, 'appearance' | 'size'> &
- Pick<ButtonProps, 'disabled'> & {
+ Pick<ButtonProps, 'disabled' | 'disabledFocusable'> & {
  /**
  * Defines current sate of BreadcrumbButton.
  *

diff --git a/.../react-breadcrumb-preview/src/components/BreadcrumbItem/useBreadcrumbItemStyles.styles.ts b/.../react-breadcrumb-preview/src/components/BreadcrumbItem/useBreadcrumbItemStyles.styles.ts
@@ -1,4 +1,4 @@
-import { makeStyles, mergeClasses, shorthands } from '@griffel/react';
+import { makeStyles, makeResetStyles, mergeClasses, shorthands } from '@griffel/react';
 import type { BreadcrumbItemSlots, BreadcrumbItemState } from './BreadcrumbItem.types';
 import type { SlotClassNames } from '@fluentui/react-utilities';
 import { tokens, typographyStyles } from '@fluentui/react-theme';
@@ -9,17 +9,23 @@ export const breadcrumbItemClassNames: SlotClassNames<BreadcrumbItemSlots> = {
  icon: 'fui-BreadcrumbItem__icon',
 };
 
+const useBreadcrumbItemResetStyles = makeResetStyles({
+ display: 'flex',
+ alignItems: 'center',
+ color: tokens.colorNeutralForeground2,
+ boxSizing: 'border-box',
+ textWrap: 'nowrap',
+
+ // Styles for the medium (default) size
+ height: '32px',
+ ...shorthands.padding(tokens.spacingHorizontalSNudge),
+ ...typographyStyles.body1,
+});
+
 /**
  * Styles for the root slot
  */
 const useStyles = makeStyles({
- root: {
- display: 'flex',
- alignItems: 'center',
- color: tokens.colorNeutralForeground2,
- boxSizing: 'border-box',
- textWrap: 'nowrap',
- },
  icon: {
  display: 'inline-flex',
  alignItems: 'center',
@@ -31,11 +37,6 @@ const useStyles = makeStyles({
  ...shorthands.padding(tokens.spacingHorizontalSNudge),
  ...typographyStyles.caption1,
  },
- medium: {
- height: '32px',
- ...shorthands.padding(tokens.spacingHorizontalSNudge),
- ...typographyStyles.body1,
- },
  large: {
  height: '40px',
  ...shorthands.padding(tokens.spacingHorizontalS),
@@ -59,21 +60,27 @@ const useStyles = makeStyles({
  * Apply styling to the BreadcrumbItem slots based on the state
  */
 export const useBreadcrumbItemStyles_unstable = (state: BreadcrumbItemState): BreadcrumbItemState => {
+ const resetStyles = useBreadcrumbItemResetStyles();
  const styles = useStyles();
  const iconStyles = useIconStyles();
  const size = state.size || 'medium';
+ const sizeMap = {
+ small: styles.small,
+ medium: '', // Medium is the default. No need to apply any styles
+ large: styles.large,
+ } as const;
  const currentSizeMap = {
  small: styles.currentSmall,
  medium: styles.currentMedium,
  large: styles.currentLarge,
- };
+ } as const;
  const noSpacingStyle =
  state.isInteractive || (!state.isInteractive && state.size === 'small') ? styles.noSpacing : '';
 
  state.root.className = mergeClasses(
  breadcrumbItemClassNames.root,
- styles.root,
- styles[size],
+ resetStyles,
+ sizeMap[size],
  state.current && currentSizeMap[size],
  noSpacingStyle,
  state.root.className,