From f67ad9c870170803aa19cfdaa6724bd634fcf820 Mon Sep 17 00:00:00 2001 From: Valentyna Date: Fri, 22 Sep 2023 19:06:34 +0200 Subject: [PATCH 1/2] Added makeResetStyles and disableFocusable prop --- .../etc/react-breadcrumb-preview.api.md | 2 +- .../BreadcrumbButton.types.ts | 2 +- .../useBreadcrumbItemStyles.styles.ts | 39 +++++++++++-------- 3 files changed, 25 insertions(+), 18 deletions(-) diff --git a/packages/react-components/react-breadcrumb-preview/etc/react-breadcrumb-preview.api.md b/packages/react-components/react-breadcrumb-preview/etc/react-breadcrumb-preview.api.md index d9271544cf2e6..c5ce2fb117b71 100644 --- a/packages/react-components/react-breadcrumb-preview/etc/react-breadcrumb-preview.api.md +++ b/packages/react-components/react-breadcrumb-preview/etc/react-breadcrumb-preview.api.md @@ -26,7 +26,7 @@ export const BreadcrumbButton: ForwardRefComponent; export const breadcrumbButtonClassNames: SlotClassNames; // @public -export type BreadcrumbButtonProps = ComponentProps & Pick & Pick & { +export type BreadcrumbButtonProps = ComponentProps & Pick & Pick & { current?: boolean; }; diff --git a/packages/react-components/react-breadcrumb-preview/src/components/BreadcrumbButton/BreadcrumbButton.types.ts b/packages/react-components/react-breadcrumb-preview/src/components/BreadcrumbButton/BreadcrumbButton.types.ts index 9cf70496e0d39..302474cdc4224 100644 --- a/packages/react-components/react-breadcrumb-preview/src/components/BreadcrumbButton/BreadcrumbButton.types.ts +++ b/packages/react-components/react-breadcrumb-preview/src/components/BreadcrumbButton/BreadcrumbButton.types.ts @@ -9,7 +9,7 @@ export type BreadcrumbButtonSlots = ButtonSlots; */ export type BreadcrumbButtonProps = ComponentProps & Pick & - Pick & { + Pick & { /** * Defines current sate of BreadcrumbButton. * diff --git a/packages/react-components/react-breadcrumb-preview/src/components/BreadcrumbItem/useBreadcrumbItemStyles.styles.ts b/packages/react-components/react-breadcrumb-preview/src/components/BreadcrumbItem/useBreadcrumbItemStyles.styles.ts index 73665291148b2..57494004dd167 100644 --- a/packages/react-components/react-breadcrumb-preview/src/components/BreadcrumbItem/useBreadcrumbItemStyles.styles.ts +++ b/packages/react-components/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 = { 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, From 62304fb3c638911b228d9d8ae119ca003ede64f0 Mon Sep 17 00:00:00 2001 From: Valentyna Date: Mon, 25 Sep 2023 15:13:54 +0200 Subject: [PATCH 2/2] change files --- ...crumb-preview-7e120363-acbe-4042-a23f-87482c4bb9f1.json | 7 +++++++ 1 file changed, 7 insertions(+) create mode 100644 change/@fluentui-react-breadcrumb-preview-7e120363-acbe-4042-a23f-87482c4bb9f1.json 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 new file mode 100644 index 0000000000000..baa965c5c6613 --- /dev/null +++ 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" +}