feat(react-nav-preview): Moving Nav styling opinions to recomposed co…

…mponents (#31313)

change/@fluentui-react-nav-preview-a222bbc3-7974-4785-9ccd-0c2960fcc82f.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "feat: Moving styles to new recomposed components.",
+  "packageName": "@fluentui/react-nav-preview",
+  "email": "matejera@microsoft.com",
+  "dependentChangeType": "patch"
+}

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

@@ -8,6 +8,18 @@
 
 import type { ComponentProps } from '@fluentui/react-utilities';
 import type { ComponentState } from '@fluentui/react-utilities';
+import type { DrawerBodyProps } from '@fluentui/react-drawer';
+import type { DrawerBodySlots } from '@fluentui/react-drawer';
+import type { DrawerBodyState } from '@fluentui/react-drawer';
+import type { DrawerFooterProps } from '@fluentui/react-drawer';
+import type { DrawerFooterSlots } from '@fluentui/react-drawer';
+import type { DrawerFooterState } from '@fluentui/react-drawer';
+import type { DrawerHeaderNavigationProps } from '@fluentui/react-drawer';
+import type { DrawerHeaderNavigationSlots } from '@fluentui/react-drawer';
+import type { DrawerHeaderNavigationState } from '@fluentui/react-drawer';
+import type { DrawerHeaderProps } from '@fluentui/react-drawer';
+import type { DrawerHeaderSlots } from '@fluentui/react-drawer';
+import type { DrawerHeaderState } from '@fluentui/react-drawer';
 import { DrawerProps } from '@fluentui/react-drawer';
 import { DrawerState } from '@fluentui/react-drawer';
 import type { EventData } from '@fluentui/react-utilities';
@@ -122,15 +134,13 @@ export const NavDrawerBody: ForwardRefComponent<NavDrawerBodyProps>;
 export const navDrawerBodyClassNames: SlotClassNames<NavDrawerBodySlots>;
 
 // @public
-export type NavDrawerBodyProps = ComponentProps<NavDrawerBodySlots> & {};
+export type NavDrawerBodyProps = DrawerBodyProps;
 
 // @public (undocumented)
-export type NavDrawerBodySlots = {
-    root: Slot<'div'>;
-};
+export type NavDrawerBodySlots = DrawerBodySlots;
 
 // @public
-export type NavDrawerBodyState = ComponentState<NavDrawerBodySlots>;
+export type NavDrawerBodyState = DrawerBodyState;
 
 // @public (undocumented)
 export const navDrawerClassNames: SlotClassNames<InlineDrawerSlots>;
@@ -142,15 +152,13 @@ export const NavDrawerFooter: ForwardRefComponent<NavDrawerFooterProps>;
 export const navDrawerFooterClassNames: SlotClassNames<NavDrawerFooterSlots>;
 
 // @public
-export type NavDrawerFooterProps = ComponentProps<NavDrawerFooterSlots> & {};
+export type NavDrawerFooterProps = DrawerFooterProps;
 
 // @public (undocumented)
-export type NavDrawerFooterSlots = {
-    root: Slot<'div'>;
-};
+export type NavDrawerFooterSlots = DrawerFooterSlots;
 
 // @public
-export type NavDrawerFooterState = ComponentState<NavDrawerFooterSlots>;
+export type NavDrawerFooterState = DrawerFooterState;
 
 // @public
 export const NavDrawerHeader: ForwardRefComponent<NavDrawerHeaderProps>;
@@ -165,26 +173,22 @@ export const NavDrawerHeaderNav: ForwardRefComponent<NavDrawerHeaderNavProps>;
 export const navDrawerHeaderNavClassNames: SlotClassNames<NavDrawerHeaderNavSlots>;
 
 // @public
-export type NavDrawerHeaderNavProps = ComponentProps<NavDrawerHeaderNavSlots> & {};
+export type NavDrawerHeaderNavProps = DrawerHeaderNavigationProps;
 
 // @public (undocumented)
-export type NavDrawerHeaderNavSlots = {
-    root: Slot<'div'>;
-};
+export type NavDrawerHeaderNavSlots = DrawerHeaderNavigationSlots;
 
 // @public
-export type NavDrawerHeaderNavState = ComponentState<NavDrawerHeaderNavSlots>;
+export type NavDrawerHeaderNavState = DrawerHeaderNavigationState;
 
 // @public
-export type NavDrawerHeaderProps = ComponentProps<NavDrawerHeaderSlots> & {};
+export type NavDrawerHeaderProps = DrawerHeaderProps;
 
 // @public (undocumented)
-export type NavDrawerHeaderSlots = {
-    root: Slot<'div'>;
-};
+export type NavDrawerHeaderSlots = DrawerHeaderSlots;
 
 // @public
-export type NavDrawerHeaderState = ComponentState<NavDrawerHeaderSlots>;
+export type NavDrawerHeaderState = DrawerHeaderState;
 
 // @public
 export type NavDrawerProps = DrawerProps & NavProps;
@@ -324,18 +328,6 @@ export const renderNavCategoryItem_unstable: (state: NavCategoryItemState, conte
 // @public (undocumented)
 export const renderNavDrawer_unstable: (state: NavDrawerState, contextValues: NavContextValues) => JSX.Element;
 
-// @public
-export const renderNavDrawerBody_unstable: (state: NavDrawerBodyState) => JSX.Element;
-
-// @public
-export const renderNavDrawerFooter_unstable: (state: NavDrawerFooterState) => JSX.Element;
-
-// @public
-export const renderNavDrawerHeader_unstable: (state: NavDrawerHeaderState) => JSX.Element;
-
-// @public
-export const renderNavDrawerHeaderNav_unstable: (state: NavDrawerHeaderNavState) => JSX.Element;
-
 // @public
 export const renderNavItem_unstable: (state: NavItemState) => JSX.Element;
 
@@ -385,16 +377,16 @@ export const useNavDrawerBody_unstable: (props: NavDrawerBodyProps, ref: React_2
 export const useNavDrawerBodyStyles_unstable: (state: NavDrawerBodyState) => NavDrawerBodyState;
 
 // @public
-export const useNavDrawerFooter_unstable: (props: NavDrawerFooterProps, ref: React_2.Ref<HTMLDivElement>) => NavDrawerFooterState;
+export const useNavDrawerFooter_unstable: (props: NavDrawerFooterProps, ref: React_2.Ref<HTMLElement>) => NavDrawerFooterState;
 
 // @public
 export const useNavDrawerFooterStyles_unstable: (state: NavDrawerFooterState) => NavDrawerFooterState;
 
 // @public
-export const useNavDrawerHeader_unstable: (props: NavDrawerHeaderProps, ref: React_2.Ref<HTMLDivElement>) => NavDrawerHeaderState;
+export const useNavDrawerHeader_unstable: (props: NavDrawerHeaderProps, ref: React_2.Ref<HTMLElement>) => NavDrawerHeaderState;
 
 // @public
-export const useNavDrawerHeaderNav_unstable: (props: NavDrawerHeaderNavProps, ref: React_2.Ref<HTMLDivElement>) => NavDrawerHeaderNavState;
+export const useNavDrawerHeaderNav_unstable: (props: NavDrawerHeaderNavProps, ref: React_2.Ref<HTMLElement>) => NavDrawerHeaderNavState;
 
 // @public
 export const useNavDrawerHeaderNavStyles_unstable: (state: NavDrawerHeaderNavState) => NavDrawerHeaderNavState;

packages/react-components/react-nav-preview/src/components/NavDrawer/useNavDrawerStyles.styles.ts

@@ -15,6 +15,7 @@ const useStyles = makeStyles({
   root: {
     width: '260px', // per spec
     backgroundColor: navItemTokens.backgroundColor,
+    alignItems: 'unset',
   },
 });
 

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

@@ -1,12 +1,13 @@
 import * as React from 'react';
-import type { ForwardRefComponent } from '@fluentui/react-utilities';
+import { renderDrawerBody_unstable } from '@fluentui/react-drawer';
 import { useNavDrawerBody_unstable } from './useNavDrawerBody';
-import { renderNavDrawerBody_unstable } from './renderNavDrawerBody';
 import { useNavDrawerBodyStyles_unstable } from './useNavDrawerBodyStyles.styles';
+
+import type { ForwardRefComponent } from '@fluentui/react-utilities';
 import type { NavDrawerBodyProps } from './NavDrawerBody.types';
 
 /**
- * NavDrawerBody component - TODO: add more docs
+ * NavDrawerBody component
  */
 export const NavDrawerBody: ForwardRefComponent<NavDrawerBodyProps> = React.forwardRef((props, ref) => {
   const state = useNavDrawerBody_unstable(props, ref);
@@ -15,7 +16,7 @@ export const NavDrawerBody: ForwardRefComponent<NavDrawerBodyProps> = React.forw
   // 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('useNavDrawerBodyStyles_unstable')(state);
-  return renderNavDrawerBody_unstable(state);
+  return renderDrawerBody_unstable(state);
 });
 
 NavDrawerBody.displayName = 'NavDrawerBody';

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

@@ -1,17 +1,13 @@
-import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
+import type { DrawerBodyProps, DrawerBodySlots, DrawerBodyState } from '@fluentui/react-drawer';
 
-export type NavDrawerBodySlots = {
-  root: Slot<'div'>;
-};
+export type NavDrawerBodySlots = DrawerBodySlots;
 
 /**
  * NavDrawerBody Props
  */
-export type NavDrawerBodyProps = ComponentProps<NavDrawerBodySlots> & {};
+export type NavDrawerBodyProps = DrawerBodyProps;
 
 /**
  * State used in rendering NavDrawerBody
  */
-export type NavDrawerBodyState = ComponentState<NavDrawerBodySlots>;
-// TODO: Remove semicolon from previous line, uncomment next line, and provide union of props to pick from NavDrawerBodyProps.
-// & Required<Pick<NavDrawerBodyProps, 'propName'>>
+export type NavDrawerBodyState = DrawerBodyState;

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

@@ -1,5 +1,4 @@
 export * from './NavDrawerBody';
 export * from './NavDrawerBody.types';
-export * from './renderNavDrawerBody';
 export * from './useNavDrawerBody';
 export * from './useNavDrawerBodyStyles.styles';

packages/react-components/react-nav-preview/src/components/NavDrawerBody/useNavDrawerBody.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
-import { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';
-import type { NavDrawerBodyProps, NavDrawerBodyState } from './NavDrawerBody.types';
+import { useDrawerBody_unstable } from '@fluentui/react-drawer';
 
+import type { NavDrawerBodyProps, NavDrawerBodyState } from './NavDrawerBody.types';
 /**
  * Create the state required to render NavDrawerBody.
  *
@@ -15,20 +15,5 @@ export const useNavDrawerBody_unstable = (
   props: NavDrawerBodyProps,
   ref: React.Ref<HTMLDivElement>,
 ): NavDrawerBodyState => {
-  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' },
-    ),
-  };
+  return useDrawerBody_unstable(props, ref);
 };

packages/react-components/react-nav-preview/src/components/NavDrawerBody/useNavDrawerBodyStyles.styles.ts

@@ -1,33 +1,29 @@
-import { makeStyles, mergeClasses } from '@griffel/react';
+import { makeStyles, mergeClasses, shorthands } from '@griffel/react';
+import { tokens } from '@fluentui/react-theme';
+import { useDrawerBodyStyles_unstable } from '@fluentui/react-drawer';
 import type { SlotClassNames } from '@fluentui/react-utilities';
 import type { NavDrawerBodySlots, NavDrawerBodyState } from './NavDrawerBody.types';
 
 export const navDrawerBodyClassNames: SlotClassNames<NavDrawerBodySlots> = {
   root: 'fui-NavDrawerBody',
-  // TODO: add class names for all slots on NavDrawerBodySlots.
-  // Should be of the form `<slotName>: 'fui-NavDrawerBody__<slotName>`
 };
 
 /**
  * Styles for the root slot
  */
 const useStyles = makeStyles({
   root: {
-    // TODO Add default styles for the root element
+    ...shorthands.padding(0, tokens.spacingVerticalMNudge),
+    alignItems: 'unset',
   },
-
-  // TODO add additional classes for different states and/or slots
 });
 
 /**
  * Apply styling to the NavDrawerBody slots based on the state
  */
 export const useNavDrawerBodyStyles_unstable = (state: NavDrawerBodyState): NavDrawerBodyState => {
+  useDrawerBodyStyles_unstable(state);
   const styles = useStyles();
   state.root.className = mergeClasses(navDrawerBodyClassNames.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/src/components/NavDrawerFooter/NavDrawerFooter.tsx

@@ -1,12 +1,13 @@
 import * as React from 'react';
-import type { ForwardRefComponent } from '@fluentui/react-utilities';
+import { renderDrawerFooter_unstable } from '@fluentui/react-drawer';
 import { useNavDrawerFooter_unstable } from './useNavDrawerFooter';
-import { renderNavDrawerFooter_unstable } from './renderNavDrawerFooter';
 import { useNavDrawerFooterStyles_unstable } from './useNavDrawerFooterStyles.styles';
+
+import type { ForwardRefComponent } from '@fluentui/react-utilities';
 import type { NavDrawerFooterProps } from './NavDrawerFooter.types';
 
 /**
- * NavDrawerFooter component - TODO: add more docs
+ * NavDrawerFooter component
  */
 export const NavDrawerFooter: ForwardRefComponent<NavDrawerFooterProps> = React.forwardRef((props, ref) => {
   const state = useNavDrawerFooter_unstable(props, ref);
@@ -15,7 +16,7 @@ export const NavDrawerFooter: ForwardRefComponent<NavDrawerFooterProps> = React.
   // 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('useNavDrawerFooterStyles_unstable')(state);
-  return renderNavDrawerFooter_unstable(state);
+  return renderDrawerFooter_unstable(state);
 });
 
 NavDrawerFooter.displayName = 'NavDrawerFooter';

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

@@ -1,17 +1,13 @@
-import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
+import type { DrawerFooterProps, DrawerFooterSlots, DrawerFooterState } from '@fluentui/react-drawer';
 
-export type NavDrawerFooterSlots = {
-  root: Slot<'div'>;
-};
+export type NavDrawerFooterSlots = DrawerFooterSlots;
 
 /**
  * NavDrawerFooter Props
  */
-export type NavDrawerFooterProps = ComponentProps<NavDrawerFooterSlots> & {};
+export type NavDrawerFooterProps = DrawerFooterProps;
 
 /**
  * State used in rendering NavDrawerFooter
  */
-export type NavDrawerFooterState = ComponentState<NavDrawerFooterSlots>;
-// TODO: Remove semicolon from previous line, uncomment next line, and provide union of props to pick from NavDrawerFooterProps.
-// & Required<Pick<NavDrawerFooterProps, 'propName'>>
+export type NavDrawerFooterState = DrawerFooterState;

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

@@ -1,5 +1,4 @@
 export * from './NavDrawerFooter';
 export * from './NavDrawerFooter.types';
-export * from './renderNavDrawerFooter';
 export * from './useNavDrawerFooter';
 export * from './useNavDrawerFooterStyles.styles';

packages/react-components/react-nav-preview/src/components/NavDrawerFooter/useNavDrawerFooter.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';
+import { useDrawerFooter_unstable } from '@fluentui/react-drawer';
 import type { NavDrawerFooterProps, NavDrawerFooterState } from './NavDrawerFooter.types';
 
 /**
@@ -13,22 +13,7 @@ import type { NavDrawerFooterProps, NavDrawerFooterState } from './NavDrawerFoot
  */
 export const useNavDrawerFooter_unstable = (
   props: NavDrawerFooterProps,
-  ref: React.Ref<HTMLDivElement>,
+  ref: React.Ref<HTMLElement>,
 ): NavDrawerFooterState => {
-  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' },
-    ),
-  };
+  return useDrawerFooter_unstable(props, ref);
 };