Change Breadcrumbs to accept a single breadcrumb instead of an array (#7990)

### WHY are these changes introduced?

Breadcrumbs has only been using a single breadcrumb for a while now.
Instead of allowing consumers to pass an array without knowing why only
a single link is being used, we should remove the ability to pass an
array and make the component easier to understand implicitly.

### WHAT is this pull request doing?

UI will not change. The Breadcrumbs component was already only using the
last breadcrumb link in the array.

This PR changes the props for breadcrumbs and also the implementation on
the Page component.

### Migration path

Since this PR removes the `breadcrumbs[]` prop in favor of `breadcrumb`
all uses of Page, and Breadcrumbs will need to be migrated.

It will look something like this:

```ts
//before
const breadcrumbs = [
      {
        content: 'Products',
        url: 'http://test.com',
      },
];
<Page {...mockProps} breadcrumbs={breadcrumbs} />

//after
const breadcrumb = {
  content: 'Products',
  url: 'http://test.com',
};
<Page {...mockProps} breadcrumb={breadcrumb} />
```

### How to 🎩

Check the Breadcrumbs and Page components in storybook

### 🎩 checklist

- [ ] Tested on
[mobile](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md#cross-browser-testing)
- [ ] Tested on [multiple
browsers](https://help.shopify.com/en/manual/shopify-admin/supported-browsers)
- [ ] Tested for
[accessibility](https://github.com/Shopify/polaris/blob/main/documentation/Accessibility%20testing.md)
- [ ] Updated the component's `README.md` with documentation changes
- [ ] [Tophatted
documentation](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting%20documentation.md)
changes in the style guide

Author: itwasmattgregg

.changeset/afraid-scissors-work.md

@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': major
+---
+
+Change breadcrumbs from an array to a single breadcrumb since only one is supported.

polaris-react/playground/DetailsPage.tsx

@@ -547,7 +547,7 @@ export function DetailsPage() {
   const actualPageMarkup = (
     <Page
       fullWidth
-      breadcrumbs={[{content: 'Products', url: '/products/31'}]}
+      breadcrumb={{content: 'Products', url: '/products/31'}}
       title={title}
       titleMetadata={<Badge status="success">Success badge</Badge>}
       primaryAction={{

polaris-react/src/components/Breadcrumbs/Breadcrumbs.tsx

@@ -10,16 +10,11 @@ import {Text} from '../Text';
 import styles from './Breadcrumbs.scss';
 
 export interface BreadcrumbsProps {
-  /** Collection of breadcrumbs */
-  breadcrumbs: (CallbackAction | LinkAction)[];
+  /** Breadcrumb link */
+  breadcrumb: CallbackAction | LinkAction;
 }
 
-export function Breadcrumbs({breadcrumbs}: BreadcrumbsProps) {
-  const breadcrumb = breadcrumbs[breadcrumbs.length - 1];
-  if (breadcrumb == null) {
-    return null;
-  }
-
+export function Breadcrumbs({breadcrumb}: BreadcrumbsProps) {
   const {content} = breadcrumb;
 
   const contentMarkup = (

polaris-react/src/components/Breadcrumbs/tests/Breadcrumbs.test.tsx

@@ -8,31 +8,25 @@ import {Text} from '../../Text';
 describe('<Breadcrumbs />', () => {
   describe('url', () => {
     it('uses <a> tags when passed a LinkAction', () => {
-      const linkBreadcrumbs: LinkAction[] = [
-        {
-          content: 'Products',
-          url: 'https://www.shopify.com',
-        },
-      ];
-
+      const linkBreadcrumb: LinkAction = {
+        content: 'Products',
+        url: 'https://www.shopify.com',
+      };
       const breadcrumbs = mountWithApp(
-        <Breadcrumbs breadcrumbs={linkBreadcrumbs} />,
+        <Breadcrumbs breadcrumb={linkBreadcrumb} />,
       );
 
       expect(breadcrumbs).toContainReactComponentTimes('a', 1);
     });
 
     it('passes the accessibilityLabel through to <a> tag', () => {
-      const linkBreadcrumbs: LinkAction[] = [
-        {
-          content: 'Products',
-          url: 'https://shopify.com',
-          accessibilityLabel: 'Go to Products',
-        },
-      ];
-
+      const linkBreadcrumb: LinkAction = {
+        content: 'Products',
+        url: 'https://shopify.com',
+        accessibilityLabel: 'Go to Products',
+      };
       const breadcrumbs = mountWithApp(
-        <Breadcrumbs breadcrumbs={linkBreadcrumbs} />,
+        <Breadcrumbs breadcrumb={linkBreadcrumb} />,
       );
 
       expect(breadcrumbs).toContainReactComponent('a', {
@@ -43,31 +37,25 @@ describe('<Breadcrumbs />', () => {
 
   describe('onAction()', () => {
     it('uses <button> tags when passed a CallbackAction', () => {
-      const callbackBreadcrumbs: CallbackAction[] = [
-        {
-          content: 'Products',
-          onAction: noop,
-        },
-      ];
-
+      const callbackBreadcrumb: CallbackAction = {
+        content: 'Products',
+        onAction: noop,
+      };
       const breadcrumbs = mountWithApp(
-        <Breadcrumbs breadcrumbs={callbackBreadcrumbs} />,
+        <Breadcrumbs breadcrumb={callbackBreadcrumb} />,
       );
 
       expect(breadcrumbs).toContainReactComponentTimes('button', 1);
     });
 
     it('passes accessibilityLabel through to <button> tag', () => {
-      const callbackBreadcrumbs: CallbackAction[] = [
-        {
-          content: 'Products',
-          onAction: noop,
-          accessibilityLabel: 'Go to Products',
-        },
-      ];
-
+      const callbackBreadcrumb: CallbackAction = {
+        content: 'Products',
+        onAction: noop,
+        accessibilityLabel: 'Go to Products',
+      };
       const breadcrumbs = mountWithApp(
-        <Breadcrumbs breadcrumbs={callbackBreadcrumbs} />,
+        <Breadcrumbs breadcrumb={callbackBreadcrumb} />,
       );
 
       expect(breadcrumbs).toContainReactComponent('button', {
@@ -77,43 +65,32 @@ describe('<Breadcrumbs />', () => {
 
     it('triggers the callback function when clicked', () => {
       const spy = jest.fn();
-      const callbackBreadcrumbs: CallbackAction[] = [
-        {
-          content: 'Products',
-          onAction: spy,
-        },
-      ];
-
+      const callbackBreadcrumb: CallbackAction = {
+        content: 'Products',
+        onAction: spy,
+      };
       const breadcrumbs = mountWithApp(
-        <Breadcrumbs breadcrumbs={callbackBreadcrumbs} />,
+        <Breadcrumbs breadcrumb={callbackBreadcrumb} />,
       );
 
       breadcrumbs.find('button')!.trigger('onClick');
       expect(spy).toHaveBeenCalled();
     });
   });
 
-  const linkBreadcrumbs: LinkAction[] = [
-    {
-      content: 'Products',
-      url: 'https://www.shopify.com',
-    },
-  ];
+  const linkBreadcrumb: LinkAction = {
+    content: 'Products',
+    url: 'https://www.shopify.com',
+  };
 
   it('renders breadcrumb content as a visually hidden label when the new design language is enabled', () => {
-    const wrapper = mountWithApp(<Breadcrumbs breadcrumbs={linkBreadcrumbs} />);
+    const wrapper = mountWithApp(<Breadcrumbs breadcrumb={linkBreadcrumb} />);
 
     expect(wrapper).toContainReactComponent(Text, {
       children: 'Products',
       visuallyHidden: true,
     });
   });
-
-  it('renders nothing when empty', () => {
-    const wrapper = mountWithApp(<Breadcrumbs breadcrumbs={[]} />);
-
-    expect(wrapper.html()).toBe('');
-  });
 });
 
 function noop() {}

polaris-react/src/components/Page/Page.stories.tsx

@@ -10,7 +10,7 @@ export default {
 export function Default() {
   return (
     <Page
-      breadcrumbs={[{content: 'Products', url: '/products'}]}
+      breadcrumb={{content: 'Products', url: '/products'}}
       title="3/4 inch Leather pet collar"
       titleMetadata={<Badge status="success">Paid</Badge>}
       subtitle="Perfect for any pet"
@@ -30,7 +30,6 @@ export function Default() {
       actionGroups={[
         {
           title: 'Promote',
-          accessibilityLabel: 'Action group label',
           actions: [
             {
               content: 'Share on Facebook',
@@ -55,7 +54,7 @@ export function Default() {
 export function WithCustomPrimaryAction() {
   return (
     <Page
-      breadcrumbs={[{content: 'Settings', url: '/settings'}]}
+      breadcrumb={{content: 'Settings', url: '/settings'}}
       title="General"
       primaryAction={
         <Button
@@ -79,7 +78,7 @@ export function WithCustomPrimaryAction() {
 export function WithoutPrimaryActionInHeader() {
   return (
     <Page
-      breadcrumbs={[{content: 'Orders', url: '/orders'}]}
+      breadcrumb={{content: 'Orders', url: '/orders'}}
       title="#1085"
       secondaryActions={[
         {content: 'Print'},
@@ -159,7 +158,7 @@ export function WithToolTipAction() {
 export function WithSubtitle() {
   return (
     <Page
-      breadcrumbs={[{content: 'Products', url: '/products'}]}
+      breadcrumb={{content: 'Products', url: '/products'}}
       title="Invoice"
       subtitle="Statement period: May 3, 2019 to June 2, 2019"
       secondaryActions={[{content: 'Download', icon: ArrowDownMinor}]}
@@ -195,7 +194,7 @@ export function WithExternalLink() {
 export function WithoutPagination() {
   return (
     <Page
-      breadcrumbs={[{content: 'Settings', url: '/settings'}]}
+      breadcrumb={{content: 'Settings', url: '/settings'}}
       title="General"
       primaryAction={{content: 'Save'}}
     >
@@ -228,7 +227,7 @@ export function NarrowWidth() {
   return (
     <Page
       narrowWidth
-      breadcrumbs={[{content: 'Orders', url: '/orders'}]}
+      breadcrumb={{content: 'Orders', url: '/orders'}}
       title="Add payment method"
       primaryAction={{content: 'Save', disabled: true}}
     >
@@ -282,7 +281,7 @@ export function WithActionGroups() {
 export function WithContentAfterTitle() {
   return (
     <Page
-      breadcrumbs={[{content: 'Products', url: '/products'}]}
+      breadcrumb={{content: 'Products', url: '/products'}}
       title="Jar With Lock-Lid"
       titleMetadata={<Badge status="attention">Verified</Badge>}
       primaryAction={{content: 'Save', disabled: true}}
@@ -305,7 +304,7 @@ export function WithContentAfterTitle() {
 export function WithDivider() {
   return (
     <Page
-      breadcrumbs={[{content: 'Settings', url: '/settings'}]}
+      breadcrumb={{content: 'Settings', url: '/settings'}}
       title="General"
       divider
     >

polaris-react/src/components/Page/Page.tsx

@@ -40,7 +40,7 @@ export function Page({
         rest.secondaryActions.length > 0) ||
         isReactElement(rest.secondaryActions))) ||
     (rest.actionGroups != null && rest.actionGroups.length > 0) ||
-    (rest.breadcrumbs != null && rest.breadcrumbs.length > 0);
+    rest.breadcrumb != null;
 
   const contentClassName = classNames(
     !hasHeaderContent && styles.Content,

polaris-react/src/components/Page/components/Header/Header.tsx

@@ -47,8 +47,8 @@ export interface HeaderProps extends TitleProps {
   primaryAction?: PrimaryAction | React.ReactNode;
   /** Page-level pagination */
   pagination?: PaginationProps;
-  /** Collection of breadcrumbs */
-  breadcrumbs?: BreadcrumbsProps['breadcrumbs'];
+  /** Breadcrumb link */
+  breadcrumb?: BreadcrumbsProps['breadcrumb'];
   /** Collection of secondary page-level actions */
   secondaryActions?: MenuActionDescriptor[] | React.ReactNode;
   /** Collection of page-level groups of secondary actions */
@@ -74,7 +74,7 @@ export function Header({
   primaryAction,
   pagination,
   additionalNavigation,
-  breadcrumbs = [],
+  breadcrumb,
   secondaryActions = [],
   actionGroups = [],
   compactTitle = false,
@@ -97,12 +97,11 @@ export function Header({
       isReactElement(secondaryActions)) &&
     !actionGroups.length;
 
-  const breadcrumbMarkup =
-    breadcrumbs.length > 0 ? (
-      <div className={styles.BreadcrumbWrapper}>
-        <Breadcrumbs breadcrumbs={breadcrumbs} />
-      </div>
-    ) : null;
+  const breadcrumbMarkup = breadcrumb ? (
+    <div className={styles.BreadcrumbWrapper}>
+      <Breadcrumbs breadcrumb={breadcrumb} />
+    </div>
+  ) : null;
 
   const paginationMarkup =
     pagination && !isNavigationCollapsed ? (
@@ -178,7 +177,7 @@ export function Header({
     navigationMarkup && styles.hasNavigation,
     actionMenuMarkup && styles.hasActionMenu,
     isNavigationCollapsed && styles.mobileView,
-    !breadcrumbs.length && styles.noBreadcrumbs,
+    !breadcrumb && styles.noBreadcrumbs,
     title && title.length < LONG_TITLE && styles.mediumTitle,
     title && title.length > LONG_TITLE && styles.longTitle,
   );

polaris-react/src/components/Page/components/Header/tests/Header.test.tsx

@@ -47,19 +47,17 @@ describe('<Header />', () => {
   });
 
   describe('breadcrumbs', () => {
-    const breadcrumbs: LinkAction[] = [
-      {
-        content: 'Products',
-        url: 'https://www.google.com',
-      },
-    ];
+    const breadcrumb: LinkAction = {
+      content: 'Products',
+      url: 'https://www.google.com',
+    };
 
     it('get passed into Breadcrumbs', () => {
       const header = mountWithApp(
-        <Header {...mockProps} breadcrumbs={breadcrumbs} />,
+        <Header {...mockProps} breadcrumb={breadcrumb} />,
       );
       expect(header).toContainReactComponent(Breadcrumbs, {
-        breadcrumbs,
+        breadcrumb,
       });
     });
   });
@@ -291,12 +289,10 @@ describe('<Header />', () => {
     {content: 'mock content 2'},
   ];
 
-  const breadcrumbs: LinkAction[] = [
-    {
-      content: 'Products',
-      url: 'https://www.google.com',
-    },
-  ];
+  const breadcrumb: LinkAction = {
+    content: 'Products',
+    url: 'https://www.google.com',
+  };
 
   it('does not render primary and secondary action wrapper divs', () => {
     const header = mountWithApp(
@@ -341,7 +337,7 @@ describe('<Header />', () => {
 
   it('renders a default mobile layout', () => {
     const header = mountWithApp(
-      <Header title="mmmmmmmmm" breadcrumbs={breadcrumbs} />,
+      <Header title="mmmmmmmmm" breadcrumb={breadcrumb} />,
       {
         mediaQuery: {isNavigationCollapsed: true},
       },

polaris-react/src/components/Page/tests/Page.test.tsx

@@ -234,26 +234,24 @@ describe('<Page />', () => {
   });
 
   describe('breadcrumbs', () => {
-    const breadcrumbs = [
-      {
-        content: 'Products',
-        onAction: noop,
-      },
-    ];
+    const breadcrumb = {
+      content: 'Products',
+      onAction: noop,
+    };
 
     it('renders a <Header /> when defined', () => {
       const page = mountWithApp(
-        <Page {...mockProps} breadcrumbs={breadcrumbs} />,
+        <Page {...mockProps} breadcrumb={breadcrumb} />,
       );
       expect(page).toContainReactComponent(Header);
     });
 
     it('gets passed into the <Header />', () => {
       const page = mountWithApp(
-        <Page {...mockProps} breadcrumbs={breadcrumbs} />,
+        <Page {...mockProps} breadcrumb={breadcrumb} />,
       );
       expect(page).toContainReactComponent(Header, {
-        breadcrumbs,
+        breadcrumb,
       });
     });
   });