chore:(react-nav-preview) Recomposing more components and some pixel pushing

change/@fluentui-react-nav-preview-0002e68b-954c-4191-8e7a-500892fb4a50.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "chore: Recomposing NavSectionHeader and Hamburger. Removing HamburgerInNav. Some other pixel pushing.",
+  "packageName": "@fluentui/react-nav-preview",
+  "email": "matejera@microsoft.com",
+  "dependentChangeType": "minor"
+}

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

@@ -7,6 +7,9 @@
 /// <reference types="react" />
 
 import type { ARIAButtonSlotProps } from '@fluentui/react-aria';
+import { ButtonProps } from '@fluentui/react-button';
+import { ButtonSlots } from '@fluentui/react-button';
+import { ButtonState } from '@fluentui/react-button';
 import type { ComponentProps } from '@fluentui/react-utilities';
 import type { ComponentState } from '@fluentui/react-utilities';
 import type { DrawerBodyProps } from '@fluentui/react-drawer';
@@ -35,35 +38,13 @@ import { SlotClassNames } from '@fluentui/react-utilities';
 export const Hamburger: ForwardRefComponent<HamburgerProps>;
 
 // @public (undocumented)
-export const hamburgerClassNames: SlotClassNames<HamburgerSlots>;
+export const hamburgerClassNames: SlotClassNames<ButtonSlots>;
 
 // @public
-export const HamburgerInNav: ForwardRefComponent<HamburgerInNavProps>;
-
-// @public (undocumented)
-export const hamburgerInNavClassNames: SlotClassNames<HamburgerInNavSlots>;
-
-// @public
-export type HamburgerInNavProps = ComponentProps<HamburgerInNavSlots> & {};
-
-// @public (undocumented)
-export type HamburgerInNavSlots = {
-    root: Slot<'div'>;
-};
-
-// @public
-export type HamburgerInNavState = ComponentState<HamburgerInNavSlots>;
-
-// @public
-export type HamburgerProps = ComponentProps<HamburgerSlots> & {};
-
-// @public (undocumented)
-export type HamburgerSlots = {
-    root: Slot<'div'>;
-};
+export type HamburgerProps = ButtonProps;
 
 // @public
-export type HamburgerState = ComponentState<HamburgerSlots>;
+export type HamburgerState = ButtonState;
 
 // @public
 export const Nav: ForwardRefComponent<NavProps>;
@@ -251,11 +232,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
@@ -313,12 +294,6 @@ export type NavSubItemState = ComponentState<NavSubItemSlots> & Pick<NavSubItemP
 // @public (undocumented)
 export type RegisterNavItemEventHandler = (data: NavItemRegisterData) => void;
 
-// @public
-export const renderHamburger_unstable: (state: HamburgerState) => JSX.Element;
-
-// @public
-export const renderHamburgerInNav_unstable: (state: HamburgerInNavState) => JSX.Element;
-
 // @public (undocumented)
 export const renderNav_unstable: (state: NavState, contextValues: NavContextValues) => JSX.Element;
 
@@ -344,13 +319,7 @@ export const renderNavSubItem_unstable: (state: NavSubItemState) => JSX.Element;
 export const renderNavSubItemGroup_unstable: (state: NavSubItemGroupState) => JSX.Element | null;
 
 // @public
-export const useHamburger_unstable: (props: HamburgerProps, ref: React_2.Ref<HTMLDivElement>) => HamburgerState;
-
-// @public
-export const useHamburgerInNav_unstable: (props: HamburgerInNavProps, ref: React_2.Ref<HTMLDivElement>) => HamburgerInNavState;
-
-// @public
-export const useHamburgerInNavStyles_unstable: (state: HamburgerInNavState) => HamburgerInNavState;
+export const useHamburger_unstable: (props: HamburgerProps, ref: React_2.Ref<HTMLButtonElement | HTMLAnchorElement>) => HamburgerState;
 
 // @public
 export const useHamburgerStyles_unstable: (state: HamburgerState) => HamburgerState;

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

@@ -35,6 +35,7 @@
     "@fluentui/react-shared-contexts": "^9.19.0",
     "@fluentui/react-tabster": "^9.21.4",
     "@fluentui/react-jsx-runtime": "^9.0.38",
+    "@fluentui/react-button": "^9.3.82",
     "@fluentui/react-theme": "^9.1.19",
     "@fluentui/react-drawer": "^9.4.0",
     "@fluentui/react-icons": "^2.0.239",

packages/react-components/react-nav-preview/src/components/Hamburger/Hamburger.test.tsx

@@ -1,9 +1,11 @@
+import * as React from 'react';
 import { isConformant } from '../../testing/isConformant';
 import { Hamburger } from './Hamburger';
+import { HamburgerProps } from './Hamburger.types';
 
 describe('Hamburger', () => {
   isConformant({
-    Component: Hamburger,
+    Component: Hamburger as React.FunctionComponent<HamburgerProps>,
     displayName: 'Hamburger',
   });
 });

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

@@ -1,8 +1,8 @@
 import * as React from 'react';
-import type { ForwardRefComponent } from '@fluentui/react-utilities';
 import { useHamburger_unstable } from './useHamburger';
-import { renderHamburger_unstable } from './renderHamburger';
+import { renderButton_unstable } from '@fluentui/react-button';
 import { useHamburgerStyles_unstable } from './useHamburgerStyles.styles';
+import type { ForwardRefComponent } from '@fluentui/react-utilities';
 import type { HamburgerProps } from './Hamburger.types';
 
 /**
@@ -15,7 +15,7 @@ export const Hamburger: ForwardRefComponent<HamburgerProps> = 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('useHamburgerStyles_unstable')(state);
-  return renderHamburger_unstable(state);
-});
+  return renderButton_unstable(state);
+}) as ForwardRefComponent<HamburgerProps>;
 
 Hamburger.displayName = 'Hamburger';

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

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

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

@@ -1,5 +1,4 @@
 export * from './Hamburger';
 export * from './Hamburger.types';
-export * from './renderHamburger';
 export * from './useHamburger';
 export * from './useHamburgerStyles.styles';

packages/react-components/react-nav-preview/src/components/Hamburger/useHamburger.tsx

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import { useButton_unstable } from '@fluentui/react-button';
+import { Navigation20Filled } from '@fluentui/react-icons';
+import type { HamburgerProps, HamburgerState } from './Hamburger.types';
+
+/**
+ * Given user props, defines default props for the Button, calls useButtonState and useChecked, and returns
+ * processed state.
+ * @param props - User provided props to the Button component.
+ * @param ref - User provided ref to be passed to the Button component.
+ */
+export const useHamburger_unstable = (
+  props: HamburgerProps,
+  ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>,
+): HamburgerState => {
+  return useButton_unstable({ icon: <Navigation20Filled />, appearance: 'transparent', ...props }, ref);
+};

packages/react-components/react-nav-preview/src/components/Hamburger/useHamburgerStyles.styles.ts

@@ -1,33 +1,43 @@
-import { makeStyles, mergeClasses } from '@griffel/react';
+import { makeStyles, mergeClasses, shorthands } from '@griffel/react';
+import { ButtonSlots, useButtonStyles_unstable } from '@fluentui/react-button';
 import type { SlotClassNames } from '@fluentui/react-utilities';
-import type { HamburgerSlots, HamburgerState } from './Hamburger.types';
+import type { HamburgerState } from './Hamburger.types';
+import { navItemTokens } from '../sharedNavStyles.styles';
 
-export const hamburgerClassNames: SlotClassNames<HamburgerSlots> = {
+export const hamburgerClassNames: SlotClassNames<ButtonSlots> = {
   root: 'fui-Hamburger',
-  // TODO: add class names for all slots on HamburgerSlots.
-  // Should be of the form `<slotName>: 'fui-Hamburger__<slotName>`
+  icon: 'fui-Hamburger__icon',
 };
 
 /**
  * Styles for the root slot
  */
 const useStyles = makeStyles({
   root: {
-    // TODO Add default styles for the root element
+    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 Hamburger slots based on the state
  */
 export const useHamburgerStyles_unstable = (state: HamburgerState): HamburgerState => {
+  useButtonStyles_unstable(state);
   const styles = useStyles();
+
   state.root.className = mergeClasses(hamburgerClassNames.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(hamburgerClassNames.icon, state.icon.className);
+  }
 
   return state;
 };