[LG-5460] feat(drawer): add toolbar item visibility control (#3067)

* wip

* feat(DrawerToolbar): enhance toolbar visibility management and add toggle functionality

* wip, not complete

* remove resolvedInitialState

* actually remove resolvedInitialState

* maybe a fix?

* refactor(Drawer): remove unused animations and update layout styles for mobile responsiveness

* refactor(Drawer): streamline styles by removing unused animations

* refactor(Drawer): update context and layout components to use the same styles, wip

* refactor(Drawer): improve context handling and layout structure for better drawer integration

* refactor(Drawer): consolidate layout rendering and improve content styling

* feat(Drawer): introduce LayoutGrid component for improved drawer layout management

* refactor(Drawer): clean up unused code and lint

* feat(Drawer): add toolbar visibility toggle functionality and update test utils

* refactor(Drawer): update constants and styles

* refactor(Drawer): adjust mobile layout styles for toolbar visibility

* refactor(Drawer): rename story exports for clarity and enhance toolbar item tests

* refactor(Drawer): enhance layout styles and logic for drawer visibility handling

* refactor(Drawer): update drawer width calculation and enhance toolbar flicker handling

* test(Drawer): add unit test for setHasToolbar functionality in DrawerLayoutContext

* refactor(Drawer): improve embedded styles and overlay handling for drawer layout

* docs(Drawer): update README

* refactor(Drawer): remove empty media query from embedded drawer styles

* docs(Drawer): add changesets

* feat(Drawer): replace layoutGird with PanelGrid component and update story data

* refactor(Drawer): remove unused contentStyles from DrawerToolbarLayout and PanelGrid

* fix(Drawer): update initial width calculation to consider resizable state for embedded drawers

* feat(Drawer): refactor styling logic for embedded drawer layout with toolbar and panel content

* fix(Drawer): simplify props handling in DrawerToolbarLayout story

Author: shaneeza

.changeset/dull-bikes-train.md

@@ -0,0 +1,72 @@
+---
+'@leafygreen-ui/drawer': minor
+---
+
+# What's New
+
+- **New `visible` property**: Toolbar items can now be conditionally shown/hidden using a `visible` boolean property (defaults to true). [LG-5460](https://jira.mongodb.org/browse/LG-5460)
+  ```tsx
+  export const DRAWER_TOOLBAR_DATA: DrawerToolbarLayoutProps['toolbarData'] = [
+    {
+      id: 'Code',
+      label: 'Code',
+      content: <DrawerContent />,
+      title: 'Code Title',
+      glyph: 'Code',
+    },
+    {
+      id: 'Dashboard',
+      label: 'Dashboard',
+      content: <DrawerContent />,
+      title: 'Dashboard Title',
+      glyph: 'Dashboard',
+      visible: false, // This item will be hidden
+    },
+    {
+      id: 'Plus',
+      label: "Perform some action, doesn't open a drawer",
+      glyph: 'Plus',
+    },
+    {
+      id: 'Sparkle',
+      label: 'Disabled item',
+      glyph: 'Sparkle',
+      disabled: true,
+    },
+  ];
+  ```
+
+
+- **Dynamic toolbar rendering**: When all toolbar items have `visible: false`, the entire toolbar element is removed from the DOM. [LG-5460](https://jira.mongodb.org/browse/LG-5460)
+
+  ```tsx
+    {
+      id: 'Code',
+      label: 'Code',
+      content: <DrawerContent />,
+      title: 'Code Title',
+      glyph: 'Code',
+      visible: false,
+    },
+    {
+      id: 'Dashboard',
+      label: 'Dashboard',
+      content: <DrawerContent />,
+      title: 'Dashboard Title',
+      glyph: 'Dashboard',
+      visible: false,
+    },
+    {
+      id: 'Plus',
+      label: "Perform some action, doesn't open a drawer",
+      glyph: 'Plus',
+      visible: false,
+    },
+    {
+      id: 'Sparkle',
+      label: 'Disabled item',
+      glyph: 'Sparkle',
+      disabled: true,
+      visible: false,
+    },
+  ```

.changeset/young-doodles-invite.md

@@ -0,0 +1,103 @@
+---
+'@leafygreen-ui/drawer': major
+---
+
+# Unified Drawer Layout System
+
+## Summary
+
+This release introduces a unified grid layout system for all drawer instances, eliminating layout inconsistencies between drawers with and without toolbars. All drawers now use the same consistent grid-based layout, providing better visual consistency and easier customization.
+
+## Breaking Changes
+
+### Layout Unification Impact
+
+Previously, drawers with toolbars used a different internal layout system than drawers without toolbars, leading to inconsistent spacing, positioning, and responsive behavior when adding new internal features. This change standardizes all drawer layouts (with one exception - see below) to use the same grid system.
+
+**⚠️ Migration Required:** If you were using custom CSS to override drawer layout styles, you will need to update your styles to work with the new grid-based layout system.
+
+### What's Changed
+
+#### 1. Drawer without toolbar using the `drawer` prop
+
+Drawers passed via the `drawer` prop now use the unified grid layout. Mobile styles have been updated to match the responsive behavior of drawers with toolbars.
+
+**Impact:** Custom style overrides will need to be updated to work with the new grid system.
+
+```tsx
+// ✅ This usage is affected - now uses unified grid layout
+<DrawerLayout
+  displayMode={DisplayMode.Embedded}
+  isDrawerOpen={open}
+  resizable
+  drawer={
+    <Drawer title="Resizable Drawer">
+      <div>
+        Drawer content that can be resized by dragging the left edge
+      </div>
+    </Drawer>
+  }
+  onClose={() => setOpen(false)}
+>
+  <main>
+    <Button onClick={() => setOpen(prevOpen => !prevOpen)}>
+      Toggle Resizable Drawer
+    </Button>
+  </main>
+</DrawerLayout>
+```
+
+#### 2. Drawer passed as child (No changes required)
+
+**Impact:** No changes needed. This usage pattern is unaffected.
+
+When the drawer is passed as a child component, it cannot be wrapped in the new grid layout system, so this usage pattern remains unchanged.
+
+```tsx
+// ✅ This usage is NOT affected - works exactly the same
+<DrawerLayout displayMode={DisplayMode.Overlay} isDrawerOpen={open}>
+  <main>
+    <Button onClick={() => setOpen(prevOpen => !prevOpen)}>
+      Open Drawer
+    </Button>
+  </main>
+  <Drawer
+    displayMode={DisplayMode.Overlay}
+    onClose={() => setOpen(false)}
+    open={open}
+    title="Drawer Title"
+  >
+    Drawer content goes here
+  </Drawer>
+</DrawerLayout>
+```
+
+#### 3. Drawer with toolbar (No changes required)
+
+**Impact:** No changes needed. This usage already used the unified grid layout.
+
+```tsx
+// ✅ This usage is NOT affected - already used the unified layout
+<DrawerLayout
+  toolbarData={DRAWER_TOOLBAR_DATA}
+  displayMode={DisplayMode.Overlay}
+  size={Size.Default}
+>
+  <Main />
+</DrawerLayout>
+```
+
+## Migration Guide
+
+### If you have custom CSS overrides:
+
+1. **Review your custom styles:** Check if you have any CSS that targets drawer layout elements
+2. **Test thoroughly:** The new grid system may affect positioning, spacing, or responsive behavior
+3. **Update selectors:** You may need to update CSS selectors to target the new grid structure
+
+### Benefits of this change:
+
+- **Consistent layout:** All drawers now have the same visual structure and behavior
+- **Better mobile experience:** Unified responsive behavior across all drawer types
+- **Easier customization:** Single grid system to understand and customize
+- **Future-proof:** Consistent foundation for future drawer enhancements

packages/drawer/README.md

@@ -73,6 +73,14 @@ const DRAWER_TOOLBAR_DATA: DrawerLayoutProps['toolbarData'] = [
       console.log('Plus clicked, does not update drawer');
     },
   },
+  {
+    id: 'Settings',
+    label: 'Settings',
+    content: <DrawerContent />,
+    title: 'Settings Title',
+    glyph: 'Settings',
+    visible: false, // This item will be hidden
+  },
 ];
 
 const App = () => {
@@ -141,6 +149,10 @@ To use with a `Toolbar`, pass the `toolbarData` prop to render the `Toolbar` ite
 
 The `Drawer` and `Toolbar` component will be rendered automatically based on the `toolbarData` provided.
 
+#### Toolbar Visibility
+
+Individual toolbar items can be controlled using the `visible` prop. When all toolbar items have `visible` set to `false`, the entire toolbar will be automatically hidden from view. This allows for dynamic toolbar management based on application state or user permissions.
+
 ### `useDrawerToolbarContext()`
 
 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:
@@ -432,6 +444,7 @@ You can also use the resizable feature with a toolbar-based drawer:
 | `disabled` _(optional)_   | `boolean`         | Whether the toolbar item is disabled.                                                                                                                                                                           | `false` |
 | `hasPadding` _(optional)_ | `boolean`         | Determines whether the drawer content should have padding. When false, the content area will not have padding, allowing full-width/height content.                                                              | `true`  |
 | `scrollable` _(optional)_ | `boolean`         | Determines whether the drawer content should have its own scroll container. When false, the content area will not have scroll behavior.                                                                         | `true`  |
+| `visible` _(optional)_    | `boolean`         | Determines if the current toolbar item is visible. If all toolbar items have `visible` set to `false`, the toolbar will not be rendered.                                                                        | `true`  |
 
 \+ Extends the following from LG [Toolbar props](https://github.com/mongodb/leafygreen-ui/tree/main/packages/toolbar/README.md#toolbariconbutton): `glyph`, `label`, and `onClick`.
 

packages/drawer/src/Drawer/Drawer.tsx

@@ -16,7 +16,7 @@ import { Position, useResizable } from '@leafygreen-ui/resizable';
 import { BaseFontSize } from '@leafygreen-ui/tokens';
 import { Body } from '@leafygreen-ui/typography';
 
-import { TRANSITION_DURATION } from '../constants';
+import { DRAWER_TOOLBAR_WIDTH, TRANSITION_DURATION } from '../constants';
 import { useDrawerLayoutContext } from '../DrawerLayout';
 import { useDrawerStackContext } from '../DrawerStackContext';
 import { getLgIds } from '../utils';
@@ -66,10 +66,12 @@ export const Drawer = forwardRef<HTMLDivElement, DrawerProps>(
       hasToolbar,
       setIsDrawerResizing,
       setDrawerWidth,
+      drawerWidth,
       size: sizeContextProp,
     } = useDrawerLayoutContext();
     const [shouldAnimate, setShouldAnimate] = useState(false);
     const ref = useRef<HTMLDialogElement | HTMLDivElement>(null);
+    const [previousWidth, setPreviousWidth] = useState(0);
 
     // Returns the resolved displayMode, open state, and onClose function based on the component and context props.
     const { displayMode, open, onClose, size } = useResolvedDrawerProps({
@@ -160,12 +162,32 @@ export const Drawer = forwardRef<HTMLDivElement, DrawerProps>(
       isResizing,
     } = useResizable<HTMLDialogElement | HTMLDivElement>({
       enabled: isResizableEnabled,
-      initialSize,
+      initialSize: previousWidth !== 0 ? previousWidth : initialSize,
       minSize: resizableMinWidth,
       maxSize: resizableMaxWidth,
       position: Position.Right,
     });
 
+    /**
+     * On initial render, if the drawer is embedded and there was a previous width, that means that the previous drawer was open and may have been resized. This takes that previous width and uses it as the initial size.
+     */
+    useEffect(() => {
+      if (open && isEmbedded && resizable && drawerWidth !== 0) {
+        const prevWidth = hasToolbar
+          ? drawerWidth + DRAWER_TOOLBAR_WIDTH
+          : drawerWidth - DRAWER_TOOLBAR_WIDTH;
+        setPreviousWidth(prevWidth);
+      }
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+
+    /**
+     * Resets the previous width to 0 when the drawer is closed.
+     */
+    useEffect(() => {
+      if (!open) setPreviousWidth(0);
+    }, [open]);
+
     // In an embedded drawer, the parent grid container controls the drawer width with grid-template-columns, so we pass the width to the context where it is read by the parent grid container.
     useEffect(() => {
       if (!isEmbedded) return;

packages/drawer/src/DrawerLayout/DrawerLayout.tsx

@@ -1,7 +1,5 @@
 import React, { forwardRef } from 'react';
 
-import { consoleOnce } from '@leafygreen-ui/lib';
-
 import { DisplayMode, Size } from '../Drawer/Drawer.types';
 import { DrawerToolbarLayout } from '../DrawerToolbarLayout';
 import { LayoutComponent } from '../LayoutComponent';
@@ -23,18 +21,13 @@ export const DrawerLayout = forwardRef<HTMLDivElement, DrawerLayoutProps>(
       resizable = false,
       onClose,
       size = Size.Default,
+      drawer,
       ...rest
     }: DrawerLayoutProps,
     forwardedRef,
   ) => {
     const hasToolbar = toolbarData && toolbarData.length > 0;
 
-    if (!hasToolbar) {
-      consoleOnce.warn(
-        'Using a Drawer without a toolbar is not recommended. To include a toolbar, pass a toolbarData prop containing the desired toolbar items.',
-      );
-    }
-
     return (
       <DrawerLayoutProvider
         isDrawerOpen={isDrawerOpen}
@@ -53,7 +46,7 @@ export const DrawerLayout = forwardRef<HTMLDivElement, DrawerLayoutProps>(
             {children}
           </DrawerToolbarLayout>
         ) : (
-          <LayoutComponent ref={forwardedRef} {...rest}>
+          <LayoutComponent panelContent={drawer} ref={forwardedRef} {...rest}>
             {children}
           </LayoutComponent>
         )}

packages/drawer/src/DrawerLayout/DrawerLayoutContext/DrawerLayoutContext.spec.tsx

@@ -24,6 +24,7 @@ describe('useDrawerLayoutContext', () => {
     expect(typeof result.current.setIsDrawerOpen).toBe('function');
     expect(typeof result.current.setDrawerWidth).toBe('function');
     expect(typeof result.current.setIsDrawerResizing).toBe('function');
+    expect(typeof result.current.setHasToolbar).toBe('function');
   });
 
   test('Returns the value passed to the provider', () => {
@@ -85,4 +86,17 @@ describe('useDrawerLayoutContext', () => {
     });
     expect(result.current.isDrawerResizing).toBe(true);
   });
+
+  test('Updates hasToolbar when setHasToolbar is called', () => {
+    const { result } = renderHook(() => useDrawerLayoutContext(), {
+      wrapper: ({ children }) => (
+        <DrawerLayoutProvider>{children}</DrawerLayoutProvider>
+      ),
+    });
+    expect(result.current.hasToolbar).toBe(false);
+    act(() => {
+      result?.current?.setHasToolbar?.(true);
+    });
+    expect(result.current.hasToolbar).toBe(true);
+  });
 });

packages/drawer/src/DrawerLayout/DrawerLayoutContext/DrawerLayoutContext.tsx

@@ -20,6 +20,7 @@ export const DrawerLayoutContext = createContext<DrawerLayoutContextType>({
   hasToolbar: false,
   isDrawerResizing: false,
   drawerWidth: 0,
+  setHasToolbar: () => {},
   setIsDrawerOpen: () => {},
   setDrawerWidth: () => {},
   setIsDrawerResizing: () => {},
@@ -36,12 +37,13 @@ export const DrawerLayoutProvider = ({
   resizable,
   displayMode,
   onClose,
-  hasToolbar,
+  hasToolbar: hasToolbarProp = false,
   size,
 }: PropsWithChildren<DrawerLayoutProviderProps>) => {
   const [isDrawerOpen, setIsDrawerOpen] = React.useState(isDrawerOpenProp);
   const [isDrawerResizing, setIsDrawerResizing] = React.useState(false);
   const [drawerWidth, setDrawerWidth] = React.useState(0);
+  const [hasToolbar, setHasToolbar] = React.useState(hasToolbarProp);
 
   useEffect(() => {
     setIsDrawerOpen(isDrawerOpenProp);
@@ -53,6 +55,7 @@ export const DrawerLayoutProvider = ({
     displayMode,
     onClose,
     hasToolbar,
+    setHasToolbar,
     setIsDrawerOpen,
     isDrawerResizing,
     setIsDrawerResizing,

packages/drawer/src/DrawerLayout/DrawerLayoutContext/DrawerLayoutContext.types.ts

@@ -57,4 +57,9 @@ export interface DrawerLayoutContextType extends DrawerLayoutProviderProps {
    * Function to set the drawer resizing state.
    */
   setIsDrawerResizing: React.Dispatch<React.SetStateAction<boolean>>;
+
+  /**
+   * Function to set the drawer toolbar state.
+   */
+  setHasToolbar: React.Dispatch<React.SetStateAction<boolean>>;
 }