fix(breadcrumb): examples and styles

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": "[email protected]",
+  "dependentChangeType": "patch"
+}

packages/react-components/react-breadcrumb-preview/src/components/Breadcrumb/Breadcrumb.test.tsx

@@ -32,12 +32,12 @@ describe('Breadcrumb', () => {
             <li
               class="fui-BreadcrumbItem"
             >
-              <button
+              <a
                 class="fui-Button fui-BreadcrumbButton"
-                type="button"
+                tabindex="0"
               >
                 Item 1
-              </button>
+              </a>
             </li>
           </ol>
         </nav>
@@ -68,9 +68,7 @@ describe('Breadcrumb', () => {
             >
               <a
                 class="fui-Button fui-BreadcrumbButton"
-                role="button"
                 tabindex="0"
-                type="button"
               >
                 Link 1
               </a>

packages/react-components/react-breadcrumb-preview/src/components/BreadcrumbButton/BreadcrumbButton.test.tsx

@@ -26,12 +26,12 @@ describe('BreadcrumbButton', () => {
     const result = render(<BreadcrumbButton>Default BreadcrumbButton</BreadcrumbButton>);
     expect(result.container).toMatchInlineSnapshot(`
       <div>
-        <button
+        <a
           class="fui-Button fui-BreadcrumbButton"
-          type="button"
+          tabindex="0"
         >
           Default BreadcrumbButton
-        </button>
+        </a>
       </div>
     `);
   });
@@ -42,9 +42,9 @@ describe('BreadcrumbButton', () => {
     );
     expect(result.container).toMatchInlineSnapshot(`
       <div>
-        <button
+        <a
           class="fui-Button fui-BreadcrumbButton"
-          type="button"
+          tabindex="0"
         >
           <span
             class="fui-Button__icon"
@@ -65,7 +65,7 @@ describe('BreadcrumbButton', () => {
             </svg>
           </span>
           BreadcrumbButton with icon
-        </button>
+        </a>
       </div>
     `);
   });

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<HTMLButtonElement | HTMLAnchorElement>,
 ): 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,

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: {

packages/react-components/react-breadcrumb-preview/stories/Breadcrumb/BreadcrumbDefault.stories.tsx

@@ -9,19 +9,33 @@ export const Default = () => {
     <>
       <Breadcrumb aria-label="Breadcrumb default example">
         <BreadcrumbItem>
-          <BreadcrumbButton>Item 1</BreadcrumbButton>
+          <BreadcrumbButton href="https://react.fluentui.dev/?path=/docs/preview-components-breadcrumb--default">
+            Item 1
+          </BreadcrumbButton>
         </BreadcrumbItem>
         <BreadcrumbDivider />
         <BreadcrumbItem>
-          <BreadcrumbButton icon={<CalendarMonth />}>Item 2</BreadcrumbButton>
+          <BreadcrumbButton
+            href="https://react.fluentui.dev/?path=/docs/preview-components-breadcrumb--breadcrumb-size"
+            icon={<CalendarMonth />}
+          >
+            Item 2
+          </BreadcrumbButton>
         </BreadcrumbItem>
         <BreadcrumbDivider />
         <BreadcrumbItem>
-          <BreadcrumbButton>Item 3</BreadcrumbButton>
+          <BreadcrumbButton href="https://react.fluentui.dev/?path=/docs/preview-components-breadcrumb--breadcrumb-with-overflow">
+            Item 3
+          </BreadcrumbButton>
         </BreadcrumbItem>
         <BreadcrumbDivider />
         <BreadcrumbItem>
-          <BreadcrumbButton current>Item 4</BreadcrumbButton>
+          <BreadcrumbButton
+            href="https://react.fluentui.dev/?path=/docs/preview-components-breadcrumb--breadcrumb-with-tooltip"
+            current
+          >
+            Item 4
+          </BreadcrumbButton>
         </BreadcrumbItem>
       </Breadcrumb>
     </>

packages/react-components/react-breadcrumb-preview/stories/Breadcrumb/BreadcrumbSize.stories.tsx

@@ -54,7 +54,9 @@ export const BreadcrumbSize = () => {
         </BreadcrumbItem>
         <BreadcrumbDivider />
         <BreadcrumbItem>
-          <BreadcrumbButton current>Item 4</BreadcrumbButton>
+          <BreadcrumbButton icon={<CalendarMonth />} current>
+            Item 4
+          </BreadcrumbButton>
         </BreadcrumbItem>
       </Breadcrumb>
     </>

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';