Drawer

[jaredcwhite]

Category

Overlays

Version

1st gen (older markup/styling)

Storybook

Core: https://dev-storybook-bloom.netlify.app/?path=/story/overlays-drawer--standard
Detroit: https://detroit-storybook-dev.netlify.app/?path=/story/overlays-drawer--standard

Dependencies

• Overlay component
• Tag component
• AlertBox component

[jaredcwhite]

Divergence: in Core, the buttons supplied via the actions prop appear right below the body:

in Detroit, they're pushed all the way down to screen bottom:

There are instances now in Detroit of manually placing buttons with the body of the drawer to display them in that location, rather than have them automatically pushed down due to using actions prop.

[jaredcwhite]

Detroit has an extra contentAreaClassName prop which can add additional class(es) onto the .drawer__content element. Currently the seems to be used only for px-0 pt-0 pb-0 h-full in a couple public site pages. Maybe we can figure out a better "2nd gen" approach.

[jaredcwhite]

On the "atom-izing" conversation…it seems like the Drawer's ability to display tags, alert box, etc. could be changed so it just accepts "header content" in a generic React node prop. And maybe we switch from actions to a generic footer prop, which could be supplied a button group? 🤔