|
1 | 1 | import Close from '@mui/icons-material/Close';
|
| 2 | +import _Drawer, { DrawerProps } from '@mui/material/Drawer'; |
2 | 3 | import Grid from '@mui/material/Unstable_Grid2';
|
3 | 4 | import { Theme } from '@mui/material/styles';
|
4 | 5 | import * as React from 'react';
|
5 | 6 | import { makeStyles } from 'tss-react/mui';
|
6 | 7 |
|
7 | 8 | import { IconButton } from 'src/components/IconButton';
|
8 | 9 | import { Typography } from 'src/components/Typography';
|
9 |
| -import _Drawer, { DrawerProps } from 'src/components/core/Drawer'; |
10 | 10 | import { convertForAria } from 'src/utilities/stringUtils';
|
11 | 11 |
|
12 |
| -export interface Props extends DrawerProps { |
| 12 | +interface Props extends DrawerProps { |
| 13 | + /** |
| 14 | + * Title that appears at the top of the drawer |
| 15 | + */ |
13 | 16 | title: string;
|
| 17 | + /** |
| 18 | + * Increaces the Drawers width from 480px to 700px on desktop-sized viewports |
| 19 | + * @default false |
| 20 | + */ |
14 | 21 | wide?: boolean;
|
15 | 22 | }
|
16 | 23 |
|
@@ -59,7 +66,18 @@ const useStyles = makeStyles()((theme: Theme) => ({
|
59 | 66 | },
|
60 | 67 | }));
|
61 | 68 |
|
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) => { |
63 | 81 | const { classes } = useStyles();
|
64 | 82 |
|
65 | 83 | const { children, onClose, title, wide, ...rest } = props;
|
@@ -123,5 +141,3 @@ const Drawer = (props: Props) => {
|
123 | 141 | </_Drawer>
|
124 | 142 | );
|
125 | 143 | };
|
126 |
| - |
127 |
| -export default Drawer; |
|
0 commit comments