A proposal for improving the PageHeader component API in response to changes required for accessibility fixes. The component API has grown and has become more coupled to components used in the internal implementation. To make the PageHeader component API more flexible and extensible, we can lean more into the composition of compounds component that would expose props of nested components (e.g., HeadingProps) automatically without polluting the top-level interface.
<PageHeaderannotation="Hello world!"description="Enter the description for your section here. This is useful on list and create pages."><PageHeader.Headingas="h2"styleAs="h1"><PageHeader.Breadcrumbto="/level-0"icon={PuzzleOutlineIcon}/><PageHeader.Breadcrumbto="/level-1">Level 1</PageHeader.Breadcrumb><PageHeader.Breadcrumb>Level 2</PageHeader.Breadcrumb></PageHeader.Heading></PageHeader>
We can use this approach more frequently for components with growing complexity to make them flexible. Especially it can be helpful for components reused in multiple client applications with slightly different requirements.
Changes
Added two subcomponents to the PageHeader component
PageHeader.Heading to expose Heading API.
PageHeader.Breadcrumb to use a more Reactish approach for defining PageHeader breadcrumbs.
Fixed HeadingElement type export warning.
Test plan
Ensure that there're no visual changes to the PageHeader component.
