feat(react-drawer): create DrawerHeader component

change/@fluentui-react-provider-8d16b583-90bc-4602-8f12-908adfa27fa2.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "feat: add style overrides for drawer components",
+  "packageName": "@fluentui/react-provider",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-shared-contexts-9885d20c-9563-4217-9582-4dea3020602a.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "feat: add style overrides for drawer components",
+  "packageName": "@fluentui/react-shared-contexts",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

packages/react-components/react-drawer/etc/react-drawer.api.md

@@ -10,6 +10,7 @@ import type { ComponentProps } from '@fluentui/react-utilities';
 import type { ComponentState } from '@fluentui/react-utilities';
 import type { DialogProps } from '@fluentui/react-dialog';
 import type { DialogSurfaceProps } from '@fluentui/react-dialog';
+import { DialogTitleSlots } from '@fluentui/react-dialog';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
 import * as React_2 from 'react';
 import type { Slot } from '@fluentui/react-utilities';
@@ -25,7 +26,7 @@ export const DrawerBody: ForwardRefComponent<DrawerBodyProps>;
 export const drawerBodyClassNames: SlotClassNames<DrawerBodySlots>;
 
 // @public
-export type DrawerBodyProps = ComponentProps<DrawerBodySlots> & {};
+export type DrawerBodyProps = ComponentProps<DrawerBodySlots>;
 
 // @public (undocumented)
 export type DrawerBodySlots = {
@@ -61,6 +62,61 @@ export type DrawerFooterSlots = {
 // @public
 export type DrawerFooterState = ComponentState<DrawerFooterSlots>;
 
+// @public
+export const DrawerHeader: ForwardRefComponent<DrawerHeaderProps>;
+
+// @public (undocumented)
+export const drawerHeaderClassNames: SlotClassNames<DrawerHeaderSlots>;
+
+// @public
+export const DrawerHeaderNavigation: ForwardRefComponent<DrawerHeaderNavigationProps>;
+
+// @public (undocumented)
+export const drawerHeaderNavigationClassNames: SlotClassNames<DrawerHeaderNavigationSlots>;
+
+// @public
+export type DrawerHeaderNavigationProps = ComponentProps<DrawerHeaderNavigationSlots>;
+
+// @public (undocumented)
+export type DrawerHeaderNavigationSlots = {
+    root: Slot<'nav'>;
+};
+
+// @public
+export type DrawerHeaderNavigationState = ComponentState<DrawerHeaderNavigationSlots>;
+
+// @public
+export type DrawerHeaderProps = ComponentProps<DrawerHeaderSlots>;
+
+// @public (undocumented)
+export type DrawerHeaderSlots = {
+    root: Slot<'header'>;
+};
+
+// @public
+export type DrawerHeaderState = ComponentState<DrawerHeaderSlots>;
+
+// @public
+export const DrawerHeaderTitle: ForwardRefComponent<DrawerHeaderTitleProps>;
+
+// @public (undocumented)
+export const drawerHeaderTitleClassNames: SlotClassNames<DrawerHeaderTitleSlots>;
+
+// @public
+export type DrawerHeaderTitleProps = ComponentProps<DrawerHeaderTitleSlots> & {
+    children: React_2.ReactNode | undefined;
+};
+
+// @public (undocumented)
+export type DrawerHeaderTitleSlots = {
+    root: Slot<'div'>;
+    heading?: DialogTitleSlots['root'];
+    action?: DialogTitleSlots['action'];
+};
+
+// @public
+export type DrawerHeaderTitleState = ComponentState<DrawerHeaderTitleSlots>;
+
 // @public
 export type DrawerProps = ComponentProps<Partial<DrawerSlots>> & {
     position?: 'left' | 'right';
@@ -91,6 +147,15 @@ export const renderDrawerBody_unstable: (state: DrawerBodyState) => JSX.Element;
 // @public
 export const renderDrawerFooter_unstable: (state: DrawerFooterState) => JSX.Element;
 
+// @public
+export const renderDrawerHeader_unstable: (state: DrawerHeaderState) => JSX.Element;
+
+// @public
+export const renderDrawerHeaderNavigation_unstable: (state: DrawerHeaderNavigationState) => JSX.Element;
+
+// @public
+export const renderDrawerHeaderTitle_unstable: (state: DrawerHeaderTitleState) => JSX.Element;
+
 // @public
 export const useDrawer_unstable: (props: DrawerProps, ref: React_2.Ref<HTMLElement>) => DrawerState;
 
@@ -106,6 +171,24 @@ export const useDrawerFooter_unstable: (props: DrawerFooterProps, ref: React_2.R
 // @public
 export const useDrawerFooterStyles_unstable: (state: DrawerFooterState) => DrawerFooterState;
 
+// @public
+export const useDrawerHeader_unstable: (props: DrawerHeaderProps, ref: React_2.Ref<HTMLElement>) => DrawerHeaderState;
+
+// @public
+export const useDrawerHeaderNavigation_unstable: (props: DrawerHeaderNavigationProps, ref: React_2.Ref<HTMLElement>) => DrawerHeaderNavigationState;
+
+// @public
+export const useDrawerHeaderNavigationStyles_unstable: (state: DrawerHeaderNavigationState) => DrawerHeaderNavigationState;
+
+// @public
+export const useDrawerHeaderStyles_unstable: (state: DrawerHeaderState) => DrawerHeaderState;
+
+// @public
+export const useDrawerHeaderTitle_unstable: (props: DrawerHeaderTitleProps, ref: React_2.Ref<HTMLElement>) => DrawerHeaderTitleState;
+
+// @public
+export const useDrawerHeaderTitleStyles_unstable: (state: DrawerHeaderTitleState) => DrawerHeaderTitleState;
+
 // @public
 export const useDrawerStyles_unstable: (state: DrawerState) => DrawerState;
 

packages/react-components/react-drawer/src/DrawerHeader.ts

@@ -0,0 +1 @@
+export * from './components/DrawerHeader/index';

packages/react-components/react-drawer/src/DrawerHeaderNavigation.ts

@@ -0,0 +1 @@
+export * from './components/DrawerHeaderNavigation/index';

packages/react-components/react-drawer/src/DrawerHeaderTitle.ts

@@ -0,0 +1 @@
+export * from './components/DrawerHeaderTitle/index';

packages/react-components/react-drawer/src/components/Drawer/Drawer.types.ts

@@ -45,8 +45,8 @@ export type DrawerProps = ComponentProps<Partial<DrawerSlots>> & {
 
   /**
    * When this is set, the rest of the page is dimmed out and cannot be interacted with.
-   * The tab sequence is kept within the dialog and moving the focus outside
-   * the dialog will imply closing it. This is the default type of the component.
+   * The tab sequence is kept within the drawer and moving the focus outside
+   * the drawer will imply closing it. This is the default type of the component.
    * This prop is only used when `type` is `overlay`.
    *
    * @defaultvalue true

packages/react-components/react-drawer/src/components/Drawer/useDrawerStyles.styles.ts

@@ -20,14 +20,15 @@ export const drawerCSSVars = {
  */
 const useStyles = makeStyles({
   root: {
+    ...shorthands.padding(0),
+    ...shorthands.overflow('hidden'),
     ...shorthands.borderRadius(`var(${drawerCSSVars.borderRadius})`),
     ...shorthands.border(0),
-    ...shorthands.overflow('hidden'),
 
     [drawerCSSVars.borderRadius]: 0,
 
     width: `var(${drawerCSSVars.size})`,
-    maxWidth: 'calc(100vw - 48px)',
+    maxWidth: '100vw',
     height: 'auto',
     boxSizing: 'border-box',
     display: 'flex',

packages/react-components/react-drawer/src/components/DrawerBody/DrawerBody.types.ts

@@ -7,7 +7,7 @@ export type DrawerBodySlots = {
 /**
  * DrawerBody Props
  */
-export type DrawerBodyProps = ComponentProps<DrawerBodySlots> & {};
+export type DrawerBodyProps = ComponentProps<DrawerBodySlots>;
 
 /**
  * State used in rendering DrawerBody

packages/react-components/react-drawer/src/components/DrawerBody/useDrawerBodyStyles.styles.ts

@@ -17,6 +17,8 @@ const useStyles = makeStyles({
     ...shorthands.overflow('auto'),
     ...shorthands.flex(1),
 
+    alignSelf: 'stretch',
+
     // A "good hack" to display top and bottom borders based on the scroll position
     backgroundImage: `linear-gradient(to top, ${tokens.colorNeutralBackground1}, ${tokens.colorNeutralBackground1}),
     linear-gradient(to top, ${tokens.colorNeutralBackground1}, ${tokens.colorNeutralBackground1}),

packages/react-components/react-drawer/src/components/DrawerHeader/DrawerHeader.test.tsx

@@ -0,0 +1,24 @@
+import * as React from 'react';
+import { render } from '@testing-library/react';
+import { DrawerHeader } from './DrawerHeader';
+import { isConformant } from '../../testing/isConformant';
+
+describe('DrawerHeader', () => {
+  isConformant({
+    Component: DrawerHeader,
+    displayName: 'DrawerHeader',
+  });
+
+  it('renders a default state', () => {
+    const result = render(<DrawerHeader>Default DrawerHeader</DrawerHeader>);
+    expect(result.container).toMatchInlineSnapshot(`
+      <div>
+        <header
+          class="fui-DrawerHeader"
+        >
+          Default DrawerHeader
+        </header>
+      </div>
+    `);
+  });
+});

packages/react-components/react-drawer/src/components/DrawerHeader/DrawerHeader.tsx

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import { useDrawerHeader_unstable } from './useDrawerHeader';
+import { renderDrawerHeader_unstable } from './renderDrawerHeader';
+import { useDrawerHeaderStyles_unstable } from './useDrawerHeaderStyles';
+import type { DrawerHeaderProps } from './DrawerHeader.types';
+import type { ForwardRefComponent } from '@fluentui/react-utilities';
+import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
+
+/**
+ * DrawerHeader provides a structured header for the drawer component.
+ */
+export const DrawerHeader: ForwardRefComponent<DrawerHeaderProps> = React.forwardRef((props, ref) => {
+  const state = useDrawerHeader_unstable(props, ref);
+
+  useDrawerHeaderStyles_unstable(state);
+  useCustomStyleHook_unstable('useDrawerHeaderStyles_unstable')(state);
+
+  return renderDrawerHeader_unstable(state);
+});
+
+DrawerHeader.displayName = 'DrawerHeader';

packages/react-components/react-drawer/src/components/DrawerHeader/DrawerHeader.types.ts

@@ -0,0 +1,18 @@
+import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
+
+export type DrawerHeaderSlots = {
+  /**
+   * The root of the DrawerHeader.
+   */
+  root: Slot<'header'>;
+};
+
+/**
+ * DrawerHeader Props
+ */
+export type DrawerHeaderProps = ComponentProps<DrawerHeaderSlots>;
+
+/**
+ * State used in rendering DrawerHeader
+ */
+export type DrawerHeaderState = ComponentState<DrawerHeaderSlots>;

packages/react-components/react-drawer/src/components/DrawerHeader/index.ts

@@ -0,0 +1,5 @@
+export * from './DrawerHeader';
+export * from './DrawerHeader.types';
+export * from './renderDrawerHeader';
+export * from './useDrawerHeader';
+export * from './useDrawerHeaderStyles';

packages/react-components/react-drawer/src/components/DrawerHeader/renderDrawerHeader.tsx

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import { getSlots } from '@fluentui/react-utilities';
+import type { DrawerHeaderState, DrawerHeaderSlots } from './DrawerHeader.types';
+
+/**
+ * Render the final JSX of DrawerHeader
+ */
+export const renderDrawerHeader_unstable = (state: DrawerHeaderState) => {
+  const { slots, slotProps } = getSlots<DrawerHeaderSlots>(state);
+
+  return <slots.root {...slotProps.root} />;
+};

packages/react-components/react-drawer/src/components/DrawerHeader/useDrawerHeader.ts

@@ -0,0 +1,25 @@
+import * as React from 'react';
+import { getNativeElementProps } from '@fluentui/react-utilities';
+import type { DrawerHeaderProps, DrawerHeaderState } from './DrawerHeader.types';
+
+/**
+ * Create the state required to render DrawerHeader.
+ *
+ * The returned state can be modified with hooks such as useDrawerHeaderStyles_unstable,
+ * before being passed to renderDrawerHeader_unstable.
+ *
+ * @param props - props from this instance of DrawerHeader
+ * @param ref - reference to root HTMLElement of DrawerHeader
+ */
+export const useDrawerHeader_unstable = (props: DrawerHeaderProps, ref: React.Ref<HTMLElement>): DrawerHeaderState => {
+  return {
+    components: {
+      root: 'header',
+    },
+
+    root: getNativeElementProps('header', {
+      ref,
+      ...props,
+    }),
+  };
+};

packages/react-components/react-drawer/src/components/DrawerHeader/useDrawerHeaderStyles.ts

@@ -0,0 +1,33 @@
+import { makeStyles, mergeClasses, shorthands } from '@griffel/react';
+import type { DrawerHeaderSlots, DrawerHeaderState } from './DrawerHeader.types';
+import type { SlotClassNames } from '@fluentui/react-utilities';
+import { tokens } from '@fluentui/react-theme';
+
+export const drawerHeaderClassNames: SlotClassNames<DrawerHeaderSlots> = {
+  root: 'fui-DrawerHeader',
+};
+
+/**
+ * Styles for the root slot
+ */
+const useStyles = makeStyles({
+  root: {
+    ...shorthands.padding(tokens.spacingVerticalXXL, tokens.spacingHorizontalXXL, tokens.spacingVerticalS),
+    ...shorthands.gap(tokens.spacingHorizontalS),
+
+    alignSelf: 'stretch',
+    display: 'flex',
+    flexDirection: 'column',
+  },
+});
+
+/**
+ * Apply styling to the DrawerHeader slots based on the state
+ */
+export const useDrawerHeaderStyles_unstable = (state: DrawerHeaderState): DrawerHeaderState => {
+  const styles = useStyles();
+
+  state.root.className = mergeClasses(drawerHeaderClassNames.root, styles.root, state.root.className);
+
+  return state;
+};

packages/react-components/react-drawer/src/components/DrawerHeaderNavigation/DrawerHeaderNavigation.test.tsx

@@ -0,0 +1,26 @@
+import * as React from 'react';
+import { render } from '@testing-library/react';
+import { DrawerHeaderNavigation } from './DrawerHeaderNavigation';
+import { isConformant } from '../../testing/isConformant';
+
+describe('DrawerHeaderNavigation', () => {
+  isConformant({
+    Component: DrawerHeaderNavigation,
+    displayName: 'DrawerHeaderNavigation',
+  });
+
+  // TODO add more tests here, and create visual regression tests in /apps/vr-tests
+
+  it('renders a default state', () => {
+    const result = render(<DrawerHeaderNavigation>Default DrawerHeaderNavigation</DrawerHeaderNavigation>);
+    expect(result.container).toMatchInlineSnapshot(`
+      <div>
+        <nav
+          class="fui-DrawerHeaderNavigation"
+        >
+          Default DrawerHeaderNavigation
+        </nav>
+      </div>
+    `);
+  });
+});

packages/react-components/react-drawer/src/components/DrawerHeaderNavigation/DrawerHeaderNavigation.tsx

@@ -0,0 +1,23 @@
+import * as React from 'react';
+import { useDrawerHeaderNavigation_unstable } from './useDrawerHeaderNavigation';
+import { renderDrawerHeaderNavigation_unstable } from './renderDrawerHeaderNavigation';
+import { useDrawerHeaderNavigationStyles_unstable } from './useDrawerHeaderNavigationStyles.styles';
+import type { DrawerHeaderNavigationProps } from './DrawerHeaderNavigation.types';
+import type { ForwardRefComponent } from '@fluentui/react-utilities';
+import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
+
+/**
+ * DrawerHeaderNavigation provides a header navigation area for the Drawer.
+ */
+export const DrawerHeaderNavigation: ForwardRefComponent<DrawerHeaderNavigationProps> = React.forwardRef(
+  (props, ref) => {
+    const state = useDrawerHeaderNavigation_unstable(props, ref);
+
+    useDrawerHeaderNavigationStyles_unstable(state);
+    useCustomStyleHook_unstable('useDrawerHeaderNavigationStyles_unstable')(state);
+
+    return renderDrawerHeaderNavigation_unstable(state);
+  },
+);
+
+DrawerHeaderNavigation.displayName = 'DrawerHeaderNavigation';