Skip to content

Commit 7646aca

Browse files
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>
1 parent 59b5413 commit 7646aca

File tree

60 files changed

+137
-225
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

60 files changed

+137
-225
lines changed
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"@linode/manager": Tech Stories
3+
---
4+
5+
MUI v5 Migration - SRC > Components > Drawer ([#9423](https://github.com/linode/manager/pull/9423))
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
import { action } from '@storybook/addon-actions';
2+
import { Meta, StoryObj } from '@storybook/react';
3+
import React from 'react';
4+
5+
import ActionsPanel from './ActionsPanel';
6+
import { Button } from './Button/Button';
7+
import { Drawer } from './Drawer';
8+
import { TextField } from './TextField';
9+
import { Typography } from './Typography';
10+
11+
const meta: Meta<typeof Drawer> = {
12+
component: Drawer,
13+
title: 'Components/Drawer',
14+
};
15+
16+
type Story = StoryObj<typeof Drawer>;
17+
18+
export const Default: Story = {
19+
args: {
20+
onClose: action('onClose'),
21+
open: false,
22+
title: 'My Drawer',
23+
},
24+
render: (args) => {
25+
const DrawerExampleWrapper = () => {
26+
const [open, setOpen] = React.useState(args.open);
27+
return (
28+
<>
29+
<Button buttonType="primary" onClick={() => setOpen(true)}>
30+
Click to open Drawer
31+
</Button>
32+
<Drawer {...args} onClose={() => setOpen(false)} open={open}>
33+
<Typography>
34+
This is some test copy which acts as content for this Drawer
35+
component. It's very interesting and you should read all of it.
36+
This text has to be sufficiently long to test that it doesn't
37+
expand the drawer to an unreasonable width.
38+
</Typography>
39+
<TextField
40+
label="Input Some Text"
41+
placeholder="This is a placeholder"
42+
/>
43+
<ActionsPanel>
44+
<Button buttonType="secondary" onClick={() => setOpen(false)}>
45+
Cancel
46+
</Button>
47+
<Button buttonType="primary">Save</Button>
48+
</ActionsPanel>
49+
</Drawer>
50+
</>
51+
);
52+
};
53+
return <DrawerExampleWrapper />;
54+
},
55+
};
56+
57+
export default meta;

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

+21-5
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,23 @@
11
import Close from '@mui/icons-material/Close';
2+
import _Drawer, { DrawerProps } from '@mui/material/Drawer';
23
import Grid from '@mui/material/Unstable_Grid2';
34
import { Theme } from '@mui/material/styles';
45
import * as React from 'react';
56
import { makeStyles } from 'tss-react/mui';
67

78
import { IconButton } from 'src/components/IconButton';
89
import { Typography } from 'src/components/Typography';
9-
import _Drawer, { DrawerProps } from 'src/components/core/Drawer';
1010
import { convertForAria } from 'src/utilities/stringUtils';
1111

12-
export interface Props extends DrawerProps {
12+
interface Props extends DrawerProps {
13+
/**
14+
* Title that appears at the top of the drawer
15+
*/
1316
title: string;
17+
/**
18+
* Increaces the Drawers width from 480px to 700px on desktop-sized viewports
19+
* @default false
20+
*/
1421
wide?: boolean;
1522
}
1623

@@ -59,7 +66,18 @@ const useStyles = makeStyles()((theme: Theme) => ({
5966
},
6067
}));
6168

62-
const Drawer = (props: Props) => {
69+
/**
70+
* ## Overview
71+
* - Drawers are essentially modal dialogs that appear on the right of the screen rather than the center.
72+
* - Like traditional modals, they block interaction with the page content.
73+
* - They are elevated above the app’s UI and don’t affect the screen’s layout grid.
74+
*
75+
* ## Behavior
76+
*
77+
* - Clicking a button on the screen opens the drawer.
78+
* - Drawers can be closed by pressing the `esc` key, clicking the “X” icon, or clicking the “Cancel” button.
79+
*/
80+
export const Drawer = (props: Props) => {
6381
const { classes } = useStyles();
6482

6583
const { children, onClose, title, wide, ...rest } = props;
@@ -123,5 +141,3 @@ const Drawer = (props: Props) => {
123141
</_Drawer>
124142
);
125143
};
126-
127-
export default Drawer;

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

-154
This file was deleted.

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

-6
This file was deleted.

packages/manager/src/components/SideMenu.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
1+
import Drawer from '@mui/material/Drawer';
12
import { Theme } from '@mui/material/styles';
23
import { makeStyles } from '@mui/styles';
34
import * as React from 'react';
45

56
import { Hidden } from 'src/components/Hidden';
6-
import Drawer from 'src/components/core/Drawer';
77

88
import PrimaryNav from './PrimaryNav/PrimaryNav';
99

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import * as React from 'react';
22

3-
import Drawer from 'src/components/Drawer';
3+
import { Drawer } from 'src/components/Drawer';
44
import { TagsPanel } from 'src/components/TagsPanel/TagsPanel';
55

66
export type OpenTagDrawer = (id: number, label: string, tags: string[]) => void;

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

-6
This file was deleted.

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ import { compose } from 'recompose';
1010
import ActionsPanel from 'src/components/ActionsPanel';
1111
import { Button } from 'src/components/Button/Button';
1212
import { DisplayPrice } from 'src/components/DisplayPrice';
13-
import Drawer from 'src/components/Drawer';
13+
import { Drawer } from 'src/components/Drawer';
1414
import { Link } from 'src/components/Link';
1515
import { Notice } from 'src/components/Notice/Notice';
1616
import { Typography } from 'src/components/Typography';

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ import { makeStyles } from 'tss-react/mui';
1111
import { Button } from 'src/components/Button/Button';
1212
import { Currency } from 'src/components/Currency';
1313
import { Divider } from 'src/components/Divider';
14-
import Drawer from 'src/components/Drawer';
14+
import { Drawer } from 'src/components/Drawer';
1515
import { ErrorState } from 'src/components/ErrorState/ErrorState';
1616
import { LinearProgress } from 'src/components/LinearProgress';
1717
import { Notice } from 'src/components/Notice/Notice';

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import * as React from 'react';
22
import { makeStyles } from 'tss-react/mui';
33

4-
import Drawer from 'src/components/Drawer';
4+
import { Drawer } from 'src/components/Drawer';
55

66
import UpdateContactInformationForm from './UpdateContactInformationForm';
77

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import { VariantType } from 'notistack';
55
import * as React from 'react';
66

77
import { Divider } from 'src/components/Divider';
8-
import Drawer from 'src/components/Drawer';
8+
import { Drawer } from 'src/components/Drawer';
99
import { LinearProgress } from 'src/components/LinearProgress';
1010
import { Notice } from 'src/components/Notice/Notice';
1111
import { TooltipIcon } from 'src/components/TooltipIcon';

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import { makeStyles } from 'tss-react/mui';
66

77
import ActionsPanel from 'src/components/ActionsPanel';
88
import { Button } from 'src/components/Button/Button';
9-
import Drawer from 'src/components/Drawer';
9+
import { Drawer } from 'src/components/Drawer';
1010
import { MultipleIPInput } from 'src/components/MultipleIPInput/MultipleIPInput';
1111
import { Notice } from 'src/components/Notice/Notice';
1212
import { Typography } from 'src/components/Typography';

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import { useHistory } from 'react-router-dom';
55

66
import ActionsPanel from 'src/components/ActionsPanel/ActionsPanel';
77
import { Button } from 'src/components/Button/Button';
8-
import Drawer from 'src/components/Drawer/Drawer';
8+
import { Drawer } from 'src/components/Drawer';
99
import { Notice } from 'src/components/Notice/Notice';
1010
import { Radio } from 'src/components/Radio/Radio';
1111
import { TextField } from 'src/components/TextField';

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ import * as React from 'react';
2323

2424
import ActionsPanel from 'src/components/ActionsPanel';
2525
import { Button, ButtonProps } from 'src/components/Button/Button';
26-
import Drawer from 'src/components/Drawer';
26+
import { Drawer } from 'src/components/Drawer';
2727
import Select, { Item } from 'src/components/EnhancedSelect/Select';
2828
import { MultipleIPInput } from 'src/components/MultipleIPInput/MultipleIPInput';
2929
import { Notice } from 'src/components/Notice/Notice';

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import { useHistory } from 'react-router-dom';
55

66
import ActionsPanel from 'src/components/ActionsPanel';
77
import { Button } from 'src/components/Button/Button';
8-
import Drawer from 'src/components/Drawer';
8+
import { Drawer } from 'src/components/Drawer';
99
import { Notice } from 'src/components/Notice/Notice';
1010
import { TextField } from 'src/components/TextField';
1111
import { useImportZoneMutation } from 'src/queries/domains';

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import * as React from 'react';
44

55
import ActionsPanel from 'src/components/ActionsPanel';
66
import { Button } from 'src/components/Button/Button';
7-
import Drawer from 'src/components/Drawer';
7+
import { Drawer } from 'src/components/Drawer';
88
import { MultipleIPInput } from 'src/components/MultipleIPInput/MultipleIPInput';
99
import { Notice } from 'src/components/Notice/Notice';
1010
import { Radio } from 'src/components/Radio/Radio';

packages/manager/src/features/Firewalls/FirewallDetail/Devices/AddDeviceDrawer.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import { useParams } from 'react-router-dom';
44

55
import ActionsPanel from 'src/components/ActionsPanel';
66
import { Button } from 'src/components/Button/Button';
7-
import Drawer from 'src/components/Drawer';
7+
import { Drawer } from 'src/components/Drawer';
88
import { Link } from 'src/components/Link';
99
import { Notice } from 'src/components/Notice/Notice';
1010
import { SupportLink } from 'src/components/SupportLink';

0 commit comments

Comments
 (0)