From 7a167dc1f72c8a9ef7a6fb6c43682e6511b56285 Mon Sep 17 00:00:00 2001 From: Valentyna Date: Tue, 24 Oct 2023 14:26:05 +0200 Subject: [PATCH 1/8] Removed slash divider type --- .../react-breadcrumb-preview/docs/Spec.md | 22 +++--- .../components/Breadcrumb/Breadcrumb.types.ts | 11 +-- .../Breadcrumb/BreadcrumbContext.ts | 1 - .../components/Breadcrumb/useBreadcrumb.ts | 3 +- .../Breadcrumb/useBreadcrumbContextValue.ts | 4 +- .../BreadcrumbDivider.test.tsx | 73 ------------------- .../BreadcrumbDivider.types.ts | 3 - .../useBreadcrumbDivider.tsx | 14 +--- .../BreadcrumbItem/BreadcrumbItem.types.ts | 12 +-- 9 files changed, 18 insertions(+), 125 deletions(-) diff --git a/packages/react-components/react-breadcrumb-preview/docs/Spec.md b/packages/react-components/react-breadcrumb-preview/docs/Spec.md index d92e53768a60a7..daaed7236302e2 100644 --- a/packages/react-components/react-breadcrumb-preview/docs/Spec.md +++ b/packages/react-components/react-breadcrumb-preview/docs/Spec.md @@ -81,17 +81,17 @@ const BreadcrumbExampleIconDivider = props => ( const BreadcrumbV9Example = props => ( - {}}> + Home - {}}> + Gallery - {}}> + About @@ -102,17 +102,14 @@ const BreadcrumbV9Example = props => ( ## Variants -### BreadcrumbItem variants +### Breadcrumb item variants -- Non-clickable element which is BreadcrumbItem component. -- Button - BreadcrumbButton component. - Link - BreadcrumbButton component with `as="a"` and `href` attributes. - Dropdown menu - can be added by a partner using JSX composition. ### Icon -Breadcrumb items can have icons. If you need an icon for an interactive item, use it inside BreadcrumButton. -For non-interactive items use the icon inside BreadcrumbItem. +Breadcrumb items can have icons. ### Size @@ -162,11 +159,10 @@ Dropdown contains collapsed items. #### API -| Property | Values | Default | Purpose | -| ----------- | -------------------------- | --------- | ------------------------------ | -| dividerType | `chevron`, `slash` | `chevron` | Sets type of divider | -| focusMode | `tab`, `arrow` | `tab` | Sets focus mode | -| size | `small`, `medium`, `large` | `medium` | Defines size of the Breadcrumb | +| Property | Values | Default | Purpose | +| --------- | -------------------------- | -------- | ------------------------------ | +| focusMode | `tab`, `arrow` | `tab` | Sets focus mode | +| size | `small`, `medium`, `large` | `medium` | Defines size of the Breadcrumb | ### BreadcrumbItem diff --git a/packages/react-components/react-breadcrumb-preview/src/components/Breadcrumb/Breadcrumb.types.ts b/packages/react-components/react-breadcrumb-preview/src/components/Breadcrumb/Breadcrumb.types.ts index 0c185b4db64771..9aba87010b906e 100644 --- a/packages/react-components/react-breadcrumb-preview/src/components/Breadcrumb/Breadcrumb.types.ts +++ b/packages/react-components/react-breadcrumb-preview/src/components/Breadcrumb/Breadcrumb.types.ts @@ -8,7 +8,7 @@ export type BreadcrumbItem = { /** * Data shared between breadcrumb components */ -export type BreadcrumbContextValues = Required> & { +export type BreadcrumbContextValues = Required> & { items: Set; registerItem: (item: BreadcrumbItem) => void; removeItem: (item: BreadcrumbItem) => void; @@ -44,13 +44,6 @@ export type BreadcrumbProps = ComponentProps & { */ focusMode?: 'arrow' | 'tab'; - /** - * Controls type of the divider. - * - * @default 'chevron' - */ - dividerType?: 'chevron' | 'slash'; - /** * Controls size of Breadcrumb items and dividers. * @@ -62,4 +55,4 @@ export type BreadcrumbProps = ComponentProps & { /** * State used in rendering Breadcrumb */ -export type BreadcrumbState = ComponentState & Required>; +export type BreadcrumbState = ComponentState & Required>; diff --git a/packages/react-components/react-breadcrumb-preview/src/components/Breadcrumb/BreadcrumbContext.ts b/packages/react-components/react-breadcrumb-preview/src/components/Breadcrumb/BreadcrumbContext.ts index b46096601022dc..441e263ff46a43 100644 --- a/packages/react-components/react-breadcrumb-preview/src/components/Breadcrumb/BreadcrumbContext.ts +++ b/packages/react-components/react-breadcrumb-preview/src/components/Breadcrumb/BreadcrumbContext.ts @@ -8,7 +8,6 @@ const BreadcrumbContext = React.createContext ({}), removeItem: () => ({}), diff --git a/packages/react-components/react-breadcrumb-preview/src/components/Breadcrumb/useBreadcrumb.ts b/packages/react-components/react-breadcrumb-preview/src/components/Breadcrumb/useBreadcrumb.ts index a55ee6d09d652d..a6ca35cb8e9ed5 100644 --- a/packages/react-components/react-breadcrumb-preview/src/components/Breadcrumb/useBreadcrumb.ts +++ b/packages/react-components/react-breadcrumb-preview/src/components/Breadcrumb/useBreadcrumb.ts @@ -13,7 +13,7 @@ import { useArrowNavigationGroup } from '@fluentui/react-tabster'; * @param ref - reference to root HTMLElement of Breadcrumb */ export const useBreadcrumb_unstable = (props: BreadcrumbProps, ref: React.Ref): BreadcrumbState => { - const { focusMode = 'tab', dividerType = 'chevron', size = 'medium', list, ...rest } = props; + const { focusMode = 'tab', size = 'medium', list, ...rest } = props; const focusAttributes = useArrowNavigationGroup({ circular: true, @@ -36,7 +36,6 @@ export const useBreadcrumb_unstable = (props: BreadcrumbProps, ref: React.Ref(new Set()); const registerItem = React.useCallback((item: BreadcrumbItem) => { @@ -27,5 +27,5 @@ export function useBreadcrumbContextValues_unstable(state: BreadcrumbState): Bre const hasInteractiveItems = React.useMemo(() => [...items].some(item => item.type === 'button'), [items]); - return { dividerType, size, items, registerItem, removeItem, hasInteractiveItems }; + return { size, items, registerItem, removeItem, hasInteractiveItems }; } diff --git a/packages/react-components/react-breadcrumb-preview/src/components/BreadcrumbDivider/BreadcrumbDivider.test.tsx b/packages/react-components/react-breadcrumb-preview/src/components/BreadcrumbDivider/BreadcrumbDivider.test.tsx index 8343ddc43bdcee..2b4f5d4cabd6d6 100644 --- a/packages/react-components/react-breadcrumb-preview/src/components/BreadcrumbDivider/BreadcrumbDivider.test.tsx +++ b/packages/react-components/react-breadcrumb-preview/src/components/BreadcrumbDivider/BreadcrumbDivider.test.tsx @@ -11,8 +11,6 @@ describe('BreadcrumbDivider', () => { displayName: 'BreadcrumbDivider', }); - // TODO create visual regression tests in /apps/vr-tests - it('renders a default state', () => { const result = render(); expect(result.container).toMatchInlineSnapshot(` @@ -39,75 +37,4 @@ describe('BreadcrumbDivider', () => { `); }); - - it('renders divider with slash', () => { - const result = render( - - - , - ); - expect(result.container).toMatchInlineSnapshot(` -
- -
- `); - }); - - it('renders custom divider', () => { - const result = render( - - - - - , - ); - expect(result.container).toMatchInlineSnapshot(` -
- -
- `); - }); }); diff --git a/packages/react-components/react-breadcrumb-preview/src/components/BreadcrumbDivider/BreadcrumbDivider.types.ts b/packages/react-components/react-breadcrumb-preview/src/components/BreadcrumbDivider/BreadcrumbDivider.types.ts index 66bb8c92d84e38..88e4b24d28d05a 100644 --- a/packages/react-components/react-breadcrumb-preview/src/components/BreadcrumbDivider/BreadcrumbDivider.types.ts +++ b/packages/react-components/react-breadcrumb-preview/src/components/BreadcrumbDivider/BreadcrumbDivider.types.ts @@ -13,6 +13,3 @@ export type BreadcrumbDividerProps = ComponentProps & {} * State used in rendering BreadcrumbDivider */ export type BreadcrumbDividerState = ComponentState; -// TODO: Remove semicolon from previous line, uncomment next line, -//and provide union of props to pick from BreadcrumbDividerProps. -// & Required> diff --git a/packages/react-components/react-breadcrumb-preview/src/components/BreadcrumbDivider/useBreadcrumbDivider.tsx b/packages/react-components/react-breadcrumb-preview/src/components/BreadcrumbDivider/useBreadcrumbDivider.tsx index 4aae61c5bd3dcb..1fde1bb3a314aa 100644 --- a/packages/react-components/react-breadcrumb-preview/src/components/BreadcrumbDivider/useBreadcrumbDivider.tsx +++ b/packages/react-components/react-breadcrumb-preview/src/components/BreadcrumbDivider/useBreadcrumbDivider.tsx @@ -26,9 +26,9 @@ export const useBreadcrumbDivider_unstable = ( props: BreadcrumbDividerProps, ref: React.Ref, ): BreadcrumbDividerState => { - const { size, dividerType } = useBreadcrumbContext_unstable(); + const { size } = useBreadcrumbContext_unstable(); const { dir } = useFluent(); - const icon = getDividerIcon(size, dividerType, dir); + const icon = getDividerIcon(size, dir); return { components: { @@ -63,18 +63,10 @@ const dividerIcons = { * Get icon of the divider * * @param size - size of the Breadcrumb - * @param dividerType - type of the divider, can be `slash` or `chevron` */ -function getDividerIcon( - size: BreadcrumbProps['size'] = 'medium', - dividerType: BreadcrumbProps['dividerType'], - dir: string, -) { +function getDividerIcon(size: BreadcrumbProps['size'] = 'medium', dir: string) { const dividerIcon = dir === 'rtl' ? dividerIcons.rtl : dividerIcons.ltr; if (size === 'small') { - if (dividerType === 'slash') { - return dir === 'rtl' ? '\\' : '/'; - } return dividerIcon.small; } if (size === 'large') { diff --git a/packages/react-components/react-breadcrumb-preview/src/components/BreadcrumbItem/BreadcrumbItem.types.ts b/packages/react-components/react-breadcrumb-preview/src/components/BreadcrumbItem/BreadcrumbItem.types.ts index d3cd3ba508184f..3f2df56a1180b6 100644 --- a/packages/react-components/react-breadcrumb-preview/src/components/BreadcrumbItem/BreadcrumbItem.types.ts +++ b/packages/react-components/react-breadcrumb-preview/src/components/BreadcrumbItem/BreadcrumbItem.types.ts @@ -13,14 +13,4 @@ export type BreadcrumbItemProps = ComponentProps & Pick & - Required> & { - /** - * Defines whether item is interactive or not. - */ - isInteractive?: boolean; - /** - * Defines whether Breadcrumb type is interactive or not. - */ - hasInteractiveItems?: boolean; - }; +export type BreadcrumbItemState = ComponentState & Required>; From 0f9fcdfd649843765f201d14477fa95931b7dda5 Mon Sep 17 00:00:00 2001 From: Valentyna Date: Tue, 24 Oct 2023 15:20:22 +0200 Subject: [PATCH 2/8] Removed non-interactive item --- .../docs/MIGRATION.md | 4 +- .../react-breadcrumb-preview/docs/Spec.md | 53 ++++-------------- .../assets/breadcrumb-not-interactive.png | Bin 9868 -> 0 bytes .../etc/react-breadcrumb-preview.api.md | 19 ++----- .../components/Breadcrumb/Breadcrumb.cy.tsx | 34 ----------- .../components/Breadcrumb/Breadcrumb.test.tsx | 42 +------------- .../components/Breadcrumb/Breadcrumb.types.ts | 12 +--- .../Breadcrumb/BreadcrumbContext.ts | 4 -- .../Breadcrumb/useBreadcrumbContextValue.ts | 30 +--------- .../BreadcrumbButton.test.tsx | 2 - .../BreadcrumbButton/useBreadcrumbButton.ts | 13 +---- .../useBreadcrumbButtonStyles.styles.ts | 31 +++++++++- .../BreadcrumbItem/BreadcrumbItem.test.tsx | 2 - .../BreadcrumbItem/useBreadcrumbItem.ts | 6 +- .../useBreadcrumbItemStyles.styles.ts | 45 +-------------- .../src/shared/useIconStyles.styles.ts | 32 ----------- .../Breadcrumb/BreadcrumbBestPractices.md | 2 - .../Breadcrumb/BreadcrumbSize.stories.tsx | 15 +---- .../BreadcrumbSlashDivider.stories.tsx | 20 ------- .../stories/Breadcrumb/index.stories.tsx | 1 - 20 files changed, 57 insertions(+), 310 deletions(-) delete mode 100644 packages/react-components/react-breadcrumb-preview/docs/assets/breadcrumb-not-interactive.png delete mode 100644 packages/react-components/react-breadcrumb-preview/src/shared/useIconStyles.styles.ts delete mode 100644 packages/react-components/react-breadcrumb-preview/stories/Breadcrumb/BreadcrumbSlashDivider.stories.tsx diff --git a/packages/react-components/react-breadcrumb-preview/docs/MIGRATION.md b/packages/react-components/react-breadcrumb-preview/docs/MIGRATION.md index ee92b61258bd35..3b0149478378be 100644 --- a/packages/react-components/react-breadcrumb-preview/docs/MIGRATION.md +++ b/packages/react-components/react-breadcrumb-preview/docs/MIGRATION.md @@ -55,7 +55,7 @@ BreadcrumbItem component contains similar props in V9. | `ariaLabel` | | | `className` | | | `componentRef` | | -| `dividerAs` | `dividerType` | +| `dividerAs` | | | `focusZoneProps` | | | `maxDisplayedItems` | | | | `size` | @@ -85,7 +85,7 @@ BreadcrumbDivider has default `span`. BreadcrumbLink has `a` and Breadcrumb has | `className` | | | `content` | | | `design` | | -| | `dividerType` | +| | | | `size` | `size` | | `styles` | | | `variables` | | diff --git a/packages/react-components/react-breadcrumb-preview/docs/Spec.md b/packages/react-components/react-breadcrumb-preview/docs/Spec.md index daaed7236302e2..2e86b7d6817a56 100644 --- a/packages/react-components/react-breadcrumb-preview/docs/Spec.md +++ b/packages/react-components/react-breadcrumb-preview/docs/Spec.md @@ -166,20 +166,10 @@ Dropdown contains collapsed items. ### BreadcrumbItem -#### Anatomy - -![visual anatomy of the BreadcrumbItem component](./assets/breadcrumb-item-anatomy.png) - -BreadcrumbItem can be: - -- Button/Link - BreadcrumbButton component is used inside BreadcrumbItem. -- Non-clickable content (text and/or icon). -- Dropdown Menu +BreadcrumbItem is a container for BreadcrumbButton. #### DOM -Non-clickable element - ```HTML
  • {children} @@ -196,7 +186,7 @@ Link
    • ``` -Button +Button (used only as OverflowMenu) TODO ```HTML
  • @@ -210,35 +200,28 @@ Usage ```jsx - Item 1 + + Item 1 + - console.log('smth...')}> + Item 2 - - Item 2 + + Item 3 ``` -#### API - -| Property | Values | Default | Purpose | -| -------- | ------- | ------- | ---------------------- | -| current | boolean | false | Indicates current page | - #### Breadcrumb icon ```jsx }>Item -}> - Item - ``` ### BreadcrumbDivider @@ -260,18 +243,8 @@ Usage
    • ``` -Type of the divider is passed from the `Breadcrumb` component. In case if partner wants to have a custom divider it should be passed as `children` prop. -The slash divider is only used in a small breadcrumb. - ```jsx - - Item - - - - Item - - + Item Item @@ -281,7 +254,7 @@ The slash divider is only used in a small breadcrumb. ### BreadcrumbButton ```jsx - console.log('smth...')}>Button Item +Item ``` #### API @@ -389,12 +362,6 @@ Breadcrumb can have the folloing states: ![Breadcrumb states](./assets/beadcrumb-states.png) -#### Non-interactive Breadcrumb Item - -Non-interactive style variation for places where the Breadcrumb is purely representational or informational. Usually this instance is mostly used to describe file path location, etc. - -![Non-interactive Breadcrumb](./assets/breadcrumb-not-interactive.png) - #### Tooltip Tooltip is shown `onHover` on collapsed menu or items with long names. diff --git a/packages/react-components/react-breadcrumb-preview/docs/assets/breadcrumb-not-interactive.png b/packages/react-components/react-breadcrumb-preview/docs/assets/breadcrumb-not-interactive.png deleted file mode 100644 index 49dc5bcadba971f3d5351d5efcb2a32a1caeb2c3..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 9868 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 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 98553779036333..374b67d93cbbd4 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 @@ -40,12 +40,7 @@ export type BreadcrumbButtonState = ComponentState & Omit export const breadcrumbClassNames: SlotClassNames; // @public -export type BreadcrumbContextValues = Required> & { - items: Set; - registerItem: (item: BreadcrumbItem_2) => void; - removeItem: (item: BreadcrumbItem_2) => void; - hasInteractiveItems: boolean; -}; +export type BreadcrumbContextValues = Required>; // @public export const BreadcrumbDivider: ForwardRefComponent; @@ -79,20 +74,16 @@ export type BreadcrumbItemSlots = { }; // @public -export type BreadcrumbItemState = ComponentState & Required> & { - isInteractive?: boolean; - hasInteractiveItems?: boolean; -}; +export type BreadcrumbItemState = ComponentState & Required>; // @public export type BreadcrumbProps = ComponentProps & { focusMode?: 'arrow' | 'tab'; - dividerType?: 'chevron' | 'slash'; size?: 'small' | 'medium' | 'large'; }; // @internal (undocumented) -export const BreadcrumbProvider: React_2.Provider; +export const BreadcrumbProvider: React_2.Provider> | undefined>; // @public (undocumented) export type BreadcrumbSlots = { @@ -101,7 +92,7 @@ export type BreadcrumbSlots = { }; // @public -export type BreadcrumbState = ComponentState & Required>; +export type BreadcrumbState = ComponentState & Required>; // @public (undocumented) export const isTruncatableBreadcrumbContent: (content: string, maxLength: number) => boolean; @@ -151,7 +142,7 @@ export const useBreadcrumbButton_unstable: (props: BreadcrumbButtonProps, ref: R export const useBreadcrumbButtonStyles_unstable: (state: BreadcrumbButtonState) => BreadcrumbButtonState; // @internal (undocumented) -export const useBreadcrumbContext_unstable: () => BreadcrumbContextValues; +export const useBreadcrumbContext_unstable: () => Required>; // @public export const useBreadcrumbDivider_unstable: (props: BreadcrumbDividerProps, ref: React_2.Ref) => BreadcrumbDividerState; diff --git a/packages/react-components/react-breadcrumb-preview/src/components/Breadcrumb/Breadcrumb.cy.tsx b/packages/react-components/react-breadcrumb-preview/src/components/Breadcrumb/Breadcrumb.cy.tsx index 84069a6087d256..1c96ab39d9fa52 100644 --- a/packages/react-components/react-breadcrumb-preview/src/components/Breadcrumb/Breadcrumb.cy.tsx +++ b/packages/react-components/react-breadcrumb-preview/src/components/Breadcrumb/Breadcrumb.cy.tsx @@ -41,24 +41,6 @@ const BreadcrumbSampleWithButton = (props: BreadcrumbProps) => ( ); -const NonInteractiveBreadcrumbSample = (props: BreadcrumbProps) => ( - <> -

    - Before -

    - - - Item 1 - Item 2 - Item 3 - - -

    - After -

    - -); - describe('Breadcrumb', () => { describe('focus behaviors for BreadcrumbButton', () => { describe('focusMode="tab"(default)', () => { @@ -101,20 +83,4 @@ describe('Breadcrumb', () => { }); }); }); - - describe('focus behaviors for BreadcrumbItem', () => { - it('should not be focusable', () => { - mountFluent(); - - cy.get('#before').focus(); - - cy.get('#breadcrumb-item-1').should('not.be.focused'); - cy.get('#before').should('be.focused'); - - cy.realPress('Tab'); - - cy.get('#breadcrumb-item-1').should('not.be.focused'); - cy.get('#after').should('be.focused'); - }); - }); }); diff --git a/packages/react-components/react-breadcrumb-preview/src/components/Breadcrumb/Breadcrumb.test.tsx b/packages/react-components/react-breadcrumb-preview/src/components/Breadcrumb/Breadcrumb.test.tsx index d9069758c72e4a..6c0f80a8c7d2d3 100644 --- a/packages/react-components/react-breadcrumb-preview/src/components/Breadcrumb/Breadcrumb.test.tsx +++ b/packages/react-components/react-breadcrumb-preview/src/components/Breadcrumb/Breadcrumb.test.tsx @@ -12,8 +12,6 @@ describe('Breadcrumb', () => { displayName: 'Breadcrumb', }); - // create visual regression tests in /apps/vr-tests - it('renders a default state with BreadcrumbButton', () => { const result = render( @@ -47,45 +45,7 @@ describe('Breadcrumb', () => { `); }); - it('renders a small non-interactive Breadcrumb with a slash divider', () => { - const result = render( - - Item 1 - - Item 2 - , - ); - expect(result.container).toMatchInlineSnapshot(` -
    - -
    - `); - }); + it('renders with `a` tag', () => { const result = render( diff --git a/packages/react-components/react-breadcrumb-preview/src/components/Breadcrumb/Breadcrumb.types.ts b/packages/react-components/react-breadcrumb-preview/src/components/Breadcrumb/Breadcrumb.types.ts index 9aba87010b906e..d7c6a069b921f2 100644 --- a/packages/react-components/react-breadcrumb-preview/src/components/Breadcrumb/Breadcrumb.types.ts +++ b/packages/react-components/react-breadcrumb-preview/src/components/Breadcrumb/Breadcrumb.types.ts @@ -1,19 +1,9 @@ import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities'; -export type BreadcrumbItem = { - key: string; - type: 'button' | 'non-interactive'; -}; - /** * Data shared between breadcrumb components */ -export type BreadcrumbContextValues = Required> & { - items: Set; - registerItem: (item: BreadcrumbItem) => void; - removeItem: (item: BreadcrumbItem) => void; - hasInteractiveItems: boolean; -}; +export type BreadcrumbContextValues = Required>; export type BreadcrumbSlots = { /** diff --git a/packages/react-components/react-breadcrumb-preview/src/components/Breadcrumb/BreadcrumbContext.ts b/packages/react-components/react-breadcrumb-preview/src/components/Breadcrumb/BreadcrumbContext.ts index 441e263ff46a43..8acf2038e434ba 100644 --- a/packages/react-components/react-breadcrumb-preview/src/components/Breadcrumb/BreadcrumbContext.ts +++ b/packages/react-components/react-breadcrumb-preview/src/components/Breadcrumb/BreadcrumbContext.ts @@ -8,10 +8,6 @@ const BreadcrumbContext = React.createContext ({}), - removeItem: () => ({}), - hasInteractiveItems: false, }; /** diff --git a/packages/react-components/react-breadcrumb-preview/src/components/Breadcrumb/useBreadcrumbContextValue.ts b/packages/react-components/react-breadcrumb-preview/src/components/Breadcrumb/useBreadcrumbContextValue.ts index e8dc13f5ff268a..cc49210ccd5906 100644 --- a/packages/react-components/react-breadcrumb-preview/src/components/Breadcrumb/useBreadcrumbContextValue.ts +++ b/packages/react-components/react-breadcrumb-preview/src/components/Breadcrumb/useBreadcrumbContextValue.ts @@ -1,31 +1,5 @@ -import * as React from 'react'; -import type { BreadcrumbContextValues, BreadcrumbItem, BreadcrumbState } from './Breadcrumb.types'; +import type { BreadcrumbContextValues, BreadcrumbState } from './Breadcrumb.types'; export function useBreadcrumbContextValues_unstable(state: BreadcrumbState): BreadcrumbContextValues { - const { size } = state; - const [items, setItems] = React.useState(new Set()); - - const registerItem = React.useCallback((item: BreadcrumbItem) => { - setItems(prevItems => { - const newItems = new Set(prevItems); - - newItems.add(item); - - return newItems; - }); - }, []); - - const removeItem = React.useCallback((item: BreadcrumbItem) => { - setItems(prevItems => { - const newItems = new Set(prevItems); - - newItems.delete(item); - - return newItems; - }); - }, []); - - const hasInteractiveItems = React.useMemo(() => [...items].some(item => item.type === 'button'), [items]); - - return { size, items, registerItem, removeItem, hasInteractiveItems }; + return state; } diff --git a/packages/react-components/react-breadcrumb-preview/src/components/BreadcrumbButton/BreadcrumbButton.test.tsx b/packages/react-components/react-breadcrumb-preview/src/components/BreadcrumbButton/BreadcrumbButton.test.tsx index e3a0448e96736c..1e0da8c7fbdb57 100644 --- a/packages/react-components/react-breadcrumb-preview/src/components/BreadcrumbButton/BreadcrumbButton.test.tsx +++ b/packages/react-components/react-breadcrumb-preview/src/components/BreadcrumbButton/BreadcrumbButton.test.tsx @@ -22,8 +22,6 @@ describe('BreadcrumbButton', () => { }, }); - // TODO create visual regression tests in /apps/vr-tests - it('renders a default state', () => { const result = render(Default BreadcrumbButton); expect(result.container).toMatchInlineSnapshot(` diff --git a/packages/react-components/react-breadcrumb-preview/src/components/BreadcrumbButton/useBreadcrumbButton.ts b/packages/react-components/react-breadcrumb-preview/src/components/BreadcrumbButton/useBreadcrumbButton.ts index 11be27204dd2fd..96fa711090851f 100644 --- a/packages/react-components/react-breadcrumb-preview/src/components/BreadcrumbButton/useBreadcrumbButton.ts +++ b/packages/react-components/react-breadcrumb-preview/src/components/BreadcrumbButton/useBreadcrumbButton.ts @@ -1,8 +1,6 @@ import * as React from 'react'; import { useButton_unstable } from '@fluentui/react-button'; -import { useId } from '@fluentui/react-utilities'; import { useBreadcrumbContext_unstable } from '../Breadcrumb/BreadcrumbContext'; -import { BreadcrumbItem } from '../Breadcrumb/Breadcrumb.types'; import type { BreadcrumbButtonProps, BreadcrumbButtonState } from './BreadcrumbButton.types'; /** @@ -18,17 +16,8 @@ export const useBreadcrumbButton_unstable = ( props: BreadcrumbButtonProps, ref: React.Ref, ): BreadcrumbButtonState => { - const { size, registerItem, removeItem } = useBreadcrumbContext_unstable(); + const { size } = useBreadcrumbContext_unstable(); const { current = false, icon, ...rest } = props; - const id = useId('breadcrumb-button-', props.id); - - React.useEffect(() => { - const item: BreadcrumbItem = { key: id, type: 'button' }; - - registerItem(item); - - return () => removeItem(item); - }, [id, registerItem, removeItem]); return { ...useButton_unstable( diff --git a/packages/react-components/react-breadcrumb-preview/src/components/BreadcrumbButton/useBreadcrumbButtonStyles.styles.ts b/packages/react-components/react-breadcrumb-preview/src/components/BreadcrumbButton/useBreadcrumbButtonStyles.styles.ts index 190a35d0dc85b5..d7ea77b33ba75c 100644 --- a/packages/react-components/react-breadcrumb-preview/src/components/BreadcrumbButton/useBreadcrumbButtonStyles.styles.ts +++ b/packages/react-components/react-breadcrumb-preview/src/components/BreadcrumbButton/useBreadcrumbButtonStyles.styles.ts @@ -3,7 +3,6 @@ import type { BreadcrumbButtonSlots, BreadcrumbButtonState } from './BreadcrumbB import type { SlotClassNames } from '@fluentui/react-utilities'; import { useButtonStyles_unstable } from '@fluentui/react-button'; import { tokens, typographyStyles } from '@fluentui/react-theme'; -import { useIconStyles } from '../../shared/useIconStyles.styles'; /** * Static CSS class names used internally for the component slots. @@ -13,6 +12,36 @@ export const breadcrumbButtonClassNames: SlotClassNames = icon: 'fui-BreadcrumbButton__icon', }; +/** + * CSS variable names used internally for styling in the Breadcrumb. + */ +const breadcrumbCSSVars = { + breadcrumbIconSizeVar: '--fui-Breadcrumb--icon-size', + breadcrumbIconLineHeightVar: '--fui-Breadcrumb--icon-line-height', +}; + +const useIconStyles = makeStyles({ + base: { + fontSize: `var(${breadcrumbCSSVars.breadcrumbIconSizeVar})`, + height: `var(${breadcrumbCSSVars.breadcrumbIconSizeVar})`, + lineHeight: `var(${breadcrumbCSSVars.breadcrumbIconLineHeightVar})`, + width: `var(${breadcrumbCSSVars.breadcrumbIconSizeVar})`, + marginRight: tokens.spacingHorizontalXS, + }, + small: { + [breadcrumbCSSVars.breadcrumbIconSizeVar]: '12px', + [breadcrumbCSSVars.breadcrumbIconLineHeightVar]: tokens.lineHeightBase200, + }, + medium: { + [breadcrumbCSSVars.breadcrumbIconSizeVar]: '16px', + [breadcrumbCSSVars.breadcrumbIconLineHeightVar]: tokens.lineHeightBase400, + }, + large: { + [breadcrumbCSSVars.breadcrumbIconSizeVar]: '20px', + [breadcrumbCSSVars.breadcrumbIconLineHeightVar]: tokens.lineHeightBase600, + }, +}); + const defaultButtonStyles = { backgroundColor: tokens.colorTransparentBackground, color: tokens.colorNeutralForeground2, diff --git a/packages/react-components/react-breadcrumb-preview/src/components/BreadcrumbItem/BreadcrumbItem.test.tsx b/packages/react-components/react-breadcrumb-preview/src/components/BreadcrumbItem/BreadcrumbItem.test.tsx index 6f15bcbc247db5..64e55a1b116b93 100644 --- a/packages/react-components/react-breadcrumb-preview/src/components/BreadcrumbItem/BreadcrumbItem.test.tsx +++ b/packages/react-components/react-breadcrumb-preview/src/components/BreadcrumbItem/BreadcrumbItem.test.tsx @@ -21,8 +21,6 @@ describe('BreadcrumbItem', () => { }, }); - // create visual regression tests in /apps/vr-tests - it('renders a default state', () => { const result = render(Default BreadcrumbItem); expect(result.container).toMatchInlineSnapshot(` diff --git a/packages/react-components/react-breadcrumb-preview/src/components/BreadcrumbItem/useBreadcrumbItem.ts b/packages/react-components/react-breadcrumb-preview/src/components/BreadcrumbItem/useBreadcrumbItem.ts index f47d2f608b2027..e82810260b7902 100644 --- a/packages/react-components/react-breadcrumb-preview/src/components/BreadcrumbItem/useBreadcrumbItem.ts +++ b/packages/react-components/react-breadcrumb-preview/src/components/BreadcrumbItem/useBreadcrumbItem.ts @@ -16,9 +16,7 @@ export const useBreadcrumbItem_unstable = ( props: BreadcrumbItemProps, ref: React.Ref, ): BreadcrumbItemState => { - const { size, hasInteractiveItems } = useBreadcrumbContext_unstable(); - - const isInteractive = typeof props.children === 'object'; + const { size } = useBreadcrumbContext_unstable(); return { components: { root: 'li' }, @@ -30,7 +28,5 @@ export const useBreadcrumbItem_unstable = ( { elementType: 'li' }, ), size, - isInteractive, - hasInteractiveItems, }; }; 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 649a4a5be7716a..1f79ab6ae235ab 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,7 +1,7 @@ -import { makeStyles, makeResetStyles, mergeClasses, shorthands } from '@griffel/react'; +import { makeResetStyles, mergeClasses } from '@griffel/react'; import type { BreadcrumbItemSlots, BreadcrumbItemState } from './BreadcrumbItem.types'; import type { SlotClassNames } from '@fluentui/react-utilities'; -import { tokens, typographyStyles } from '@fluentui/react-theme'; +import { tokens } from '@fluentui/react-theme'; export const breadcrumbItemClassNames: SlotClassNames = { root: 'fui-BreadcrumbItem', @@ -13,30 +13,6 @@ const useBreadcrumbItemResetStyles = makeResetStyles({ 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({ - small: { - height: '24px', - ...shorthands.padding(tokens.spacingHorizontalSNudge), - ...typographyStyles.caption1, - }, - large: { - height: '40px', - ...shorthands.padding(tokens.spacingHorizontalS), - ...typographyStyles.body2, - }, - noSpacing: { - ...shorthands.padding(0), - }, }); /** @@ -44,23 +20,8 @@ const useStyles = makeStyles({ */ export const useBreadcrumbItemStyles_unstable = (state: BreadcrumbItemState): BreadcrumbItemState => { const resetStyles = useBreadcrumbItemResetStyles(); - const styles = useStyles(); - 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 noSpacingStyle = - state.isInteractive || (!state.hasInteractiveItems && state.size === 'small') ? styles.noSpacing : ''; - state.root.className = mergeClasses( - breadcrumbItemClassNames.root, - resetStyles, - sizeMap[size], - noSpacingStyle, - state.root.className, - ); + state.root.className = mergeClasses(breadcrumbItemClassNames.root, resetStyles, state.root.className); return state; }; diff --git a/packages/react-components/react-breadcrumb-preview/src/shared/useIconStyles.styles.ts b/packages/react-components/react-breadcrumb-preview/src/shared/useIconStyles.styles.ts deleted file mode 100644 index 694342498b57e3..00000000000000 --- a/packages/react-components/react-breadcrumb-preview/src/shared/useIconStyles.styles.ts +++ /dev/null @@ -1,32 +0,0 @@ -import { makeStyles } from '@griffel/react'; -import { tokens } from '@fluentui/react-theme'; - -/** - * CSS variable names used internally for styling in the Breadcrumb. - */ -export const breadcrumbCSSVars = { - breadcrumbIconSizeVar: '--fui-Breadcrumb--icon-size', - breadcrumbIconLineHeightVar: '--fui-Breadcrumb--icon-line-height', -}; - -export const useIconStyles = makeStyles({ - base: { - fontSize: `var(${breadcrumbCSSVars.breadcrumbIconSizeVar})`, - height: `var(${breadcrumbCSSVars.breadcrumbIconSizeVar})`, - lineHeight: `var(${breadcrumbCSSVars.breadcrumbIconLineHeightVar})`, - width: `var(${breadcrumbCSSVars.breadcrumbIconSizeVar})`, - marginRight: tokens.spacingHorizontalXS, - }, - small: { - [breadcrumbCSSVars.breadcrumbIconSizeVar]: '12px', - [breadcrumbCSSVars.breadcrumbIconLineHeightVar]: tokens.lineHeightBase200, - }, - medium: { - [breadcrumbCSSVars.breadcrumbIconSizeVar]: '16px', - [breadcrumbCSSVars.breadcrumbIconLineHeightVar]: tokens.lineHeightBase400, - }, - large: { - [breadcrumbCSSVars.breadcrumbIconSizeVar]: '20px', - [breadcrumbCSSVars.breadcrumbIconLineHeightVar]: tokens.lineHeightBase600, - }, -}); diff --git a/packages/react-components/react-breadcrumb-preview/stories/Breadcrumb/BreadcrumbBestPractices.md b/packages/react-components/react-breadcrumb-preview/stories/Breadcrumb/BreadcrumbBestPractices.md index d0462d5e5e4dd2..67bb5033a7e48b 100644 --- a/packages/react-components/react-breadcrumb-preview/stories/Breadcrumb/BreadcrumbBestPractices.md +++ b/packages/react-components/react-breadcrumb-preview/stories/Breadcrumb/BreadcrumbBestPractices.md @@ -8,7 +8,6 @@ - Place Breadcrumbs at the top of a page, above a list of items, or above the main content of a page. - Provide label to the Breadcrumb component using `aria-label` or `aria-labelledby` prop. - Set the `current` prop on the last item. -- Use `slash` dividers only for non-interactive file paths. - If long items are truncated, add a Tooltip to display the full text. ### Don't @@ -16,6 +15,5 @@ - Don't use Breadcrumbs as a primary way to navigate an app or site. - Avoid using custom dividers. - Do not wrap breadcrumb items. -- The last item shouldn't be interactive. diff --git a/packages/react-components/react-breadcrumb-preview/stories/Breadcrumb/BreadcrumbSize.stories.tsx b/packages/react-components/react-breadcrumb-preview/stories/Breadcrumb/BreadcrumbSize.stories.tsx index 8e521eae26a7f3..91867407fb9682 100644 --- a/packages/react-components/react-breadcrumb-preview/stories/Breadcrumb/BreadcrumbSize.stories.tsx +++ b/packages/react-components/react-breadcrumb-preview/stories/Breadcrumb/BreadcrumbSize.stories.tsx @@ -6,17 +6,6 @@ const CalendarMonth = bundleIcon(CalendarMonth20Filled, CalendarMonth20Regular); export const BreadcrumbSize = () => { return ( <> -

    Non-interactive Breadcrumb

    - - Item 1 - - Item 2 - - Item 3 - - Item 4 - -

    Interactive Breadcrumb

    Item 1 @@ -75,9 +64,7 @@ export const BreadcrumbSize = () => { BreadcrumbSize.parameters = { docs: { description: { - story: - 'Breadcrumb `size` can be `"small"`, `"medium"` (default), or `"large"`. ' + - 'Note: BreadcrumbButton and BreadcrumbItem have different spacing in "small" size.', + story: 'Breadcrumb `size` can be `"small"`, `"medium"` (default), or `"large"`. ', }, }, }; diff --git a/packages/react-components/react-breadcrumb-preview/stories/Breadcrumb/BreadcrumbSlashDivider.stories.tsx b/packages/react-components/react-breadcrumb-preview/stories/Breadcrumb/BreadcrumbSlashDivider.stories.tsx deleted file mode 100644 index a25c2d133b641b..00000000000000 --- a/packages/react-components/react-breadcrumb-preview/stories/Breadcrumb/BreadcrumbSlashDivider.stories.tsx +++ /dev/null @@ -1,20 +0,0 @@ -import * as React from 'react'; -import { Breadcrumb, BreadcrumbItem, BreadcrumbDivider } from '@fluentui/react-breadcrumb-preview'; - -export const BreadcrumbSlashDivider = () => ( - - Item 1 - - Item 2 - - Item 3 - -); - -BreadcrumbSlashDivider.parameters = { - docs: { - description: { - story: 'Use `slash` dividers only for small and non-interactive breadcrums. Use it to describe file paths.', - }, - }, -}; diff --git a/packages/react-components/react-breadcrumb-preview/stories/Breadcrumb/index.stories.tsx b/packages/react-components/react-breadcrumb-preview/stories/Breadcrumb/index.stories.tsx index 79e315224a3be7..44608200e1cd1b 100644 --- a/packages/react-components/react-breadcrumb-preview/stories/Breadcrumb/index.stories.tsx +++ b/packages/react-components/react-breadcrumb-preview/stories/Breadcrumb/index.stories.tsx @@ -4,7 +4,6 @@ import descriptionMd from './BreadcrumbDescription.md'; import bestPracticesMd from './BreadcrumbBestPractices.md'; export { Default } from './BreadcrumbDefault.stories'; export { BreadcrumbButtonWithHrefAttribute } from './BreadcrumbButtonWithHrefAttribute.stories'; -export { BreadcrumbSlashDivider } from './BreadcrumbSlashDivider.stories'; export { BreadcrumbSize } from './BreadcrumbSize.stories'; export { FocusModeArrow } from './BreadcrumbFocusMode.stories'; export { BreadcrumbWithOverflow } from './BreadcrumbWithOverflow.stories'; From 8dc8840accd54904828d381bab1b6f17267e0769 Mon Sep 17 00:00:00 2001 From: Valentyna Date: Tue, 24 Oct 2023 15:48:23 +0200 Subject: [PATCH 3/8] change files --- ...crumb-preview-6f5f21dc-b28d-40fc-bd43-acf613d0b43e.json | 7 +++++++ 1 file changed, 7 insertions(+) create mode 100644 change/@fluentui-react-breadcrumb-preview-6f5f21dc-b28d-40fc-bd43-acf613d0b43e.json diff --git a/change/@fluentui-react-breadcrumb-preview-6f5f21dc-b28d-40fc-bd43-acf613d0b43e.json b/change/@fluentui-react-breadcrumb-preview-6f5f21dc-b28d-40fc-bd43-acf613d0b43e.json new file mode 100644 index 00000000000000..df9fbe255dc163 --- /dev/null +++ b/change/@fluentui-react-breadcrumb-preview-6f5f21dc-b28d-40fc-bd43-acf613d0b43e.json @@ -0,0 +1,7 @@ +{ + "type": "major", + "comment": "BREAKING CHANGE: Removed non-interactive item and `slash` divider", + "packageName": "@fluentui/react-breadcrumb-preview", + "email": "vkozlova@microsoft.com", + "dependentChangeType": "patch" +} From 16e06ccc778865225d3a6d3f0c1b2ad16c5f72ee Mon Sep 17 00:00:00 2001 From: Valentyna Date: Tue, 24 Oct 2023 15:50:28 +0200 Subject: [PATCH 4/8] Updated VR tests --- .../stories/Breadcrumb/Breadcrumb.stories.tsx | 18 +----------------- .../src/stories/Breadcrumb/utils.tsx | 10 ---------- 2 files changed, 1 insertion(+), 27 deletions(-) diff --git a/apps/vr-tests-react-components/src/stories/Breadcrumb/Breadcrumb.stories.tsx b/apps/vr-tests-react-components/src/stories/Breadcrumb/Breadcrumb.stories.tsx index 94bffa362fa66e..38aac7ec40647e 100644 --- a/apps/vr-tests-react-components/src/stories/Breadcrumb/Breadcrumb.stories.tsx +++ b/apps/vr-tests-react-components/src/stories/Breadcrumb/Breadcrumb.stories.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; import { Breadcrumb } from '@fluentui/react-breadcrumb-preview'; -import { SampleBreadcrumbButtons, SampleBreadcrumbItems, steps } from './utils'; +import { SampleBreadcrumbButtons, steps } from './utils'; import { ComponentMeta } from '@storybook/react'; import { getStoryVariant, DARK_MODE, HIGH_CONTRAST, RTL, withStoryWrightSteps } from '../../utilities'; @@ -24,26 +24,10 @@ export const AppearanceRTL = getStoryVariant(Appearance, RTL); export const Size = () => ( <> -

    BreadcrumbButton

    -

    BreadcrumbItem

    - ); Size.storyName = 'size'; - -export const DividerType = () => ( - <> -

    BreadcrumbButton

    - - -

    BreadcrumbItem

    - - - -); - -DividerType.storyName = 'divider type'; diff --git a/apps/vr-tests-react-components/src/stories/Breadcrumb/utils.tsx b/apps/vr-tests-react-components/src/stories/Breadcrumb/utils.tsx index 6868763a88ffd6..f2119cdd97567f 100644 --- a/apps/vr-tests-react-components/src/stories/Breadcrumb/utils.tsx +++ b/apps/vr-tests-react-components/src/stories/Breadcrumb/utils.tsx @@ -35,13 +35,3 @@ export const SampleBreadcrumbButtons = (props: BreadcrumbProps) => (     ); - -export const SampleBreadcrumbItems = (props: BreadcrumbProps) => ( - - Item 1 - - Item 2 - - Item 3 - -); From f4675a014c714a5e54743c8af5a460b59a08562b Mon Sep 17 00:00:00 2001 From: Valentyna Date: Tue, 24 Oct 2023 16:33:55 +0200 Subject: [PATCH 5/8] removed todo --- packages/react-components/react-breadcrumb-preview/docs/Spec.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-components/react-breadcrumb-preview/docs/Spec.md b/packages/react-components/react-breadcrumb-preview/docs/Spec.md index 2e86b7d6817a56..931595066b99e6 100644 --- a/packages/react-components/react-breadcrumb-preview/docs/Spec.md +++ b/packages/react-components/react-breadcrumb-preview/docs/Spec.md @@ -186,7 +186,7 @@ Link ``` -Button (used only as OverflowMenu) TODO +Button (used only as OverflowMenu) ```HTML
  • From 09028f632952ff6e0a78f7642eaa2f0c2dbc7205 Mon Sep 17 00:00:00 2001 From: Valentyna Date: Wed, 25 Oct 2023 12:59:14 +0200 Subject: [PATCH 6/8] fixed build errors --- .../src/components/Breadcrumb/Breadcrumb.test.tsx | 1 - .../src/components/BreadcrumbDivider/BreadcrumbDivider.test.tsx | 2 -- 2 files changed, 3 deletions(-) diff --git a/packages/react-components/react-breadcrumb-preview/src/components/Breadcrumb/Breadcrumb.test.tsx b/packages/react-components/react-breadcrumb-preview/src/components/Breadcrumb/Breadcrumb.test.tsx index 6c0f80a8c7d2d3..6b338fed0c7ba9 100644 --- a/packages/react-components/react-breadcrumb-preview/src/components/Breadcrumb/Breadcrumb.test.tsx +++ b/packages/react-components/react-breadcrumb-preview/src/components/Breadcrumb/Breadcrumb.test.tsx @@ -3,7 +3,6 @@ import { render } from '@testing-library/react'; import { Breadcrumb } from './Breadcrumb'; import { BreadcrumbButton } from '../BreadcrumbButton/BreadcrumbButton'; import { BreadcrumbItem } from '../BreadcrumbItem/BreadcrumbItem'; -import { BreadcrumbDivider } from '../BreadcrumbDivider/BreadcrumbDivider'; import { isConformant } from '../../testing/isConformant'; describe('Breadcrumb', () => { diff --git a/packages/react-components/react-breadcrumb-preview/src/components/BreadcrumbDivider/BreadcrumbDivider.test.tsx b/packages/react-components/react-breadcrumb-preview/src/components/BreadcrumbDivider/BreadcrumbDivider.test.tsx index 2b4f5d4cabd6d6..517c6efd41c2f6 100644 --- a/packages/react-components/react-breadcrumb-preview/src/components/BreadcrumbDivider/BreadcrumbDivider.test.tsx +++ b/packages/react-components/react-breadcrumb-preview/src/components/BreadcrumbDivider/BreadcrumbDivider.test.tsx @@ -1,9 +1,7 @@ import * as React from 'react'; import { render } from '@testing-library/react'; -import { Breadcrumb } from '../Breadcrumb/Breadcrumb'; import { BreadcrumbDivider } from './BreadcrumbDivider'; import { isConformant } from '../../testing/isConformant'; -import { ArrowRight16Filled } from '@fluentui/react-icons'; describe('BreadcrumbDivider', () => { isConformant({ From b2744b80a170cba2918cf9477aae3a364117c4ec Mon Sep 17 00:00:00 2001 From: Valentina Date: Wed, 25 Oct 2023 15:25:19 +0200 Subject: [PATCH 7/8] Update packages/react-components/react-breadcrumb-preview/src/components/Breadcrumb/useBreadcrumbContextValue.ts Co-authored-by: Oleksandr Fediashov --- .../src/components/Breadcrumb/useBreadcrumbContextValue.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-components/react-breadcrumb-preview/src/components/Breadcrumb/useBreadcrumbContextValue.ts b/packages/react-components/react-breadcrumb-preview/src/components/Breadcrumb/useBreadcrumbContextValue.ts index cc49210ccd5906..a66cd6014a5307 100644 --- a/packages/react-components/react-breadcrumb-preview/src/components/Breadcrumb/useBreadcrumbContextValue.ts +++ b/packages/react-components/react-breadcrumb-preview/src/components/Breadcrumb/useBreadcrumbContextValue.ts @@ -1,5 +1,5 @@ import type { BreadcrumbContextValues, BreadcrumbState } from './Breadcrumb.types'; export function useBreadcrumbContextValues_unstable(state: BreadcrumbState): BreadcrumbContextValues { - return state; + return React.useMemo(() => ({ size }), [size]); } From 8db0f8a39d39a463ad87e7d19367379b0c5fe909 Mon Sep 17 00:00:00 2001 From: Valentyna Date: Wed, 25 Oct 2023 16:14:21 +0200 Subject: [PATCH 8/8] fixed build --- .../src/components/Breadcrumb/useBreadcrumbContextValue.ts | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/react-components/react-breadcrumb-preview/src/components/Breadcrumb/useBreadcrumbContextValue.ts b/packages/react-components/react-breadcrumb-preview/src/components/Breadcrumb/useBreadcrumbContextValue.ts index a66cd6014a5307..a82f1cf695d7c7 100644 --- a/packages/react-components/react-breadcrumb-preview/src/components/Breadcrumb/useBreadcrumbContextValue.ts +++ b/packages/react-components/react-breadcrumb-preview/src/components/Breadcrumb/useBreadcrumbContextValue.ts @@ -1,5 +1,7 @@ +import * as React from 'react'; import type { BreadcrumbContextValues, BreadcrumbState } from './Breadcrumb.types'; export function useBreadcrumbContextValues_unstable(state: BreadcrumbState): BreadcrumbContextValues { + const { size } = state; return React.useMemo(() => ({ size }), [size]); }