salt-ds
salt-ds copied to clipboard
Header Block component
This issue will standardize a Header Block which can be composed into container components (Dialog, Drawer, Overlay) and provide a Header Block component.
Requirements
The Header Block will include the following attributes:
- Default: Accent bar, Title text, Close Button (all optional)
- Supports statuses (iRAG) -- Header Block won't be opinionated about which components can display its status states. Salt will provide relevant examples of use per component it is used in.
- Padding-top/ -bottom at
--spacing-300
.
Component updates
The following components are updated to use the Header Block:
- Dialog -- This will be the only example that shows status headers.
- Drawer
- Overlay
-- Padding-top/-bottom will be overwritten to
--spacing-200
to match the internal padding of Overlay.
In all cases, if the container element needs to be closed via Close Button, the Header Block close button should be used.
Consideration: Should a Close Button component be created as it's own individual component?
Enhancement An overflow drop-shadow will be added at a later point.
Closes #3532 Closes #2970