From d445789f33a50255a6a51548d7282a482bc78a0b Mon Sep 17 00:00:00 2001
From: Valentina <vkozlova@microsoft.com>
Date: Thu, 3 Aug 2023 18:29:12 +0200
Subject: [PATCH] Made BreadcrumbButton consistent with Item and Link (#28672)

* Made BreadcrumbButton consistent with Item and Link
---
 ...-4a519bc6-2ba9-46ca-9959-8a0ca5985548.json |  7 +++
 .../useBreadcrumbButtonStyles.styles.ts       |  2 +
 .../Breadcrumb/BreadcrumbSize.stories.tsx     | 52 ++++++++++++++++++-
 .../BreadcrumbWithOverflow.stories.tsx        |  2 +-
 4 files changed, 61 insertions(+), 2 deletions(-)
 create mode 100644 change/@fluentui-react-breadcrumb-preview-4a519bc6-2ba9-46ca-9959-8a0ca5985548.json

diff --git a/change/@fluentui-react-breadcrumb-preview-4a519bc6-2ba9-46ca-9959-8a0ca5985548.json b/change/@fluentui-react-breadcrumb-preview-4a519bc6-2ba9-46ca-9959-8a0ca5985548.json
new file mode 100644
index 0000000000000..d8acb5a41ba31
--- /dev/null
+++ b/change/@fluentui-react-breadcrumb-preview-4a519bc6-2ba9-46ca-9959-8a0ca5985548.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix: made BreadcrumbButton consistent with other items",
+  "packageName": "@fluentui/react-breadcrumb-preview",
+  "email": "vkozlova@microsoft.com",
+  "dependentChangeType": "patch"
+}
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 51126c128273e..2e9c34ac09d9e 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
@@ -28,6 +28,8 @@ const defaultButtonStyles = {
 const useStyles = makeStyles({
   root: {
     ...shorthands.padding(tokens.spacingHorizontalNone),
+    minWidth: 'unset',
+    textWrap: 'nowrap',
   },
   small: {
     height: '24px',
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 153b9f7fff7f0..0dffcb623d4c7 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
@@ -1,5 +1,12 @@
 import * as React from 'react';
-import { Breadcrumb, BreadcrumbItem, BreadcrumbDivider, BreadcrumbProps } from '@fluentui/react-breadcrumb-preview';
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbDivider,
+  BreadcrumbProps,
+  BreadcrumbButton,
+  BreadcrumbLink,
+} from '@fluentui/react-breadcrumb-preview';
 import { RadioGroup, Radio, Label } from '@fluentui/react-components';
 
 type Item = {
@@ -34,6 +41,31 @@ function renderItem(item: Item, size: BreadcrumbProps['size']) {
     </React.Fragment>
   );
 }
+
+function renderButton(item: Item) {
+  const isLastItem = items.length - 1 === item.key;
+  return (
+    <React.Fragment key={`button-item-${item.key}`}>
+      <BreadcrumbItem current={isLastItem}>
+        <BreadcrumbButton>{item.value}</BreadcrumbButton>
+      </BreadcrumbItem>
+      {!isLastItem && <BreadcrumbDivider />}
+    </React.Fragment>
+  );
+}
+
+function renderLink(item: Item) {
+  const isLastItem = items.length - 1 === item.key;
+  return (
+    <React.Fragment key={`link-item-${item.key}`}>
+      <BreadcrumbItem current={isLastItem}>
+        <BreadcrumbLink>{item.value}</BreadcrumbLink>
+      </BreadcrumbItem>
+      {!isLastItem && <BreadcrumbDivider />}
+    </React.Fragment>
+  );
+}
+
 export const BreadcrumbSize = () => {
   const [dividerType, setDividerType] = React.useState('chevron' as BreadcrumbProps['dividerType']);
   return (
@@ -52,12 +84,30 @@ export const BreadcrumbSize = () => {
       <Breadcrumb aria-label="Small breadcrumb example with slashes" size="small" dividerType={dividerType}>
         {items.map(item => renderItem(item, 'small'))}
       </Breadcrumb>
+      <Breadcrumb aria-label="Small breadcrumb example with buttons" size="small">
+        {items.map(item => renderButton(item))}
+      </Breadcrumb>
+      <Breadcrumb aria-label="Small breadcrumb example with links" size="small">
+        {items.map(item => renderLink(item))}
+      </Breadcrumb>
       <h2>Medium</h2>
       <Breadcrumb aria-label="Default breadcrumb">{items.map(item => renderItem(item, 'medium'))}</Breadcrumb>
+      <Breadcrumb aria-label="Medium breadcrumb example with buttons" size="medium">
+        {items.map(item => renderButton(item))}
+      </Breadcrumb>
+      <Breadcrumb aria-label="Medium breadcrumb example with links" size="medium">
+        {items.map(item => renderLink(item))}
+      </Breadcrumb>
       <h2>Large</h2>
       <Breadcrumb aria-label="Large breadcrumb" size="large">
         {items.map(item => renderItem(item, 'large'))}
       </Breadcrumb>
+      <Breadcrumb aria-label="Large breadcrumb example with buttons" size="large">
+        {items.map(item => renderButton(item))}
+      </Breadcrumb>
+      <Breadcrumb aria-label="Large breadcrumb example with links" size="large">
+        {items.map(item => renderLink(item))}
+      </Breadcrumb>
     </>
   );
 };
diff --git a/packages/react-components/react-breadcrumb-preview/stories/Breadcrumb/BreadcrumbWithOverflow.stories.tsx b/packages/react-components/react-breadcrumb-preview/stories/Breadcrumb/BreadcrumbWithOverflow.stories.tsx
index 1de076ba11c70..1bcf9ae7b1307 100644
--- a/packages/react-components/react-breadcrumb-preview/stories/Breadcrumb/BreadcrumbWithOverflow.stories.tsx
+++ b/packages/react-components/react-breadcrumb-preview/stories/Breadcrumb/BreadcrumbWithOverflow.stories.tsx
@@ -235,7 +235,7 @@ const BreadcrumbControlledOverflowExample = () => {
 
   return (
     <div className={mergeClasses(styles.example, styles.horizontal)}>
-      <Overflow>
+      <Overflow padding={40}>
         <Breadcrumb>
           {startDisplayedItems.map((item: ButtonItem) => renderButton(item, false))}
           <ControlledOverflowMenu