feat(react-drawer): create DrawerBody component

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
@@ -49,9 +67,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

@@ -24,7 +24,8 @@
     "type-check": "tsc -b tsconfig.json",
     "generate-api": "just-scripts generate-api",
     "storybook": "start-storybook",
-    "start": "yarn storybook"
+    "start": "yarn storybook",
+    "test-ssr": "test-ssr ./stories/**/*.stories.tsx"
   },
   "devDependencies": {
     "@fluentui/eslint-plugin": "*",

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

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

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

@@ -4,36 +4,6 @@ import { DialogProps } from '@fluentui/react-dialog';
 
 import type { DrawerProps, DrawerState } from './Drawer.types';
 
-/**
- * @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, ...otherProps } = props;
-
-  const dialogProps = React.useMemo(() => {
-    return {
-      open,
-      onOpenChange,
-      modalType: modal ? 'modal' : 'non-modal',
-      children,
-    } as DialogProps;
-  }, [children, modal, onOpenChange, open]);
-
-  const dialogSurfaceProps = React.useMemo(() => {
-    return {
-      ...otherProps,
-      children,
-    };
-  }, [children, otherProps]);
-
-  return {
-    dialog: dialogProps,
-    dialogSurface: dialogSurfaceProps,
-  };
-};
-
 /**
  * Create the state required to render Drawer.
  *
@@ -50,8 +20,11 @@ export const useDrawer_unstable = (props: DrawerProps, ref: React.Ref<HTMLElemen
     size = 'small',
     modal = true,
     separator = false,
+    onOpenChange,
+    children,
     open: initialOpen = false,
     defaultOpen: initialDefaultOpen = false,
+    ...otherProps
   } = props;
 
   const [open] = useControllableState({
@@ -60,11 +33,19 @@ export const useDrawer_unstable = (props: DrawerProps, ref: React.Ref<HTMLElemen
     initialState: false,
   });
 
-  const { dialog, dialogSurface } = useDrawerDialogProps({
-    ...props,
-    open,
-    modal,
-  });
+  const dialogProps = React.useMemo(() => {
+    return {
+      open,
+      onOpenChange,
+      modalType: modal ? 'modal' : 'non-modal',
+      children,
+    } as DialogProps;
+  }, [children, modal, onOpenChange, open]);
+
+  const dialogSurfaceProps = {
+    ...otherProps,
+    children,
+  };
 
   return {
     components: {
@@ -76,8 +57,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.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',
+    display: 'flex',
+    flexDirection: 'column',
+    backgroundColor: tokens.colorNeutralBackground1,
+  },
+
+  overlay: {
+    position: 'fixed',
     top: 0,
     bottom: 0,
-    backgroundColor: tokens.colorNeutralBackground1,
+  },
+
+  inline: {
+    position: 'relative',
+    alignItems: 'stretch',
+    justifyContent: 'stretch',
   },
 
   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.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,18 @@
+import * as React from 'react';
+import { useDrawerBody_unstable } from './useDrawerBody';
+import { renderDrawerBody_unstable } from './renderDrawerBody';
+import { useDrawerBodyStyles_unstable } from './useDrawerBodyStyles';
+import type { DrawerBodyProps } from './DrawerBody.types';
+import type { ForwardRefComponent } from '@fluentui/react-utilities';
+
+/**
+ * DrawerBody component - TODO: add more docs
+ */
+export const DrawerBody: ForwardRefComponent<DrawerBodyProps> = React.forwardRef((props, ref) => {
+  const state = useDrawerBody_unstable(props, ref);
+
+  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';

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} />;
+};

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

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

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

@@ -0,0 +1,50 @@
+import { makeStyles, mergeClasses, shorthands } from '@griffel/react';
+import type { DrawerBodySlots, DrawerBodyState } from './DrawerBody.types';
+import type { SlotClassNames } from '@fluentui/react-utilities';
+import { tokens } from '@fluentui/react-theme';
+
+export const drawerBodyClassNames: SlotClassNames<DrawerBodySlots> = {
+  root: 'fui-DrawerBody',
+};
+
+/**
+ * Styles for the root slot
+ */
+const useStyles = makeStyles({
+  root: {
+    ...shorthands.margin('-1px', 0),
+    ...shorthands.padding('1px', tokens.spacingHorizontalXXL),
+    ...shorthands.overflow('auto'),
+    ...shorthands.flex(1),
+
+    // 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}),
+    linear-gradient(to top, ${tokens.colorNeutralStroke1}, ${tokens.colorNeutralBackground1}),
+    linear-gradient(to bottom, ${tokens.colorNeutralStroke1}, ${tokens.colorNeutralBackground1})`,
+    'background-position': 'bottom center, top center, bottom center, top center',
+    backgroundRepeat: 'no-repeat',
+    backgroundColor: tokens.colorNeutralBackground1,
+    backgroundSize: '100% 2px, 100% 2px, 100% 1px, 100% 1px',
+    backgroundAttachment: 'local, local, scroll, scroll',
+
+    ':last-child': {
+      paddingBottom: `calc(${tokens.spacingHorizontalXXL} + 1px)`,
+    },
+
+    ':first-child': {
+      paddingTop: `calc(${tokens.spacingHorizontalXXL} + 1px)`,
+    },
+  },
+});
+
+/**
+ * Apply styling to the DrawerBody slots based on the state
+ */
+export const useDrawerBodyStyles_unstable = (state: DrawerBodyState): DrawerBodyState => {
+  const styles = useStyles();
+
+  state.root.className = mergeClasses(drawerBodyClassNames.root, styles.root, state.root.className);
+
+  return state;
+};

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

@@ -9,3 +9,11 @@ export {
 } from './Drawer';
 
 export type { DrawerProps, DrawerSlots, DrawerState } from './Drawer';
+export {
+  DrawerBody,
+  drawerBodyClassNames,
+  renderDrawerBody_unstable,
+  useDrawerBodyStyles_unstable,
+  useDrawerBody_unstable,
+} from './DrawerBody';
+export type { DrawerBodyProps, DrawerBodySlots, DrawerBodyState } from './DrawerBody';

packages/react-components/react-drawer/stories/DrawerBody/DrawerBodyBestPractices.md

@@ -0,0 +1,5 @@
+## Best practices
+
+### Do
+
+### Don't