PageHeader - Subtitle width

grommet / hpe-design-system

HPE Design System

45 stars 24 forks source link

PageHeader - Subtitle width #3832

Open SeamusLeonardHPE opened 1 month ago

SeamusLeonardHPE commented 1 month ago

As highlighted by George in the linked comment.

The figma page header component display different behaviour then its coded grommet counterpart.

The css grid rules for the "subtitle" div contain a min/max 384/768px that helps text wrap at less than 80 characters wide.

Should the same principles apply in the figma component to help product designers create accurate mocks

ashifalinadaf commented 3 weeks ago

Working on the issue, WIP FIle

ashifalinadaf commented 3 weeks ago

There is a divergence between how text wrapping behave in figma & code on the page header component
Code has an undocumented max width for text (should be in DS guidance - is this enforce elsewhere?)
what is the max width for the div, what is the max width for the 'p string'
How does this behaviour change when in a smaller responsive size

ashifalinadaf commented 3 weeks ago

Initial proposals for changes to the Figma component

Changes in the font size Subtitle - Text/Normal/Xlarge (24/30) XLarge - No changes Large - No changes Medium - No changes Small - Text/Normal/Xlarge (24/30) to Text/Normal/default (18/24) Xsmall - Text/Normal/Xlarge (24/30) to Text/Normal/default (18/24)

Title - Heading /Desktop/ h1 medium (36/36) XLarge - No changes Large - No changes Medium - No changes Small - Heading /Desktop/ h1 medium (36/36) to Heading /Desktop/ h1 small (24/24) Xsmall - Heading /Desktop/ h1 medium (36/36) to Heading /Desktop/ h1 small (24/24)

Changes in width: Subtitle: XL = 768px to 600px L = 768px to 600px M = 528px to 600px S = 384px to 450px XS = 192px to 450px

Additional guidelines will be added to the Design System Site following the changes made above

ashifalinadaf commented 2 weeks ago

Created a Pageheader figma component @SeamusLeonardHPE please let me know your thoughts on this, I have read all the comments from you and Taylor, Keeping the button group with all the buttons including the action menu/overflow menu, primary/secondary/default with left and right alignment.

Changes in the font size and width as mentioned above, and also at small and xsmall sizes will have a buttons wrapped below the subtitle.

ashifalinadaf commented 1 week ago

@SeamusLeonardHPE please have a look and see if this is okay, please do add comments if there are any changes. Latest iteration