search

vtex / shoreline

Design System for the VTEX Admin, previously called Admin UI
https://shoreline.vtex.com
15 stars 0 forks source link

Drawer #1537

Open matheusps opened 3 months ago

matheusps commented 3 months ago

Drawer

Figma CodeSandbox

Context

A Drawer (or Sheet) is a type of Dialog that is docked to a part of the screen, normally on: right, left, or bottom. Remember that like any other Dialog, a Drawer can be modal or non-modal. While exploring, I came across different types of drawers: https://component.gallery/components/drawer/. Putting it on the side of our current DS, I concluded that:

  1. The Drawer, in the context of Shoreline, enables users to preview and interact with information in multiple contexts. The user should always be able to interact with the background. This means that the Drawer is a NON-Modal Dialog.
  2. If we create a Modal-Drawer it will confuse the design system users wether they should use a Modal or a Drawer. So, let's not do this for now.
  3. Multiple sizes are necessary, so we have three: small, medium, large.
  4. While on desktop, the drawer opens on the right (left on rtl).
  5. While on mobile, the drawer opens on the bottom - acting as a bottom sheet.

API

Composable (full) form:

<DrawerProvider>
  <DrawerTrigger>{/* ... */}</DrawerTrigger>
  <DrawerPopover>
    <DrawerHeader>
      <DrawerHeading>{/* ... */}</DrawerHeading>
    </DrawerHeader>
    <DrawerContent>{/* ... */}</DrawerContent>
  </DrawerPopover>
</DrawerProvider>

The reduced form would be:

<Drawer label="Label of the button">
  <DrawerHeader>
    <DrawerHeading>{/* ... */}</DrawerHeading>
  </DrawerHeader>
  <DrawerContent>{/* ... */}</DrawerContent>
<Drawer>

DrawerProvider Props

Size
Direction

References

davicostalf commented 3 months ago

Nice to see!

The Drawer, in the context of Shoreline, enables users to preview and interact with information in multiple contexts. The user should always be able to interact with the background. This means that the Drawer is a NON-Modal Dialog.

Most studies I've seen (practically all) use the Drawer as a modal dialog.

If we create a Modal-Drawer it will confuse the design system users wether they should use a Modal or a Drawer. So, let's not do this for now.

Yes, indeed. What I've seen is that most designers are preferring drawers over modals. I believe they think it's more "productive" than a regular modal.

Multiple sizes are necessary, so we have three: small, medium, large.

Even though the modal has multiple sizes, the usage of the Drawer is different (ex. it always goes from top to bottom on desktop). Maybe the large size would suffice. I haven't seen this sort of variation in studies from other designers.

lafray commented 3 months ago

We also use drawer in two different applications in marketplace in. Both of the NON-Modal Dialog type. Our scenarios are super consistent with the points you raised.

I only missed a footer for the actions, which is common to all our scenarios, and the title having the behavior of remaining on the screen in drawer content with scroll.

lafray commented 3 months ago

I'm also thinking about the trigger scenario being the click on a row in a table. From my experience, I would say it will be one of the most common scenarios.

Do you imagine one instance per table row?

If so, how is the performance issue given that we would have pageSize instances?

If not, if they are going to share the structure and have several instances of just the trigger, I wonder how its implementation is. Currently, through codesandbox, it works like a toggle, that is, if I enable non-modal and click on the trigger button with it already open, it closes. So if I have this sharing for the lines and I click on another line when one is already open, it will close and not remain open, changing the content, which is the behavior that the designer on my team explained to me would be expected.

beatrizmilhomem commented 3 months ago

Very nice proposal! :sparkles:

I agree with @davicostalf that only one size can be enough. A very narrow drawer in desktop can be uncomfortable for reading and a very large one can cover most of the content below in smaller screens, so it looses the proposal to allow users to interact with the content. I can help by collecting the existing studies, so we can understand the most common width being used.

@matheusps can you give me access to Figma? Now I can't inspect spaces and styles.

@lafray can you share the archive that has the drawer with footer?

lafray commented 3 months ago

@lafray can you share the archive that has the drawer with footer?

Sure!

matheusps commented 3 months ago

@beatrizmilhomem, You should have access now.

matheusps commented 3 months ago

I would drop a question here, its polemic: What if we replaced all our modals (expect for the AlertDialog) by Drawers. In mobile, this makes sense. Is this true for desktop? cc @beatrizmilhomem , @davicostalf.

beatrizmilhomem commented 3 months ago

I would drop a question here, its polemic: What if we replaced all our modals (expect for the AlertDialog) by Drawers. In mobile, this makes sense. Is this true for desktop? cc @beatrizmilhomem , @davicostalf.

Not sure, we should test with some real scenarios.

beatrizmilhomem commented 3 months ago

@matheusps I added some examples of drawer usage in the Discovery page of your Figma. Most of them are concepts, but it's possible to see different usage and sizes. I'm changing my mind about the available sizes by looking at those examples, maybe the drawer really needs more than one size. I still question the large size though. What would happen in smaller screens? (there is an example in the Content Management section)

beatrizmilhomem commented 2 weeks ago

I added a second proposal on Matheus' Figma, based on his previous proposal and what we've discussed here. https://www.figma.com/design/bsfo0Ad4nqoWWSUSELEJHv/Drawer?node-id=175-99361&t=o1e8lo9Mzskf8p24-4

I didn't include a large size, since it would cover a large part of the screen and users wouldn't be able to see or interact with content on the page. That would help differentiate Modals from Drawers usage.

What do you think?