DrawerModal examples

DrawerModal is a component that slides in from the right side of the browser window. It is a modal window used only in George Business.

The component offers a space for contextual actions and information, especially in larger web resolutions. It is designed to show content related to the screen’s primary content and stays open until dismissed. A DrawerModal is presented modally, with an overlay blocking the content behind it. DrawerModal’s anatomy and structure is based on the Modal.

DrawerModal examples

Example: New Single Order within a Bulk

Open in Figma

Example: Edit permissions

Open in Figma

Example: Card details

Open in Figma

DrawerModal usage

• DrawerModal is used primarily to keep the user in the context of the current screen; reducing the chance of losing context by editing or waiting for an input from the user.
• DrawerModal can be useful to complete a task or providing details without leaving the current page.
• DrawerModal can be used for actions that require signing. But remember that we are using Drawer for one-step (quick) processes + optional signing. The result screen does not count towards the number of steps.

When to use Drawer

1. As informative Modal
   • It is typically used to display additional information. Eg. permission detail, detailed information on a specific financial health item, …
2. As editing/adding Modal
   • Used in cases like settings or configuration, creating a new contact, or adding something in context with the primary content.
   • Best used for quick actions that add a new item to the primary content, Eg. Adding a position for Tax Payments, or adding a new Contact.

Exceptions for using DrawerModal

Typically these are situations where we want to present a modal window to the user without their interaction, as described in the Trigger section (e.g. “What’s new” when the user logs into George Business).

For designers

Open in Figma

Width of DrawerModal

• On breakpoint LG and above DrawerModal’s body can have three different widths (described below).
• On breakpoint MD, DrawerModal has a width of 888px and 20px horizontal padding, leaving 768px for content.
• On breakpoint SM, DrawerModal has a width of 100% and 20px horizontal padding, leaving 576px for content.
• On breakpoint XS, DrawerModal has a width of 100% and 20px horizontal margin/padding, leaving the remaining space for content.

Horizontal content padding (for breakpoint LG and above)

Horizontal padding options in DrawerModal are limited to three sizes: Default, Large and Full

Hint Please make use of their number variables in Figma.
Other sizes are not allowed.

Choosing the correct padding width depends on the content you want to place in DrawerModal’s body.

Open in Figma

Default

• Horizontal padding: 140px, Figma variable: Modal/body/padding-horizontal/defaultCopy token name Modal/body/padding-horizontal/default
• Leaving 608px for content
• Used for single column forms with inputs, checkboxes, etc.
• This is the default padding

Large

• Horizontal padding: 70px, Figma variable: Modal/body/padding-horizontal/largeCopy token name Modal/body/padding-horizontal/large
• Leaving 748px for content
• Typically used for easy tables with less content

Full

• Width: 20px, Figma variable: Modal/body/padding-horizontal/fullCopy token name Modal/body/padding-horizontal/full
• Leaving 848px for content
• Recommended if you need to fit a lot of horizontal content into the DrawerModal, such as complex tables, multiple components side by side, images etc.

Vertical content padding (for breakpoint LG and above – desktop size)

Vertical content padding is always 20px.

Trigger

• DrawerModal should always be triggered by a Button
• DrawerModal must not be triggered by a list item (e.g. Table item) or a Card

Using Forms in ModalDrawer

It is recommended to use ‘above’ labels to make better use of the vertical space on the drawer. It also helps with the scannability of the task at hand and it is recommended to use the default body padding.

Actions requiring a signature in the drawer

The signing process in the DrawerModal is allowed, especially for quick actions such as locking the card, displaying a PIN or adding an item to the list.
Hint Always keep in mind that you should only use this behaviour for the quick actions with a single step flow.

Open in Figma

Scrolling within DrawerModal

In the case where the content of DrawerModal is more than fits on screen, it is possible to vertically scroll in the body of DrawerModal. Header and footer are always sticky and visible.

DrawerModal’s header

It is recommended not to use any icon in the header. This saves space and puts emphasis to the main content.

Footer actions

DrawerModal must always have a primary action in the footer. If there is only one button, it must be primary. In cases like the informative DrawerModal, we use a primary “Done” button.
Use the Esc key or the close button on the header to exit or cancel the task. Each modal has a primary button in the footer. All other buttons are secondary buttons. Only text buttons are allowed, no icon+text buttons should be placed. A close button should never be placed in the footer.

Confirmation inside DrawerModals

For confirming a successfully performed user action, it is recommended to use the Snackbar component to provide feedback to the user on their performed action.

If the action in DrawerModal requires a signature, the result should also be displayed in the DrawerModal. For these situations, similar to standard confirmation screens, we use the StatusInfo component inside the Drawer.

Open in Figma

Stacking of DrawerModals

It is technically possible to stack the drawers on top of each other, in which case you must close (with a close button in the header) the top drawer before doing anything else. However, we strongly advise against this approach and if such a situation can be avoided, all alternatives should be considered.

Accessibility

We are using same accessibility patterns as for standard Modal.

Do’s and Don’ts