Drawer
Use a drawer when the reader needs to work with extra content without losing sight of the page behind it. The background stays visible and interactive, so a drawer suits tasks where the reader moves back and forth between the panel and the main view.
The browser errors page uses one for its error inspector.
Where it exists
ui-drawer--default (open it in Storybook). One of 12 stories. Drag the bottom edge to resize. ⚠️ The frame renders the component at the frame's own width, so in a narrow pane you are seeing a narrow rendering rather than the canonical one.| axis | value |
|---|---|
| React module | yes — shared UI library |
| React tier | library |
| CSS class | none |
| CSS files | none |
| Storybook | yes |
| Figma | not mapped |
| Uses in product | 2 |
| Uses in admin | 0 |
| Seen as | jsx-tag |
| Join provenance | none |
An empty cell above is a measurement, not an omission: every axis is printed whether or not it is populated. What each one costs is on /gaps.md, linked from the axis name wherever this page has a gap.
Members
A member is attached to its parent at module scope, so it is imported through the parent and versioned with it. Members have no page of their own: they declare no CSS class, carry no story and join no Figma set, and their uses are counted against the parent rather than separately.
Drawer.Close— 1 use in the productDrawer.Content— not used in the productDrawer.Description— not used in the productDrawer.Footer— not used in the productDrawer.Header— not used in the productDrawer.Title— not used in the product