Pageheader (web component) parity issues #8663
Description
Breadcrumbs rendering issue
On web component, breadcrumbs render improperly on default variant.
Hero image “contain” vs “cover”
For "Content w/ hero image" variant, the image does not take up the full height of the page header in some screen widths between breakpoints. Unsure if this is intentional or not.
Text wrap/indentation
In "Content w/ icon" variant, title wraps two lines and is indented to account for icon spacing. Although there is not a 1:1 variant to match against React storybook, React examples w/ icons do NOT wrap two lines, and instead truncate at one line. This would resolve the second-line indent in web storybook if applied.
Tabs disappear on XS screens
On small (mobile) screens, "Tab bar w/ tabs and tags" web variant, tabs disappear completely on small (mobile) screens. And on screens 1000px and smaller, the right chevron for the tabs overlaps with the tags.
Incorrect tag rendering
Tags in "Default content w/ contextual actions" and "Default content w/ contextual actions + page actions" examples do not render correctly:
Tabs and keyboard navigation
When navigating with keyboard, only the current tab is focused when tabbing through page.
Tabs and tags (“Tab bar with tabs and tags” variant)
When adjusting screen size, the right chevron for tabs overlaps with the tags.
Spacing issues
Icons in header vary from React (32px on web, 24px on react); padding is same, 16px
Heading: in web component variants with heading and Primary CTA buttons, padding between heading and Primary action CTA is coded as 1rem instead of a standardized token. Unable to determine the spacing used in the React counterpart as a benchmark. Spacing between Heading and tag (where applicable) is also coded as a 1rem gap.
Spacing between content and tabs is 24px, which varies from some React component variants, for example, "Simple page header with page title". Others that include more content such as "Page header with summary details" use 16px padding instead.
