Current

Currently, the default breadcrumb story is a playground that allows modifying props through radio buttons.

https://react.fluentui.dev/?path=/docs/preview-components-breadcrumb--default

Expected

A few guidelines for writing stories:

• The default story should be the simplest/default usage of the control.
• Avoid extra label text within the example code of the story (e.g. headers that describe each example). Splitting out the examples into separate stories should avoid the need for these labels.
• The stories shouldn't include playground controls (instead: include a separate story the different variants).
• Avoid stories that combine multiple types of variants in the same story (e.g. don't include separator variants in the Size story).
• When possible, avoid adding helper functions to the story (like renderItem) unless it's part of the recommended way to use it. In this case, the BreadcrumbItem elements should be written out longhand to show how it's used.

For example, the Default story could be something like this:

export const Default = () => (
  <Breadcrumb aria-label="Example Breadcrumb">
    <BreadcrumbItem>Item 1</BreadcrumbItem>
    <BreadcrumbDivider />
    <BreadcrumbItem>Item 2</BreadcrumbItem>
    <BreadcrumbDivider />
    <BreadcrumbItem>Item 3</BreadcrumbItem>
    <BreadcrumbDivider />
    <BreadcrumbItem current>Item 4</BreadcrumbItem>
  </Breadcrumb>
);

And the Size story could look like:

export const Size = () => (
  <>
    <Breadcrumb aria-label="Small Breadcrumb" size="small">
      <BreadcrumbItem>Small 1</BreadcrumbItem>
      <BreadcrumbDivider />
      <BreadcrumbItem>Small 2</BreadcrumbItem>
      <BreadcrumbDivider />
      <BreadcrumbItem current>Small 3</BreadcrumbItem>
    </Breadcrumb>
    <Breadcrumb aria-label="Medium Breadcrumb" size="medium">
      <BreadcrumbItem>Medium 1</BreadcrumbItem>
      <BreadcrumbDivider />
      <BreadcrumbItem>Medium 2</BreadcrumbItem>
      <BreadcrumbDivider />
      <BreadcrumbItem current>Medium 3</BreadcrumbItem>
    </Breadcrumb>
    <Breadcrumb aria-label="Large Breadcrumb" size="large">
      <BreadcrumbItem>Large 1</BreadcrumbItem>
      <BreadcrumbDivider />
      <BreadcrumbItem>Large 2</BreadcrumbItem>
      <BreadcrumbDivider />
      <BreadcrumbItem current>Large 3</BreadcrumbItem>
    </Breadcrumb>
  </>
);

A possible list of stories might be:

• Default
• Size
• Appearance: Subtle
  • No need to include transparent since that's the default.
• Divider: Slash
  • No need to include chevron since that's the default.
• Buttons
  • E.g. Similar to the Default one but with BreadcrumbButtons
• Focus Mode: Arrow
  • No need to include tab since that's the default.
• Overflow
• Tooltips