LG-5043: Drawer layout

packages/drawer/README.md

@@ -26,7 +26,9 @@ npm install @leafygreen-ui/drawer
 
 ## Example
 
-### Single Overlay Drawer
+### Single Overlay Drawer without Toolbar
+
+#### Without `OverlayDrawerLayout`
 
 ```tsx
 import React, { useState } from 'react';
@@ -59,7 +61,35 @@ function ExampleComponent() {
 }
 ```
 
-### Multiple Overlay Drawers
+or
+
+#### With `OverlayDrawerLayout`
+
+```tsx
+function ExampleComponent() {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <DrawerStackProvider>
+      <OverlayDrawerLayout>
+        <Button onClick={() => setOpen(prevOpen => !prevOpen)}>
+          Open Drawer
+        </Button>
+        <Drawer
+          displayMode={DisplayMode.Overlay}
+          onClose={() => setOpen(false)}
+          open={open}
+          title="Drawer Title"
+        >
+          content
+        </Drawer>
+      </OverlayDrawerLayout>
+    </DrawerStackProvider>
+  );
+}
+```
+
+### Multiple Overlay Drawers without Toolbar
 
 ```tsx
 import React, { useState } from 'react';
@@ -104,7 +134,11 @@ function ExampleComponent() {
 }
 ```
 
-### Embedded Drawer
+### Overlay Drawer with Toolbar
+
+// TODO: in separate PR
+
+### Embedded Drawer without Toolbar
 
 ```tsx
 import React, { useState } from 'react';
@@ -142,6 +176,10 @@ function ExampleComponent() {
 }
 ```
 
+### Embedded Drawer with Toolbar
+
+// TODO: in separate PR
+
 ## Properties
 
 ### Drawer
@@ -156,9 +194,24 @@ function ExampleComponent() {
 
 ### EmbeddedDrawerLayout
 
+Use `EmbeddedDrawerLayout` when you need an embedded `Drawer` within a specific container.
+
 | Prop           | Type      | Description                                           | Default |
 | -------------- | --------- | ----------------------------------------------------- | ------- |
 | `isDrawerOpen` | `boolean` | Determines if the `Drawer` instance is open or closed |         |
+| `hasToolbar`   | `boolean` | Determines if the `Toolbar` is present in the layout  | `false` |
+
+### OverlayDrawerLayout
+
+Use `OverlayDrawerLayout` when you need an overlay `Drawer` that is positioned relative to a specific container rather than the entire app. The `OverlayDrawerLayout` adds `position: relative` to its container, ensuring the `Drawer` overlays only its parent element. If the `Drawer` should overlay the entire application, this layout is not necessary.
+
+| Prop         | Type      | Description                                          | Default |
+| ------------ | --------- | ---------------------------------------------------- | ------- |
+| `hasToolbar` | `boolean` | Determines if the `Toolbar` is present in the layout | `false` |
+
+## DrawerToolbarLayout
+
+// TODO: Add in separate PR
 
 # Test Harnesses
 
@@ -240,10 +293,11 @@ const { findDrawer, getCloseButtonUtils, getDrawer, isOpen, queryDrawer } =
   getTestUtils();
 ```
 
-| Util                  | Description                                                                                                                                               | Returns                                                                                                                  |
+// TODO: toolbar utils in a separate PR
+| Util | Description | Returns |
 | --------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------ |
-| `findDrawer`          | Returns a promise that resolves to the drawer element. The promise is rejected if no elements match or if more than one match is found.                   | `Promise<HTMLDialogElement>` \| `Promise<HTMLDivElement>`                                                                |
-| `getCloseButtonUtils` | Returns the button test utils for the close button                                                                                                        | [Button test utils return type](https://github.com/mongodb/leafygreen-ui/blob/main/packages/button/README.md#test-utils) |
-| `getDrawer`           | Returns the drawer element and throws if no elements match or if more than one match is found.                                                            | `HTMLDivElement`                                                                                                         |
-| `isOpen`              | Checks the `aria-hidden` attribute and that the drawer element is visible based on CSS properties for `display`, `opacity`, `transform`, and `visibility` | `boolean`                                                                                                                |
-| `queryDrawer`         | Returns the drawer element or `null` if no elements match and throws if more than one match is found.                                                     | `HTMLDivElement`                                                                                                         |
+| `findDrawer` | Returns a promise that resolves to the drawer element. The promise is rejected if no elements match or if more than one match is found. | `Promise<HTMLDialogElement>` \| `Promise<HTMLDivElement>` |
+| `getCloseButtonUtils` | Returns the button test utils for the close button | [Button test utils return type](https://github.com/mongodb/leafygreen-ui/blob/main/packages/button/README.md#test-utils) |
+| `getDrawer` | Returns the drawer element and throws if no elements match or if more than one match is found. | `HTMLDivElement` |
+| `isOpen` | Checks the `aria-hidden` attribute and that the drawer element is visible based on CSS properties for `display`, `opacity`, `transform`, and `visibility` | `boolean` |
+| `queryDrawer` | Returns the drawer element or `null` if no elements match and throws if more than one match is found. | `HTMLDivElement` |

packages/drawer/package.json

@@ -25,6 +25,7 @@
     "@leafygreen-ui/polymorphic": "workspace:^",
     "@leafygreen-ui/tabs": "workspace:^",
     "@leafygreen-ui/tokens": "workspace:^",
+    "@leafygreen-ui/toolbar": "workspace:^",
     "@leafygreen-ui/typography": "workspace:^",
     "@lg-tools/test-harnesses": "workspace:^",
     "polished": "^4.2.2",

packages/drawer/src/Drawer.stories.tsx

@@ -9,12 +9,14 @@ import { StoryFn, StoryObj } from '@storybook/react';
 
 import Button from '@leafygreen-ui/button';
 import { css } from '@leafygreen-ui/emotion';
+import { palette } from '@leafygreen-ui/palette';
 import { spacing } from '@leafygreen-ui/tokens';
 import { Body } from '@leafygreen-ui/typography';
 
 import { DisplayMode, Drawer, DrawerProps } from './Drawer';
 import { DrawerStackProvider } from './DrawerStackContext';
 import { EmbeddedDrawerLayout } from './EmbeddedDrawerLayout';
+import { OverlayDrawerLayout } from './OverlayDrawerLayout';
 
 const SEED = 0;
 faker.seed(SEED);
@@ -25,6 +27,13 @@ const defaultExcludedControls = [
   'open',
 ];
 
+const snapshotStoryExcludedControlParams = [
+  ...defaultExcludedControls,
+  'darkMode',
+  'displayMode',
+  'title',
+];
+
 export default {
   title: 'Components/Drawer',
   component: Drawer,
@@ -33,9 +42,11 @@ export default {
       <div
         className={css`
           height: 100%;
-          width: 100%;
           display: flex;
           align-items: center;
+          margin: -100px;
+          width: 100vw;
+          border-bottom: 3px solid ${palette.green.base}; // Used to visualize the height of the parent container
         `}
       >
         <StoryFn />
@@ -69,7 +80,7 @@ export default {
 const LongContent = () => {
   const paragraphs = useMemo(() => {
     return faker.lorem
-      .paragraphs(20, '\n')
+      .paragraphs(30, '\n')
       .split('\n')
       .map((p, i) => <Body key={i}>{p}</Body>);
   }, []);
@@ -115,7 +126,7 @@ const TemplateComponent: StoryFn<DrawerProps> = ({
     <DrawerStackProvider>
       <EmbeddedDrawerLayout
         className={css`
-          height: 500px;
+          height: 90vh;
         `}
         isDrawerOpen={open}
       >
@@ -137,9 +148,29 @@ const TemplateComponent: StoryFn<DrawerProps> = ({
     </DrawerStackProvider>
   ) : (
     <DrawerStackProvider>
-      <div>
-        {renderTrigger()}
-        {renderDrawer()}
+      <div
+        className={css`
+          height: 90vh;
+          overflow: auto;
+          width: 100%;
+        `}
+      >
+        <OverlayDrawerLayout>
+          <main
+            className={css`
+              padding: ${spacing[400]}px;
+              overflow: auto;
+              display: flex;
+              flex-direction: column;
+              align-items: flex-start;
+              gap: ${spacing[200]}px;
+            `}
+          >
+            {renderTrigger()}
+            <LongContent />
+          </main>
+          {renderDrawer()}
+        </OverlayDrawerLayout>
       </div>
     </DrawerStackProvider>
   );
@@ -149,7 +180,6 @@ export const LiveExample: StoryObj<DrawerProps> = {
   render: TemplateComponent,
   args: {
     children: <LongContent />,
-    initialOpen: false,
   },
   parameters: {
     chromatic: {
@@ -228,13 +258,6 @@ export const MultipleDrawers: StoryObj<DrawerProps> = {
   },
 };
 
-const snapshotStoryExcludedControlParams = [
-  ...defaultExcludedControls,
-  'darkMode',
-  'displayMode',
-  'title',
-];
-
 export const LightModeOverlay: StoryObj<DrawerProps> = {
   render: TemplateComponent,
   args: {

packages/drawer/src/Drawer/Drawer.constants.ts

@@ -1,3 +1,4 @@
 export const HEADER_HEIGHT = 48;
 export const MOBILE_BREAKPOINT = 390;
 export const PANEL_WIDTH = 432;
+export const TOOLBAR_WIDTH = 48;