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 - -); 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" +} 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 d92e53768a60a7..931595066b99e6 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,28 +159,17 @@ 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 -#### 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} @@ -200,7 +186,7 @@ Link
    • ``` -Button +Button (used only as OverflowMenu) ```HTML
  • @@ -214,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 @@ -264,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 @@ -285,7 +254,7 @@ The slash divider is only used in a small breadcrumb. ### BreadcrumbButton ```jsx - console.log('smth...')}>Button Item +Item ``` #### API @@ -393,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 49dc5bcadba971..00000000000000 Binary files a/packages/react-components/react-breadcrumb-preview/docs/assets/breadcrumb-not-interactive.png and /dev/null differ 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..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', () => { @@ -12,8 +11,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 +44,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 0c185b4db64771..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 = { /** @@ -44,13 +34,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 +45,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..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,11 +8,6 @@ const BreadcrumbContext = React.createContext ({}), - removeItem: () => ({}), - hasInteractiveItems: false, }; /** 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) => { - 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 { dividerType, size, items, registerItem, removeItem, hasInteractiveItems }; + const { size } = state; + return React.useMemo(() => ({ size }), [size]); } 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/BreadcrumbDivider/BreadcrumbDivider.test.tsx b/packages/react-components/react-breadcrumb-preview/src/components/BreadcrumbDivider/BreadcrumbDivider.test.tsx index 8343ddc43bdcee..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({ @@ -11,8 +9,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 +35,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.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/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>; 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';