Header Block component

[bhoppers2008]

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

[origami-z]

Need to think through how to play nicely with container's padding. e.g. Dialog has only top/bottom padding to make accent bar work. Drawer & Overlay have full paddings for the content (different spacing as well).

[origami-z]

Extend to 2 sprints, given multiple components, and user validation needed

[tomhazledine]

Figma spec complete. Ready for dev work to begin.

[mark-tate]

Cortado Goal:
Kickoff required
RC by EOS

[dplsek]

@tomhazledine link to Figma spec

[origami-z]

Aug 12 - starting dev tomorrow (one minor design update remaining)

[dplsek]

Aug 13th - had header block dev kick-off with @tomhazledine @navkaur76 @pseys

Open questions:

1. if header block were used in overlay, how is it expected to work compared to how it currently does? (close button only vs requiring a header)
2. will header block also be used in status dialogs?
3. need to settle on a concept/name that works within the system for the different options (currently 200 and 300)

@bhoppers2008 @joshwooding would like to discuss more on these

[navkaur76]

Meeting w/ @bhoppers2008 on Aug 14

Answers to Qs in Darrin's comment above:

1. Content within an overlay will sit below the header and close button, spanning the entire width of the content area. Header block component will have an additional prop that hides all text elements within the parent container, so only the close button is on display.
2. Yes - header block to be used in status dialogs. Nav to update component set to include status variants
3. Naming convention for spacing-200 + 300 still TBD (cc @pseys @dplsek). Further discussion required on this.

Other:

• Spacing-50 between description and heading - likely to remain as it is better to stay consistent with accordion and banner
• Plan required for best way of handling deprecation in figma of heading in dialog, without causing significant breaking changes. Nav to explore options.

[tomhazledine]

Aug 16 - dev in-progress. Expect RC by end of Monday

[joshwooding]

+1 sprint due to OOO and further design requirements

[tomhazledine]

Refactoring following dev feedback, expect PR ready for dev-review tomorrow (18th)

[mark-tate]

Design review today, PR up for code review, examples may need updates ?

[mark-tate]

design review complete for dialog and overlay, outstanding issue with scrolling
(long content with Safari chrome has no keyboard support)
Take a defect on scrolling to avoid Header blocker

[tomhazledine]

Code changes following design review in-progress

[mark-tate]

Galao Goal: dev complete by end of wk1

[mark-tate]

@tomhazledine do we have an update on this ?

[mark-tate]

Latte: 1 week capacity
wk1: Header for Overlay & Dialog available in Labs
To move to core some work needed
@bhoppers2008 to schedule remaining work

[bhoppers2008]

No work to happen beyond pushing dialog and overlay header to labs in Latte. Updates to dialog/overlay core site examples and guidance and header block pattern page to be updated for core in Lungo sprint.

[mark-tate]

Lungo Goal: no dev capacity this sprint

[bhoppers2008]

Moved to Macchiato sprint. No capacity in Lungo. @navkaur76 can resume the work when she returns from holiday. @mark-tate

[mark-tate]

Macc Goal:

Design/Dev kickoff to re-align on sprint priorities and how we will deliver/QA related tickets and publish in Figma

Plan in place for site updates
Design to review overlay so we can move to Labs
API review by EOS

[mark-tate]

Mocca Goal: MTK review from labs

[bhoppers2008]

Need to make changes to the header block status to allow for multiline. Meeting tomorrow (Tuesday) with plan to merge in Figma. Nav to keep Fernanda up to date.

[mark-tate]

Red Eye: BLOCKED - resolution for icon sizes to text sizes #4433 will unblock this story

[mark-tate]

@Fercas123 baseline alignment - how easy would it be to use this to align text and icons ?

[mark-tate]

Red Eye: Proposal to unblock by EOS

[origami-z]

<DialogHeader search returns 743 instances, need to be careful about breaking change

[bhoppers2008]

Header Block merged to labs.

@joshwooding New ticket to be created to move to core.
@navkaur76 New ticket to be created for header block updates in new Salt DS library (@yunjungyeh)