From 07d7092b3ba1a12bd7820b809ba499b0e66ff9e8 Mon Sep 17 00:00:00 2001
From: Valentyna <vkozlova@microsoft.com>
Date: Tue, 7 Mar 2023 15:46:36 +0100
Subject: [PATCH 1/5] Added BreadcrumbItem and BreadcrumbDivider

---
 .../etc/react-breadcrumb.api.md               | 52 +++++++++++++++++++
 .../react-breadcrumb/src/BreadcrumbDivider.ts |  1 +
 .../react-breadcrumb/src/BreadcrumbItem.ts    |  1 +
 .../BreadcrumbDivider.test.tsx                | 18 +++++++
 .../BreadcrumbDivider/BreadcrumbDivider.tsx   | 18 +++++++
 .../BreadcrumbDivider.types.ts                | 17 ++++++
 .../BreadcrumbDivider.test.tsx.snap           | 11 ++++
 .../src/components/BreadcrumbDivider/index.ts |  5 ++
 .../renderBreadcrumbDivider.tsx               | 13 +++++
 .../BreadcrumbDivider/useBreadcrumbDivider.ts | 31 +++++++++++
 .../useBreadcrumbDividerStyles.ts             | 33 ++++++++++++
 .../BreadcrumbItem/BreadcrumbItem.test.tsx    | 18 +++++++
 .../BreadcrumbItem/BreadcrumbItem.tsx         | 18 +++++++
 .../BreadcrumbItem/BreadcrumbItem.types.ts    | 17 ++++++
 .../BreadcrumbItem.test.tsx.snap              | 11 ++++
 .../src/components/BreadcrumbItem/index.ts    |  5 ++
 .../BreadcrumbItem/renderBreadcrumbItem.tsx   | 13 +++++
 .../BreadcrumbItem/useBreadcrumbItem.ts       | 31 +++++++++++
 .../BreadcrumbItem/useBreadcrumbItemStyles.ts | 33 ++++++++++++
 .../react-breadcrumb/src/index.ts             | 16 ++++++
 .../BreadcrumbDividerBestPractices.md         |  5 ++
 .../BreadcrumbDividerDefault.stories.tsx      |  4 ++
 .../BreadcrumbDividerDescription.md           |  0
 .../BreadcrumbDivider/index.stories.tsx       | 18 +++++++
 .../BreadcrumbItemBestPractices.md            |  5 ++
 .../BreadcrumbItemDefault.stories.tsx         |  4 ++
 .../BreadcrumbItemDescription.md              |  0
 .../stories/BreadcrumbItem/index.stories.tsx  | 18 +++++++
 28 files changed, 416 insertions(+)
 create mode 100644 packages/react-components/react-breadcrumb/src/BreadcrumbDivider.ts
 create mode 100644 packages/react-components/react-breadcrumb/src/BreadcrumbItem.ts
 create mode 100644 packages/react-components/react-breadcrumb/src/components/BreadcrumbDivider/BreadcrumbDivider.test.tsx
 create mode 100644 packages/react-components/react-breadcrumb/src/components/BreadcrumbDivider/BreadcrumbDivider.tsx
 create mode 100644 packages/react-components/react-breadcrumb/src/components/BreadcrumbDivider/BreadcrumbDivider.types.ts
 create mode 100644 packages/react-components/react-breadcrumb/src/components/BreadcrumbDivider/__snapshots__/BreadcrumbDivider.test.tsx.snap
 create mode 100644 packages/react-components/react-breadcrumb/src/components/BreadcrumbDivider/index.ts
 create mode 100644 packages/react-components/react-breadcrumb/src/components/BreadcrumbDivider/renderBreadcrumbDivider.tsx
 create mode 100644 packages/react-components/react-breadcrumb/src/components/BreadcrumbDivider/useBreadcrumbDivider.ts
 create mode 100644 packages/react-components/react-breadcrumb/src/components/BreadcrumbDivider/useBreadcrumbDividerStyles.ts
 create mode 100644 packages/react-components/react-breadcrumb/src/components/BreadcrumbItem/BreadcrumbItem.test.tsx
 create mode 100644 packages/react-components/react-breadcrumb/src/components/BreadcrumbItem/BreadcrumbItem.tsx
 create mode 100644 packages/react-components/react-breadcrumb/src/components/BreadcrumbItem/BreadcrumbItem.types.ts
 create mode 100644 packages/react-components/react-breadcrumb/src/components/BreadcrumbItem/__snapshots__/BreadcrumbItem.test.tsx.snap
 create mode 100644 packages/react-components/react-breadcrumb/src/components/BreadcrumbItem/index.ts
 create mode 100644 packages/react-components/react-breadcrumb/src/components/BreadcrumbItem/renderBreadcrumbItem.tsx
 create mode 100644 packages/react-components/react-breadcrumb/src/components/BreadcrumbItem/useBreadcrumbItem.ts
 create mode 100644 packages/react-components/react-breadcrumb/src/components/BreadcrumbItem/useBreadcrumbItemStyles.ts
 create mode 100644 packages/react-components/react-breadcrumb/stories/BreadcrumbDivider/BreadcrumbDividerBestPractices.md
 create mode 100644 packages/react-components/react-breadcrumb/stories/BreadcrumbDivider/BreadcrumbDividerDefault.stories.tsx
 create mode 100644 packages/react-components/react-breadcrumb/stories/BreadcrumbDivider/BreadcrumbDividerDescription.md
 create mode 100644 packages/react-components/react-breadcrumb/stories/BreadcrumbDivider/index.stories.tsx
 create mode 100644 packages/react-components/react-breadcrumb/stories/BreadcrumbItem/BreadcrumbItemBestPractices.md
 create mode 100644 packages/react-components/react-breadcrumb/stories/BreadcrumbItem/BreadcrumbItemDefault.stories.tsx
 create mode 100644 packages/react-components/react-breadcrumb/stories/BreadcrumbItem/BreadcrumbItemDescription.md
 create mode 100644 packages/react-components/react-breadcrumb/stories/BreadcrumbItem/index.stories.tsx

diff --git a/packages/react-components/react-breadcrumb/etc/react-breadcrumb.api.md b/packages/react-components/react-breadcrumb/etc/react-breadcrumb.api.md
index 2f0e15617a9162..29e5cdf6287cb3 100644
--- a/packages/react-components/react-breadcrumb/etc/react-breadcrumb.api.md
+++ b/packages/react-components/react-breadcrumb/etc/react-breadcrumb.api.md
@@ -17,6 +17,40 @@ export const Breadcrumb: ForwardRefComponent<BreadcrumbProps>;
 // @public (undocumented)
 export const breadcrumbClassNames: SlotClassNames<BreadcrumbSlots>;
 
+// @public
+export const BreadcrumbDivider: ForwardRefComponent<BreadcrumbDividerProps>;
+
+// @public (undocumented)
+export const breadcrumbDividerClassNames: SlotClassNames<BreadcrumbDividerSlots>;
+
+// @public
+export type BreadcrumbDividerProps = ComponentProps<BreadcrumbDividerSlots> & {};
+
+// @public (undocumented)
+export type BreadcrumbDividerSlots = {
+    root: Slot<'div'>;
+};
+
+// @public
+export type BreadcrumbDividerState = ComponentState<BreadcrumbDividerSlots>;
+
+// @public
+export const BreadcrumbItem: ForwardRefComponent<BreadcrumbItemProps>;
+
+// @public (undocumented)
+export const breadcrumbItemClassNames: SlotClassNames<BreadcrumbItemSlots>;
+
+// @public
+export type BreadcrumbItemProps = ComponentProps<BreadcrumbItemSlots> & {};
+
+// @public (undocumented)
+export type BreadcrumbItemSlots = {
+    root: Slot<'div'>;
+};
+
+// @public
+export type BreadcrumbItemState = ComponentState<BreadcrumbItemSlots>;
+
 // @public
 export type BreadcrumbProps = ComponentProps<BreadcrumbSlots> & {};
 
@@ -31,9 +65,27 @@ export type BreadcrumbState = ComponentState<BreadcrumbSlots>;
 // @public
 export const renderBreadcrumb_unstable: (state: BreadcrumbState) => JSX.Element;
 
+// @public
+export const renderBreadcrumbDivider_unstable: (state: BreadcrumbDividerState) => JSX.Element;
+
+// @public
+export const renderBreadcrumbItem_unstable: (state: BreadcrumbItemState) => JSX.Element;
+
 // @public
 export const useBreadcrumb_unstable: (props: BreadcrumbProps, ref: React_2.Ref<HTMLElement>) => BreadcrumbState;
 
+// @public
+export const useBreadcrumbDivider_unstable: (props: BreadcrumbDividerProps, ref: React_2.Ref<HTMLElement>) => BreadcrumbDividerState;
+
+// @public
+export const useBreadcrumbDividerStyles_unstable: (state: BreadcrumbDividerState) => BreadcrumbDividerState;
+
+// @public
+export const useBreadcrumbItem_unstable: (props: BreadcrumbItemProps, ref: React_2.Ref<HTMLElement>) => BreadcrumbItemState;
+
+// @public
+export const useBreadcrumbItemStyles_unstable: (state: BreadcrumbItemState) => BreadcrumbItemState;
+
 // @public
 export const useBreadcrumbStyles_unstable: (state: BreadcrumbState) => BreadcrumbState;
 
diff --git a/packages/react-components/react-breadcrumb/src/BreadcrumbDivider.ts b/packages/react-components/react-breadcrumb/src/BreadcrumbDivider.ts
new file mode 100644
index 00000000000000..b38620b9c532e3
--- /dev/null
+++ b/packages/react-components/react-breadcrumb/src/BreadcrumbDivider.ts
@@ -0,0 +1 @@
+export * from './components/BreadcrumbDivider/index';
diff --git a/packages/react-components/react-breadcrumb/src/BreadcrumbItem.ts b/packages/react-components/react-breadcrumb/src/BreadcrumbItem.ts
new file mode 100644
index 00000000000000..7f84c993cca3cb
--- /dev/null
+++ b/packages/react-components/react-breadcrumb/src/BreadcrumbItem.ts
@@ -0,0 +1 @@
+export * from './components/BreadcrumbItem/index';
diff --git a/packages/react-components/react-breadcrumb/src/components/BreadcrumbDivider/BreadcrumbDivider.test.tsx b/packages/react-components/react-breadcrumb/src/components/BreadcrumbDivider/BreadcrumbDivider.test.tsx
new file mode 100644
index 00000000000000..3bd272f5d0dab4
--- /dev/null
+++ b/packages/react-components/react-breadcrumb/src/components/BreadcrumbDivider/BreadcrumbDivider.test.tsx
@@ -0,0 +1,18 @@
+import * as React from 'react';
+import { render } from '@testing-library/react';
+import { BreadcrumbDivider } from './BreadcrumbDivider';
+import { isConformant } from '../../testing/isConformant';
+
+describe('BreadcrumbDivider', () => {
+  isConformant({
+    Component: BreadcrumbDivider,
+    displayName: 'BreadcrumbDivider',
+  });
+
+  // TODO add more tests here, and create visual regression tests in /apps/vr-tests
+
+  it('renders a default state', () => {
+    const result = render(<BreadcrumbDivider>Default BreadcrumbDivider</BreadcrumbDivider>);
+    expect(result.container).toMatchSnapshot();
+  });
+});
diff --git a/packages/react-components/react-breadcrumb/src/components/BreadcrumbDivider/BreadcrumbDivider.tsx b/packages/react-components/react-breadcrumb/src/components/BreadcrumbDivider/BreadcrumbDivider.tsx
new file mode 100644
index 00000000000000..517f974d10b81f
--- /dev/null
+++ b/packages/react-components/react-breadcrumb/src/components/BreadcrumbDivider/BreadcrumbDivider.tsx
@@ -0,0 +1,18 @@
+import * as React from 'react';
+import { useBreadcrumbDivider_unstable } from './useBreadcrumbDivider';
+import { renderBreadcrumbDivider_unstable } from './renderBreadcrumbDivider';
+import { useBreadcrumbDividerStyles_unstable } from './useBreadcrumbDividerStyles';
+import type { BreadcrumbDividerProps } from './BreadcrumbDivider.types';
+import type { ForwardRefComponent } from '@fluentui/react-utilities';
+
+/**
+ * BreadcrumbDivider component - TODO: add more docs
+ */
+export const BreadcrumbDivider: ForwardRefComponent<BreadcrumbDividerProps> = React.forwardRef((props, ref) => {
+  const state = useBreadcrumbDivider_unstable(props, ref);
+
+  useBreadcrumbDividerStyles_unstable(state);
+  return renderBreadcrumbDivider_unstable(state);
+});
+
+BreadcrumbDivider.displayName = 'BreadcrumbDivider';
diff --git a/packages/react-components/react-breadcrumb/src/components/BreadcrumbDivider/BreadcrumbDivider.types.ts b/packages/react-components/react-breadcrumb/src/components/BreadcrumbDivider/BreadcrumbDivider.types.ts
new file mode 100644
index 00000000000000..67df9e9b54fd46
--- /dev/null
+++ b/packages/react-components/react-breadcrumb/src/components/BreadcrumbDivider/BreadcrumbDivider.types.ts
@@ -0,0 +1,17 @@
+import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
+
+export type BreadcrumbDividerSlots = {
+  root: Slot<'div'>;
+};
+
+/**
+ * BreadcrumbDivider Props
+ */
+export type BreadcrumbDividerProps = ComponentProps<BreadcrumbDividerSlots> & {};
+
+/**
+ * State used in rendering BreadcrumbDivider
+ */
+export type BreadcrumbDividerState = ComponentState<BreadcrumbDividerSlots>;
+// TODO: Remove semicolon from previous line, uncomment next line, and provide union of props to pick from BreadcrumbDividerProps.
+// & Required<Pick<BreadcrumbDividerProps, 'propName'>>
diff --git a/packages/react-components/react-breadcrumb/src/components/BreadcrumbDivider/__snapshots__/BreadcrumbDivider.test.tsx.snap b/packages/react-components/react-breadcrumb/src/components/BreadcrumbDivider/__snapshots__/BreadcrumbDivider.test.tsx.snap
new file mode 100644
index 00000000000000..b9323b3092feed
--- /dev/null
+++ b/packages/react-components/react-breadcrumb/src/components/BreadcrumbDivider/__snapshots__/BreadcrumbDivider.test.tsx.snap
@@ -0,0 +1,11 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`BreadcrumbDivider renders a default state 1`] = `
+<div>
+  <div
+    class="fui-BreadcrumbDivider"
+  >
+    Default BreadcrumbDivider
+  </div>
+</div>
+`;
diff --git a/packages/react-components/react-breadcrumb/src/components/BreadcrumbDivider/index.ts b/packages/react-components/react-breadcrumb/src/components/BreadcrumbDivider/index.ts
new file mode 100644
index 00000000000000..2718c3f9ddff52
--- /dev/null
+++ b/packages/react-components/react-breadcrumb/src/components/BreadcrumbDivider/index.ts
@@ -0,0 +1,5 @@
+export * from './BreadcrumbDivider';
+export * from './BreadcrumbDivider.types';
+export * from './renderBreadcrumbDivider';
+export * from './useBreadcrumbDivider';
+export * from './useBreadcrumbDividerStyles';
diff --git a/packages/react-components/react-breadcrumb/src/components/BreadcrumbDivider/renderBreadcrumbDivider.tsx b/packages/react-components/react-breadcrumb/src/components/BreadcrumbDivider/renderBreadcrumbDivider.tsx
new file mode 100644
index 00000000000000..2a68a94552ef01
--- /dev/null
+++ b/packages/react-components/react-breadcrumb/src/components/BreadcrumbDivider/renderBreadcrumbDivider.tsx
@@ -0,0 +1,13 @@
+import * as React from 'react';
+import { getSlots } from '@fluentui/react-utilities';
+import type { BreadcrumbDividerState, BreadcrumbDividerSlots } from './BreadcrumbDivider.types';
+
+/**
+ * Render the final JSX of BreadcrumbDivider
+ */
+export const renderBreadcrumbDivider_unstable = (state: BreadcrumbDividerState) => {
+  const { slots, slotProps } = getSlots<BreadcrumbDividerSlots>(state);
+
+  // TODO Add additional slots in the appropriate place
+  return <slots.root {...slotProps.root} />;
+};
diff --git a/packages/react-components/react-breadcrumb/src/components/BreadcrumbDivider/useBreadcrumbDivider.ts b/packages/react-components/react-breadcrumb/src/components/BreadcrumbDivider/useBreadcrumbDivider.ts
new file mode 100644
index 00000000000000..46444b7f82dc73
--- /dev/null
+++ b/packages/react-components/react-breadcrumb/src/components/BreadcrumbDivider/useBreadcrumbDivider.ts
@@ -0,0 +1,31 @@
+import * as React from 'react';
+import { getNativeElementProps } from '@fluentui/react-utilities';
+import type { BreadcrumbDividerProps, BreadcrumbDividerState } from './BreadcrumbDivider.types';
+
+/**
+ * Create the state required to render BreadcrumbDivider.
+ *
+ * The returned state can be modified with hooks such as useBreadcrumbDividerStyles_unstable,
+ * before being passed to renderBreadcrumbDivider_unstable.
+ *
+ * @param props - props from this instance of BreadcrumbDivider
+ * @param ref - reference to root HTMLElement of BreadcrumbDivider
+ */
+export const useBreadcrumbDivider_unstable = (
+  props: BreadcrumbDividerProps,
+  ref: React.Ref<HTMLElement>,
+): BreadcrumbDividerState => {
+  return {
+    // TODO add appropriate props/defaults
+    components: {
+      // TODO add each slot's element type or component
+      root: 'div',
+    },
+    // TODO add appropriate slots, for example:
+    // mySlot: resolveShorthand(props.mySlot),
+    root: getNativeElementProps('div', {
+      ref,
+      ...props,
+    }),
+  };
+};
diff --git a/packages/react-components/react-breadcrumb/src/components/BreadcrumbDivider/useBreadcrumbDividerStyles.ts b/packages/react-components/react-breadcrumb/src/components/BreadcrumbDivider/useBreadcrumbDividerStyles.ts
new file mode 100644
index 00000000000000..6269d644e10a11
--- /dev/null
+++ b/packages/react-components/react-breadcrumb/src/components/BreadcrumbDivider/useBreadcrumbDividerStyles.ts
@@ -0,0 +1,33 @@
+import { makeStyles, mergeClasses } from '@griffel/react';
+import type { BreadcrumbDividerSlots, BreadcrumbDividerState } from './BreadcrumbDivider.types';
+import type { SlotClassNames } from '@fluentui/react-utilities';
+
+export const breadcrumbDividerClassNames: SlotClassNames<BreadcrumbDividerSlots> = {
+  root: 'fui-BreadcrumbDivider',
+  // TODO: add class names for all slots on BreadcrumbDividerSlots.
+  // Should be of the form `<slotName>: 'fui-BreadcrumbDivider__<slotName>`
+};
+
+/**
+ * Styles for the root slot
+ */
+const useStyles = makeStyles({
+  root: {
+    // TODO Add default styles for the root element
+  },
+
+  // TODO add additional classes for different states and/or slots
+});
+
+/**
+ * Apply styling to the BreadcrumbDivider slots based on the state
+ */
+export const useBreadcrumbDividerStyles_unstable = (state: BreadcrumbDividerState): BreadcrumbDividerState => {
+  const styles = useStyles();
+  state.root.className = mergeClasses(breadcrumbDividerClassNames.root, styles.root, state.root.className);
+
+  // TODO Add class names to slots, for example:
+  // state.mySlot.className = mergeClasses(styles.mySlot, state.mySlot.className);
+
+  return state;
+};
diff --git a/packages/react-components/react-breadcrumb/src/components/BreadcrumbItem/BreadcrumbItem.test.tsx b/packages/react-components/react-breadcrumb/src/components/BreadcrumbItem/BreadcrumbItem.test.tsx
new file mode 100644
index 00000000000000..837b646eebbed4
--- /dev/null
+++ b/packages/react-components/react-breadcrumb/src/components/BreadcrumbItem/BreadcrumbItem.test.tsx
@@ -0,0 +1,18 @@
+import * as React from 'react';
+import { render } from '@testing-library/react';
+import { BreadcrumbItem } from './BreadcrumbItem';
+import { isConformant } from '../../testing/isConformant';
+
+describe('BreadcrumbItem', () => {
+  isConformant({
+    Component: BreadcrumbItem,
+    displayName: 'BreadcrumbItem',
+  });
+
+  // TODO add more tests here, and create visual regression tests in /apps/vr-tests
+
+  it('renders a default state', () => {
+    const result = render(<BreadcrumbItem>Default BreadcrumbItem</BreadcrumbItem>);
+    expect(result.container).toMatchSnapshot();
+  });
+});
diff --git a/packages/react-components/react-breadcrumb/src/components/BreadcrumbItem/BreadcrumbItem.tsx b/packages/react-components/react-breadcrumb/src/components/BreadcrumbItem/BreadcrumbItem.tsx
new file mode 100644
index 00000000000000..7031b4bc1289d9
--- /dev/null
+++ b/packages/react-components/react-breadcrumb/src/components/BreadcrumbItem/BreadcrumbItem.tsx
@@ -0,0 +1,18 @@
+import * as React from 'react';
+import { useBreadcrumbItem_unstable } from './useBreadcrumbItem';
+import { renderBreadcrumbItem_unstable } from './renderBreadcrumbItem';
+import { useBreadcrumbItemStyles_unstable } from './useBreadcrumbItemStyles';
+import type { BreadcrumbItemProps } from './BreadcrumbItem.types';
+import type { ForwardRefComponent } from '@fluentui/react-utilities';
+
+/**
+ * BreadcrumbItem component - TODO: add more docs
+ */
+export const BreadcrumbItem: ForwardRefComponent<BreadcrumbItemProps> = React.forwardRef((props, ref) => {
+  const state = useBreadcrumbItem_unstable(props, ref);
+
+  useBreadcrumbItemStyles_unstable(state);
+  return renderBreadcrumbItem_unstable(state);
+});
+
+BreadcrumbItem.displayName = 'BreadcrumbItem';
diff --git a/packages/react-components/react-breadcrumb/src/components/BreadcrumbItem/BreadcrumbItem.types.ts b/packages/react-components/react-breadcrumb/src/components/BreadcrumbItem/BreadcrumbItem.types.ts
new file mode 100644
index 00000000000000..abfb546d2cf994
--- /dev/null
+++ b/packages/react-components/react-breadcrumb/src/components/BreadcrumbItem/BreadcrumbItem.types.ts
@@ -0,0 +1,17 @@
+import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
+
+export type BreadcrumbItemSlots = {
+  root: Slot<'div'>;
+};
+
+/**
+ * BreadcrumbItem Props
+ */
+export type BreadcrumbItemProps = ComponentProps<BreadcrumbItemSlots> & {};
+
+/**
+ * State used in rendering BreadcrumbItem
+ */
+export type BreadcrumbItemState = ComponentState<BreadcrumbItemSlots>;
+// TODO: Remove semicolon from previous line, uncomment next line, and provide union of props to pick from BreadcrumbItemProps.
+// & Required<Pick<BreadcrumbItemProps, 'propName'>>
diff --git a/packages/react-components/react-breadcrumb/src/components/BreadcrumbItem/__snapshots__/BreadcrumbItem.test.tsx.snap b/packages/react-components/react-breadcrumb/src/components/BreadcrumbItem/__snapshots__/BreadcrumbItem.test.tsx.snap
new file mode 100644
index 00000000000000..bbf4bc3a1a708c
--- /dev/null
+++ b/packages/react-components/react-breadcrumb/src/components/BreadcrumbItem/__snapshots__/BreadcrumbItem.test.tsx.snap
@@ -0,0 +1,11 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`BreadcrumbItem renders a default state 1`] = `
+<div>
+  <div
+    class="fui-BreadcrumbItem"
+  >
+    Default BreadcrumbItem
+  </div>
+</div>
+`;
diff --git a/packages/react-components/react-breadcrumb/src/components/BreadcrumbItem/index.ts b/packages/react-components/react-breadcrumb/src/components/BreadcrumbItem/index.ts
new file mode 100644
index 00000000000000..84e95cdc702d9e
--- /dev/null
+++ b/packages/react-components/react-breadcrumb/src/components/BreadcrumbItem/index.ts
@@ -0,0 +1,5 @@
+export * from './BreadcrumbItem';
+export * from './BreadcrumbItem.types';
+export * from './renderBreadcrumbItem';
+export * from './useBreadcrumbItem';
+export * from './useBreadcrumbItemStyles';
diff --git a/packages/react-components/react-breadcrumb/src/components/BreadcrumbItem/renderBreadcrumbItem.tsx b/packages/react-components/react-breadcrumb/src/components/BreadcrumbItem/renderBreadcrumbItem.tsx
new file mode 100644
index 00000000000000..4c2314c1eaaa36
--- /dev/null
+++ b/packages/react-components/react-breadcrumb/src/components/BreadcrumbItem/renderBreadcrumbItem.tsx
@@ -0,0 +1,13 @@
+import * as React from 'react';
+import { getSlots } from '@fluentui/react-utilities';
+import type { BreadcrumbItemState, BreadcrumbItemSlots } from './BreadcrumbItem.types';
+
+/**
+ * Render the final JSX of BreadcrumbItem
+ */
+export const renderBreadcrumbItem_unstable = (state: BreadcrumbItemState) => {
+  const { slots, slotProps } = getSlots<BreadcrumbItemSlots>(state);
+
+  // TODO Add additional slots in the appropriate place
+  return <slots.root {...slotProps.root} />;
+};
diff --git a/packages/react-components/react-breadcrumb/src/components/BreadcrumbItem/useBreadcrumbItem.ts b/packages/react-components/react-breadcrumb/src/components/BreadcrumbItem/useBreadcrumbItem.ts
new file mode 100644
index 00000000000000..96ed22b6d119db
--- /dev/null
+++ b/packages/react-components/react-breadcrumb/src/components/BreadcrumbItem/useBreadcrumbItem.ts
@@ -0,0 +1,31 @@
+import * as React from 'react';
+import { getNativeElementProps } from '@fluentui/react-utilities';
+import type { BreadcrumbItemProps, BreadcrumbItemState } from './BreadcrumbItem.types';
+
+/**
+ * Create the state required to render BreadcrumbItem.
+ *
+ * The returned state can be modified with hooks such as useBreadcrumbItemStyles_unstable,
+ * before being passed to renderBreadcrumbItem_unstable.
+ *
+ * @param props - props from this instance of BreadcrumbItem
+ * @param ref - reference to root HTMLElement of BreadcrumbItem
+ */
+export const useBreadcrumbItem_unstable = (
+  props: BreadcrumbItemProps,
+  ref: React.Ref<HTMLElement>,
+): BreadcrumbItemState => {
+  return {
+    // TODO add appropriate props/defaults
+    components: {
+      // TODO add each slot's element type or component
+      root: 'div',
+    },
+    // TODO add appropriate slots, for example:
+    // mySlot: resolveShorthand(props.mySlot),
+    root: getNativeElementProps('div', {
+      ref,
+      ...props,
+    }),
+  };
+};
diff --git a/packages/react-components/react-breadcrumb/src/components/BreadcrumbItem/useBreadcrumbItemStyles.ts b/packages/react-components/react-breadcrumb/src/components/BreadcrumbItem/useBreadcrumbItemStyles.ts
new file mode 100644
index 00000000000000..92084d9bcf2be2
--- /dev/null
+++ b/packages/react-components/react-breadcrumb/src/components/BreadcrumbItem/useBreadcrumbItemStyles.ts
@@ -0,0 +1,33 @@
+import { makeStyles, mergeClasses } from '@griffel/react';
+import type { BreadcrumbItemSlots, BreadcrumbItemState } from './BreadcrumbItem.types';
+import type { SlotClassNames } from '@fluentui/react-utilities';
+
+export const breadcrumbItemClassNames: SlotClassNames<BreadcrumbItemSlots> = {
+  root: 'fui-BreadcrumbItem',
+  // TODO: add class names for all slots on BreadcrumbItemSlots.
+  // Should be of the form `<slotName>: 'fui-BreadcrumbItem__<slotName>`
+};
+
+/**
+ * Styles for the root slot
+ */
+const useStyles = makeStyles({
+  root: {
+    // TODO Add default styles for the root element
+  },
+
+  // TODO add additional classes for different states and/or slots
+});
+
+/**
+ * Apply styling to the BreadcrumbItem slots based on the state
+ */
+export const useBreadcrumbItemStyles_unstable = (state: BreadcrumbItemState): BreadcrumbItemState => {
+  const styles = useStyles();
+  state.root.className = mergeClasses(breadcrumbItemClassNames.root, styles.root, state.root.className);
+
+  // TODO Add class names to slots, for example:
+  // state.mySlot.className = mergeClasses(styles.mySlot, state.mySlot.className);
+
+  return state;
+};
diff --git a/packages/react-components/react-breadcrumb/src/index.ts b/packages/react-components/react-breadcrumb/src/index.ts
index 88035245ad307e..013807b0d3d325 100644
--- a/packages/react-components/react-breadcrumb/src/index.ts
+++ b/packages/react-components/react-breadcrumb/src/index.ts
@@ -6,3 +6,19 @@ export {
   breadcrumbClassNames,
 } from './Breadcrumb';
 export type { BreadcrumbSlots, BreadcrumbProps, BreadcrumbState } from './Breadcrumb';
+export {
+  BreadcrumbDivider,
+  breadcrumbDividerClassNames,
+  renderBreadcrumbDivider_unstable,
+  useBreadcrumbDividerStyles_unstable,
+  useBreadcrumbDivider_unstable,
+} from './BreadcrumbDivider';
+export type { BreadcrumbDividerProps, BreadcrumbDividerSlots, BreadcrumbDividerState } from './BreadcrumbDivider';
+export {
+  BreadcrumbItem,
+  breadcrumbItemClassNames,
+  renderBreadcrumbItem_unstable,
+  useBreadcrumbItemStyles_unstable,
+  useBreadcrumbItem_unstable,
+} from './BreadcrumbItem';
+export type { BreadcrumbItemProps, BreadcrumbItemSlots, BreadcrumbItemState } from './BreadcrumbItem';
diff --git a/packages/react-components/react-breadcrumb/stories/BreadcrumbDivider/BreadcrumbDividerBestPractices.md b/packages/react-components/react-breadcrumb/stories/BreadcrumbDivider/BreadcrumbDividerBestPractices.md
new file mode 100644
index 00000000000000..08ff8ddeeb5f86
--- /dev/null
+++ b/packages/react-components/react-breadcrumb/stories/BreadcrumbDivider/BreadcrumbDividerBestPractices.md
@@ -0,0 +1,5 @@
+## Best practices
+
+### Do
+
+### Don't
diff --git a/packages/react-components/react-breadcrumb/stories/BreadcrumbDivider/BreadcrumbDividerDefault.stories.tsx b/packages/react-components/react-breadcrumb/stories/BreadcrumbDivider/BreadcrumbDividerDefault.stories.tsx
new file mode 100644
index 00000000000000..6df2381079d782
--- /dev/null
+++ b/packages/react-components/react-breadcrumb/stories/BreadcrumbDivider/BreadcrumbDividerDefault.stories.tsx
@@ -0,0 +1,4 @@
+import * as React from 'react';
+import { BreadcrumbDivider, BreadcrumbDividerProps } from '@fluentui/react-breadcrumb';
+
+export const Default = (props: Partial<BreadcrumbDividerProps>) => <BreadcrumbDivider {...props} />;
diff --git a/packages/react-components/react-breadcrumb/stories/BreadcrumbDivider/BreadcrumbDividerDescription.md b/packages/react-components/react-breadcrumb/stories/BreadcrumbDivider/BreadcrumbDividerDescription.md
new file mode 100644
index 00000000000000..e69de29bb2d1d6
diff --git a/packages/react-components/react-breadcrumb/stories/BreadcrumbDivider/index.stories.tsx b/packages/react-components/react-breadcrumb/stories/BreadcrumbDivider/index.stories.tsx
new file mode 100644
index 00000000000000..67639ed3c346eb
--- /dev/null
+++ b/packages/react-components/react-breadcrumb/stories/BreadcrumbDivider/index.stories.tsx
@@ -0,0 +1,18 @@
+import { BreadcrumbDivider } from '@fluentui/react-breadcrumb';
+
+import descriptionMd from './BreadcrumbDividerDescription.md';
+import bestPracticesMd from './BreadcrumbDividerBestPractices.md';
+
+export { Default } from './BreadcrumbDividerDefault.stories';
+
+export default {
+  title: 'Preview Components/BreadcrumbDivider',
+  component: BreadcrumbDivider,
+  parameters: {
+    docs: {
+      description: {
+        component: [descriptionMd, bestPracticesMd].join('\n'),
+      },
+    },
+  },
+};
diff --git a/packages/react-components/react-breadcrumb/stories/BreadcrumbItem/BreadcrumbItemBestPractices.md b/packages/react-components/react-breadcrumb/stories/BreadcrumbItem/BreadcrumbItemBestPractices.md
new file mode 100644
index 00000000000000..08ff8ddeeb5f86
--- /dev/null
+++ b/packages/react-components/react-breadcrumb/stories/BreadcrumbItem/BreadcrumbItemBestPractices.md
@@ -0,0 +1,5 @@
+## Best practices
+
+### Do
+
+### Don't
diff --git a/packages/react-components/react-breadcrumb/stories/BreadcrumbItem/BreadcrumbItemDefault.stories.tsx b/packages/react-components/react-breadcrumb/stories/BreadcrumbItem/BreadcrumbItemDefault.stories.tsx
new file mode 100644
index 00000000000000..f1fa4b20719274
--- /dev/null
+++ b/packages/react-components/react-breadcrumb/stories/BreadcrumbItem/BreadcrumbItemDefault.stories.tsx
@@ -0,0 +1,4 @@
+import * as React from 'react';
+import { BreadcrumbItem, BreadcrumbItemProps } from '@fluentui/react-breadcrumb';
+
+export const Default = (props: Partial<BreadcrumbItemProps>) => <BreadcrumbItem {...props} />;
diff --git a/packages/react-components/react-breadcrumb/stories/BreadcrumbItem/BreadcrumbItemDescription.md b/packages/react-components/react-breadcrumb/stories/BreadcrumbItem/BreadcrumbItemDescription.md
new file mode 100644
index 00000000000000..e69de29bb2d1d6
diff --git a/packages/react-components/react-breadcrumb/stories/BreadcrumbItem/index.stories.tsx b/packages/react-components/react-breadcrumb/stories/BreadcrumbItem/index.stories.tsx
new file mode 100644
index 00000000000000..a2bb7dce701670
--- /dev/null
+++ b/packages/react-components/react-breadcrumb/stories/BreadcrumbItem/index.stories.tsx
@@ -0,0 +1,18 @@
+import { BreadcrumbItem } from '@fluentui/react-breadcrumb';
+
+import descriptionMd from './BreadcrumbItemDescription.md';
+import bestPracticesMd from './BreadcrumbItemBestPractices.md';
+
+export { Default } from './BreadcrumbItemDefault.stories';
+
+export default {
+  title: 'Preview Components/BreadcrumbItem',
+  component: BreadcrumbItem,
+  parameters: {
+    docs: {
+      description: {
+        component: [descriptionMd, bestPracticesMd].join('\n'),
+      },
+    },
+  },
+};

From 2d377b7c0e8e2ea852faae76f3979848eb50d4ed Mon Sep 17 00:00:00 2001
From: Valentyna <vkozlova@microsoft.com>
Date: Thu, 23 Feb 2023 16:08:16 +0100
Subject: [PATCH 2/5] Added basic structure of the component

---
 .../react-breadcrumb/etc/react-breadcrumb.api.md |  8 +++++---
 .../components/Breadcrumb/Breadcrumb.types.ts    |  5 +++--
 .../__snapshots__/Breadcrumb.test.tsx.snap       | 10 +++++++---
 .../components/Breadcrumb/renderBreadcrumb.tsx   | 10 ++++++----
 .../src/components/Breadcrumb/useBreadcrumb.ts   |  6 ++++--
 .../components/Breadcrumb/useBreadcrumbStyles.ts | 16 ++++++++--------
 .../BreadcrumbDivider/BreadcrumbDivider.types.ts |  5 +++--
 .../BreadcrumbDivider.test.tsx.snap              |  6 +++---
 .../renderBreadcrumbDivider.tsx                  |  2 +-
 .../BreadcrumbDivider/useBreadcrumbDivider.ts    |  2 +-
 .../BreadcrumbItem/BreadcrumbItem.types.ts       |  5 ++++-
 .../__snapshots__/BreadcrumbItem.test.tsx.snap   |  5 +++++
 .../BreadcrumbItem/renderBreadcrumbItem.tsx      |  7 ++++++-
 .../BreadcrumbItem/useBreadcrumbItem.ts          |  5 +++--
 .../BreadcrumbItem/useBreadcrumbItemStyles.ts    | 14 ++++++--------
 .../Breadcrumb/BreadcrumbDefault.stories.tsx     | 10 ++++++++--
 16 files changed, 73 insertions(+), 43 deletions(-)

diff --git a/packages/react-components/react-breadcrumb/etc/react-breadcrumb.api.md b/packages/react-components/react-breadcrumb/etc/react-breadcrumb.api.md
index 29e5cdf6287cb3..4031a71cfcc142 100644
--- a/packages/react-components/react-breadcrumb/etc/react-breadcrumb.api.md
+++ b/packages/react-components/react-breadcrumb/etc/react-breadcrumb.api.md
@@ -28,7 +28,7 @@ export type BreadcrumbDividerProps = ComponentProps<BreadcrumbDividerSlots> & {}
 
 // @public (undocumented)
 export type BreadcrumbDividerSlots = {
-    root: Slot<'div'>;
+    root: Slot<'span'>;
 };
 
 // @public
@@ -46,17 +46,19 @@ export type BreadcrumbItemProps = ComponentProps<BreadcrumbItemSlots> & {};
 // @public (undocumented)
 export type BreadcrumbItemSlots = {
     root: Slot<'div'>;
+    divider?: Slot<typeof BreadcrumbDivider>;
 };
 
 // @public
 export type BreadcrumbItemState = ComponentState<BreadcrumbItemSlots>;
 
 // @public
-export type BreadcrumbProps = ComponentProps<BreadcrumbSlots> & {};
+export type BreadcrumbProps = ComponentProps<Omit<BreadcrumbSlots, 'list'>> & {};
 
 // @public (undocumented)
 export type BreadcrumbSlots = {
-    root: Slot<'div'>;
+    root: Slot<'nav'>;
+    list: Slot<'ol'>;
 };
 
 // @public
diff --git a/packages/react-components/react-breadcrumb/src/components/Breadcrumb/Breadcrumb.types.ts b/packages/react-components/react-breadcrumb/src/components/Breadcrumb/Breadcrumb.types.ts
index 57a88e2d0c3966..ecbf97082f83c1 100644
--- a/packages/react-components/react-breadcrumb/src/components/Breadcrumb/Breadcrumb.types.ts
+++ b/packages/react-components/react-breadcrumb/src/components/Breadcrumb/Breadcrumb.types.ts
@@ -1,13 +1,14 @@
 import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
 
 export type BreadcrumbSlots = {
-  root: Slot<'div'>;
+  root: Slot<'nav'>;
+  list: Slot<'ol'>;
 };
 
 /**
  * Breadcrumb Props
  */
-export type BreadcrumbProps = ComponentProps<BreadcrumbSlots> & {};
+export type BreadcrumbProps = ComponentProps<Omit<BreadcrumbSlots, 'list'>> & {};
 
 /**
  * State used in rendering Breadcrumb
diff --git a/packages/react-components/react-breadcrumb/src/components/Breadcrumb/__snapshots__/Breadcrumb.test.tsx.snap b/packages/react-components/react-breadcrumb/src/components/Breadcrumb/__snapshots__/Breadcrumb.test.tsx.snap
index a022df483a4292..192ae21c7366f4 100644
--- a/packages/react-components/react-breadcrumb/src/components/Breadcrumb/__snapshots__/Breadcrumb.test.tsx.snap
+++ b/packages/react-components/react-breadcrumb/src/components/Breadcrumb/__snapshots__/Breadcrumb.test.tsx.snap
@@ -2,10 +2,14 @@
 
 exports[`Breadcrumb renders a default state 1`] = `
 <div>
-  <div
+  <nav
     class="fui-Breadcrumb"
   >
-    Default Breadcrumb
-  </div>
+    <ol
+      class="fui-Breadcrumb__list"
+    >
+      Default Breadcrumb
+    </ol>
+  </nav>
 </div>
 `;
diff --git a/packages/react-components/react-breadcrumb/src/components/Breadcrumb/renderBreadcrumb.tsx b/packages/react-components/react-breadcrumb/src/components/Breadcrumb/renderBreadcrumb.tsx
index 678c109a5d62f1..ef21babeb5f887 100644
--- a/packages/react-components/react-breadcrumb/src/components/Breadcrumb/renderBreadcrumb.tsx
+++ b/packages/react-components/react-breadcrumb/src/components/Breadcrumb/renderBreadcrumb.tsx
@@ -1,13 +1,15 @@
 import * as React from 'react';
 import { getSlots } from '@fluentui/react-utilities';
 import type { BreadcrumbState, BreadcrumbSlots } from './Breadcrumb.types';
-
 /**
  * Render the final JSX of Breadcrumb
  */
 export const renderBreadcrumb_unstable = (state: BreadcrumbState) => {
   const { slots, slotProps } = getSlots<BreadcrumbSlots>(state);
-
-  // TODO Add additional slots in the appropriate place
-  return <slots.root {...slotProps.root} />;
+  const { root, list } = slotProps;
+  return (
+    <slots.root {...root}>
+      <slots.list {...list}>{root.children}</slots.list>
+    </slots.root>
+  );
 };
diff --git a/packages/react-components/react-breadcrumb/src/components/Breadcrumb/useBreadcrumb.ts b/packages/react-components/react-breadcrumb/src/components/Breadcrumb/useBreadcrumb.ts
index 1cb2f18c44e378..7326d94f1a7b1e 100644
--- a/packages/react-components/react-breadcrumb/src/components/Breadcrumb/useBreadcrumb.ts
+++ b/packages/react-components/react-breadcrumb/src/components/Breadcrumb/useBreadcrumb.ts
@@ -16,13 +16,15 @@ export const useBreadcrumb_unstable = (props: BreadcrumbProps, ref: React.Ref<HT
     // TODO add appropriate props/defaults
     components: {
       // TODO add each slot's element type or component
-      root: 'div',
+      root: 'nav',
+      list: 'ol',
     },
     // TODO add appropriate slots, for example:
     // mySlot: resolveShorthand(props.mySlot),
-    root: getNativeElementProps('div', {
+    root: getNativeElementProps('nav', {
       ref,
       ...props,
     }),
+    list: {},
   };
 };
diff --git a/packages/react-components/react-breadcrumb/src/components/Breadcrumb/useBreadcrumbStyles.ts b/packages/react-components/react-breadcrumb/src/components/Breadcrumb/useBreadcrumbStyles.ts
index 826f00b3b0fd2d..32fcfd39eac433 100644
--- a/packages/react-components/react-breadcrumb/src/components/Breadcrumb/useBreadcrumbStyles.ts
+++ b/packages/react-components/react-breadcrumb/src/components/Breadcrumb/useBreadcrumbStyles.ts
@@ -4,8 +4,7 @@ import type { SlotClassNames } from '@fluentui/react-utilities';
 
 export const breadcrumbClassNames: SlotClassNames<BreadcrumbSlots> = {
   root: 'fui-Breadcrumb',
-  // TODO: add class names for all slots on BreadcrumbSlots.
-  // Should be of the form `<slotName>: 'fui-Breadcrumb__<slotName>`
+  list: 'fui-Breadcrumb__list',
 };
 
 /**
@@ -15,8 +14,10 @@ const useStyles = makeStyles({
   root: {
     // TODO Add default styles for the root element
   },
-
-  // TODO add additional classes for different states and/or slots
+  list: {
+    listStyleType: 'none',
+    display: 'flex',
+  },
 });
 
 /**
@@ -25,9 +26,8 @@ const useStyles = makeStyles({
 export const useBreadcrumbStyles_unstable = (state: BreadcrumbState): BreadcrumbState => {
   const styles = useStyles();
   state.root.className = mergeClasses(breadcrumbClassNames.root, styles.root, state.root.className);
-
-  // TODO Add class names to slots, for example:
-  // state.mySlot.className = mergeClasses(styles.mySlot, state.mySlot.className);
-
+  if (state.list) {
+    state.list.className = mergeClasses(breadcrumbClassNames.list, styles.list, state.list.className);
+  }
   return state;
 };
diff --git a/packages/react-components/react-breadcrumb/src/components/BreadcrumbDivider/BreadcrumbDivider.types.ts b/packages/react-components/react-breadcrumb/src/components/BreadcrumbDivider/BreadcrumbDivider.types.ts
index 67df9e9b54fd46..68d87b360ba038 100644
--- a/packages/react-components/react-breadcrumb/src/components/BreadcrumbDivider/BreadcrumbDivider.types.ts
+++ b/packages/react-components/react-breadcrumb/src/components/BreadcrumbDivider/BreadcrumbDivider.types.ts
@@ -1,7 +1,7 @@
 import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
 
 export type BreadcrumbDividerSlots = {
-  root: Slot<'div'>;
+  root: Slot<'span'>;
 };
 
 /**
@@ -13,5 +13,6 @@ export type BreadcrumbDividerProps = ComponentProps<BreadcrumbDividerSlots> & {}
  * State used in rendering BreadcrumbDivider
  */
 export type BreadcrumbDividerState = ComponentState<BreadcrumbDividerSlots>;
-// TODO: Remove semicolon from previous line, uncomment next line, and provide union of props to pick from BreadcrumbDividerProps.
+// TODO: Remove semicolon from previous line, uncomment next line,
+//and provide union of props to pick from BreadcrumbDividerProps.
 // & Required<Pick<BreadcrumbDividerProps, 'propName'>>
diff --git a/packages/react-components/react-breadcrumb/src/components/BreadcrumbDivider/__snapshots__/BreadcrumbDivider.test.tsx.snap b/packages/react-components/react-breadcrumb/src/components/BreadcrumbDivider/__snapshots__/BreadcrumbDivider.test.tsx.snap
index b9323b3092feed..dc60f506d41cb6 100644
--- a/packages/react-components/react-breadcrumb/src/components/BreadcrumbDivider/__snapshots__/BreadcrumbDivider.test.tsx.snap
+++ b/packages/react-components/react-breadcrumb/src/components/BreadcrumbDivider/__snapshots__/BreadcrumbDivider.test.tsx.snap
@@ -2,10 +2,10 @@
 
 exports[`BreadcrumbDivider renders a default state 1`] = `
 <div>
-  <div
+  <span
     class="fui-BreadcrumbDivider"
   >
-    Default BreadcrumbDivider
-  </div>
+    &gt;
+  </span>
 </div>
 `;
diff --git a/packages/react-components/react-breadcrumb/src/components/BreadcrumbDivider/renderBreadcrumbDivider.tsx b/packages/react-components/react-breadcrumb/src/components/BreadcrumbDivider/renderBreadcrumbDivider.tsx
index 2a68a94552ef01..c92221dcbffde5 100644
--- a/packages/react-components/react-breadcrumb/src/components/BreadcrumbDivider/renderBreadcrumbDivider.tsx
+++ b/packages/react-components/react-breadcrumb/src/components/BreadcrumbDivider/renderBreadcrumbDivider.tsx
@@ -9,5 +9,5 @@ export const renderBreadcrumbDivider_unstable = (state: BreadcrumbDividerState)
   const { slots, slotProps } = getSlots<BreadcrumbDividerSlots>(state);
 
   // TODO Add additional slots in the appropriate place
-  return <slots.root {...slotProps.root} />;
+  return <slots.root {...slotProps.root}>&gt;</slots.root>;
 };
diff --git a/packages/react-components/react-breadcrumb/src/components/BreadcrumbDivider/useBreadcrumbDivider.ts b/packages/react-components/react-breadcrumb/src/components/BreadcrumbDivider/useBreadcrumbDivider.ts
index 46444b7f82dc73..6e96bde13233e5 100644
--- a/packages/react-components/react-breadcrumb/src/components/BreadcrumbDivider/useBreadcrumbDivider.ts
+++ b/packages/react-components/react-breadcrumb/src/components/BreadcrumbDivider/useBreadcrumbDivider.ts
@@ -19,7 +19,7 @@ export const useBreadcrumbDivider_unstable = (
     // TODO add appropriate props/defaults
     components: {
       // TODO add each slot's element type or component
-      root: 'div',
+      root: 'span',
     },
     // TODO add appropriate slots, for example:
     // mySlot: resolveShorthand(props.mySlot),
diff --git a/packages/react-components/react-breadcrumb/src/components/BreadcrumbItem/BreadcrumbItem.types.ts b/packages/react-components/react-breadcrumb/src/components/BreadcrumbItem/BreadcrumbItem.types.ts
index abfb546d2cf994..e12f88d6a92efe 100644
--- a/packages/react-components/react-breadcrumb/src/components/BreadcrumbItem/BreadcrumbItem.types.ts
+++ b/packages/react-components/react-breadcrumb/src/components/BreadcrumbItem/BreadcrumbItem.types.ts
@@ -1,7 +1,9 @@
 import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
+import { BreadcrumbDivider } from '../BreadcrumbDivider/BreadcrumbDivider';
 
 export type BreadcrumbItemSlots = {
   root: Slot<'div'>;
+  divider?: Slot<typeof BreadcrumbDivider>;
 };
 
 /**
@@ -13,5 +15,6 @@ export type BreadcrumbItemProps = ComponentProps<BreadcrumbItemSlots> & {};
  * State used in rendering BreadcrumbItem
  */
 export type BreadcrumbItemState = ComponentState<BreadcrumbItemSlots>;
-// TODO: Remove semicolon from previous line, uncomment next line, and provide union of props to pick from BreadcrumbItemProps.
+// TODO: Remove semicolon from previous line, uncomment next line,
+// and provide union of props to pick from BreadcrumbItemProps.
 // & Required<Pick<BreadcrumbItemProps, 'propName'>>
diff --git a/packages/react-components/react-breadcrumb/src/components/BreadcrumbItem/__snapshots__/BreadcrumbItem.test.tsx.snap b/packages/react-components/react-breadcrumb/src/components/BreadcrumbItem/__snapshots__/BreadcrumbItem.test.tsx.snap
index bbf4bc3a1a708c..cb211d5d095ee9 100644
--- a/packages/react-components/react-breadcrumb/src/components/BreadcrumbItem/__snapshots__/BreadcrumbItem.test.tsx.snap
+++ b/packages/react-components/react-breadcrumb/src/components/BreadcrumbItem/__snapshots__/BreadcrumbItem.test.tsx.snap
@@ -6,6 +6,11 @@ exports[`BreadcrumbItem renders a default state 1`] = `
     class="fui-BreadcrumbItem"
   >
     Default BreadcrumbItem
+    <span
+      class="fui-BreadcrumbDivider fui-BreadcrumbItem__divider"
+    >
+      &gt;
+    </span>
   </div>
 </div>
 `;
diff --git a/packages/react-components/react-breadcrumb/src/components/BreadcrumbItem/renderBreadcrumbItem.tsx b/packages/react-components/react-breadcrumb/src/components/BreadcrumbItem/renderBreadcrumbItem.tsx
index 4c2314c1eaaa36..a4d2847550bfde 100644
--- a/packages/react-components/react-breadcrumb/src/components/BreadcrumbItem/renderBreadcrumbItem.tsx
+++ b/packages/react-components/react-breadcrumb/src/components/BreadcrumbItem/renderBreadcrumbItem.tsx
@@ -9,5 +9,10 @@ export const renderBreadcrumbItem_unstable = (state: BreadcrumbItemState) => {
   const { slots, slotProps } = getSlots<BreadcrumbItemSlots>(state);
 
   // TODO Add additional slots in the appropriate place
-  return <slots.root {...slotProps.root} />;
+  return (
+    <slots.root {...slotProps.root}>
+      {slotProps.root.children}
+      {slots.divider && <slots.divider {...slotProps.divider} />}
+    </slots.root>
+  );
 };
diff --git a/packages/react-components/react-breadcrumb/src/components/BreadcrumbItem/useBreadcrumbItem.ts b/packages/react-components/react-breadcrumb/src/components/BreadcrumbItem/useBreadcrumbItem.ts
index 96ed22b6d119db..8532c56101c770 100644
--- a/packages/react-components/react-breadcrumb/src/components/BreadcrumbItem/useBreadcrumbItem.ts
+++ b/packages/react-components/react-breadcrumb/src/components/BreadcrumbItem/useBreadcrumbItem.ts
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { getNativeElementProps } from '@fluentui/react-utilities';
 import type { BreadcrumbItemProps, BreadcrumbItemState } from './BreadcrumbItem.types';
-
+import { BreadcrumbDivider } from '../BreadcrumbDivider/BreadcrumbDivider';
 /**
  * Create the state required to render BreadcrumbItem.
  *
@@ -18,8 +18,8 @@ export const useBreadcrumbItem_unstable = (
   return {
     // TODO add appropriate props/defaults
     components: {
-      // TODO add each slot's element type or component
       root: 'div',
+      divider: BreadcrumbDivider,
     },
     // TODO add appropriate slots, for example:
     // mySlot: resolveShorthand(props.mySlot),
@@ -27,5 +27,6 @@ export const useBreadcrumbItem_unstable = (
       ref,
       ...props,
     }),
+    divider: {},
   };
 };
diff --git a/packages/react-components/react-breadcrumb/src/components/BreadcrumbItem/useBreadcrumbItemStyles.ts b/packages/react-components/react-breadcrumb/src/components/BreadcrumbItem/useBreadcrumbItemStyles.ts
index 92084d9bcf2be2..7765e78992d7ba 100644
--- a/packages/react-components/react-breadcrumb/src/components/BreadcrumbItem/useBreadcrumbItemStyles.ts
+++ b/packages/react-components/react-breadcrumb/src/components/BreadcrumbItem/useBreadcrumbItemStyles.ts
@@ -4,8 +4,7 @@ import type { SlotClassNames } from '@fluentui/react-utilities';
 
 export const breadcrumbItemClassNames: SlotClassNames<BreadcrumbItemSlots> = {
   root: 'fui-BreadcrumbItem',
-  // TODO: add class names for all slots on BreadcrumbItemSlots.
-  // Should be of the form `<slotName>: 'fui-BreadcrumbItem__<slotName>`
+  divider: 'fui-BreadcrumbItem__divider',
 };
 
 /**
@@ -13,10 +12,9 @@ export const breadcrumbItemClassNames: SlotClassNames<BreadcrumbItemSlots> = {
  */
 const useStyles = makeStyles({
   root: {
-    // TODO Add default styles for the root element
+    display: 'flex',
   },
-
-  // TODO add additional classes for different states and/or slots
+  divider: {},
 });
 
 /**
@@ -26,8 +24,8 @@ export const useBreadcrumbItemStyles_unstable = (state: BreadcrumbItemState): Br
   const styles = useStyles();
   state.root.className = mergeClasses(breadcrumbItemClassNames.root, styles.root, state.root.className);
 
-  // TODO Add class names to slots, for example:
-  // state.mySlot.className = mergeClasses(styles.mySlot, state.mySlot.className);
-
+  if (state.divider) {
+    state.divider.className = mergeClasses(breadcrumbItemClassNames.divider, styles.divider, state.divider.className);
+  }
   return state;
 };
diff --git a/packages/react-components/react-breadcrumb/stories/Breadcrumb/BreadcrumbDefault.stories.tsx b/packages/react-components/react-breadcrumb/stories/Breadcrumb/BreadcrumbDefault.stories.tsx
index f086d005b361d5..3e1ea5141a9864 100644
--- a/packages/react-components/react-breadcrumb/stories/Breadcrumb/BreadcrumbDefault.stories.tsx
+++ b/packages/react-components/react-breadcrumb/stories/Breadcrumb/BreadcrumbDefault.stories.tsx
@@ -1,4 +1,10 @@
 import * as React from 'react';
-import { Breadcrumb, BreadcrumbProps } from '@fluentui/react-breadcrumb';
+import { Breadcrumb, BreadcrumbProps, BreadcrumbItem } from '@fluentui/react-breadcrumb';
 
-export const Default = (props: Partial<BreadcrumbProps>) => <Breadcrumb {...props} />;
+export const Default = (props: Partial<BreadcrumbProps>) => (
+  <Breadcrumb {...props}>
+    <BreadcrumbItem>Item 1</BreadcrumbItem>
+    <BreadcrumbItem>Item 2</BreadcrumbItem>
+    <BreadcrumbItem>Item 3</BreadcrumbItem>
+  </Breadcrumb>
+);

From 5fb9a51014f99be304bf5eb5b7182152657b3959 Mon Sep 17 00:00:00 2001
From: Valentyna <vkozlova@microsoft.com>
Date: Thu, 9 Mar 2023 16:56:00 +0100
Subject: [PATCH 3/5] PR fix

---
 .../react-breadcrumb/package.json                |  1 +
 .../components/Breadcrumb/Breadcrumb.test.tsx    | 14 +++++++++++++-
 .../components/Breadcrumb/Breadcrumb.types.ts    |  4 ++--
 .../__snapshots__/Breadcrumb.test.tsx.snap       | 15 ---------------
 .../components/Breadcrumb/renderBreadcrumb.tsx   |  6 +-----
 .../BreadcrumbDivider/BreadcrumbDivider.test.tsx | 10 +++++++++-
 .../BreadcrumbDivider/BreadcrumbDivider.tsx      |  5 +++++
 .../BreadcrumbDivider.test.tsx.snap              | 11 -----------
 .../BreadcrumbItem/BreadcrumbItem.test.tsx       | 15 ++++++++++++++-
 .../components/BreadcrumbItem/BreadcrumbItem.tsx |  5 +++++
 .../__snapshots__/BreadcrumbItem.test.tsx.snap   | 16 ----------------
 11 files changed, 50 insertions(+), 52 deletions(-)
 delete mode 100644 packages/react-components/react-breadcrumb/src/components/Breadcrumb/__snapshots__/Breadcrumb.test.tsx.snap
 delete mode 100644 packages/react-components/react-breadcrumb/src/components/BreadcrumbDivider/__snapshots__/BreadcrumbDivider.test.tsx.snap
 delete mode 100644 packages/react-components/react-breadcrumb/src/components/BreadcrumbItem/__snapshots__/BreadcrumbItem.test.tsx.snap

diff --git a/packages/react-components/react-breadcrumb/package.json b/packages/react-components/react-breadcrumb/package.json
index b4dc2ba95b510f..ed06710ae88da9 100644
--- a/packages/react-components/react-breadcrumb/package.json
+++ b/packages/react-components/react-breadcrumb/package.json
@@ -32,6 +32,7 @@
     "@fluentui/scripts-tasks": "*"
   },
   "dependencies": {
+    "@fluentui/react-shared-contexts": "^9.2.0",
     "@fluentui/react-theme": "^9.1.5",
     "@fluentui/react-utilities": "^9.6.0",
     "@griffel/react": "^1.5.2",
diff --git a/packages/react-components/react-breadcrumb/src/components/Breadcrumb/Breadcrumb.test.tsx b/packages/react-components/react-breadcrumb/src/components/Breadcrumb/Breadcrumb.test.tsx
index fb220afbefc2f7..c289c3b517532c 100644
--- a/packages/react-components/react-breadcrumb/src/components/Breadcrumb/Breadcrumb.test.tsx
+++ b/packages/react-components/react-breadcrumb/src/components/Breadcrumb/Breadcrumb.test.tsx
@@ -13,6 +13,18 @@ describe('Breadcrumb', () => {
 
   it('renders a default state', () => {
     const result = render(<Breadcrumb>Default Breadcrumb</Breadcrumb>);
-    expect(result.container).toMatchSnapshot();
+    expect(result.container).toMatchInlineSnapshot(`
+      <div>
+        <nav
+          class="fui-Breadcrumb"
+        >
+          <ol
+            class="fui-Breadcrumb__list"
+          >
+            Default Breadcrumb
+          </ol>
+        </nav>
+      </div>
+    `);
   });
 });
diff --git a/packages/react-components/react-breadcrumb/src/components/Breadcrumb/Breadcrumb.types.ts b/packages/react-components/react-breadcrumb/src/components/Breadcrumb/Breadcrumb.types.ts
index ecbf97082f83c1..35ee21e0af27df 100644
--- a/packages/react-components/react-breadcrumb/src/components/Breadcrumb/Breadcrumb.types.ts
+++ b/packages/react-components/react-breadcrumb/src/components/Breadcrumb/Breadcrumb.types.ts
@@ -2,13 +2,13 @@ import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utili
 
 export type BreadcrumbSlots = {
   root: Slot<'nav'>;
-  list: Slot<'ol'>;
+  list?: Slot<'ol'>;
 };
 
 /**
  * Breadcrumb Props
  */
-export type BreadcrumbProps = ComponentProps<Omit<BreadcrumbSlots, 'list'>> & {};
+export type BreadcrumbProps = ComponentProps<BreadcrumbSlots> & {};
 
 /**
  * State used in rendering Breadcrumb
diff --git a/packages/react-components/react-breadcrumb/src/components/Breadcrumb/__snapshots__/Breadcrumb.test.tsx.snap b/packages/react-components/react-breadcrumb/src/components/Breadcrumb/__snapshots__/Breadcrumb.test.tsx.snap
deleted file mode 100644
index 192ae21c7366f4..00000000000000
--- a/packages/react-components/react-breadcrumb/src/components/Breadcrumb/__snapshots__/Breadcrumb.test.tsx.snap
+++ /dev/null
@@ -1,15 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Breadcrumb renders a default state 1`] = `
-<div>
-  <nav
-    class="fui-Breadcrumb"
-  >
-    <ol
-      class="fui-Breadcrumb__list"
-    >
-      Default Breadcrumb
-    </ol>
-  </nav>
-</div>
-`;
diff --git a/packages/react-components/react-breadcrumb/src/components/Breadcrumb/renderBreadcrumb.tsx b/packages/react-components/react-breadcrumb/src/components/Breadcrumb/renderBreadcrumb.tsx
index ef21babeb5f887..f5e43364cb868b 100644
--- a/packages/react-components/react-breadcrumb/src/components/Breadcrumb/renderBreadcrumb.tsx
+++ b/packages/react-components/react-breadcrumb/src/components/Breadcrumb/renderBreadcrumb.tsx
@@ -7,9 +7,5 @@ import type { BreadcrumbState, BreadcrumbSlots } from './Breadcrumb.types';
 export const renderBreadcrumb_unstable = (state: BreadcrumbState) => {
   const { slots, slotProps } = getSlots<BreadcrumbSlots>(state);
   const { root, list } = slotProps;
-  return (
-    <slots.root {...root}>
-      <slots.list {...list}>{root.children}</slots.list>
-    </slots.root>
-  );
+  return <slots.root {...root}>{slots.list && <slots.list {...list}>{root.children}</slots.list>}</slots.root>;
 };
diff --git a/packages/react-components/react-breadcrumb/src/components/BreadcrumbDivider/BreadcrumbDivider.test.tsx b/packages/react-components/react-breadcrumb/src/components/BreadcrumbDivider/BreadcrumbDivider.test.tsx
index 3bd272f5d0dab4..787a5f6a39f6b0 100644
--- a/packages/react-components/react-breadcrumb/src/components/BreadcrumbDivider/BreadcrumbDivider.test.tsx
+++ b/packages/react-components/react-breadcrumb/src/components/BreadcrumbDivider/BreadcrumbDivider.test.tsx
@@ -13,6 +13,14 @@ describe('BreadcrumbDivider', () => {
 
   it('renders a default state', () => {
     const result = render(<BreadcrumbDivider>Default BreadcrumbDivider</BreadcrumbDivider>);
-    expect(result.container).toMatchSnapshot();
+    expect(result.container).toMatchInlineSnapshot(`
+      <div>
+        <span
+          class="fui-BreadcrumbDivider"
+        >
+          &gt;
+        </span>
+      </div>
+    `);
   });
 });
diff --git a/packages/react-components/react-breadcrumb/src/components/BreadcrumbDivider/BreadcrumbDivider.tsx b/packages/react-components/react-breadcrumb/src/components/BreadcrumbDivider/BreadcrumbDivider.tsx
index 517f974d10b81f..09e558ff9d2c80 100644
--- a/packages/react-components/react-breadcrumb/src/components/BreadcrumbDivider/BreadcrumbDivider.tsx
+++ b/packages/react-components/react-breadcrumb/src/components/BreadcrumbDivider/BreadcrumbDivider.tsx
@@ -4,6 +4,7 @@ import { renderBreadcrumbDivider_unstable } from './renderBreadcrumbDivider';
 import { useBreadcrumbDividerStyles_unstable } from './useBreadcrumbDividerStyles';
 import type { BreadcrumbDividerProps } from './BreadcrumbDivider.types';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
+import { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts';
 
 /**
  * BreadcrumbDivider component - TODO: add more docs
@@ -12,6 +13,10 @@ export const BreadcrumbDivider: ForwardRefComponent<BreadcrumbDividerProps> = Re
   const state = useBreadcrumbDivider_unstable(props, ref);
 
   useBreadcrumbDividerStyles_unstable(state);
+
+  const { useTextStyles_unstable: useCustomStyles } = useCustomStyleHooks_unstable();
+  useCustomStyles(state);
+
   return renderBreadcrumbDivider_unstable(state);
 });
 
diff --git a/packages/react-components/react-breadcrumb/src/components/BreadcrumbDivider/__snapshots__/BreadcrumbDivider.test.tsx.snap b/packages/react-components/react-breadcrumb/src/components/BreadcrumbDivider/__snapshots__/BreadcrumbDivider.test.tsx.snap
deleted file mode 100644
index dc60f506d41cb6..00000000000000
--- a/packages/react-components/react-breadcrumb/src/components/BreadcrumbDivider/__snapshots__/BreadcrumbDivider.test.tsx.snap
+++ /dev/null
@@ -1,11 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`BreadcrumbDivider renders a default state 1`] = `
-<div>
-  <span
-    class="fui-BreadcrumbDivider"
-  >
-    &gt;
-  </span>
-</div>
-`;
diff --git a/packages/react-components/react-breadcrumb/src/components/BreadcrumbItem/BreadcrumbItem.test.tsx b/packages/react-components/react-breadcrumb/src/components/BreadcrumbItem/BreadcrumbItem.test.tsx
index 837b646eebbed4..7e933a6e1cc1dc 100644
--- a/packages/react-components/react-breadcrumb/src/components/BreadcrumbItem/BreadcrumbItem.test.tsx
+++ b/packages/react-components/react-breadcrumb/src/components/BreadcrumbItem/BreadcrumbItem.test.tsx
@@ -13,6 +13,19 @@ describe('BreadcrumbItem', () => {
 
   it('renders a default state', () => {
     const result = render(<BreadcrumbItem>Default BreadcrumbItem</BreadcrumbItem>);
-    expect(result.container).toMatchSnapshot();
+    expect(result.container).toMatchInlineSnapshot(`
+      <div>
+        <div
+          class="fui-BreadcrumbItem"
+        >
+          Default BreadcrumbItem
+          <span
+            class="fui-BreadcrumbDivider fui-BreadcrumbItem__divider"
+          >
+            &gt;
+          </span>
+        </div>
+      </div>
+    `);
   });
 });
diff --git a/packages/react-components/react-breadcrumb/src/components/BreadcrumbItem/BreadcrumbItem.tsx b/packages/react-components/react-breadcrumb/src/components/BreadcrumbItem/BreadcrumbItem.tsx
index 7031b4bc1289d9..4ff447e07b3b1d 100644
--- a/packages/react-components/react-breadcrumb/src/components/BreadcrumbItem/BreadcrumbItem.tsx
+++ b/packages/react-components/react-breadcrumb/src/components/BreadcrumbItem/BreadcrumbItem.tsx
@@ -4,6 +4,7 @@ import { renderBreadcrumbItem_unstable } from './renderBreadcrumbItem';
 import { useBreadcrumbItemStyles_unstable } from './useBreadcrumbItemStyles';
 import type { BreadcrumbItemProps } from './BreadcrumbItem.types';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
+import { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts';
 
 /**
  * BreadcrumbItem component - TODO: add more docs
@@ -12,6 +13,10 @@ export const BreadcrumbItem: ForwardRefComponent<BreadcrumbItemProps> = React.fo
   const state = useBreadcrumbItem_unstable(props, ref);
 
   useBreadcrumbItemStyles_unstable(state);
+
+  const { useTextStyles_unstable: useCustomStyles } = useCustomStyleHooks_unstable();
+  useCustomStyles(state);
+
   return renderBreadcrumbItem_unstable(state);
 });
 
diff --git a/packages/react-components/react-breadcrumb/src/components/BreadcrumbItem/__snapshots__/BreadcrumbItem.test.tsx.snap b/packages/react-components/react-breadcrumb/src/components/BreadcrumbItem/__snapshots__/BreadcrumbItem.test.tsx.snap
deleted file mode 100644
index cb211d5d095ee9..00000000000000
--- a/packages/react-components/react-breadcrumb/src/components/BreadcrumbItem/__snapshots__/BreadcrumbItem.test.tsx.snap
+++ /dev/null
@@ -1,16 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`BreadcrumbItem renders a default state 1`] = `
-<div>
-  <div
-    class="fui-BreadcrumbItem"
-  >
-    Default BreadcrumbItem
-    <span
-      class="fui-BreadcrumbDivider fui-BreadcrumbItem__divider"
-    >
-      &gt;
-    </span>
-  </div>
-</div>
-`;

From ff560f5f8619eb7da0b12bb863a420797e296720 Mon Sep 17 00:00:00 2001
From: Valentyna <vkozlova@microsoft.com>
Date: Thu, 9 Mar 2023 17:55:48 +0100
Subject: [PATCH 4/5] Updated react-breadcrumb.api.md

---
 .../react-breadcrumb/etc/react-breadcrumb.api.md              | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/react-components/react-breadcrumb/etc/react-breadcrumb.api.md b/packages/react-components/react-breadcrumb/etc/react-breadcrumb.api.md
index 4031a71cfcc142..ef381920ba41a7 100644
--- a/packages/react-components/react-breadcrumb/etc/react-breadcrumb.api.md
+++ b/packages/react-components/react-breadcrumb/etc/react-breadcrumb.api.md
@@ -53,12 +53,12 @@ export type BreadcrumbItemSlots = {
 export type BreadcrumbItemState = ComponentState<BreadcrumbItemSlots>;
 
 // @public
-export type BreadcrumbProps = ComponentProps<Omit<BreadcrumbSlots, 'list'>> & {};
+export type BreadcrumbProps = ComponentProps<BreadcrumbSlots> & {};
 
 // @public (undocumented)
 export type BreadcrumbSlots = {
     root: Slot<'nav'>;
-    list: Slot<'ol'>;
+    list?: Slot<'ol'>;
 };
 
 // @public

From 602cfe74ef3a76b2320cd1ffdf8bd3cf59c0d031 Mon Sep 17 00:00:00 2001
From: Valentyna <vkozlova@microsoft.com>
Date: Thu, 9 Mar 2023 19:06:40 +0100
Subject: [PATCH 5/5] Updated deps

---
 packages/react-components/react-breadcrumb/package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react-components/react-breadcrumb/package.json b/packages/react-components/react-breadcrumb/package.json
index a9f4fe145d2100..cefb9626e25d09 100644
--- a/packages/react-components/react-breadcrumb/package.json
+++ b/packages/react-components/react-breadcrumb/package.json
@@ -32,7 +32,7 @@
     "@fluentui/scripts-tasks": "*"
   },
   "dependencies": {
-    "@fluentui/react-shared-contexts": "^9.2.0",
+    "@fluentui/react-shared-contexts": "^9.3.0",
     "@fluentui/react-theme": "^9.1.5",
     "@fluentui/react-utilities": "^9.6.1",
     "@griffel/react": "^1.5.2",