diff --git a/change/@fluentui-react-nav-preview-0002e68b-954c-4191-8e7a-500892fb4a50.json b/change/@fluentui-react-nav-preview-0002e68b-954c-4191-8e7a-500892fb4a50.json new file mode 100644 index 00000000000000..adc0576bd037ab --- /dev/null +++ b/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" +} diff --git a/packages/react-components/react-nav-preview/etc/react-nav-preview.api.md b/packages/react-components/react-nav-preview/etc/react-nav-preview.api.md index 2c422677cb9275..f014743a650bbd 100644 --- a/packages/react-components/react-nav-preview/etc/react-nav-preview.api.md +++ b/packages/react-components/react-nav-preview/etc/react-nav-preview.api.md @@ -7,6 +7,9 @@ /// 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; // @public (undocumented) -export const hamburgerClassNames: SlotClassNames; +export const hamburgerClassNames: SlotClassNames; // @public -export const HamburgerInNav: ForwardRefComponent; - -// @public (undocumented) -export const hamburgerInNavClassNames: SlotClassNames; - -// @public -export type HamburgerInNavProps = ComponentProps & {}; - -// @public (undocumented) -export type HamburgerInNavSlots = { - root: Slot<'div'>; -}; - -// @public -export type HamburgerInNavState = ComponentState; - -// @public -export type HamburgerProps = ComponentProps & {}; - -// @public (undocumented) -export type HamburgerSlots = { - root: Slot<'div'>; -}; +export type HamburgerProps = ButtonProps; // @public -export type HamburgerState = ComponentState; +export type HamburgerState = ButtonState; // @public export const Nav: ForwardRefComponent; @@ -251,11 +232,11 @@ export const NavSectionHeader: ForwardRefComponent; export const navSectionHeaderClassNames: SlotClassNames; // @public -export type NavSectionHeaderProps = ComponentProps & {}; +export type NavSectionHeaderProps = ComponentProps; // @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 & Pick 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) => HamburgerState; - -// @public -export const useHamburgerInNav_unstable: (props: HamburgerInNavProps, ref: React_2.Ref) => HamburgerInNavState; - -// @public -export const useHamburgerInNavStyles_unstable: (state: HamburgerInNavState) => HamburgerInNavState; +export const useHamburger_unstable: (props: HamburgerProps, ref: React_2.Ref) => HamburgerState; // @public export const useHamburgerStyles_unstable: (state: HamburgerState) => HamburgerState; diff --git a/packages/react-components/react-nav-preview/package.json b/packages/react-components/react-nav-preview/package.json index e426e50aaefb79..43270b03745012 100644 --- a/packages/react-components/react-nav-preview/package.json +++ b/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", diff --git a/packages/react-components/react-nav-preview/src/HamburgerInNav.ts b/packages/react-components/react-nav-preview/src/HamburgerInNav.ts deleted file mode 100644 index 2652dc89c2c712..00000000000000 --- a/packages/react-components/react-nav-preview/src/HamburgerInNav.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './components/HamburgerInNav/index'; diff --git a/packages/react-components/react-nav-preview/src/components/Hamburger/Hamburger.test.tsx b/packages/react-components/react-nav-preview/src/components/Hamburger/Hamburger.test.tsx index 1db9fba992de72..644bcd445862e6 100644 --- a/packages/react-components/react-nav-preview/src/components/Hamburger/Hamburger.test.tsx +++ b/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, displayName: 'Hamburger', }); }); diff --git a/packages/react-components/react-nav-preview/src/components/Hamburger/Hamburger.tsx b/packages/react-components/react-nav-preview/src/components/Hamburger/Hamburger.tsx index dc39a943ffdcf8..6f89b3d1ca358d 100644 --- a/packages/react-components/react-nav-preview/src/components/Hamburger/Hamburger.tsx +++ b/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 = 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; Hamburger.displayName = 'Hamburger'; diff --git a/packages/react-components/react-nav-preview/src/components/Hamburger/Hamburger.types.ts b/packages/react-components/react-nav-preview/src/components/Hamburger/Hamburger.types.ts index 50713d9d6e62dc..9f3394db7c74da 100644 --- a/packages/react-components/react-nav-preview/src/components/Hamburger/Hamburger.types.ts +++ b/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 & {}; +export type HamburgerProps = ButtonProps; /** * State used in rendering Hamburger */ -export type HamburgerState = ComponentState; -// TODO: Remove semicolon from previous line, uncomment next line, and provide union of props to pick from HamburgerProps. -// & Required> +export type HamburgerState = ButtonState; diff --git a/packages/react-components/react-nav-preview/src/components/Hamburger/index.ts b/packages/react-components/react-nav-preview/src/components/Hamburger/index.ts index a49821a6bd4387..87a46d456f16f9 100644 --- a/packages/react-components/react-nav-preview/src/components/Hamburger/index.ts +++ b/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'; diff --git a/packages/react-components/react-nav-preview/src/components/Hamburger/renderHamburger.tsx b/packages/react-components/react-nav-preview/src/components/Hamburger/renderHamburger.tsx deleted file mode 100644 index 54b39a5b00507c..00000000000000 --- a/packages/react-components/react-nav-preview/src/components/Hamburger/renderHamburger.tsx +++ /dev/null @@ -1,15 +0,0 @@ -/** @jsxRuntime automatic */ -/** @jsxImportSource @fluentui/react-jsx-runtime */ - -import { assertSlots } from '@fluentui/react-utilities'; -import type { HamburgerState, HamburgerSlots } from './Hamburger.types'; - -/** - * Render the final JSX of Hamburger - */ -export const renderHamburger_unstable = (state: HamburgerState) => { - assertSlots(state); - - // TODO Add additional slots in the appropriate place - return ; -}; diff --git a/packages/react-components/react-nav-preview/src/components/Hamburger/useHamburger.ts b/packages/react-components/react-nav-preview/src/components/Hamburger/useHamburger.ts deleted file mode 100644 index 64ae637f35f2aa..00000000000000 --- a/packages/react-components/react-nav-preview/src/components/Hamburger/useHamburger.ts +++ /dev/null @@ -1,31 +0,0 @@ -import * as React from 'react'; -import { getIntrinsicElementProps, slot } from '@fluentui/react-utilities'; -import type { HamburgerProps, HamburgerState } from './Hamburger.types'; - -/** - * Create the state required to render Hamburger. - * - * The returned state can be modified with hooks such as useHamburgerStyles_unstable, - * before being passed to renderHamburger_unstable. - * - * @param props - props from this instance of Hamburger - * @param ref - reference to root HTMLDivElement of Hamburger - */ -export const useHamburger_unstable = (props: HamburgerProps, ref: React.Ref): HamburgerState => { - 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' }, - ), - }; -}; diff --git a/packages/react-components/react-nav-preview/src/components/Hamburger/useHamburger.tsx b/packages/react-components/react-nav-preview/src/components/Hamburger/useHamburger.tsx new file mode 100644 index 00000000000000..303abc5a04975f --- /dev/null +++ b/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, +): HamburgerState => { + return useButton_unstable({ icon: , appearance: 'transparent', ...props }, ref); +}; diff --git a/packages/react-components/react-nav-preview/src/components/Hamburger/useHamburgerStyles.styles.ts b/packages/react-components/react-nav-preview/src/components/Hamburger/useHamburgerStyles.styles.ts index f31fc41043dd06..6183fa022f00d6 100644 --- a/packages/react-components/react-nav-preview/src/components/Hamburger/useHamburgerStyles.styles.ts +++ b/packages/react-components/react-nav-preview/src/components/Hamburger/useHamburgerStyles.styles.ts @@ -1,11 +1,12 @@ -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 = { +export const hamburgerClassNames: SlotClassNames = { root: 'fui-Hamburger', - // TODO: add class names for all slots on HamburgerSlots. - // Should be of the form `: 'fui-Hamburger__` + icon: 'fui-Hamburger__icon', }; /** @@ -13,21 +14,30 @@ export const hamburgerClassNames: SlotClassNames = { */ 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; }; diff --git a/packages/react-components/react-nav-preview/src/components/HamburgerInNav/HamburgerInNav.test.tsx b/packages/react-components/react-nav-preview/src/components/HamburgerInNav/HamburgerInNav.test.tsx deleted file mode 100644 index 567a8dbf7c8283..00000000000000 --- a/packages/react-components/react-nav-preview/src/components/HamburgerInNav/HamburgerInNav.test.tsx +++ /dev/null @@ -1,9 +0,0 @@ -import { isConformant } from '../../testing/isConformant'; -import { HamburgerInNav } from './HamburgerInNav'; - -describe('HamburgerInNav', () => { - isConformant({ - Component: HamburgerInNav, - displayName: 'HamburgerInNav', - }); -}); diff --git a/packages/react-components/react-nav-preview/src/components/HamburgerInNav/HamburgerInNav.tsx b/packages/react-components/react-nav-preview/src/components/HamburgerInNav/HamburgerInNav.tsx deleted file mode 100644 index 80456fde5c94d2..00000000000000 --- a/packages/react-components/react-nav-preview/src/components/HamburgerInNav/HamburgerInNav.tsx +++ /dev/null @@ -1,21 +0,0 @@ -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 type { HamburgerInNavProps } from './HamburgerInNav.types'; - -/** - * HamburgerInNav component - TODO: add more docs - */ -export const HamburgerInNav: ForwardRefComponent = React.forwardRef((props, ref) => { - const state = useHamburgerInNav_unstable(props, ref); - - useHamburgerInNavStyles_unstable(state); - // 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); -}); - -HamburgerInNav.displayName = 'HamburgerInNav'; diff --git a/packages/react-components/react-nav-preview/src/components/HamburgerInNav/HamburgerInNav.types.ts b/packages/react-components/react-nav-preview/src/components/HamburgerInNav/HamburgerInNav.types.ts deleted file mode 100644 index 9323f0cc256148..00000000000000 --- a/packages/react-components/react-nav-preview/src/components/HamburgerInNav/HamburgerInNav.types.ts +++ /dev/null @@ -1,17 +0,0 @@ -import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities'; - -export type HamburgerInNavSlots = { - root: Slot<'div'>; -}; - -/** - * HamburgerInNav Props - */ -export type HamburgerInNavProps = ComponentProps & {}; - -/** - * State used in rendering HamburgerInNav - */ -export type HamburgerInNavState = ComponentState; -// TODO: Remove semicolon from previous line, uncomment next line, and provide union of props to pick from HamburgerInNavProps. -// & Required> diff --git a/packages/react-components/react-nav-preview/src/components/HamburgerInNav/index.ts b/packages/react-components/react-nav-preview/src/components/HamburgerInNav/index.ts deleted file mode 100644 index 6cc53ffdecbcd2..00000000000000 --- a/packages/react-components/react-nav-preview/src/components/HamburgerInNav/index.ts +++ /dev/null @@ -1,5 +0,0 @@ -export * from './HamburgerInNav'; -export * from './HamburgerInNav.types'; -export * from './renderHamburgerInNav'; -export * from './useHamburgerInNav'; -export * from './useHamburgerInNavStyles.styles'; diff --git a/packages/react-components/react-nav-preview/src/components/HamburgerInNav/renderHamburgerInNav.tsx b/packages/react-components/react-nav-preview/src/components/HamburgerInNav/renderHamburgerInNav.tsx deleted file mode 100644 index 3eeb2bfa6d3541..00000000000000 --- a/packages/react-components/react-nav-preview/src/components/HamburgerInNav/renderHamburgerInNav.tsx +++ /dev/null @@ -1,15 +0,0 @@ -/** @jsxRuntime automatic */ -/** @jsxImportSource @fluentui/react-jsx-runtime */ - -import { assertSlots } from '@fluentui/react-utilities'; -import type { HamburgerInNavState, HamburgerInNavSlots } from './HamburgerInNav.types'; - -/** - * Render the final JSX of HamburgerInNav - */ -export const renderHamburgerInNav_unstable = (state: HamburgerInNavState) => { - assertSlots(state); - - // TODO Add additional slots in the appropriate place - return ; -}; diff --git a/packages/react-components/react-nav-preview/src/components/HamburgerInNav/useHamburgerInNav.ts b/packages/react-components/react-nav-preview/src/components/HamburgerInNav/useHamburgerInNav.ts deleted file mode 100644 index ce05b0867f8667..00000000000000 --- a/packages/react-components/react-nav-preview/src/components/HamburgerInNav/useHamburgerInNav.ts +++ /dev/null @@ -1,34 +0,0 @@ -import * as React from 'react'; -import { getIntrinsicElementProps, slot } from '@fluentui/react-utilities'; -import type { HamburgerInNavProps, HamburgerInNavState } from './HamburgerInNav.types'; - -/** - * Create the state required to render HamburgerInNav. - * - * The returned state can be modified with hooks such as useHamburgerInNavStyles_unstable, - * before being passed to renderHamburgerInNav_unstable. - * - * @param props - props from this instance of HamburgerInNav - * @param ref - reference to root HTMLDivElement of HamburgerInNav - */ -export const useHamburgerInNav_unstable = ( - props: HamburgerInNavProps, - ref: React.Ref, -): HamburgerInNavState => { - 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' }, - ), - }; -}; diff --git a/packages/react-components/react-nav-preview/src/components/HamburgerInNav/useHamburgerInNavStyles.styles.ts b/packages/react-components/react-nav-preview/src/components/HamburgerInNav/useHamburgerInNavStyles.styles.ts deleted file mode 100644 index 89af27a151253e..00000000000000 --- a/packages/react-components/react-nav-preview/src/components/HamburgerInNav/useHamburgerInNavStyles.styles.ts +++ /dev/null @@ -1,33 +0,0 @@ -import { makeStyles, mergeClasses } from '@griffel/react'; -import type { SlotClassNames } from '@fluentui/react-utilities'; -import type { HamburgerInNavSlots, HamburgerInNavState } from './HamburgerInNav.types'; - -export const hamburgerInNavClassNames: SlotClassNames = { - root: 'fui-HamburgerInNav', - // TODO: add class names for all slots on HamburgerInNavSlots. - // Should be of the form `: 'fui-HamburgerInNav__` -}; - -/** - * Styles for the root slot - */ -const useStyles = makeStyles({ - root: { - // TODO Add default styles for the root element - }, - - // 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 => { - 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); - - return state; -}; diff --git a/packages/react-components/react-nav-preview/src/components/NavDrawerFooter/useNavDrawerFooterStyles.styles.ts b/packages/react-components/react-nav-preview/src/components/NavDrawerFooter/useNavDrawerFooterStyles.styles.ts index 82b4d62e9fc57f..83f936bb701e67 100644 --- a/packages/react-components/react-nav-preview/src/components/NavDrawerFooter/useNavDrawerFooterStyles.styles.ts +++ b/packages/react-components/react-nav-preview/src/components/NavDrawerFooter/useNavDrawerFooterStyles.styles.ts @@ -14,7 +14,7 @@ export const navDrawerFooterClassNames: SlotClassNames = { const useStyles = makeStyles({ root: { display: 'unset', - padding: `0 ${tokens.spacingVerticalMNudge}`, + padding: `2px ${tokens.spacingVerticalMNudge}`, }, }); diff --git a/packages/react-components/react-nav-preview/src/components/NavSectionHeader/NavSectionHeader.test.tsx b/packages/react-components/react-nav-preview/src/components/NavSectionHeader/NavSectionHeader.test.tsx index 063ba7d700738b..f8cad46c0df1f5 100644 --- a/packages/react-components/react-nav-preview/src/components/NavSectionHeader/NavSectionHeader.test.tsx +++ b/packages/react-components/react-nav-preview/src/components/NavSectionHeader/NavSectionHeader.test.tsx @@ -1,9 +1,11 @@ +import * as React from 'react'; import { isConformant } from '../../testing/isConformant'; import { NavSectionHeader } from './NavSectionHeader'; +import { NavSectionHeaderProps } from './NavSectionHeader.types'; describe('NavSectionHeader', () => { isConformant({ - Component: NavSectionHeader, + Component: NavSectionHeader as React.FunctionComponent, displayName: 'NavSectionHeader', }); }); diff --git a/packages/react-components/react-nav-preview/src/components/NavSectionHeader/NavSectionHeader.tsx b/packages/react-components/react-nav-preview/src/components/NavSectionHeader/NavSectionHeader.tsx index 6d93c76f59e53d..a990dbccf282c2 100644 --- a/packages/react-components/react-nav-preview/src/components/NavSectionHeader/NavSectionHeader.tsx +++ b/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 = React.forwardRef((props, ref) => { const state = useNavSectionHeader_unstable(props, ref); diff --git a/packages/react-components/react-nav-preview/src/components/NavSectionHeader/NavSectionHeader.types.ts b/packages/react-components/react-nav-preview/src/components/NavSectionHeader/NavSectionHeader.types.ts index b5f14f15432f3a..eb0300f7633f5d 100644 --- a/packages/react-components/react-nav-preview/src/components/NavSectionHeader/NavSectionHeader.types.ts +++ b/packages/react-components/react-nav-preview/src/components/NavSectionHeader/NavSectionHeader.types.ts @@ -1,13 +1,13 @@ 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 & {}; +export type NavSectionHeaderProps = ComponentProps; /** * State used in rendering NavSectionHeader diff --git a/packages/react-components/react-nav-preview/src/components/NavSectionHeader/renderNavSectionHeader.tsx b/packages/react-components/react-nav-preview/src/components/NavSectionHeader/renderNavSectionHeader.tsx index 235b5795eb89f4..fd3658f35cfdaf 100644 --- a/packages/react-components/react-nav-preview/src/components/NavSectionHeader/renderNavSectionHeader.tsx +++ b/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(state); - // TODO Add additional slots in the appropriate place return ; }; diff --git a/packages/react-components/react-nav-preview/src/components/NavSectionHeader/useNavSectionHeader.ts b/packages/react-components/react-nav-preview/src/components/NavSectionHeader/useNavSectionHeader.ts index ae1b35888ff2d2..c2969f858115a3 100644 --- a/packages/react-components/react-nav-preview/src/components/NavSectionHeader/useNavSectionHeader.ts +++ b/packages/react-components/react-nav-preview/src/components/NavSectionHeader/useNavSectionHeader.ts @@ -16,19 +16,15 @@ export const useNavSectionHeader_unstable = ( ref: React.Ref, ): 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' }, ), }; }; diff --git a/packages/react-components/react-nav-preview/src/components/NavSectionHeader/useNavSectionHeaderStyles.styles.ts b/packages/react-components/react-nav-preview/src/components/NavSectionHeader/useNavSectionHeaderStyles.styles.ts index eeecf49f061552..b48c894c9e961d 100644 --- a/packages/react-components/react-nav-preview/src/components/NavSectionHeader/useNavSectionHeaderStyles.styles.ts +++ b/packages/react-components/react-nav-preview/src/components/NavSectionHeader/useNavSectionHeaderStyles.styles.ts @@ -1,11 +1,10 @@ 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 = { root: 'fui-NavSectionHeader', - // TODO: add class names for all slots on NavSectionHeaderSlots. - // Should be of the form `: 'fui-NavSectionHeader__` }; /** @@ -13,10 +12,9 @@ export const navSectionHeaderClassNames: SlotClassNames = */ 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; }; diff --git a/packages/react-components/react-nav-preview/src/index.ts b/packages/react-components/react-nav-preview/src/index.ts index 60b2db7de39b1c..189b578ababaa8 100644 --- a/packages/react-components/react-nav-preview/src/index.ts +++ b/packages/react-components/react-nav-preview/src/index.ts @@ -61,6 +61,5 @@ export * from './NavDrawerFooter'; export * from './NavDrawerHeader'; export * from './NavDrawerHeaderNav'; export * from './NavDrawerBody'; -export * from './HamburgerInNav'; export * from './Hamburger'; export * from './NavSectionHeader'; diff --git a/packages/react-components/react-nav-preview/stories/Hamburger/HamburgerDefault.stories.tsx b/packages/react-components/react-nav-preview/stories/Hamburger/HamburgerDefault.stories.tsx index a1d277b863415c..79910fa5513fd3 100644 --- a/packages/react-components/react-nav-preview/stories/Hamburger/HamburgerDefault.stories.tsx +++ b/packages/react-components/react-nav-preview/stories/Hamburger/HamburgerDefault.stories.tsx @@ -1,4 +1,4 @@ import * as React from 'react'; import { Hamburger, HamburgerProps } from '@fluentui/react-nav-preview'; -export const Default = (props: Partial) => ; +export const Default = (props: HamburgerProps) => ; diff --git a/packages/react-components/react-nav-preview/stories/HamburgerInNav/HamburgerInNavBestPractices.md b/packages/react-components/react-nav-preview/stories/HamburgerInNav/HamburgerInNavBestPractices.md deleted file mode 100644 index 08ff8ddeeb5f86..00000000000000 --- a/packages/react-components/react-nav-preview/stories/HamburgerInNav/HamburgerInNavBestPractices.md +++ /dev/null @@ -1,5 +0,0 @@ -## Best practices - -### Do - -### Don't diff --git a/packages/react-components/react-nav-preview/stories/HamburgerInNav/HamburgerInNavDefault.stories.tsx b/packages/react-components/react-nav-preview/stories/HamburgerInNav/HamburgerInNavDefault.stories.tsx deleted file mode 100644 index b071aec4a39c95..00000000000000 --- a/packages/react-components/react-nav-preview/stories/HamburgerInNav/HamburgerInNavDefault.stories.tsx +++ /dev/null @@ -1,4 +0,0 @@ -import * as React from 'react'; -import { HamburgerInNav, HamburgerInNavProps } from '@fluentui/react-nav-preview'; - -export const Default = (props: Partial) => ; diff --git a/packages/react-components/react-nav-preview/stories/HamburgerInNav/HamburgerInNavDescription.md b/packages/react-components/react-nav-preview/stories/HamburgerInNav/HamburgerInNavDescription.md deleted file mode 100644 index e69de29bb2d1d6..00000000000000 diff --git a/packages/react-components/react-nav-preview/stories/HamburgerInNav/index.stories.tsx b/packages/react-components/react-nav-preview/stories/HamburgerInNav/index.stories.tsx deleted file mode 100644 index 1a634dcb780440..00000000000000 --- a/packages/react-components/react-nav-preview/stories/HamburgerInNav/index.stories.tsx +++ /dev/null @@ -1,18 +0,0 @@ -import { HamburgerInNav } from '@fluentui/react-nav-preview'; - -import descriptionMd from './HamburgerInNavDescription.md'; -import bestPracticesMd from './HamburgerInNavBestPractices.md'; - -// export { Default } from './HamburgerInNavDefault.stories'; - -export default { - title: 'Preview Components/HamburgerInNav', - component: HamburgerInNav, - parameters: { - docs: { - description: { - component: [descriptionMd, bestPracticesMd].join('\n'), - }, - }, - }, -}; diff --git a/packages/react-components/react-nav-preview/stories/NavDrawer/NavDrawerDefault.stories.tsx b/packages/react-components/react-nav-preview/stories/NavDrawer/NavDrawerDefault.stories.tsx index 3d9e2fc581de3f..7df74e30698e61 100644 --- a/packages/react-components/react-nav-preview/stories/NavDrawer/NavDrawerDefault.stories.tsx +++ b/packages/react-components/react-nav-preview/stories/NavDrawer/NavDrawerDefault.stories.tsx @@ -1,5 +1,6 @@ import * as React from 'react'; import { + Hamburger, NavCategory, NavCategoryItem, NavDrawer, @@ -9,19 +10,12 @@ import { NavDrawerHeaderNav, NavDrawerProps, NavItem, + NavSectionHeader, NavSubItem, NavSubItemGroup, } from '@fluentui/react-nav-preview'; -import { - Button, - Caption1Strong, - Label, - Radio, - RadioGroup, - makeStyles, - tokens, - useId, -} from '@fluentui/react-components'; +import { DrawerProps } from '@fluentui/react-drawer'; +import { Label, Radio, RadioGroup, makeStyles, tokens, useId } from '@fluentui/react-components'; import { Board20Filled, Board20Regular, @@ -35,17 +29,16 @@ import { HeartPulse20Regular, MegaphoneLoud20Filled, MegaphoneLoud20Regular, - NavigationFilled, NotePin20Filled, NotePin20Regular, People20Filled, People20Regular, PeopleStar20Filled, PeopleStar20Regular, - PersonFilled, + Person20Filled, PersonLightbulb20Filled, PersonLightbulb20Regular, - PersonRegular, + Person20Regular, PersonSearch20Filled, PersonSearch20Regular, PreviewLink20Filled, @@ -54,16 +47,12 @@ 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: { - border: '2px solid #ccc', overflow: 'hidden', display: 'flex', height: '600px', - backgroundColor: '#fff', }, content: { flex: '1', @@ -71,31 +60,17 @@ const useStyles = makeStyles({ display: 'grid', justifyContent: 'flex-start', alignItems: 'flex-start', - gridRowGap: tokens.spacingVerticalXXL, - gridAutoRows: 'max-content', }, field: { - display: 'grid', + display: 'flex', + marginTop: '4px', + marginLeft: '8px', + flexDirection: 'column', 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); +const Person = bundleIcon(Person20Filled, Person20Regular); const Dashboard = bundleIcon(Board20Filled, Board20Regular); const Announcements = bundleIcon(MegaphoneLoud20Filled, MegaphoneLoud20Regular); const EmployeeSpotlight = bundleIcon(PersonLightbulb20Filled, PersonLightbulb20Regular); @@ -120,28 +95,17 @@ export const NavDrawerDefault = (props: Partial) => { const [isOpen, setIsOpen] = React.useState(true); const [type, setType] = React.useState('inline'); - const someClickHandler = () => { - console.log('someClickHandler'); - }; - return (
- setIsOpen(open)} - size="small" - > + - - + {!isOpen && setIsOpen(true)} />}
setType(data.value as DrawerType)} aria-labelledby={labelId}>