Header Block component - Githubissues

bhoppers2008 commented 3 months ago

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 commented 3 months ago

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 commented 3 months ago

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

tomhazledine commented 3 months ago

Figma spec complete. Ready for dev work to begin.

mark-tate commented 3 months ago

Cortado Goal: Kickoff required RC by EOS

dplsek commented 2 months ago

@tomhazledine link to Figma spec

origami-z commented 2 months ago

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

dplsek commented 2 months ago

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

Open questions:

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)
will header block also be used in status dialogs?
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 commented 2 months ago

Meeting w/ @bhoppers2008 on Aug 14

Answers to Qs in Darrin's comment above:

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.
Yes - header block to be used in status dialogs. Nav to update component set to include status variants
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 commented 2 months ago

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

joshwooding commented 2 months ago

+1 sprint due to OOO and further design requirements

joshwooding commented 2 months ago

Aug 20 - Proposal created, ready for review by @bhoppers2008 and @joshwooding

origami-z commented 2 months ago

Feedback from MTK - existing Dialog header, if close button is positioned before the title, close button will not receive click event

<DialogCloseButton onClick={handleRequestClose} />
<DialogTitle header="Export" />

mark-tate commented 2 months ago

Espresso Goal to be released on 13th Sept, with a design review on 9th September

Deprecation strategy for design will be defined as part of this release

tomhazledine commented 2 months ago

Handover for design review by EOD 9th.

mark-tate commented 2 months ago

Nav to create a meeting to discuss the options for release by 13th Sept

tomhazledine commented 1 month ago

Following code review, implementing changes to component API to avoid "magic" and favour composition.

Branch for docs has been opened, but so far site docs and examples are WIP: https://github.com/jpmorganchase/salt-ds/pull/4095.