feat(react-breadcrumb): removed non-interactive item

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 = () => (
   <>
-    <h1>BreadcrumbButton</h1>
     <SampleBreadcrumbButtons size="small" />
     <SampleBreadcrumbButtons size="medium" />
     <SampleBreadcrumbButtons size="large" />
-    <h1>BreadcrumbItem</h1>
-    <SampleBreadcrumbItems size="small" />
   </>
 );
 
 Size.storyName = 'size';
-
-export const DividerType = () => (
-  <>
-    <h1>BreadcrumbButton</h1>
-    <SampleBreadcrumbButtons dividerType="chevron" />
-
-    <h1>BreadcrumbItem</h1>
-    <SampleBreadcrumbItems dividerType="slash" size="small" />
-    <SampleBreadcrumbItems dividerType="chevron" />
-  </>
-);
-
-DividerType.storyName = 'divider type';

apps/vr-tests-react-components/src/stories/Breadcrumb/utils.tsx

@@ -35,13 +35,3 @@ export const SampleBreadcrumbButtons = (props: BreadcrumbProps) => (
     </BreadcrumbItem>
   </Breadcrumb>
 );
-
-export const SampleBreadcrumbItems = (props: BreadcrumbProps) => (
-  <Breadcrumb {...props} className="breadcrumb-sample">
-    <BreadcrumbItem>Item 1</BreadcrumbItem>
-    <BreadcrumbDivider />
-    <BreadcrumbItem>Item 2</BreadcrumbItem>
-    <BreadcrumbDivider />
-    <BreadcrumbItem>Item 3</BreadcrumbItem>
-  </Breadcrumb>
-);

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"
+}

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`            |                 |

packages/react-components/react-breadcrumb-preview/docs/Spec.md

@@ -81,17 +81,17 @@ const BreadcrumbExampleIconDivider = props => (
 const BreadcrumbV9Example = props => (
   <Breadcrumb aria-label="breadcrumb">
     <BreadcrumbItem>
-      <BreadcrumbButton onClick={() => {}}>
+      <BreadcrumbButton href="#">
         Home
       </BreadcrumbButton>
     </BreadcrumbItem>
     <BreadcrumbItem>
-      <BreadcrumbButton onClick={() => {}}>
+      <BreadcrumbButton href="#">
         Gallery
       </BreadcrumbButton>
     </BreadcrumbItem>
     <BreadcrumbItem current={true}>
-      <BreadcrumbButton onClick={() => {}}>
+      <BreadcrumbButton href="#">
         About
       </BreadcrumbButton>
     </BreadcrumbItem>
@@ -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
 <li>
   {children}
@@ -200,7 +186,7 @@ Link
 </li>
 ```
 
-Button
+Button (used only as OverflowMenu)
 
 ```HTML
 <li>
@@ -214,35 +200,28 @@ Usage
 
 ```jsx
 <BreadcrumbItem>
-  Item 1
+  <BreadcrumbButton href="#">
+    Item 1
+  </BreadcrumbButton>
 </BreadcrumbItem>
 <BreadcrumbItem>
-  <BreadcrumbButton onClick={() => console.log('smth...')}>
+  <BreadcrumbButton href="#">
     Item 2
   </BreadcrumbButton>
 </BreadcrumbItem>
 <BreadcrumbItem>
-  <BreadcrumbButton href="#" as="a">
-    Item 2
+  <BreadcrumbButton href="#">
+    Item 3
   </BreadcrumbButton>
 </BreadcrumbItem>
 ```
 
-#### API
-
-| Property | Values  | Default | Purpose                |
-| -------- | ------- | ------- | ---------------------- |
-| current  | boolean | false   | Indicates current page |
-
 #### Breadcrumb icon
 
 ```jsx
 <BreadcrumbItem>
   <BreadcrumbButton icon={<IconComponent />}>Item</BreadcrumbButton>
 </BreadcrumbItem>
-<BreadcrumbItem icon={<IconComponent />}>
-  Item
-</BreadcrumbItem>
 ```
 
 ### BreadcrumbDivider
@@ -264,18 +243,8 @@ Usage
   </li>
 ```
 
-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
-<Breadcrumb size="large" >
-  <BreadcrumbItem>Item</BreadcrumbItem>
-  <BreadcrumbDivider>
-    <ArrowRight16Filled />
-  </BreadcrumbDivider>
-  <BreadcrumbItem>Item</BreadcrumbItem>
-</Breadcrumb>
-<Breadcrumb size="small" dividerType="slash">
+<Breadcrumb>
   <BreadcrumbItem>Item</BreadcrumbItem>
   <BreadcrumbDivider />
   <BreadcrumbItem>Item</BreadcrumbItem>
@@ -285,7 +254,7 @@ The slash divider is only used in a small breadcrumb.
 ### BreadcrumbButton
 
 ```jsx
-<BreadcrumbButton onClick={() => console.log('smth...')}>Button Item</BreadcrumbButton>
+<BreadcrumbButton href="#">Item</BreadcrumbButton>
 ```
 
 #### 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.

packages/react-components/react-breadcrumb-preview/etc/react-breadcrumb-preview.api.md

@@ -40,12 +40,7 @@ export type BreadcrumbButtonState = ComponentState<BreadcrumbButtonSlots> & Omit
 export const breadcrumbClassNames: SlotClassNames<BreadcrumbSlots>;
 
 // @public
-export type BreadcrumbContextValues = Required<Pick<BreadcrumbProps, 'dividerType' | 'size'>> & {
-    items: Set<BreadcrumbItem_2>;
-    registerItem: (item: BreadcrumbItem_2) => void;
-    removeItem: (item: BreadcrumbItem_2) => void;
-    hasInteractiveItems: boolean;
-};
+export type BreadcrumbContextValues = Required<Pick<BreadcrumbProps, 'size'>>;
 
 // @public
 export const BreadcrumbDivider: ForwardRefComponent<BreadcrumbDividerProps>;
@@ -79,20 +74,16 @@ export type BreadcrumbItemSlots = {
 };
 
 // @public
-export type BreadcrumbItemState = ComponentState<BreadcrumbItemSlots> & Required<Pick<BreadcrumbItemProps, 'size'>> & {
-    isInteractive?: boolean;
-    hasInteractiveItems?: boolean;
-};
+export type BreadcrumbItemState = ComponentState<BreadcrumbItemSlots> & Required<Pick<BreadcrumbItemProps, 'size'>>;
 
 // @public
 export type BreadcrumbProps = ComponentProps<BreadcrumbSlots> & {
     focusMode?: 'arrow' | 'tab';
-    dividerType?: 'chevron' | 'slash';
     size?: 'small' | 'medium' | 'large';
 };
 
 // @internal (undocumented)
-export const BreadcrumbProvider: React_2.Provider<BreadcrumbContextValues | undefined>;
+export const BreadcrumbProvider: React_2.Provider<Required<Pick<BreadcrumbProps, "size">> | undefined>;
 
 // @public (undocumented)
 export type BreadcrumbSlots = {
@@ -101,7 +92,7 @@ export type BreadcrumbSlots = {
 };
 
 // @public
-export type BreadcrumbState = ComponentState<BreadcrumbSlots> & Required<Pick<BreadcrumbProps, 'size' | 'dividerType'>>;
+export type BreadcrumbState = ComponentState<BreadcrumbSlots> & Required<Pick<BreadcrumbProps, 'size'>>;
 
 // @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<Pick<BreadcrumbProps, "size">>;
 
 // @public
 export const useBreadcrumbDivider_unstable: (props: BreadcrumbDividerProps, ref: React_2.Ref<HTMLLIElement>) => BreadcrumbDividerState;

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

@@ -41,24 +41,6 @@ const BreadcrumbSampleWithButton = (props: BreadcrumbProps) => (
   </>
 );
 
-const NonInteractiveBreadcrumbSample = (props: BreadcrumbProps) => (
-  <>
-    <p tabIndex={0} id="before">
-      Before
-    </p>
-
-    <Breadcrumb {...props} id="breadcrumb">
-      <BreadcrumbItem id="breadcrumb-item-1">Item 1</BreadcrumbItem>
-      <BreadcrumbItem id="breadcrumb-item-2">Item 2</BreadcrumbItem>
-      <BreadcrumbItem id="breadcrumb-item-3">Item 3</BreadcrumbItem>
-    </Breadcrumb>
-
-    <p tabIndex={0} id="after">
-      After
-    </p>
-  </>
-);
-
 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(<NonInteractiveBreadcrumbSample />);
-
-      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');
-    });
-  });
 });