Added BreadcrumbItem and BreadcrumbDivider components

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

@@ -17,12 +17,48 @@ 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<'span'>;
+};
+
+// @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'>;
+    divider?: Slot<typeof BreadcrumbDivider>;
+};
+
+// @public
+export type BreadcrumbItemState = ComponentState<BreadcrumbItemSlots>;
+
 // @public
 export type BreadcrumbProps = ComponentProps<BreadcrumbSlots> & {};
 
 // @public (undocumented)
 export type BreadcrumbSlots = {
-    root: Slot<'div'>;
+    root: Slot<'nav'>;
+    list?: Slot<'ol'>;
 };
 
 // @public
@@ -31,9 +67,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;
 

packages/react-components/react-breadcrumb/package.json

@@ -32,6 +32,7 @@
     "@fluentui/scripts-tasks": "*"
   },
   "dependencies": {
+    "@fluentui/react-shared-contexts": "^9.3.0",
     "@fluentui/react-theme": "^9.1.5",
     "@fluentui/react-utilities": "^9.6.1",
     "@griffel/react": "^1.5.2",

packages/react-components/react-breadcrumb/src/BreadcrumbDivider.ts

@@ -0,0 +1 @@
+export * from './components/BreadcrumbDivider/index';

packages/react-components/react-breadcrumb/src/BreadcrumbItem.ts

@@ -0,0 +1 @@
+export * from './components/BreadcrumbItem/index';

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>
+    `);
   });
 });

packages/react-components/react-breadcrumb/src/components/Breadcrumb/Breadcrumb.types.ts

@@ -1,7 +1,8 @@
 import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
 
 export type BreadcrumbSlots = {
-  root: Slot<'div'>;
+  root: Slot<'nav'>;
+  list?: Slot<'ol'>;
 };
 
 /**

packages/react-components/react-breadcrumb/src/components/Breadcrumb/renderBreadcrumb.tsx

@@ -1,13 +1,11 @@
 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 && <slots.list {...list}>{root.children}</slots.list>}</slots.root>;
 };

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: {},
   };
 };

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;
 };

packages/react-components/react-breadcrumb/src/components/BreadcrumbDivider/BreadcrumbDivider.test.tsx

@@ -0,0 +1,26 @@
+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).toMatchInlineSnapshot(`
+      <div>
+        <span
+          class="fui-BreadcrumbDivider"
+        >
+          &gt;
+        </span>
+      </div>
+    `);
+  });
+});

packages/react-components/react-breadcrumb/src/components/BreadcrumbDivider/BreadcrumbDivider.tsx

@@ -0,0 +1,23 @@
+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';
+import { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts';
+
+/**
+ * BreadcrumbDivider component - TODO: add more docs
+ */
+export const BreadcrumbDivider: ForwardRefComponent<BreadcrumbDividerProps> = React.forwardRef((props, ref) => {
+  const state = useBreadcrumbDivider_unstable(props, ref);
+
+  useBreadcrumbDividerStyles_unstable(state);
+
+  const { useTextStyles_unstable: useCustomStyles } = useCustomStyleHooks_unstable();
+  useCustomStyles(state);
+
+  return renderBreadcrumbDivider_unstable(state);
+});
+
+BreadcrumbDivider.displayName = 'BreadcrumbDivider';

packages/react-components/react-breadcrumb/src/components/BreadcrumbDivider/BreadcrumbDivider.types.ts

@@ -0,0 +1,18 @@
+import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
+
+export type BreadcrumbDividerSlots = {
+  root: Slot<'span'>;
+};
+
+/**
+ * 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'>>

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';

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}>&gt;</slots.root>;
+};

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: 'span',
+    },
+    // TODO add appropriate slots, for example:
+    // mySlot: resolveShorthand(props.mySlot),
+    root: getNativeElementProps('div', {
+      ref,
+      ...props,
+    }),
+  };
+};

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

packages/react-components/react-breadcrumb/src/components/BreadcrumbItem/BreadcrumbItem.test.tsx

@@ -0,0 +1,31 @@
+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).toMatchInlineSnapshot(`
+      <div>
+        <div
+          class="fui-BreadcrumbItem"
+        >
+          Default BreadcrumbItem
+          <span
+            class="fui-BreadcrumbDivider fui-BreadcrumbItem__divider"
+          >
+            &gt;
+          </span>
+        </div>
+      </div>
+    `);
+  });
+});