[LG-5481] feat(drawer): toggle drawer based on toolbar item visibility

.changeset/violet-drinks-smell.md

@@ -0,0 +1,6 @@
+---
+'@leafygreen-ui/drawer': patch
+---
+
+Fixes bug where the drawer would not close when the active toolbar item became hidden.
+When a drawer with a toolbar is open and its corresponding active toolbar item's visibility is set to false, the drawer will now automatically close. 

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

@@ -1,4 +1,4 @@
 import React, { useState } from 'react';
 import { storybookExcludedControlParams } from '@lg-tools/storybook-utils';
 import { StoryFn, StoryObj } from '@storybook/react';
 import { expect, userEvent, waitFor, within } from '@storybook/test';
@@ -17,14 +17,11 @@
 import {
   getDrawerToolbarData,
   LongContent,
+  useToolbarData,
 } from './DrawerToolbarLayout.testutils';
 import { DrawerToolbarLayoutProps } from './DrawerToolbarLayout.types';
 
 const DRAWER_TOOLBAR_DATA = getDrawerToolbarData({ hasStaticContent: true });
-const DRAWER_TOOLBAR_DATA_NOT_VISIBLE = getDrawerToolbarData({
-  hasStaticContent: true,
-  isToolbarHidden: true,
-});
 
 // The tooltip sometimes lingers after the drawer closes, which can cause
 // snapshot tests to fail if the tooltip is not in the correct position.
@@ -112,7 +109,8 @@
 > = ({
   displayMode = DisplayMode.Embedded,
 }: DrawerToolbarLayoutPropsWithDisplayMode) => {
-  const [toolbarData, setToolbarData] = useState(DRAWER_TOOLBAR_DATA);
+  const { toolbarData, setHasToolbarData, setHasHiddenToolbarItem } =
+    useToolbarData(DRAWER_TOOLBAR_DATA);
 
   const MainContent = () => {
     const { openDrawer } = useDrawerToolbarContext();
@@ -124,17 +122,12 @@
         `}
       >
         <Button onClick={() => openDrawer('Code')}>Open Code Drawer</Button>
-        <Button
-          onClick={() =>
-            setToolbarData(prevData =>
-              prevData === DRAWER_TOOLBAR_DATA
-                ? DRAWER_TOOLBAR_DATA_NOT_VISIBLE
-                : DRAWER_TOOLBAR_DATA,
-            )
-          }
-        >
+        <Button onClick={() => setHasToolbarData(prev => !prev)}>
           Toggle Toolbar visibility
         </Button>
+        <Button onClick={() => setHasHiddenToolbarItem(prev => !prev)}>
+          Toggle Toolbar item
+        </Button>
         <LongContent />
         <LongContent />
       </main>
@@ -250,6 +243,99 @@
     },
   };
 
+export const OverlayRemovesToolbarWhenAllItemsAreHidden: StoryObj<DrawerToolbarLayoutPropsWithDisplayMode> =
+  {
+    render: (args: DrawerToolbarLayoutPropsWithDisplayMode) => (
+      <TemplateWithToolbarToggle {...args} />
+    ),
+    args: {
+      displayMode: DisplayMode.Overlay,
+    },
+    play: async ({ canvasElement }) => {
+      const canvas = within(canvasElement);
+      const { getToolbarTestUtils, isOpen } = getTestUtils();
+      const { getToolbarIconButtonByLabel, queryToolbar } =
+        getToolbarTestUtils();
+
+      // Verify toolbar is initially visible
+      const toolbar = queryToolbar();
+      expect(toolbar).toBeInTheDocument();
+
+      const codeButton = getToolbarIconButtonByLabel('Code')?.getElement();
+      expect(codeButton).toBeInTheDocument();
+
+      // Open the drawer
+      expect(isOpen()).toBe(false);
+      userEvent.click(codeButton!);
+
+      await waitFor(() => {
+        expect(isOpen()).toBe(true);
+        expect(canvas.getByText('Code Title')).toBeVisible();
+      });
+
+      // Click the toggle button to hide toolbar
+      const toggleButton = canvas.getByText('Toggle Toolbar visibility');
+      userEvent.click(toggleButton);
+
+      // Verify toolbar element is removed but drawer remains open
+      await waitFor(() => {
+        const hiddenToolbar = queryToolbar();
+        expect(hiddenToolbar).not.toBeInTheDocument();
+        expect(isOpen()).toBe(true);
+        expect(canvas.getByText('Code Title')).toBeVisible();
+      });
+    },
+  };
+
+export const OverlayClosesDrawerWhenActiveItemIsHidden: StoryObj<DrawerToolbarLayoutPropsWithDisplayMode> =
+  {
+    render: (args: DrawerToolbarLayoutPropsWithDisplayMode) => (
+      <TemplateWithToolbarToggle {...args} />
+    ),
+    args: {
+      displayMode: DisplayMode.Overlay,
+    },
+    play: async ({ canvasElement }) => {
+      const canvas = within(canvasElement);
+      const { getToolbarTestUtils, isOpen } = getTestUtils();
+      const {
+        getToolbarIconButtonByLabel,
+        queryToolbar,
+        getAllToolbarIconButtons,
+      } = getToolbarTestUtils();
+
+      // Verify toolbar is initially visible
+      const toolbar = queryToolbar();
+      expect(toolbar).toBeInTheDocument();
+      expect(getAllToolbarIconButtons().length).toBe(5);
+
+      const activeButton = getToolbarIconButtonByLabel('Apps')?.getElement();
+      expect(activeButton).toBeInTheDocument();
+
+      // Open the drawer
+      expect(isOpen()).toBe(false);
+      userEvent.click(activeButton!);
+
+      await waitFor(() => {
+        expect(isOpen()).toBe(true);
+        expect(canvas.getByText('Apps Title')).toBeVisible();
+      });
+
+      // Click the toggle button remove 'Apps' item from toolbar
+      const toggleButton = canvas.getByText('Toggle Toolbar item');
+      userEvent.click(toggleButton);
+
+      // Verify toolbar element is visible but drawer is closed
+      await waitFor(() => {
+        const hiddenToolbar = queryToolbar();
+        expect(hiddenToolbar).toBeInTheDocument();
+        expect(isOpen()).toBe(false);
+        expect(canvas.getByText('Apps Title')).not.toBeVisible();
+        expect(getAllToolbarIconButtons().length).toBe(4);
+      });
+    },
+  };
+
 export const EmbeddedOpensFirstToolbarItem: StoryObj<DrawerToolbarLayoutPropsWithDisplayMode> =
   {
     render: (args: DrawerToolbarLayoutPropsWithDisplayMode) => (
@@ -344,13 +430,13 @@
     },
   };
 
-export const OverlayRemovesToolbarWhenAllItemsAreHidden: StoryObj<DrawerToolbarLayoutPropsWithDisplayMode> =
+export const EmbeddedRemovesToolbarWhenAllItemsAreHidden: StoryObj<DrawerToolbarLayoutPropsWithDisplayMode> =
   {
     render: (args: DrawerToolbarLayoutPropsWithDisplayMode) => (
       <TemplateWithToolbarToggle {...args} />
     ),
     args: {
-      displayMode: DisplayMode.Overlay,
+      displayMode: DisplayMode.Embedded,
     },
     play: async ({ canvasElement }) => {
       const canvas = within(canvasElement);
@@ -388,7 +474,7 @@
     },
   };
 
-export const EmbeddedRemovesToolbarWhenAllItemsAreHidden: StoryObj<DrawerToolbarLayoutPropsWithDisplayMode> =
+export const EmbeddedClosesDrawerWhenActiveItemIsHidden: StoryObj<DrawerToolbarLayoutPropsWithDisplayMode> =
   {
     render: (args: DrawerToolbarLayoutPropsWithDisplayMode) => (
       <TemplateWithToolbarToggle {...args} />
@@ -399,35 +485,40 @@
     play: async ({ canvasElement }) => {
       const canvas = within(canvasElement);
       const { getToolbarTestUtils, isOpen } = getTestUtils();
-      const { getToolbarIconButtonByLabel, queryToolbar } =
-        getToolbarTestUtils();
+      const {
+        getToolbarIconButtonByLabel,
+        queryToolbar,
+        getAllToolbarIconButtons,
+      } = getToolbarTestUtils();
 
       // Verify toolbar is initially visible
       const toolbar = queryToolbar();
       expect(toolbar).toBeInTheDocument();
+      expect(getAllToolbarIconButtons().length).toBe(5);
 
-      const codeButton = getToolbarIconButtonByLabel('Code')?.getElement();
-      expect(codeButton).toBeInTheDocument();
+      const activeButton = getToolbarIconButtonByLabel('Apps')?.getElement();
+      expect(activeButton).toBeInTheDocument();
 
       // Open the drawer
       expect(isOpen()).toBe(false);
-      userEvent.click(codeButton!);
+      userEvent.click(activeButton!);
 
       await waitFor(() => {
         expect(isOpen()).toBe(true);
-        expect(canvas.getByText('Code Title')).toBeVisible();
+        expect(canvas.getByText('Apps Title')).toBeVisible();
       });
 
-      // Click the toggle button to hide toolbar
-      const toggleButton = canvas.getByText('Toggle Toolbar visibility');
+      // Click the toggle button remove 'Apps' item from toolbar
+      const toggleButton = canvas.getByText('Toggle Toolbar item');
       userEvent.click(toggleButton);
 
-      // Verify toolbar element is removed but drawer remains open
+      // Verify toolbar element is visible but drawer is closed
       await waitFor(() => {
         const hiddenToolbar = queryToolbar();
-        expect(hiddenToolbar).not.toBeInTheDocument();
-        expect(isOpen()).toBe(true);
-        expect(canvas.getByText('Code Title')).toBeVisible();
+        expect(hiddenToolbar).toBeInTheDocument();
+        expect(isOpen()).toBe(false);
+        expect(canvas.getByText('Apps Title')).not.toBeVisible();
+        expect(getAllToolbarIconButtons().length).toBe(4);
       });
     },
   };

packages/drawer/src/DrawerToolbarLayout/DrawerToolbarLayout/DrawerToolbarLayout.spec.tsx

@@ -195,4 +195,40 @@ describe('packages/DrawerToolbarLayout', () => {
 
     expect(queryToolbar()).not.toBeInTheDocument();
   });
+
+  test('closes the drawer when the active item is hidden', () => {
+    const { rerender } = render(<Component />);
+
+    const { getToolbarTestUtils, isOpen } = getTestUtils();
+
+    const { getToolbarIconButtonByLabel } = getToolbarTestUtils();
+    const codeButton = getToolbarIconButtonByLabel('Code')?.getElement();
+    userEvent.click(codeButton!);
+
+    expect(isOpen()).toBe(true);
+
+    rerender(
+      <Component
+        data={[
+          {
+            id: 'Code',
+            label: 'Code',
+            content: 'Rerendered Drawer Content',
+            title: `Rerendered Drawer Title`,
+            glyph: 'Code',
+            visible: false,
+          },
+          {
+            id: 'Code2',
+            label: 'Code2',
+            content: 'Drawer Content2',
+            title: `Drawer Title2`,
+            glyph: 'Code',
+          },
+        ]}
+      />,
+    );
+
+    expect(isOpen()).toBe(false);
+  });
 });

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

@@ -19,12 +19,10 @@ import { useDrawerToolbarContext } from '../DrawerToolbarContext/DrawerToolbarCo
 import {
   getDrawerToolbarData,
   LongContent,
+  useToolbarData,
 } from './DrawerToolbarLayout.testutils';
 
 const DRAWER_TOOLBAR_DATA = getDrawerToolbarData({});
-const DRAWER_TOOLBAR_DATA_NOT_VISIBLE = getDrawerToolbarData({
-  isToolbarHidden: true,
-});
 
 const defaultExcludedControls = [
   ...storybookExcludedControlParams,
@@ -127,7 +125,8 @@ const Component: StoryFn<DrawerLayoutProps> = ({
   toolbarData: _toolbarDataProp,
   ...args
 }: DrawerLayoutProps) => {
-  const [toolbarData, setToolbarData] = useState(DRAWER_TOOLBAR_DATA);
+  const { toolbarData, setHasToolbarData, setHasHiddenToolbarItem } =
+    useToolbarData(DRAWER_TOOLBAR_DATA);
 
   const props = {
     ...args,
@@ -144,17 +143,12 @@ const Component: StoryFn<DrawerLayoutProps> = ({
         `}
       >
         <Button onClick={() => openDrawer('Code')}>Open Code Drawer</Button>
-        <Button
-          onClick={() =>
-            setToolbarData(prevData =>
-              prevData === DRAWER_TOOLBAR_DATA
-                ? DRAWER_TOOLBAR_DATA_NOT_VISIBLE
-                : DRAWER_TOOLBAR_DATA,
-            )
-          }
-        >
+        <Button onClick={() => setHasToolbarData(prev => !prev)}>
           Toggle Toolbar visibility
         </Button>
+        <Button onClick={() => setHasHiddenToolbarItem(prev => !prev)}>
+          Toggle Toolbar item
+        </Button>
         <LongContent />
         <LongContent />
       </main>