salt-ds icon indicating copy to clipboard operation
salt-ds copied to clipboard

Header Block component

Open bhoppers2008 opened this issue 7 months ago • 21 comments

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

bhoppers2008 avatar Jul 17 '24 16:07 bhoppers2008