[nav] Replacing 'size' prop with 'density' (microsoft#33559)

change/@fluentui-react-nav-preview-dbba66d7-ef68-4cb3-ac4f-dccf895fdd97.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "[BREAKING CHANGE] Replacing NavSize type and size prop with NavDensity type and density prop to avoid collisions with size on base Drawer component. ",
+  "packageName": "@fluentui/react-nav-preview",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

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

@@ -57,7 +57,7 @@ export type AppItemSlots = {
 
 // @public
 export type AppItemState = ComponentState<AppItemSlots> & {
-    size: NavSize;
+    density: NavDensity;
 };
 
 // @public
@@ -77,7 +77,7 @@ export type AppItemStaticSlots = {
 
 // @public
 export type AppItemStaticState = ComponentState<AppItemStaticSlots> & {
-    size: NavSize;
+    density: NavDensity;
 };
 
 // @public
@@ -117,7 +117,7 @@ export type NavCategoryItemSlots = {
 // @public
 export type NavCategoryItemState = ComponentState<NavCategoryItemSlots> & NavCategoryItemContextValue & {
     selected: boolean;
-    size: NavSize;
+    density: NavDensity;
 };
 
 // @public
@@ -133,7 +133,7 @@ export type NavCategoryState = NavCategoryContextValue & Required<NavCategoryPro
 export const navClassNames: SlotClassNames<NavSlots>;
 
 // @public (undocumented)
-export type NavContextValue = Pick<NavProps, 'onNavItemSelect' | 'selectedValue' | 'selectedCategoryValue' | 'size'> & {
+export type NavContextValue = Pick<NavProps, 'onNavItemSelect' | 'selectedValue' | 'selectedCategoryValue' | 'density'> & {
     onRegister: RegisterNavItemEventHandler;
     onUnregister: RegisterNavItemEventHandler;
     onSelect: EventHandler<OnNavItemSelectData>;
@@ -153,6 +153,9 @@ export type NavContextValues = {
     nav: NavContextValue;
 };
 
+// @public
+export type NavDensity = 'small' | 'medium';
+
 // @public
 export const NavDivider: ForwardRefComponent<NavDividerProps>;
 
@@ -254,7 +257,7 @@ export type NavItemSlots = {
 // @public
 export type NavItemState = ComponentState<NavItemSlots> & Pick<NavItemProps, 'value'> & {
     selected: boolean;
-    size: NavSize;
+    density: NavDensity;
 };
 
 // @public
@@ -271,7 +274,7 @@ export type NavProps = ComponentProps<NavSlots> & {
     selectedCategoryValue?: NavItemValue;
     multiple?: boolean;
     onNavCategoryItemToggle?: EventHandler<OnNavItemSelectData>;
-    size?: NavSize;
+    density?: NavDensity;
 };
 
 // @public (undocumented)
@@ -294,9 +297,6 @@ export type NavSectionHeaderSlots = {
 // @public
 export type NavSectionHeaderState = ComponentState<NavSectionHeaderSlots>;
 
-// @public
-export type NavSize = 'small' | 'medium';
-
 // @public (undocumented)
 export type NavSlots = {
     root: NonNullable<Slot<'div'>>;
@@ -344,7 +344,7 @@ export type NavSubItemSlots = {
 // @public
 export type NavSubItemState = ComponentState<NavSubItemSlots> & Pick<NavSubItemProps, 'value'> & {
     selected: boolean;
-    size: NavSize;
+    density: NavDensity;
 };
 
 // @public (undocumented)
@@ -412,7 +412,7 @@ export type SplitNavItemSlots = {
 
 // @public
 export type SplitNavItemState = ComponentState<SplitNavItemSlots> & {
-    size: NavSize;
+    density: NavDensity;
     isSubNav: boolean;
 };
 

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

@@ -1,4 +1,4 @@
-export type { NavProps, NavSize, NavSlots, NavState, OnNavItemSelectData } from './components/Nav/index';
+export type { NavProps, NavDensity, NavSlots, NavState, OnNavItemSelectData } from './components/Nav/index';
 export { Nav, navClassNames, renderNav_unstable, useNavStyles_unstable, useNav_unstable } from './components/Nav/index';
 export type {
   NavCategoryItemProps,

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

@@ -1,6 +1,6 @@
 import { ARIAButtonSlotProps } from '@fluentui/react-aria';
 import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
-import { NavSize } from '../Nav/Nav.types';
+import { NavDensity } from '../Nav/Nav.types';
 
 export type AppItemSlots = {
   /**
@@ -24,9 +24,9 @@ export type AppItemProps = ComponentProps<AppItemSlots> & { href?: string };
  */
 export type AppItemState = ComponentState<AppItemSlots> & {
   /**
-   * The size of the NavItem
+   * The density of the NavItem
    *
    * @default 'medium'
    */
-  size: NavSize;
+  density: NavDensity;
 };

packages/react-components/react-nav-preview/library/src/components/AppItem/useAppItem.ts

@@ -20,7 +20,7 @@ export const useAppItem_unstable = (
   const { icon, as, href } = props;
   const rootElementType = as || (href ? 'a' : 'button');
 
-  const { size = 'medium' } = useNavContext_unstable();
+  const { density = 'medium' } = useNavContext_unstable();
 
   const root = slot.always<ARIAButtonSlotProps<'a'>>(
     getIntrinsicElementProps(
@@ -48,6 +48,6 @@ export const useAppItem_unstable = (
     icon: slot.optional(icon, {
       elementType: 'span',
     }),
-    size,
+    density,
   };
 };

packages/react-components/react-nav-preview/library/src/components/AppItem/useAppItemStyles.styles.ts

@@ -42,13 +42,13 @@ export const useAppItemStyles_unstable = (state: AppItemState): AppItemState =>
   const iconStyles = useIconStyles();
   const appItemSpecificStyles = useAppItemStyles();
 
-  const { size, icon } = state;
+  const { density, icon } = state;
 
   state.root.className = mergeClasses(
     rootDefaultClassName,
     appItemClassNames.root,
     appItemSpecificStyles.root,
-    size === 'small' && appItemSpecificStyles.small,
+    density === 'small' && appItemSpecificStyles.small,
     !icon && appItemSpecificStyles.absentIconRootAdjustment,
     state.root.className,
   );

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

@@ -1,5 +1,5 @@
 import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
-import { NavSize } from '../Nav/Nav.types';
+import { NavDensity } from '../Nav/Nav.types';
 
 export type AppItemStaticSlots = {
   /**
@@ -22,9 +22,9 @@ export type AppItemStaticProps = ComponentProps<AppItemStaticSlots> & {};
  */
 export type AppItemStaticState = ComponentState<AppItemStaticSlots> & {
   /**
-   * The size of the Nav
+   * The density of the Nav
    *
    * @default 'medium'
    */
-  size: NavSize;
+  density: NavDensity;
 };

packages/react-components/react-nav-preview/library/src/components/AppItemStatic/useAppItemStatic.ts

@@ -18,7 +18,7 @@ export const useAppItemStatic_unstable = (
 ): AppItemStaticState => {
   const { icon } = props;
 
-  const { size = 'medium' } = useNavContext_unstable();
+  const { density = 'medium' } = useNavContext_unstable();
   return {
     components: {
       root: 'div',
@@ -34,6 +34,6 @@ export const useAppItemStatic_unstable = (
     icon: slot.optional(icon, {
       elementType: 'span',
     }),
-    size,
+    density,
   };
 };

packages/react-components/react-nav-preview/library/src/components/AppItemStatic/useAppItemStaticStyles.styles.ts

@@ -32,14 +32,14 @@ export const useAppItemStaticStyles_unstable = (state: AppItemStaticState): AppI
   const appItemSpecificStyles = useAppItemStyles();
   const appItemStaticStyles = useAppItemStaticStyles();
 
-  const { size, icon } = state;
+  const { density, icon } = state;
 
   state.root.className = mergeClasses(
     rootDefaultClassName,
     appItemStaticClassNames.root,
     appItemSpecificStyles.root,
     appItemStaticStyles.root,
-    size === 'small' && appItemSpecificStyles.small,
+    density === 'small' && appItemSpecificStyles.small,
     !icon && appItemSpecificStyles.absentIconRootAdjustment,
     state.root.className,
   );

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

@@ -8,9 +8,10 @@ export type NavSlots = {
 };
 
 /***
- * Indicates the vertical size of the Nav content.
+ * Indicates the vertical density of the Nav content.
+ * This does not affect horizontal spacing.
  */
-export type NavSize = 'small' | 'medium';
+export type NavDensity = 'small' | 'medium';
 
 /**
  * Nav Props
@@ -76,10 +77,10 @@ export type NavProps = ComponentProps<NavSlots> & {
   onNavCategoryItemToggle?: EventHandler<OnNavItemSelectData>;
 
   /**
-   * The size and density of the Nav and it's children
+   * The vertical density of the Nav and it's children
    * @default 'medium'
    */
-  size?: NavSize;
+  density?: NavDensity;
 };
 
 export type OnNavItemSelectData = EventData<'click', React.MouseEvent<HTMLButtonElement | HTMLAnchorElement>> & {

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

@@ -1,5 +1,5 @@
 export { Nav } from './Nav';
-export type { NavSlots, NavProps, OnNavItemSelectData, NavState, NavSize } from './Nav.types';
+export type { NavSlots, NavProps, OnNavItemSelectData, NavState, NavDensity } from './Nav.types';
 export { renderNav_unstable } from './renderNav';
 export { useNav_unstable } from './useNav';
 export { useNavStyles_unstable, navClassNames } from './useNavStyles.styles';

packages/react-components/react-nav-preview/library/src/components/Nav/useNav.ts

@@ -59,7 +59,7 @@ export const useNav_unstable = (props: NavProps, ref: React.Ref<HTMLDivElement>)
     onNavItemSelect,
     onNavCategoryItemToggle,
     multiple = true,
-    size = 'medium',
+    density = 'medium',
     openCategories: controlledOpenCategoryItems,
     selectedCategoryValue: controlledSelectedCategoryValue,
     selectedValue: controlledSelectedValue,
@@ -164,6 +164,6 @@ export const useNav_unstable = (props: NavProps, ref: React.Ref<HTMLDivElement>)
     getRegisteredNavItems,
     onRequestNavCategoryItemToggle,
     multiple,
-    size,
+    density,
   };
 };

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

@@ -1,4 +1,4 @@
-import { NavSize } from '../Nav/Nav.types';
+import { NavDensity } from '../Nav/Nav.types';
 import { NavCategoryItemContextValue } from '../NavCategoryItemContext';
 import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
 
@@ -39,9 +39,9 @@ export type NavCategoryItemState = ComponentState<NavCategoryItemSlots> &
      */
     selected: boolean;
     /**
-     * The size of the NavItem
+     * The density of the NavItem
      *
      * @default 'medium'
      */
-    size: NavSize;
+    density: NavDensity;
   };

packages/react-components/react-nav-preview/library/src/components/NavCategoryItem/useNavCategoryItem.styles.ts

@@ -51,13 +51,13 @@ export const useNavCategoryItemStyles_unstable = (state: NavCategoryItemState):
   const iconStyles = useIconStyles();
   const expandIconStyles = useExpandIconStyles();
 
-  const { selected, open, size } = state;
+  const { selected, open, density } = state;
 
   state.root.className = mergeClasses(
     navCategoryItemClassNames.root,
     defaultRootClassName,
     rootStyles.base,
-    size === 'small' && smallStyles.root,
+    density === 'small' && smallStyles.root,
     selected && open === false && indicatorStyles.base,
     selected && open === false && contentStyles.selected,
     state.root.className,

packages/react-components/react-nav-preview/library/src/components/NavCategoryItem/useNavCategoryItem.tsx

@@ -22,7 +22,7 @@ export const useNavCategoryItem_unstable = (
 
   const { open, value } = useNavCategoryContext_unstable();
 
-  const { onRequestNavCategoryItemToggle, selectedCategoryValue, size = 'medium' } = useNavContext_unstable();
+  const { onRequestNavCategoryItemToggle, selectedCategoryValue, density = 'medium' } = useNavContext_unstable();
 
   const onNavCategoryItemClick = useEventCallback(
     mergeCallbacks(onClick, event =>
@@ -64,6 +64,6 @@ export const useNavCategoryItem_unstable = (
     icon: slot.optional(icon, {
       elementType: 'span',
     }),
-    size,
+    density,
   };
 };

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

@@ -32,9 +32,9 @@ const navContextDefaultValue: NavContextValue = {
   multiple: true,
 
   /**
-   * Indicates the size and density of the Nav.
+   * Indicates the vertical density and density of the Nav.
    */
-  size: 'medium',
+  density: 'medium',
 };
 
 const NavContext = React.createContext<NavContextValue | undefined>(undefined);

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

@@ -3,7 +3,10 @@ import { EventHandler } from '@fluentui/react-utilities';
 
 import type { NavProps, OnNavItemSelectData } from './Nav/Nav.types';
 
-export type NavContextValue = Pick<NavProps, 'onNavItemSelect' | 'selectedValue' | 'selectedCategoryValue' | 'size'> & {
+export type NavContextValue = Pick<
+  NavProps,
+  'onNavItemSelect' | 'selectedValue' | 'selectedCategoryValue' | 'density'
+> & {
   /** A callback to allow a navItem to register itself with the navItem list. */
   onRegister: RegisterNavItemEventHandler;
 

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

@@ -25,4 +25,12 @@ export type NavDrawerProps = ComponentProps<NavDrawerSlots> &
 /**
  * State used in rendering NavDrawer
  */
-export type NavDrawerState = DrawerState & NavContextValue;
+export type NavDrawerState = DrawerState &
+  NavContextValue & {
+    /**
+     * Analagous to size from DrawerBaseProps.
+     * Intended to be left unset in most cases.
+     * If left unset, it defaults to 260px.
+     */
+    size?: 'small' | 'medium' | 'large' | 'full';
+  };

packages/react-components/react-nav-preview/library/src/components/NavDrawer/useNavDrawer.ts

@@ -16,7 +16,7 @@ import type { NavDrawerProps, NavDrawerState } from './NavDrawer.types';
  * @param ref - reference to root HTMLDivElement of NavDrawer
  */
 export const useNavDrawer_unstable = (props: NavDrawerProps, ref: React.Ref<HTMLDivElement>): NavDrawerState => {
-  const { tabbable = false } = props;
+  const { tabbable = false, size = undefined } = props;
 
   const focusAttributes = useArrowNavigationGroup({
     axis: 'vertical',
@@ -34,6 +34,7 @@ export const useNavDrawer_unstable = (props: NavDrawerProps, ref: React.Ref<HTML
 
   return {
     ...navState,
+    size,
     components: {
       // TODO: remove once React v18 slot API is modified
       // this is a problem with the lack of support for union types on React v18