feat(react-nav-preview) Recomposing more components

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

@@ -249,11 +249,11 @@ export const NavSectionHeader: ForwardRefComponent<NavSectionHeaderProps>;
 export const navSectionHeaderClassNames: SlotClassNames<NavSectionHeaderSlots>;
 
 // @public
-export type NavSectionHeaderProps = ComponentProps<NavSectionHeaderSlots> & {};
+export type NavSectionHeaderProps = ComponentProps<NavSectionHeaderSlots>;
 
 // @public (undocumented)
 export type NavSectionHeaderSlots = {
- root: Slot<'div'>;
+ root: Slot<'h2', 'h1' | 'h3' | 'h4' | 'h5' | 'h6' | 'div'>;
 };
 
 // @public

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

@@ -37,6 +37,8 @@
  "@fluentui/react-theme": "^9.1.19",
  "@fluentui/react-drawer": "^9.3.0",
  "@fluentui/react-icons": "^2.0.239",
+ "@fluentui/react-components": "^9.50.0",
+ "@fluentui/react-button": "^9.3.79",
  "@fluentui/react-utilities": "^9.18.8",
  "@griffel/react": "^1.5.14",
  "@swc/helpers": "^0.5.1"

packages/react-components/react-nav-preview/src/components/HamburgerInNav/HamburgerInNav.tsx

@@ -1,12 +1,12 @@
 import * as React from 'react';
-import type { ForwardRefComponent } from '@fluentui/react-utilities';
 import { useHamburgerInNav_unstable } from './useHamburgerInNav';
-import { renderHamburgerInNav_unstable } from './renderHamburgerInNav';
 import { useHamburgerInNavStyles_unstable } from './useHamburgerInNavStyles.styles';
+import { renderButton_unstable } from '@fluentui/react-button';
 import type { HamburgerInNavProps } from './HamburgerInNav.types';
+import type { ForwardRefComponent } from '@fluentui/react-utilities';
 
 /**
- * HamburgerInNav component - TODO: add more docs
+ * HamburgerInNav component
  */
 export const HamburgerInNav: ForwardRefComponent<HamburgerInNavProps> = React.forwardRef((props, ref) => {
  const state = useHamburgerInNav_unstable(props, ref);
@@ -15,7 +15,7 @@ export const HamburgerInNav: ForwardRefComponent<HamburgerInNavProps> = React.fo
  // 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('useHamburgerInNavStyles_unstable')(state);
- return renderHamburgerInNav_unstable(state);
+ return renderButton_unstable(state);
 });
 
 HamburgerInNav.displayName = 'HamburgerInNav';

packages/react-components/react-nav-preview/src/components/HamburgerInNav/HamburgerInNav.types.ts

@@ -1,17 +1,11 @@
-import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
-
-export type HamburgerInNavSlots = {
- root: Slot<'div'>;
-};
+import { ButtonProps, ButtonState } from '@fluentui/react-button';
 
 /**
  * HamburgerInNav Props
  */
-export type HamburgerInNavProps = ComponentProps<HamburgerInNavSlots> & {};
+export type HamburgerInNavProps = ButtonProps;
 
 /**
  * State used in rendering HamburgerInNav
  */
-export type HamburgerInNavState = ComponentState<HamburgerInNavSlots>;
-// TODO: Remove semicolon from previous line, uncomment next line, and provide union of props to pick from HamburgerInNavProps.
-// & Required<Pick<HamburgerInNavProps, 'propName'>>
+export type HamburgerInNavState = ButtonState;

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

@@ -1,5 +1,4 @@
 export * from './HamburgerInNav';
 export * from './HamburgerInNav.types';
-export * from './renderHamburgerInNav';
 export * from './useHamburgerInNav';
 export * from './useHamburgerInNavStyles.styles';

packages/react-components/react-nav-preview/src/components/HamburgerInNav/useHamburgerInNavStyles.styles.ts

@@ -1,33 +1,44 @@
-import { makeStyles, mergeClasses } from '@griffel/react';
+import { makeStyles, mergeClasses, shorthands } from '@griffel/react';
+import { ButtonSlots, useButtonStyles_unstable } from '@fluentui/react-components';
 import type { SlotClassNames } from '@fluentui/react-utilities';
-import type { HamburgerInNavSlots, HamburgerInNavState } from './HamburgerInNav.types';
+import type { HamburgerInNavState } from './HamburgerInNav.types';
+import { navItemTokens } from '../sharedNavStyles.styles';
 
-export const hamburgerInNavClassNames: SlotClassNames<HamburgerInNavSlots> = {
+export const hamburgerInNavClassNames: SlotClassNames<ButtonSlots> = {
  root: 'fui-HamburgerInNav',
- // TODO: add class names for all slots on HamburgerInNavSlots.
- // Should be of the form `<slotName>: 'fui-HamburgerInNav__<slotName>`
+ icon: 'fui-HamburgerInNav__icon',
 };
 
 /**
  * Styles for the root slot
  */
 const useStyles = makeStyles({
  root: {
- // TODO Add default styles for the root element
+ marginTop: '10px',
+ textDecorationLine: 'none',
+ backgroundColor: navItemTokens.backgroundColor,
+ ...shorthands.border('none'),
+ ':hover': {
+ backgroundColor: navItemTokens.backgroundColorHover,
+ },
+ ':active': {
+ backgroundColor: navItemTokens.backgroundColorPressed,
+ },
  },
-
- // TODO add additional classes for different states and/or slots
 });
 
 /**
  * Apply styling to the HamburgerInNav slots based on the state
  */
 export const useHamburgerInNavStyles_unstable = (state: HamburgerInNavState): HamburgerInNavState => {
+ useButtonStyles_unstable(state);
  const styles = useStyles();
+
  state.root.className = mergeClasses(hamburgerInNavClassNames.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.icon) {
+ state.icon.className = mergeClasses(hamburgerInNavClassNames.icon, state.icon.className);
+ }
 
  return state;
 };

packages/react-components/react-nav-preview/src/components/NavSectionHeader/NavSectionHeader.tsx

@@ -6,7 +6,7 @@ import { useNavSectionHeaderStyles_unstable } from './useNavSectionHeaderStyles.
 import type { NavSectionHeaderProps } from './NavSectionHeader.types';
 
 /**
- * NavSectionHeader component - TODO: add more docs
+ * NavSectionHeader component
  */
 export const NavSectionHeader: ForwardRefComponent<NavSectionHeaderProps> = React.forwardRef((props, ref) => {
  const state = useNavSectionHeader_unstable(props, ref);

packages/react-components/react-nav-preview/src/components/NavSectionHeader/NavSectionHeader.types.ts

@@ -1,17 +1,15 @@
 import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
 
 export type NavSectionHeaderSlots = {
- root: Slot<'div'>;
+ root: Slot<'h2', 'h1' | 'h3' | 'h4' | 'h5' | 'h6' | 'div'>;
 };
 
 /**
  * NavSectionHeader Props
  */
-export type NavSectionHeaderProps = ComponentProps<NavSectionHeaderSlots> & {};
+export type NavSectionHeaderProps = ComponentProps<NavSectionHeaderSlots>;
 
 /**
  * State used in rendering NavSectionHeader
  */
 export type NavSectionHeaderState = ComponentState<NavSectionHeaderSlots>;
-// TODO: Remove semicolon from previous line, uncomment next line, and provide union of props to pick from NavSectionHeaderProps.
-// & Required<Pick<NavSectionHeaderProps, 'propName'>>

packages/react-components/react-nav-preview/src/components/NavSectionHeader/renderNavSectionHeader.tsx

@@ -10,6 +10,5 @@ import type { NavSectionHeaderState, NavSectionHeaderSlots } from './NavSectionH
 export const renderNavSectionHeader_unstable = (state: NavSectionHeaderState) => {
  assertSlots<NavSectionHeaderSlots>(state);
 
- // TODO Add additional slots in the appropriate place
  return <state.root />;
 };

packages/react-components/react-nav-preview/src/components/NavSectionHeader/useNavSectionHeader.ts

@@ -16,19 +16,15 @@ export const useNavSectionHeader_unstable = (
  ref: React.Ref<HTMLDivElement>,
 ): NavSectionHeaderState => {
  return {
- // TODO add appropriate props/defaults
  components: {
- // TODO add each slot's element type or component
- root: 'div',
+ root: 'h3',
  },
- // TODO add appropriate slots, for example:
- // mySlot: resolveShorthand(props.mySlot),
  root: slot.always(
- getIntrinsicElementProps('div', {
+ getIntrinsicElementProps('h3', {
  ref,
  ...props,
  }),
- { elementType: 'div' },
+ { elementType: 'h3' },
  ),
  };
 };

packages/react-components/react-nav-preview/src/components/NavSectionHeader/useNavSectionHeaderStyles.styles.ts

@@ -1,22 +1,20 @@
 import { makeStyles, mergeClasses } from '@griffel/react';
 import type { SlotClassNames } from '@fluentui/react-utilities';
 import type { NavSectionHeaderSlots, NavSectionHeaderState } from './NavSectionHeader.types';
+import { typographyStyles } from '@fluentui/react-theme';
 
 export const navSectionHeaderClassNames: SlotClassNames<NavSectionHeaderSlots> = {
  root: 'fui-NavSectionHeader',
- // TODO: add class names for all slots on NavSectionHeaderSlots.
- // Should be of the form `<slotName>: 'fui-NavSectionHeader__<slotName>`
 };
 
 /**
  * Styles for the root slot
  */
 const useStyles = makeStyles({
  root: {
- // TODO Add default styles for the root element
+ marginInlineStart: `10px`,
+ ...typographyStyles.caption1Strong,
  },
-
- // TODO add additional classes for different states and/or slots
 });
 
 /**
@@ -26,8 +24,5 @@ export const useNavSectionHeaderStyles_unstable = (state: NavSectionHeaderState)
  const styles = useStyles();
  state.root.className = mergeClasses(navSectionHeaderClassNames.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-nav-preview/stories/NavDrawer/NavDrawerDefault.stories.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import {
+ HamburgerInNav,
  NavCategory,
  NavCategoryItem,
  NavDrawer,
@@ -9,20 +10,12 @@ import {
  NavDrawerHeaderNav,
  NavDrawerProps,
  NavItem,
+ NavSectionHeader,
  NavSubItem,
  NavSubItemGroup,
 } from '@fluentui/react-nav-preview';
-import {
- Button,
- Caption1Strong,
- Label,
- Radio,
- RadioGroup,
- makeStyles,
- shorthands,
- tokens,
- useId,
-} from '@fluentui/react-components';
+import { DrawerProps } from '@fluentui/react-drawer';
+import { Button, Label, Radio, RadioGroup, makeStyles, shorthands, tokens, useId } from '@fluentui/react-components';
 import {
  Board20Filled,
  Board20Regular,
@@ -36,7 +29,6 @@ import {
  HeartPulse20Regular,
  MegaphoneLoud20Filled,
  MegaphoneLoud20Regular,
- NavigationFilled,
  NotePin20Filled,
  NotePin20Regular,
  People20Filled,
@@ -55,8 +47,6 @@ import {
  Settings20Regular,
  bundleIcon,
 } from '@fluentui/react-icons';
-import { navItemTokens } from '../../src/components/sharedNavStyles.styles';
-import type { DrawerProps } from '@fluentui/react-drawer';
 
 const useStyles = makeStyles({
  root: {
@@ -80,21 +70,6 @@ const useStyles = makeStyles({
  display: 'grid',
  gridRowGap: tokens.spacingVerticalS,
  },
-
- headingContent: {
- marginInlineStart: `10px`,
- },
- hamburger: {
- backgroundColor: navItemTokens.backgroundColor,
- color: tokens.colorNeutralForeground2,
- textDecorationLine: 'none',
- ':hover': {
- backgroundColor: navItemTokens.backgroundColorHover,
- },
- ':active': {
- backgroundColor: navItemTokens.backgroundColorPressed,
- },
- },
 });
 
 const Person = bundleIcon(PersonFilled, PersonRegular);
@@ -138,11 +113,11 @@ export const NavDrawerDefault = (props: Partial<NavDrawerProps>) => {
  >
  <NavDrawerHeader>
  <NavDrawerHeaderNav>
- <Button appearance="transparent" icon={<NavigationFilled />} className={styles.hamburger} />
+ <HamburgerInNav />
  </NavDrawerHeaderNav>
  </NavDrawerHeader>
  <NavDrawerBody>
- <Caption1Strong className={styles.headingContent}>Home</Caption1Strong>
+ <NavSectionHeader>Home</NavSectionHeader>
  <NavItem target="_blank" icon={<Dashboard />} onClick={someClickHandler} value="1">
  Dashboard
  </NavItem>
@@ -152,7 +127,7 @@ export const NavDrawerDefault = (props: Partial<NavDrawerProps>) => {
  <NavItem target="_blank" icon={<EmployeeSpotlight />} onClick={someClickHandler} value="3">
  Employee Spotlight
  </NavItem>
- <Caption1Strong className={styles.headingContent}>Employee Management</Caption1Strong>
+ <NavSectionHeader>Employee Management</NavSectionHeader>
  <NavItem target="_blank" icon={<Search />} onClick={someClickHandler} value="4">
  Profile Search
  </NavItem>
@@ -173,7 +148,7 @@ export const NavDrawerDefault = (props: Partial<NavDrawerProps>) => {
  <NavItem icon={<Interviews />} value="9">
  Interviews
  </NavItem>
- <Caption1Strong className={styles.headingContent}>Benefits</Caption1Strong>
+ <NavSectionHeader>Benefits</NavSectionHeader>
  <NavItem icon={<HealthPlans />} value="10">
  Health Plans
  </NavItem>
@@ -191,7 +166,7 @@ export const NavDrawerDefault = (props: Partial<NavDrawerProps>) => {
  </NavSubItemGroup>
  </NavCategory>
 
- <Caption1Strong className={styles.headingContent}>Learning</Caption1Strong>
+ <NavSectionHeader>Learning</NavSectionHeader>
  <NavItem icon={<TrainingPrograms />} value="15">
  Training Programs
  </NavItem>
@@ -207,7 +182,7 @@ export const NavDrawerDefault = (props: Partial<NavDrawerProps>) => {
  </NavSubItemGroup>
  </NavCategory>
 
- <Caption1Strong className={styles.headingContent}>Analytics</Caption1Strong>
+ <NavSectionHeader>Analytics</NavSectionHeader>
  <NavItem target="_blank" onClick={someClickHandler} icon={<Analytics />} value="19">
  Workforce Data
  </NavItem>