diff --git a/change/@fluentui-react-breadcrumb-preview-e423e7a3-3b7e-424d-847c-2c4f85699fde.json b/change/@fluentui-react-breadcrumb-preview-e423e7a3-3b7e-424d-847c-2c4f85699fde.json new file mode 100644 index 00000000000000..237d9626f3d45e --- /dev/null +++ b/change/@fluentui-react-breadcrumb-preview-e423e7a3-3b7e-424d-847c-2c4f85699fde.json @@ -0,0 +1,7 @@ +{ + "type": "minor", + "comment": "feat: made BreadcrumbButton semantically as a link", + "packageName": "@fluentui/react-breadcrumb-preview", + "email": "vkozlova@microsoft.com", + "dependentChangeType": "patch" +} 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 6b338fed0c7ba9..972e104880e0bd 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 @@ -32,12 +32,12 @@ describe('Breadcrumb', () => {
  • - +
    • @@ -68,9 +68,7 @@ describe('Breadcrumb', () => { > Link 1 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 1e0da8c7fbdb57..a35254dea79414 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 @@ -26,12 +26,12 @@ describe('BreadcrumbButton', () => { const result = render(Default BreadcrumbButton); expect(result.container).toMatchInlineSnapshot(`
    - +
    `); }); @@ -42,9 +42,9 @@ describe('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 96fa711090851f..07125e03b7548e 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,5 +1,6 @@ import * as React from 'react'; import { useButton_unstable } from '@fluentui/react-button'; +import type { ButtonProps } from '@fluentui/react-button'; import { useBreadcrumbContext_unstable } from '../Breadcrumb/BreadcrumbContext'; import type { BreadcrumbButtonProps, BreadcrumbButtonState } from './BreadcrumbButton.types'; @@ -17,18 +18,20 @@ export const useBreadcrumbButton_unstable = ( ref: React.Ref, ): BreadcrumbButtonState => { const { size } = useBreadcrumbContext_unstable(); - const { current = false, icon, ...rest } = props; + const { current = false, ...rest } = props; return { ...useButton_unstable( { appearance: 'subtle', - ...rest, + role: undefined, + type: undefined, + as: 'a' as const, iconPosition: 'before', - icon, 'aria-current': current ? props['aria-current'] ?? 'page' : undefined, 'aria-disabled': current ? props['aria-disabled'] ?? true : undefined, - }, + ...rest, + } as ButtonProps, ref, ), current, 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 d7ea77b33ba75c..788e1e4ac4af59 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 @@ -1,8 +1,9 @@ import { makeStyles, mergeClasses, shorthands } from '@griffel/react'; import type { BreadcrumbButtonSlots, BreadcrumbButtonState } from './BreadcrumbButton.types'; import type { SlotClassNames } from '@fluentui/react-utilities'; -import { useButtonStyles_unstable } from '@fluentui/react-button'; +import { useButtonStyles_unstable, buttonClassNames } from '@fluentui/react-button'; import { tokens, typographyStyles } from '@fluentui/react-theme'; +import { iconFilledClassName, iconRegularClassName } from '@fluentui/react-icons'; /** * Static CSS class names used internally for the component slots. @@ -47,6 +48,20 @@ const defaultButtonStyles = { color: tokens.colorNeutralForeground2, cursor: 'auto', }; + +const currentIconStyles = { + ...defaultButtonStyles, + [`& .${buttonClassNames.icon}`]: { + color: 'unset', + }, + [`& .${iconFilledClassName}`]: { + display: 'none', + }, + [`& .${iconRegularClassName}`]: { + display: 'inline', + }, +}; + const useStyles = makeStyles({ root: { minWidth: 'unset', @@ -70,13 +85,13 @@ const useStyles = makeStyles({ }, current: { ':hover': { - ...defaultButtonStyles, + ...currentIconStyles, }, ':hover:active': { - ...defaultButtonStyles, + ...currentIconStyles, }, ':disabled': { - ...defaultButtonStyles, + ...currentIconStyles, }, }, currentSmall: { diff --git a/packages/react-components/react-breadcrumb-preview/stories/Breadcrumb/BreadcrumbButtonWithHrefAttribute.stories.tsx b/packages/react-components/react-breadcrumb-preview/stories/Breadcrumb/BreadcrumbButtonWithHrefAttribute.stories.tsx deleted file mode 100644 index 462ad5e0c21a69..00000000000000 --- a/packages/react-components/react-breadcrumb-preview/stories/Breadcrumb/BreadcrumbButtonWithHrefAttribute.stories.tsx +++ /dev/null @@ -1,80 +0,0 @@ -import * as React from 'react'; -import { Breadcrumb, BreadcrumbItem, BreadcrumbButton, BreadcrumbDivider } from '@fluentui/react-breadcrumb-preview'; -import { bundleIcon, CalendarMonth20Filled, CalendarMonth20Regular, GridDots20Regular } from '@fluentui/react-icons'; -import { ButtonProps } from '@fluentui/react-components'; - -const CalendarMonth = bundleIcon(CalendarMonth20Filled, CalendarMonth20Regular); - -type Item = { - key: number; - item?: string; - linkProps?: { - 'aria-label'?: string; - href?: string; - icon?: ButtonProps['icon']; - disabled?: boolean; - }; -}; - -const linkItems: Item[] = [ - { - key: 0, - item: 'Default', - linkProps: { - href: 'https://react.fluentui.dev/?path=/docs/preview-components-breadcrumb--default', - }, - }, - { - key: 1, - item: 'Size', - linkProps: { - icon: , - 'aria-label': 'Item 1', - href: 'https://react.fluentui.dev/?path=/docs/preview-components-breadcrumb--breadcrumb-size', - disabled: true, - }, - }, - { - key: 2, - item: 'Overflow', - linkProps: { - icon: , - href: 'https://react.fluentui.dev/?path=/docs/preview-components-breadcrumb--breadcrumb-with-overflow', - }, - }, - { - key: 3, - item: 'Breadcrumb with Tooltip', - linkProps: { - disabled: true, - href: 'https://react.fluentui.dev/?path=/docs/preview-components-breadcrumb--breadcrumb-with-tooltip', - }, - }, - { - key: 4, - item: 'Breadcrumb focus mode', - linkProps: { - href: 'https://react.fluentui.dev/?path=/docs/preview-components-breadcrumb--breadcrumb-focus-mode', - }, - }, -]; - -function renderLink(el: Item, isLastItem: boolean = false) { - return ( - - - - {el.item} - - - {!isLastItem && } - - ); -} -export const BreadcrumbButtonWithHrefAttribute = () => { - return ( - - {linkItems.map((el, index) => renderLink(el, index === linkItems.length - 1))} - - ); -}; diff --git a/packages/react-components/react-breadcrumb-preview/stories/Breadcrumb/BreadcrumbDefault.stories.tsx b/packages/react-components/react-breadcrumb-preview/stories/Breadcrumb/BreadcrumbDefault.stories.tsx index 39af6d4af9ad81..58b8598ec8dccb 100644 --- a/packages/react-components/react-breadcrumb-preview/stories/Breadcrumb/BreadcrumbDefault.stories.tsx +++ b/packages/react-components/react-breadcrumb-preview/stories/Breadcrumb/BreadcrumbDefault.stories.tsx @@ -9,19 +9,33 @@ export const Default = () => { <> - Item 1 + + Item 1 + - }>Item 2 + } + > + Item 2 + - Item 3 + + Item 3 + - Item 4 + + Item 4 + 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 91867407fb9682..a622a3823ce325 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 @@ -54,7 +54,9 @@ export const BreadcrumbSize = () => { - Item 4 + } current> + Item 4 + 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 44608200e1cd1b..35d99714ef5a3e 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 @@ -3,7 +3,6 @@ import { Breadcrumb, BreadcrumbButton, BreadcrumbItem, BreadcrumbDivider } from import descriptionMd from './BreadcrumbDescription.md'; import bestPracticesMd from './BreadcrumbBestPractices.md'; export { Default } from './BreadcrumbDefault.stories'; -export { BreadcrumbButtonWithHrefAttribute } from './BreadcrumbButtonWithHrefAttribute.stories'; export { BreadcrumbSize } from './BreadcrumbSize.stories'; export { FocusModeArrow } from './BreadcrumbFocusMode.stories'; export { BreadcrumbWithOverflow } from './BreadcrumbWithOverflow.stories';