[LG-5571] feat(drawer): add toggle behavior for toolbar buttons (#3159)

* feat(drawer): add toggleDrawer function to manage drawer state and use for toolbar buttons

* chore(drawer): changeset

* docs(drawer): README update

Author: stephl3

.changeset/clever-hairs-taste.md

@@ -0,0 +1,5 @@
+---
+'@leafygreen-ui/drawer': minor
+---
+
+[LG-5571](https://jira.mongodb.org/browse/LG-5571): pressing active toolbar button instance will now close the drawer

packages/drawer/README.md

@@ -157,10 +157,11 @@ Individual toolbar items can be controlled using the `visible` prop. When all to
 
 To control the `Drawer` state, use the `useDrawerToolbarContext` hook from within `<DrawerLayout>`. This hook provides the `openDrawer()` and `closeDrawer()` functions to open and close the drawer programmatically. The hook takes no arguments and returns the following functions:
 
-| Name        | Signature              | Description                                                                                        |
-| ----------- | ---------------------- | -------------------------------------------------------------------------------------------------- |
-| openDrawer  | `(id: string) => void` | Opens the `Drawer` associated with the `Toolbar` item that has the matching `id` in `toolbarData`. |
-| closeDrawer | `() => void`           | Closes the Drawer.                                                                                 |
+| Name         | Signature              | Description                                                                                                                    |
+| ------------ | ---------------------- | ------------------------------------------------------------------------------------------------------------------------------ |
+| openDrawer   | `(id: string) => void` | Opens the `Drawer` associated with the `Toolbar` item that has the matching `id` in `toolbarData`.                             |
+| closeDrawer  | `() => void`           | Closes the `Drawer`.                                                                                                           |
+| toggleDrawer | `(id: string) => void` | If clicking the currently active `Toolbar` item, it closes the `Drawer`. Otherwise, it open the `Drawer` with the new content. |
 
 ### Rendering
 

packages/drawer/src/DrawerToolbarLayout/DrawerToolbarContext/DrawerToolbarContext.tsx

@@ -78,6 +78,22 @@ export const DrawerToolbarProvider = ({
     }, TRANSITION_DURATION);
   }, [setActiveDrawerId]);
 
+  /**
+   * Handles toolbar button clicks with toggle behavior.
+   * If the drawer is already open with the same content, it closes the drawer.
+   * Otherwise, it opens the drawer with the new content.
+   */
+  const toggleDrawer = useCallback(
+    (id: DataId) => {
+      if (isDrawerOpen && activeDrawerId === id) {
+        closeDrawer();
+      } else {
+        openDrawer(id);
+      }
+    },
+    [isDrawerOpen, activeDrawerId, closeDrawer, openDrawer],
+  );
+
   // Checks if the active drawer id is removed from the data or if the active drawer item is not visible. If so, close the drawer.
   useEffect(() => {
     if (shouldRenderToolbar && activeDrawerId) {
@@ -111,6 +127,7 @@ export const DrawerToolbarProvider = ({
     () => ({
       openDrawer,
       closeDrawer,
+      toggleDrawer,
       getActiveDrawerContent,
       isDrawerOpen,
       shouldRenderToolbar,
@@ -120,6 +137,7 @@ export const DrawerToolbarProvider = ({
     [
       openDrawer,
       closeDrawer,
+      toggleDrawer,
       getActiveDrawerContent,
       isDrawerOpen,
       shouldRenderToolbar,

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

@@ -18,6 +18,15 @@ export interface DrawerToolbarContextType {
    */
   closeDrawer: () => void;
 
+  /**
+   * This function is used to handle toolbar button clicks with toggle behavior.
+   * If the drawer is already open with the same content, it closes the drawer.
+   * Otherwise, it opens the drawer with the new content.
+   * @param id - The id of the drawer to toggle
+   * @returns void
+   */
+  toggleDrawer: (id: DataId) => void;
+
   /**
    * Indicates whether the drawer should be closed. Used to manage transition states.
    * For example, during close animations, content should remain until the transition completes.

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

@@ -199,11 +199,7 @@ describe('packages/DrawerToolbarLayout', () => {
   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!);
+    const { isOpen } = getTestUtils();
 
     expect(isOpen()).toBe(true);
 
@@ -235,11 +231,7 @@ describe('packages/DrawerToolbarLayout', () => {
   test('closes the drawer when the active item is removed from the toolbar data', () => {
     const { rerender } = render(<Component />);
 
-    const { getToolbarTestUtils, isOpen } = getTestUtils();
-
-    const { getToolbarIconButtonByLabel } = getToolbarTestUtils();
-    const codeButton = getToolbarIconButtonByLabel('Code')?.getElement();
-    userEvent.click(codeButton!);
+    const { isOpen } = getTestUtils();
 
     expect(isOpen()).toBe(true);
 
@@ -293,4 +285,36 @@ describe('packages/DrawerToolbarLayout', () => {
     expect(codeButtonRef.current).toHaveAttribute('aria-label', 'Code');
     expect(code2ButtonRef.current).toHaveAttribute('aria-label', 'Code2');
   });
+
+  test('closes the drawer when clicking the same toolbar button while drawer is open', () => {
+    render(<Component />);
+
+    const { getToolbarTestUtils, isOpen } = getTestUtils();
+
+    expect(isOpen()).toBe(true);
+
+    const { getToolbarIconButtonByLabel } = getToolbarTestUtils();
+    const codeButton = getToolbarIconButtonByLabel('Code')?.getElement();
+
+    userEvent.click(codeButton!);
+
+    expect(isOpen()).toBe(false);
+  });
+
+  test('opens the drawer when clicking a different toolbar button while drawer is open', () => {
+    render(<Component />);
+
+    const { getToolbarTestUtils, isOpen, getDrawer } = getTestUtils();
+
+    expect(isOpen()).toBe(true);
+    expect(getDrawer()).toHaveTextContent('Drawer Title');
+
+    const { getToolbarIconButtonByLabel } = getToolbarTestUtils();
+    const code2Button = getToolbarIconButtonByLabel('Code2')?.getElement();
+
+    userEvent.click(code2Button!);
+
+    expect(isOpen()).toBe(true);
+    expect(getDrawer()).toHaveTextContent('Drawer Title2');
+  });
 });

packages/drawer/src/DrawerToolbarLayout/DrawerToolbarLayout/DrawerToolbarLayoutContent.tsx

@@ -35,8 +35,8 @@ export const DrawerToolbarLayoutContent = forwardRef<
     forwardRef,
   ) => {
     const {
-      openDrawer,
       closeDrawer,
+      toggleDrawer,
       getActiveDrawerContent,
       isDrawerOpen,
       visibleToolbarItems,
@@ -74,7 +74,7 @@ export const DrawerToolbarLayoutContent = forwardRef<
       onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void,
     ) => {
       onClick?.(event);
-      openDrawer(id);
+      toggleDrawer(id);
     };
 
     const renderDrawer = () => {