Drawer w/ toolbar updates (#2917)

* add disabled option for toolbar

* update title prop from string to reactnode

* add changeset

* update changesets

* adding timeout to fix snapshot

* update tests

Author: shaneeza

.changeset/brave-icons-taste.md

@@ -0,0 +1,26 @@
+---
+'@leafygreen-ui/drawer': patch
+---
+
+- Updates `DrawerLayout` to accept the `disabled` property in `toolbarData` prop
+
+  ```js
+  <DrawerLayout
+    toolbarData={[
+      {
+        ...,
+        disabled: true, // This drawer item is disabled
+      },
+    ]}
+  ```
+- Updates `DrawerLayout` to support `ReactNode` for the `title` property in `toolbarData` prop
+
+  ```js
+  <DrawerLayout
+    toolbarData={[
+      {
+        ...,
+        title: <span>Custom Title</span>, // This allows for custom React nodes as titles
+      },
+    ]}
+  ```

packages/drawer/src/DrawerToolbarLayout/DrawerToolbarLayout.interactions.stories.tsx

@@ -18,6 +18,11 @@ import { getTestUtils } from '../testing';
 import { DrawerToolbarLayout } from './DrawerToolbarLayout';
 import { DrawerToolbarLayoutProps } from './DrawerToolbarLayout.types';
 
+// The tooltip sometimes lingers after the drawer closes, which can cause
+// snapshot tests to fail if the tooltip is not in the correct position.
+// Setting a delay of 1 second allows the tooltip to be in the correct position
+const TOOLTIP_SNAPSHOT_DELAY = 1000; // ms
+
 const SEED = 0;
 faker.seed(SEED);
 
@@ -163,6 +168,8 @@ export const OverlayOpensFirstToolbarItem: StoryObj<DrawerToolbarLayoutProps> =
         expect(isOpen()).toBe(true);
         expect(canvas.getByText('Code Title')).toBeVisible();
       });
+      // Pause so the tooltip is in the correct position in the snapshot
+      await new Promise(resolve => setTimeout(resolve, TOOLTIP_SNAPSHOT_DELAY));
     },
   };
 
@@ -189,9 +196,6 @@ export const OverlaySwitchesToolbarItems: StoryObj<DrawerToolbarLayoutProps> = {
     });
 
     userEvent.unhover(codeButton!);
-    // Pause so the change is visible in the story
-    await new Promise(resolve => setTimeout(resolve, 1000));
-
     userEvent.click(dashboardButton!);
 
     await waitFor(() => {
@@ -221,12 +225,12 @@ export const OverlayClosesDrawer: StoryObj<DrawerToolbarLayoutProps> = {
       expect(isOpen()).toBe(true);
       expect(canvas.getByText('Code Title')).toBeVisible();
     });
-    // Pause so the change is visible in the story
-    await new Promise(resolve => setTimeout(resolve, 1000));
 
     userEvent.click(closeButton);
 
     await waitFor(() => expect(isOpen()).toBe(false));
+    // Pause so the tooltip is in the correct position in the snapshot
+    await new Promise(resolve => setTimeout(resolve, TOOLTIP_SNAPSHOT_DELAY));
   },
 };
 
@@ -250,6 +254,8 @@ export const EmbeddedOpensFirstToolbarItem: StoryObj<DrawerToolbarLayoutProps> =
         expect(isOpen()).toBe(true);
         expect(canvas.getByText('Code Title')).toBeVisible();
       });
+      // Pause so the tooltip is in the correct position in the snapshot
+      await new Promise(resolve => setTimeout(resolve, TOOLTIP_SNAPSHOT_DELAY));
     },
   };
 
@@ -277,9 +283,6 @@ export const EmbeddedSwitchesToolbarItems: StoryObj<DrawerToolbarLayoutProps> =
       });
 
       userEvent.unhover(codeButton!);
-      // Pause so the change is visible in the story
-      await new Promise(resolve => setTimeout(resolve, 1000));
-
       userEvent.click(dashboardButton!);
 
       await waitFor(() =>
@@ -308,11 +311,11 @@ export const EmbeddedClosesDrawer: StoryObj<DrawerToolbarLayoutProps> = {
       expect(isOpen()).toBe(true);
       expect(canvas.getByText('Code Title')).toBeVisible();
     });
-    // Pause so the change is visible in the story
-    await new Promise(resolve => setTimeout(resolve, 1000));
 
     userEvent.click(closeButton!);
 
     await waitFor(() => expect(isOpen()).toBe(false));
+    // Pause so the tooltip is in the correct position in the snapshot
+    await new Promise(resolve => setTimeout(resolve, TOOLTIP_SNAPSHOT_DELAY));
   },
 };

packages/drawer/src/DrawerToolbarLayout/DrawerToolbarLayout.stories.tsx

@@ -197,6 +197,12 @@ const DRAWER_TOOLBAR_DATA: DrawerLayoutProps['toolbarData'] = [
       console.log('Plus clicked, does not update drawer');
     },
   },
+  {
+    id: 'Sparkle',
+    label: 'Disabled item',
+    glyph: 'Sparkle',
+    disabled: true,
+  },
 ];
 
 const Component: StoryFn<DrawerLayoutProps> = ({

packages/drawer/src/DrawerToolbarLayout/DrawerToolbarLayout.types.ts

@@ -8,7 +8,7 @@ import { DrawerProps } from '../Drawer/Drawer.types';
 type PickedOptionalDrawerProps = Pick<DrawerProps, 'onClose' | 'displayMode'>;
 type PickedRequiredToolbarIconButtonProps = Pick<
   ToolbarIconButtonProps,
-  'glyph' | 'label' | 'onClick'
+  'glyph' | 'label' | 'onClick' | 'disabled'
 >;
 
 interface LayoutBase extends PickedRequiredToolbarIconButtonProps {
@@ -22,7 +22,7 @@ interface LayoutWithContent extends LayoutBase {
   /**
    * The title of the drawer. This is not required if the toolbar item should not open a drawer.
    */
-  title: string;
+  title: React.ReactNode;
 
   /**
    * The content of the drawer. This is not required if the toolbar item should not open a drawer.

packages/drawer/src/DrawerToolbarLayout/DrawerToolbarLayoutContainer.tsx

@@ -91,6 +91,7 @@ export const DrawerToolbarLayoutContainer = forwardRef<
                   );
                 }}
                 active={toolbarItem.id === id}
+                disabled={toolbarItem.disabled}
               />
             ))}
           </Toolbar>

packages/drawer/src/DrawerWithToolbarWrapper/DrawerWithToolbarWrapper.styles.ts

@@ -18,7 +18,7 @@ const drawerIn = keyframes`
   from {
     // Because of .show() and .close() in the drawer component, transitioning from 0px to (x)px does not transition correctly. Using 1px along with css animations is a workaround to get the animation to work.
     grid-template-columns: ${TOOLBAR_WIDTH}px 1px;
-  },
+  }
   to {
     grid-template-columns: ${TOOLBAR_WIDTH}px ${PANEL_WIDTH}px;
   }
@@ -27,7 +27,7 @@ const drawerIn = keyframes`
 const drawerOut = keyframes`
   from {
     grid-template-columns: ${TOOLBAR_WIDTH}px ${PANEL_WIDTH}px;
-  },
+  }
   to {
     grid-template-columns: ${TOOLBAR_WIDTH}px 0px;
   }
@@ -38,7 +38,7 @@ const drawerOutMobile = keyframes`
     grid-template-columns: ${TOOLBAR_WIDTH}px calc(100vw - ${
   TOOLBAR_WIDTH * 2
 }px);
-  },
+  }
   to {
     grid-template-columns: ${TOOLBAR_WIDTH}px 0px;
   }
@@ -47,7 +47,7 @@ const drawerOutMobile = keyframes`
 const drawerInMobile = keyframes`
   from {
     grid-template-columns: ${TOOLBAR_WIDTH}px 1px;
-  },
+  }
   to {
     grid-template-columns: ${TOOLBAR_WIDTH}px calc(100vw - ${
   TOOLBAR_WIDTH * 2