feat(react-drawer): create DrawerBody component

change/@fluentui-react-provider-d5d6ba04-fdeb-4003-be12-17ef140ed50c.json

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

change/@fluentui-react-shared-contexts-4e124152-f0bd-4310-9a56-2ce177884ec7.json

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

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

@@ -18,12 +18,30 @@ import type { SlotClassNames } from '@fluentui/react-utilities';
 // @public
 export const Drawer: ForwardRefComponent<DrawerProps>;
 
+// @public
+export const DrawerBody: ForwardRefComponent<DrawerBodyProps>;
+
+// @public (undocumented)
+export const drawerBodyClassNames: SlotClassNames<DrawerBodySlots>;
+
+// @public
+export type DrawerBodyProps = ComponentProps<DrawerBodySlots> & {};
+
+// @public (undocumented)
+export type DrawerBodySlots = {
+    root: Slot<'div'>;
+};
+
+// @public
+export type DrawerBodyState = ComponentState<DrawerBodySlots>;
+
 // @public (undocumented)
 export const drawerClassNames: SlotClassNames<DrawerSlots>;
 
 // @public
 export const drawerCSSVars: {
     size: string;
+    borderRadius: string;
 };
 
 // @public
@@ -50,9 +68,18 @@ export type DrawerState = ComponentState<DrawerSlots> & Required<Pick<DrawerProp
 // @public
 export const renderDrawer_unstable: (state: DrawerState) => JSX.Element | null;
 
+// @public
+export const renderDrawerBody_unstable: (state: DrawerBodyState) => JSX.Element;
+
 // @public
 export const useDrawer_unstable: (props: DrawerProps, ref: React_2.Ref<HTMLElement>) => DrawerState;
 
+// @public
+export const useDrawerBody_unstable: (props: DrawerBodyProps, ref: React_2.Ref<HTMLElement>) => DrawerBodyState;
+
+// @public
+export const useDrawerBodyStyles_unstable: (state: DrawerBodyState) => DrawerBodyState;
+
 // @public
 export const useDrawerStyles_unstable: (state: DrawerState) => DrawerState;
 

packages/react-components/react-drawer/package.json

@@ -36,9 +36,10 @@
   },
   "dependencies": {
     "@fluentui/react-dialog": "^9.5.3",
+    "@fluentui/react-jsx-runtime": "9.0.0-alpha.2",
+    "@fluentui/react-shared-contexts": "^9.3.3",
     "@fluentui/react-theme": "^9.1.7",
     "@fluentui/react-utilities": "^9.8.0",
-    "@fluentui/react-jsx-runtime": "9.0.0-alpha.2",
     "@griffel/react": "^1.5.2",
     "@swc/helpers": "^0.4.14"
   },

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

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

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

@@ -4,14 +4,17 @@ import { renderDrawer_unstable } from './renderDrawer';
 import { useDrawerStyles_unstable } from './useDrawerStyles.styles';
 import type { DrawerProps } from './Drawer.types';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
+import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
 
 /**
- * Drawer component - TODO: add more docs
+ * Drawer contains supplementary content and are used for complex creation, edit, or management experiences.
  */
 export const Drawer: ForwardRefComponent<DrawerProps> = React.forwardRef((props, ref) => {
   const state = useDrawer_unstable(props, ref);
 
   useDrawerStyles_unstable(state);
+  useCustomStyleHook_unstable('useDrawerStyles_unstable')(state);
+
   return renderDrawer_unstable(state);
 });
 

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

@@ -16,36 +16,6 @@ const getModalType = (modal?: DrawerProps['modal'], lightDismiss?: DrawerProps['
   return 'modal';
 };
 
-/**
- * @internal
- * Create the state required to render DrawerDialog.
- * @param props - props from this instance of Drawer
- */
-const useDrawerDialogProps = (props: DrawerProps) => {
-  const { open, onOpenChange, modal, children, lightDismiss, ...otherProps } = props;
-
-  const dialogProps = React.useMemo(() => {
-    return {
-      modalType: getModalType(modal, lightDismiss),
-      open,
-      onOpenChange,
-      children,
-    } as DialogProps;
-  }, [children, lightDismiss, modal, onOpenChange, open]);
-
-  const dialogSurfaceProps = React.useMemo(() => {
-    return {
-      ...otherProps,
-      children,
-    };
-  }, [children, otherProps]);
-
-  return {
-    dialog: dialogProps,
-    dialogSurface: dialogSurfaceProps,
-  };
-};
-
 /**
  * Create the state required to render Drawer.
  *
@@ -63,8 +33,11 @@ export const useDrawer_unstable = (props: DrawerProps, ref: React.Ref<HTMLElemen
     modal = true,
     lightDismiss = true,
     separator = false,
+    onOpenChange,
+    children,
     open: initialOpen = false,
     defaultOpen: initialDefaultOpen = false,
+    ...otherProps
   } = props;
 
   const [open] = useControllableState({
@@ -73,12 +46,19 @@ export const useDrawer_unstable = (props: DrawerProps, ref: React.Ref<HTMLElemen
     initialState: false,
   });
 
-  const { dialog, dialogSurface } = useDrawerDialogProps({
-    ...props,
-    lightDismiss,
-    open,
-    modal,
-  });
+  const dialogProps = React.useMemo(() => {
+    return {
+      modalType: getModalType(modal, lightDismiss),
+      open,
+      onOpenChange,
+      children,
+    } as DialogProps;
+  }, [children, lightDismiss, modal, onOpenChange, open]);
+
+  const dialogSurfaceProps = {
+    ...otherProps,
+    children,
+  };
 
   return {
     components: {
@@ -90,8 +70,8 @@ export const useDrawer_unstable = (props: DrawerProps, ref: React.Ref<HTMLElemen
       ...props,
     }),
 
-    dialog,
-    dialogSurface,
+    dialog: dialogProps,
+    dialogSurface: dialogSurfaceProps,
 
     type,
     open,

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

@@ -12,24 +12,39 @@ export const drawerClassNames: SlotClassNames<DrawerSlots> = {
  */
 export const drawerCSSVars = {
   size: '--fui-Drawer--size',
+  borderRadius: '--fui-Drawer--borderRadius',
 };
 
 /**
  * Styles for the root slot
  */
 const useStyles = makeStyles({
   root: {
-    ...shorthands.padding('16px'),
-    ...shorthands.borderRadius(0),
+    ...shorthands.borderRadius(`var(${drawerCSSVars.borderRadius})`),
     ...shorthands.border(0),
+    ...shorthands.overflow('hidden'),
+
+    [drawerCSSVars.borderRadius]: 0,
 
-    boxSizing: 'border-box',
     width: `var(${drawerCSSVars.size})`,
     maxWidth: 'calc(100vw - 48px)',
     height: 'auto',
+    boxSizing: 'border-box',
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'flex-start',
+    justifyContent: 'flex-start',
+    backgroundColor: tokens.colorNeutralBackground1,
+  },
+
+  overlay: {
+    position: 'fixed',
     top: 0,
     bottom: 0,
-    backgroundColor: tokens.colorNeutralBackground1,
+  },
+
+  inline: {
+    position: 'relative',
   },
 
   leftDrawer: {
@@ -42,16 +57,6 @@ const useStyles = makeStyles({
     left: 'auto',
   },
 
-  overlay: {
-    position: 'fixed',
-  },
-
-  inline: {
-    position: 'relative',
-    alignItems: 'stretch',
-    justifyContent: 'stretch',
-  },
-
   inlineSeparatorLeft: {
     ...shorthands.borderRight('1px', 'solid', tokens.colorNeutralBackground3),
   },

packages/react-components/react-drawer/src/components/DrawerBody/DrawerBody.cy.tsx

@@ -0,0 +1,48 @@
+import * as React from 'react';
+import { mount } from '@cypress/react';
+import type {} from '@cypress/react';
+import { FluentProvider } from '@fluentui/react-provider';
+import { webLightTheme } from '@fluentui/react-theme';
+import { Drawer, DrawerBody } from '@fluentui/react-drawer';
+
+const mountFluent = (element: JSX.Element) => {
+  mount(<FluentProvider theme={webLightTheme}>{element}</FluentProvider>);
+};
+
+function assertScrollPosition(element: HTMLElement, position: number) {
+  expect(element.scrollTop).to.equal(position);
+}
+
+describe('DrawerBody', () => {
+  it('render drawer body component', () => {
+    mountFluent(<DrawerBody id="drawer-body" />);
+
+    cy.get('#drawer-body').should('exist');
+  });
+
+  it('scroll drawer body', () => {
+    const Example = () => (
+      <Drawer type="inline" open style={{ height: '200px' }}>
+        <DrawerBody id="drawer-body">
+          Lorem ipsum dolor sit amet consectetur, adipisicing elit. Corrupti, animi? Quos, eum pariatur. Labore magni
+          vel doloremque reiciendis, consequatur porro explicabo similique harum illo, ad hic, earum nobis accusantium
+          quasi? Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident eligendi impedit culpa ea ipsum
+          voluptate inventore labore, delectus nam veniam dolor debitis dolorem blanditiis in, natus deleniti illo.
+          Asperiores, porro. Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellat obcaecati aperiam
+          recusandae. Pariatur dolorem cumque odit delectus voluptates ea ipsam culpa voluptate? Praesentium beatae
+          corrupti accusamus. Suscipit voluptas natus illo?
+        </DrawerBody>
+      </Drawer>
+    );
+
+    mountFluent(<Example />);
+
+    cy.get('#drawer-body')
+      .scrollTo('bottom')
+      .should($e => assertScrollPosition($e[0], $e[0].scrollHeight - $e[0].clientHeight));
+
+    cy.get('#drawer-body')
+      .scrollTo('top')
+      .should($e => assertScrollPosition($e[0], 0));
+  });
+});

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

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

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

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import { useDrawerBody_unstable } from './useDrawerBody';
+import { renderDrawerBody_unstable } from './renderDrawerBody';
+import { useDrawerBodyStyles_unstable } from './useDrawerBodyStyles.styles';
+import type { DrawerBodyProps } from './DrawerBody.types';
+import type { ForwardRefComponent } from '@fluentui/react-utilities';
+import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
+
+/**
+ * DrawerBody provides with a container for the main content of a Drawer.
+ */
+export const DrawerBody: ForwardRefComponent<DrawerBodyProps> = React.forwardRef((props, ref) => {
+  const state = useDrawerBody_unstable(props, ref);
+
+  useDrawerBodyStyles_unstable(state);
+  useCustomStyleHook_unstable('useDrawerBodyStyles_unstable')(state);
+
+  return renderDrawerBody_unstable(state);
+});
+
+DrawerBody.displayName = 'DrawerBody';

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

@@ -0,0 +1,15 @@
+import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
+
+export type DrawerBodySlots = {
+  root: Slot<'div'>;
+};
+
+/**
+ * DrawerBody Props
+ */
+export type DrawerBodyProps = ComponentProps<DrawerBodySlots> & {};
+
+/**
+ * State used in rendering DrawerBody
+ */
+export type DrawerBodyState = ComponentState<DrawerBodySlots>;

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

@@ -0,0 +1,5 @@
+export * from './DrawerBody';
+export * from './DrawerBody.types';
+export * from './renderDrawerBody';
+export * from './useDrawerBody';
+export * from './useDrawerBodyStyles.styles';

packages/react-components/react-drawer/src/components/DrawerBody/renderDrawerBody.tsx

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