PageHeader - Subtitle width

[SeamusLeonardHPE]

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]

Working on the issue,
WIP FIle

[ashifalinadaf]

• 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]

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]

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]

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