feat:(react-nav-preview) Adds NavDivider implementation

change/@fluentui-react-nav-preview-c01d5e25-cbd7-454a-ae69-2cd14e31208e.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "feat: Adds NavDivider implementation",
+  "packageName": "@fluentui/react-nav-preview",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

packages/react-components/react-nav-preview/library/etc/react-nav-preview.api.md

@@ -12,6 +12,9 @@ import { ButtonSlots } from '@fluentui/react-button';
 import { ButtonState } from '@fluentui/react-button';
 import { ComponentProps } from '@fluentui/react-utilities';
 import type { ComponentState } from '@fluentui/react-utilities';
+import type { DividerProps } from '@fluentui/react-divider';
+import { DividerSlots } from '@fluentui/react-divider';
+import type { DividerState } from '@fluentui/react-divider';
 import type { DrawerBodyProps } from '@fluentui/react-drawer';
 import type { DrawerBodySlots } from '@fluentui/react-drawer';
 import type { DrawerBodyState } from '@fluentui/react-drawer';
@@ -126,18 +129,13 @@ export type NavContextValues = {
 export const NavDivider: ForwardRefComponent<NavDividerProps>;
 
 // @public (undocumented)
-export const navDividerClassNames: SlotClassNames<NavDividerSlots>;
+export const navDividerClassNames: SlotClassNames<DividerSlots>;
 
 // @public
-export type NavDividerProps = ComponentProps<NavDividerSlots> & {};
-
-// @public (undocumented)
-export type NavDividerSlots = {
-    root: Slot<'div'>;
-};
+export type NavDividerProps = DividerProps;
 
 // @public
-export type NavDividerState = ComponentState<NavDividerSlots>;
+export type NavDividerState = DividerState;
 
 // @public
 export const NavDrawer: ForwardRefComponent<NavDrawerProps>;
@@ -333,9 +331,6 @@ export const renderNavCategory_unstable: (state: NavCategoryState, contextValues
 // @public
 export const renderNavCategoryItem_unstable: (state: NavCategoryItemState, contextValues: NavCategoryItemContextValues) => JSX.Element;
 
-// @public
-export const renderNavDivider_unstable: (state: NavDividerState) => JSX.Element;
-
 // @public (undocumented)
 export const renderNavDrawer_unstable: (state: NavDrawerState, contextValues: NavContextValues) => JSX.Element;
 
@@ -379,7 +374,7 @@ export const useNavCategoryItemStyles_unstable: (state: NavCategoryItemState) =>
 export const useNavContext_unstable: () => NavContextValue;
 
 // @public
-export const useNavDivider_unstable: (props: NavDividerProps, ref: React_2.Ref<HTMLDivElement>) => NavDividerState;
+export const useNavDivider_unstable: (props: NavDividerProps, ref: React_2.Ref<HTMLElement>) => NavDividerState;
 
 // @public
 export const useNavDividerStyles_unstable: (state: NavDividerState) => NavDividerState;

packages/react-components/react-nav-preview/library/package.json

@@ -30,14 +30,15 @@
   },
   "dependencies": {
     "@fluentui/react-aria": "^9.12.1",
+    "@fluentui/react-button": "^9.3.84",
     "@fluentui/react-context-selector": "^9.1.62",
+    "@fluentui/react-divider": "^9.2.70",
+    "@fluentui/react-drawer": "^9.5.2",
+    "@fluentui/react-icons": "^2.0.245",
+    "@fluentui/react-jsx-runtime": "^9.0.39",
     "@fluentui/react-shared-contexts": "^9.19.0",
     "@fluentui/react-tabster": "^9.22.0",
-    "@fluentui/react-jsx-runtime": "^9.0.39",
-    "@fluentui/react-button": "^9.3.84",
     "@fluentui/react-theme": "^9.1.19",
-    "@fluentui/react-drawer": "^9.5.2",
-    "@fluentui/react-icons": "^2.0.245",
     "@fluentui/react-utilities": "^9.18.10",
     "@griffel/react": "^1.5.22",
     "@swc/helpers": "^0.5.1"

packages/react-components/react-nav-preview/library/src/components/NavDivider/NavDivider.test.tsx

@@ -1,18 +1,16 @@
-import * as React from 'react';
-import { render } from '@testing-library/react';
 import { isConformant } from '../../testing/isConformant';
 import { NavDivider } from './NavDivider';
 
 describe('NavDivider', () => {
   isConformant({
     Component: NavDivider,
     displayName: 'NavDivider',
-  });
-
-  // TODO add more tests here, and create visual regression tests in /apps/vr-tests
-
-  it('renders a default state', () => {
-    const result = render(<NavDivider>Default NavDivider</NavDivider>);
-    expect(result.container).toMatchSnapshot();
+    testOptions: {
+      'has-static-classnames': [
+        {
+          props: { children: 'Test Children' },
+        },
+      ],
+    },
   });
 });

packages/react-components/react-nav-preview/library/src/components/NavDivider/NavDivider.tsx

@@ -1,8 +1,9 @@
 import * as React from 'react';
-import type { ForwardRefComponent } from '@fluentui/react-utilities';
 import { useNavDivider_unstable } from './useNavDivider';
-import { renderNavDivider_unstable } from './renderNavDivider';
 import { useNavDividerStyles_unstable } from './useNavDividerStyles.styles';
+import { renderDivider_unstable } from '@fluentui/react-divider';
+
+import type { ForwardRefComponent } from '@fluentui/react-utilities';
 import type { NavDividerProps } from './NavDivider.types';
 
 /**
@@ -15,7 +16,7 @@ export const NavDivider: ForwardRefComponent<NavDividerProps> = React.forwardRef
   // TODO update types in packages/react-components/react-shared-contexts/src/CustomStyleHooksContext/CustomStyleHooksContext.ts
   // https://github.com/microsoft/fluentui/blob/master/rfcs/react-components/convergence/custom-styling.md
   // useCustomStyleHook_unstable('useNavDividerStyles_unstable')(state);
-  return renderNavDivider_unstable(state);
+  return renderDivider_unstable(state);
 });
 
 NavDivider.displayName = 'NavDivider';

packages/react-components/react-nav-preview/library/src/components/NavDivider/NavDivider.types.ts

@@ -1,17 +1,11 @@
-import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
-
-export type NavDividerSlots = {
-  root: Slot<'div'>;
-};
+import type { DividerProps, DividerState } from '@fluentui/react-divider';
 
 /**
  * NavDivider Props
  */
-export type NavDividerProps = ComponentProps<NavDividerSlots> & {};
+export type NavDividerProps = DividerProps;
 
 /**
  * State used in rendering NavDivider
  */
-export type NavDividerState = ComponentState<NavDividerSlots>;
-// TODO: Remove semicolon from previous line, uncomment next line, and provide union of props to pick from NavDividerProps.
-// & Required<Pick<NavDividerProps, 'propName'>>
+export type NavDividerState = DividerState;

packages/react-components/react-nav-preview/library/src/components/NavDivider/index.ts

@@ -1,5 +1,4 @@
 export * from './NavDivider';
 export * from './NavDivider.types';
-export * from './renderNavDivider';
 export * from './useNavDivider';
 export * from './useNavDividerStyles.styles';

packages/react-components/react-nav-preview/library/src/components/NavDivider/useNavDivider.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';
 import type { NavDividerProps, NavDividerState } from './NavDivider.types';
+import { useDivider_unstable } from '@fluentui/react-divider';
 
 /**
  * Create the state required to render NavDivider.
@@ -11,21 +11,6 @@ import type { NavDividerProps, NavDividerState } from './NavDivider.types';
  * @param props - props from this instance of NavDivider
  * @param ref - reference to root HTMLDivElement of NavDivider
  */
-export const useNavDivider_unstable = (props: NavDividerProps, ref: React.Ref<HTMLDivElement>): NavDividerState => {
-  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: slot.always(
-      getIntrinsicElementProps('div', {
-        ref,
-        ...props,
-      }),
-      { elementType: 'div' },
-    ),
-  };
+export const useNavDivider_unstable = (props: NavDividerProps, ref: React.Ref<HTMLElement>): NavDividerState => {
+  return useDivider_unstable({ appearance: 'strong', ...props }, ref);
 };

packages/react-components/react-nav-preview/library/src/components/NavDivider/useNavDividerStyles.styles.ts

@@ -1,22 +1,19 @@
 import { makeStyles, mergeClasses } from '@griffel/react';
+import { useDividerStyles_unstable, type DividerSlots } from '@fluentui/react-divider';
 import type { SlotClassNames } from '@fluentui/react-utilities';
-import type { NavDividerSlots, NavDividerState } from './NavDivider.types';
+import type { NavDividerState } from './NavDivider.types';
 
-export const navDividerClassNames: SlotClassNames<NavDividerSlots> = {
+export const navDividerClassNames: SlotClassNames<DividerSlots> = {
   root: 'fui-NavDivider',
-  // TODO: add class names for all slots on NavDividerSlots.
-  // Should be of the form `<slotName>: 'fui-NavDivider__<slotName>`
+  wrapper: 'fui-NavDivider__wrapper',
 };
 
-/**
- * Styles for the root slot
- */
 const useStyles = makeStyles({
   root: {
-    // TODO Add default styles for the root element
+    flexGrow: 0,
+    marginTop: '4px',
+    marginBottom: '4px',
   },
-
-  // TODO add additional classes for different states and/or slots
 });
 
 /**
@@ -26,10 +23,10 @@ export const useNavDividerStyles_unstable = (state: NavDividerState): NavDivider
   'use no memo';
 
   const styles = useStyles();
-  state.root.className = mergeClasses(navDividerClassNames.root, styles.root, state.root.className);
 
-  // TODO Add class names to slots, for example:
-  // state.mySlot.className = mergeClasses(styles.mySlot, state.mySlot.className);
+  state.root.className = mergeClasses(navDividerClassNames.root, styles.root, state.root.className);
+  state.wrapper.className = mergeClasses(navDividerClassNames.wrapper, state.wrapper.className);
 
+  useDividerStyles_unstable(state);
   return state;
 };

packages/react-components/react-nav-preview/library/src/index.ts

@@ -95,14 +95,8 @@ export {
   useNavSectionHeaderStyles_unstable,
   useNavSectionHeader_unstable,
 } from './NavSectionHeader';
-export type { NavDividerProps, NavDividerSlots, NavDividerState } from './NavDivider';
-export {
-  NavDivider,
-  navDividerClassNames,
-  renderNavDivider_unstable,
-  useNavDividerStyles_unstable,
-  useNavDivider_unstable,
-} from './NavDivider';
+export type { NavDividerProps, NavDividerState } from './NavDivider';
+export { NavDivider, navDividerClassNames, useNavDividerStyles_unstable, useNavDivider_unstable } from './NavDivider';
 export type { AppNodeProps, AppNodeSlots, AppNodeState } from './AppNode';
 export {
   AppNode,

packages/react-components/react-nav-preview/stories/src/NavDrawer/NavDrawerDefault.stories.tsx

@@ -3,6 +3,7 @@ import {
   Hamburger,
   NavCategory,
   NavCategoryItem,
+  NavDivider,
   NavDrawer,
   NavDrawerBody,
   NavDrawerHeader,
@@ -107,7 +108,6 @@ export const NavDrawerDefault = (props: Partial<NavDrawerProps>) => {
       <NavDrawer defaultSelectedValue="2" defaultSelectedCategoryValue="1" open={isOpen} type={type}>
         <NavDrawerHeader>{renderHamburgerWithToolTip()}</NavDrawerHeader>
         <NavDrawerBody>
-          <NavSectionHeader>Home</NavSectionHeader>
           <NavItem href={linkDestination} icon={<Dashboard />} value="1">
             Dashboard
           </NavItem>
@@ -174,7 +174,7 @@ export const NavDrawerDefault = (props: Partial<NavDrawerProps>) => {
             </NavSubItemGroup>
           </NavCategory>
 
-          <NavSectionHeader>Analytics</NavSectionHeader>
+          <NavDivider />
           <NavItem target="_blank" icon={<Analytics />} value="19">
             Workforce Data
           </NavItem>

packages/react-components/react-nav-preview/stories/src/NavDrawer/NavDrawerSize.stories.tsx

@@ -12,6 +12,7 @@ import {
   NavSubItem,
   NavSubItemGroup,
   NavSize,
+  NavDivider,
 } from '@fluentui/react-nav-preview';
 import { Label, Radio, RadioGroup, Tooltip, makeStyles, tokens, useId } from '@fluentui/react-components';
 import {
@@ -147,7 +148,7 @@ export const NavDrawerSize = (props: Partial<NavDrawerProps>) => {
             </NavSubItemGroup>
           </NavCategory>
 
-          <NavSectionHeader>Learning</NavSectionHeader>
+          <NavDivider />
           <NavItem icon={<TrainingPrograms />} value="15">
             Training Programs
           </NavItem>