refactor: [M3-6900] - MUI v5 Migration - SRC > Components > Drawer (#9423)

* migrate `Drawer` and update storybook

* Added changeset: MUI v5 Migration - SRC > Components > Drawer

* feedback @abailly-akamai

---------

Co-authored-by: Banks Nussman <banks@nussman.us>

Author: bnussman-akamai

packages/manager/.changeset/pr-9423-tech-stories-1689738958743.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Tech Stories
+---
+
+MUI v5 Migration - SRC > Components > Drawer ([#9423](https://github.com/linode/manager/pull/9423))

packages/manager/src/components/Drawer.stories.tsx

@@ -0,0 +1,57 @@
+import { action } from '@storybook/addon-actions';
+import { Meta, StoryObj } from '@storybook/react';
+import React from 'react';
+
+import ActionsPanel from './ActionsPanel';
+import { Button } from './Button/Button';
+import { Drawer } from './Drawer';
+import { TextField } from './TextField';
+import { Typography } from './Typography';
+
+const meta: Meta<typeof Drawer> = {
+  component: Drawer,
+  title: 'Components/Drawer',
+};
+
+type Story = StoryObj<typeof Drawer>;
+
+export const Default: Story = {
+  args: {
+    onClose: action('onClose'),
+    open: false,
+    title: 'My Drawer',
+  },
+  render: (args) => {
+    const DrawerExampleWrapper = () => {
+      const [open, setOpen] = React.useState(args.open);
+      return (
+        <>
+          <Button buttonType="primary" onClick={() => setOpen(true)}>
+            Click to open Drawer
+          </Button>
+          <Drawer {...args} onClose={() => setOpen(false)} open={open}>
+            <Typography>
+              This is some test copy which acts as content for this Drawer
+              component. It's very interesting and you should read all of it.
+              This text has to be sufficiently long to test that it doesn't
+              expand the drawer to an unreasonable width.
+            </Typography>
+            <TextField
+              label="Input Some Text"
+              placeholder="This is a placeholder"
+            />
+            <ActionsPanel>
+              <Button buttonType="secondary" onClick={() => setOpen(false)}>
+                Cancel
+              </Button>
+              <Button buttonType="primary">Save</Button>
+            </ActionsPanel>
+          </Drawer>
+        </>
+      );
+    };
+    return <DrawerExampleWrapper />;
+  },
+};
+
+export default meta;

packages/manager/src/components/Drawer/Drawer.tsx packages/manager/src/components/Drawer.tsx

@@ -1,16 +1,23 @@
 import Close from '@mui/icons-material/Close';
+import _Drawer, { DrawerProps } from '@mui/material/Drawer';
 import Grid from '@mui/material/Unstable_Grid2';
 import { Theme } from '@mui/material/styles';
 import * as React from 'react';
 import { makeStyles } from 'tss-react/mui';
 
 import { IconButton } from 'src/components/IconButton';
 import { Typography } from 'src/components/Typography';
-import _Drawer, { DrawerProps } from 'src/components/core/Drawer';
 import { convertForAria } from 'src/utilities/stringUtils';
 
-export interface Props extends DrawerProps {
+interface Props extends DrawerProps {
+  /**
+   * Title that appears at the top of the drawer
+   */
   title: string;
+  /**
+   * Increaces the Drawers width from 480px to 700px on desktop-sized viewports
+   * @default false
+   */
   wide?: boolean;
 }
 
@@ -59,7 +66,18 @@ const useStyles = makeStyles()((theme: Theme) => ({
   },
 }));
 
-const Drawer = (props: Props) => {
+/**
+ * ## Overview
+ * - Drawers are essentially modal dialogs that appear on the right of the screen rather than the center.
+ * - Like traditional modals, they block interaction with the page content.
+ * - They are elevated above the app’s UI and don’t affect the screen’s layout grid.
+ *
+ * ## Behavior
+ *
+ * - Clicking a button on the screen opens the drawer.
+ * - Drawers can be closed by pressing the `esc` key, clicking the “X” icon, or clicking the “Cancel” button.
+ */
+export const Drawer = (props: Props) => {
   const { classes } = useStyles();
 
   const { children, onClose, title, wide, ...rest } = props;
@@ -123,5 +141,3 @@ const Drawer = (props: Props) => {
     </_Drawer>
   );
 };
-
-export default Drawer;

packages/manager/src/components/Drawer/Drawer.stories.mdx

@@ -1,9 +1,9 @@
+import Drawer from '@mui/material/Drawer';
 import { Theme } from '@mui/material/styles';
 import { makeStyles } from '@mui/styles';
 import * as React from 'react';
 
 import { Hidden } from 'src/components/Hidden';
-import Drawer from 'src/components/core/Drawer';
 
 import PrimaryNav from './PrimaryNav/PrimaryNav';
 

packages/manager/src/components/Drawer/index.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 
-import Drawer from 'src/components/Drawer';
+import { Drawer } from 'src/components/Drawer';
 import { TagsPanel } from 'src/components/TagsPanel/TagsPanel';
 
 export type OpenTagDrawer = (id: number, label: string, tags: string[]) => void;

packages/manager/src/components/SideMenu.tsx

@@ -10,7 +10,7 @@ import { compose } from 'recompose';
 import ActionsPanel from 'src/components/ActionsPanel';
 import { Button } from 'src/components/Button/Button';
 import { DisplayPrice } from 'src/components/DisplayPrice';
-import Drawer from 'src/components/Drawer';
+import { Drawer } from 'src/components/Drawer';
 import { Link } from 'src/components/Link';
 import { Notice } from 'src/components/Notice/Notice';
 import { Typography } from 'src/components/Typography';

packages/manager/src/components/TagCell/TagDrawer.tsx

@@ -11,7 +11,7 @@ import { makeStyles } from 'tss-react/mui';
 import { Button } from 'src/components/Button/Button';
 import { Currency } from 'src/components/Currency';
 import { Divider } from 'src/components/Divider';
-import Drawer from 'src/components/Drawer';
+import { Drawer } from 'src/components/Drawer';
 import { ErrorState } from 'src/components/ErrorState/ErrorState';
 import { LinearProgress } from 'src/components/LinearProgress';
 import { Notice } from 'src/components/Notice/Notice';

packages/manager/src/components/core/Drawer.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { makeStyles } from 'tss-react/mui';
 
-import Drawer from 'src/components/Drawer';
+import { Drawer } from 'src/components/Drawer';
 
 import UpdateContactInformationForm from './UpdateContactInformationForm';
 

packages/manager/src/features/Backups/BackupDrawer.tsx

@@ -5,7 +5,7 @@ import { VariantType } from 'notistack';
 import * as React from 'react';
 
 import { Divider } from 'src/components/Divider';
-import Drawer from 'src/components/Drawer';
+import { Drawer } from 'src/components/Drawer';
 import { LinearProgress } from 'src/components/LinearProgress';
 import { Notice } from 'src/components/Notice/Notice';
 import { TooltipIcon } from 'src/components/TooltipIcon';

packages/manager/src/features/Billing/BillingPanels/BillingSummary/PaymentDrawer/PaymentDrawer.tsx

@@ -6,7 +6,7 @@ import { makeStyles } from 'tss-react/mui';
 
 import ActionsPanel from 'src/components/ActionsPanel';
 import { Button } from 'src/components/Button/Button';
-import Drawer from 'src/components/Drawer';
+import { Drawer } from 'src/components/Drawer';
 import { MultipleIPInput } from 'src/components/MultipleIPInput/MultipleIPInput';
 import { Notice } from 'src/components/Notice/Notice';
 import { Typography } from 'src/components/Typography';

packages/manager/src/features/Billing/BillingPanels/ContactInfoPanel/EditBillingContactDrawer.tsx

@@ -5,7 +5,7 @@ import { useHistory } from 'react-router-dom';
 
 import ActionsPanel from 'src/components/ActionsPanel/ActionsPanel';
 import { Button } from 'src/components/Button/Button';
-import Drawer from 'src/components/Drawer/Drawer';
+import { Drawer } from 'src/components/Drawer';
 import { Notice } from 'src/components/Notice/Notice';
 import { Radio } from 'src/components/Radio/Radio';
 import { TextField } from 'src/components/TextField';

packages/manager/src/features/Billing/BillingPanels/PaymentInfoPanel/AddPaymentMethodDrawer/AddPaymentMethodDrawer.tsx

@@ -23,7 +23,7 @@ import * as React from 'react';
 
 import ActionsPanel from 'src/components/ActionsPanel';
 import { Button, ButtonProps } from 'src/components/Button/Button';
-import Drawer from 'src/components/Drawer';
+import { Drawer } from 'src/components/Drawer';
 import Select, { Item } from 'src/components/EnhancedSelect/Select';
 import { MultipleIPInput } from 'src/components/MultipleIPInput/MultipleIPInput';
 import { Notice } from 'src/components/Notice/Notice';

packages/manager/src/features/Databases/DatabaseDetail/AddAccessControlDrawer.tsx

@@ -5,7 +5,7 @@ import { useHistory } from 'react-router-dom';
 
 import ActionsPanel from 'src/components/ActionsPanel';
 import { Button } from 'src/components/Button/Button';
-import Drawer from 'src/components/Drawer';
+import { Drawer } from 'src/components/Drawer';
 import { Notice } from 'src/components/Notice/Notice';
 import { TextField } from 'src/components/TextField';
 import { useImportZoneMutation } from 'src/queries/domains';

packages/manager/src/features/Domains/CloneDomainDrawer.tsx

@@ -4,7 +4,7 @@ import * as React from 'react';
 
 import ActionsPanel from 'src/components/ActionsPanel';
 import { Button } from 'src/components/Button/Button';
-import Drawer from 'src/components/Drawer';
+import { Drawer } from 'src/components/Drawer';
 import { MultipleIPInput } from 'src/components/MultipleIPInput/MultipleIPInput';
 import { Notice } from 'src/components/Notice/Notice';
 import { Radio } from 'src/components/Radio/Radio';

packages/manager/src/features/Domains/DomainRecordDrawer.tsx

@@ -4,7 +4,7 @@ import { useParams } from 'react-router-dom';
 
 import ActionsPanel from 'src/components/ActionsPanel';
 import { Button } from 'src/components/Button/Button';
-import Drawer from 'src/components/Drawer';
+import { Drawer } from 'src/components/Drawer';
 import { Link } from 'src/components/Link';
 import { Notice } from 'src/components/Notice/Notice';
 import { SupportLink } from 'src/components/SupportLink';