[joy-ui][Drawer] Add Drawer component #38169

mnajdova · 2023-07-26T13:36:15Z

Adding Drawer related components in Joy UI. I started with adding a Drawer component - which is the equivalent of the temporary drawer in Material UI. I decided not to add the permanent variant version, because in my opinion, these two versions of the component are too different to justify them being bundled in one component - if developers need a permanent drawer, why bundle all the modal-related code with it?

After this PR:

Add PermanentDrawer (Sidebar) component - we should have an integration demo about how the two can be used together.
Add SwipeableDrawer component
Add PersistentDrawer component

mui-bot · 2023-07-26T13:40:51Z

Netlify deploy preview

docs/data/joy/components/drawer/drawer.md

@mui/joy: parsed: +1.17% , gzip: +1.17%

Bundle size report

Details of bundle changes (Toolpad)
Details of bundle changes

Generated by 🚫 dangerJS against 84208ea

packages/mui-joy/src/Drawer/drawerClasses.ts

packages/mui-joy/src/Drawer/Drawer.test.tsx

mnajdova · 2023-08-16T14:01:48Z

packages/mui-joy/src/Modal/modalClasses.ts

@@ -3,6 +3,8 @@ import { generateUtilityClass, generateUtilityClasses } from '../className';
 export interface ModalClasses {
  /** Class name applied to the root element. */
  root: string;
+  /** Class name applied to the root element when open is false. */
+  hidden: string;


Missing class name

zanivan · 2023-08-31T21:49:01Z

There are some items that might be worth mentioning/discussing:

The variants and colors are not being applied to the playground demo
When switching modes, the iframe background sometimes appears and sometimes not

Light	Dark

It's impossible to dismiss the lg modal on mobile

I'm still getting up to speed on this, and you might already be aware of these things, so sorry about that.
Just to let you know, I've started refining the demos designs. Should I wait a bit more, or keep working on them?

siriwatknp · 2023-09-04T08:25:48Z

docs/data/joy/components/drawer/drawer.md

+The Drawer can be cancelled by clicking the overlay or pressing the Esc key.
+It closes when an item is selected, handled by controlling the `open` prop.
+
+{{"demo": "DrawerBasic.js", "iframe": true}}


Does it need to be iframe given that other demos are not? cc @zanivan

I will change this demo to be similar to the others, I wanted to make it closer to showcase how it would look like in app, but it complicates things in the code itself - the usage of the document object etc.

mnajdova · 2023-09-06T06:26:17Z

Sorry for the delay. Here are some answers:

The variants and colors are not being applied to the playground demo

Fixed, I must have broken this when I was removing the DrawerContent component.

When switching modes, the iframe background sometimes appears and sometimes not

I simplified this demo, no need for iframe, it complicates things when exporting to sandbox too.

It's impossible to dismiss the lg modal on mobile

It's possible by clicking on some of the items. In practise, I wouldn't expect that someone would use large drawer on a mobile?

…terial-ui into pr/38169

zanivan

LGTM 🚀

…drawer-component

siriwatknp · 2023-09-08T10:56:41Z

It's impossible to dismiss the lg modal on mobile

It's possible by clicking on some of the items. In practise, I wouldn't expect that someone would use large drawer on a mobile?

I added support for this by setting the width to min(100vw, drawer-width). With this, the drawer's width will never exceed the viewport's width which is commonly expected.

siriwatknp

🚀🚀🚀

marcpachecog · 2023-09-08T13:13:30Z

Thanks @siriwatknp , @mnajdova and @zanivan for your hard and meticulous work!

Usama-Tahir · 2023-09-11T06:21:17Z

Great work. I have a question. When will it be available via npm?

Thanks

mnajdova · 2023-09-13T08:18:53Z

Great work. I have a question. When will it be available via npm?

Likely later today with the latest release :)

[joy] Add Drawer component

ef80412

mnajdova added component: drawer This is the name of the generic UI component, not the React module! package: joy-ui Specific to @mui/joy labels Jul 26, 2023

remove unused types

e65a5ed

github-actions bot added the PR: out-of-date The pull request has merge conflicts and can't be merged label Jul 26, 2023

mnajdova added 3 commits July 26, 2023 15:54

lint issues

ca0e781

type issue

10dbfb4

more fixes

8d9e244

mnajdova commented Jul 26, 2023

View reviewed changes

packages/mui-joy/src/Drawer/drawerClasses.ts Outdated Show resolved Hide resolved

mnajdova commented Jul 26, 2023

View reviewed changes

packages/mui-joy/src/Drawer/Drawer.test.tsx Show resolved Hide resolved

This comment was marked as resolved.

Sign in to view

mnajdova added 3 commits July 27, 2023 15:50

[joy] Add useModal internal hook

2999d30

Merge branch 'joy/useModal-hook' into joy/drawer-component-using-hook

ce3781f

update Drawer to use useModal hook

dfc709f

github-actions bot removed the PR: out-of-date The pull request has merge conflicts and can't be merged label Jul 27, 2023

fixes

d849af5

mnajdova mentioned this pull request Jul 31, 2023

[base] Add useModal hook #38187

Merged

github-actions bot added the PR: out-of-date The pull request has merge conflicts and can't be merged label Aug 3, 2023

mnajdova added 2 commits August 16, 2023 15:54

Merge branch 'master' into joy/drawer-component

16a3376

resolving merge changes

76fb874

github-actions bot removed the PR: out-of-date The pull request has merge conflicts and can't be merged label Aug 16, 2023

mnajdova commented Aug 16, 2023

View reviewed changes

mnajdova added 6 commits August 16, 2023 16:16

fixes with imports/exports

4cd1c0a

wip

344b06b

wip

90e186c

improve the introduction demo

702a0f9

Fix Introduction demo code block

e9391bf

permanent drawer

dc14a16

mnajdova and others added 4 commits August 30, 2023 10:42

docs:api

7fef056

Small adjustment on modal height

9236d62

Visual tweaks to demos

d5866ed

Run yarn docs:typescript:formatted

1923983

Fix demo layout

08c40f5

siriwatknp reviewed Sep 4, 2023

View reviewed changes

mnajdova added 3 commits September 6, 2023 08:58

simplify basic demo

7c06507

remove unused disable-next-line

63dcd8d

invertedColors fix

5ab6781

mnajdova requested review from siriwatknp and zanivan and removed request for zanivan September 6, 2023 07:19

zanivan added 3 commits September 7, 2023 13:31

Merge remote-tracking branch 'upstream/master' into pr/38169

ad2cd8e

Merge branch 'joy/drawer-component' of https://github.com/mnajdova/ma…

13b5a5a

…terial-ui into pr/38169

Small design tweaks

120eaf4

zanivan approved these changes Sep 7, 2023

View reviewed changes

siriwatknp added 3 commits September 8, 2023 15:43

Merge branch 'master' of https://github.com/mui/material-ui into joy/…

fbb2d6f

…drawer-component

adjust styles and add classnames

a6a9d59

and and update demos

0732b24

remove the minus

84208ea

siriwatknp approved these changes Sep 8, 2023

View reviewed changes

mnajdova merged commit 3d2fb8a into mui:master Sep 8, 2023
21 checks passed

anon-phantom pushed a commit to anon-phantom/material-ui that referenced this pull request Sep 11, 2023

[joy-ui][Drawer] Add Drawer component (mui#38169)

91bf7aa

mnajdova mentioned this pull request Sep 16, 2023

[joy-ui][drawer] Support responsive/persistent state #38992

Open

2 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[joy-ui][Drawer] Add Drawer component #38169

[joy-ui][Drawer] Add Drawer component #38169

mnajdova commented Jul 26, 2023 •

edited

Loading

mui-bot commented Jul 26, 2023 •

edited

Loading

This comment was marked as resolved.

This comment was marked as resolved.

mnajdova Aug 16, 2023

zanivan commented Aug 31, 2023

siriwatknp Sep 4, 2023

mnajdova Sep 6, 2023

mnajdova commented Sep 6, 2023

zanivan left a comment

siriwatknp commented Sep 8, 2023 •

edited

Loading

siriwatknp left a comment

marcpachecog commented Sep 8, 2023 •

edited

Loading

Usama-Tahir commented Sep 11, 2023

mnajdova commented Sep 13, 2023

[joy-ui][Drawer] Add Drawer component #38169

[joy-ui][Drawer] Add Drawer component #38169

Conversation

mnajdova commented Jul 26, 2023 • edited Loading

mui-bot commented Jul 26, 2023 • edited Loading

Netlify deploy preview

Bundle size report

This comment was marked as resolved.

This comment was marked as resolved.

mnajdova Aug 16, 2023

Choose a reason for hiding this comment

zanivan commented Aug 31, 2023

siriwatknp Sep 4, 2023

Choose a reason for hiding this comment

mnajdova Sep 6, 2023

Choose a reason for hiding this comment

mnajdova commented Sep 6, 2023

zanivan left a comment

Choose a reason for hiding this comment

siriwatknp commented Sep 8, 2023 • edited Loading

siriwatknp left a comment

Choose a reason for hiding this comment

marcpachecog commented Sep 8, 2023 • edited Loading

Usama-Tahir commented Sep 11, 2023

mnajdova commented Sep 13, 2023

mnajdova commented Jul 26, 2023 •

edited

Loading

mui-bot commented Jul 26, 2023 •

edited

Loading

siriwatknp commented Sep 8, 2023 •

edited

Loading

marcpachecog commented Sep 8, 2023 •

edited

Loading