add classname prop support to PageHeader component and its children

ktravers commented 3 weeks ago

Closes https://github.com/github/primer/issues/3331

This pull request introduces support for styling via CSS utility classes on the PageHeader component and its children by adding support for an optional className prop, allowing for more flexible customization without relying on Styled System props (sx). Full context: my team is currently in the process of deprecating our use of sx, so this change will allow us to safely incrementally replace sx props with className props.

Changelog

New

Adds optional className prop: All PageHeader components now accept a className prop. This prop is applied to the root element of each component.
Maintains backward compatibility: The addition of the className prop is optional and does not affect existing implementations that do not use this prop.
Updates TypeScript types: The TypeScript definitions for PageHeader components have been updated to include the new className prop, ensuring type safety for TypeScript users.
Updates documentation: The PageHeader component documentation has been updated to include information about the new className prop.

Changed

N/A

Removed

N/A

Rollout strategy

[ ] Patch release
[x] Minor release
[ ] Major release; if selected, include a written rollout or migration plan
[ ] None; if selected, include a brief description as to why

Testing & Reviewing

Prerequisites

Open this branch locally or in a codespace
Run npm run setup to setup dependencies

Click testing

Run npm start to start the Storybook server
Navigate to the PageHeader component in Storybook
Review examples

Automated testing

Run npx playwright install --with-deps to install dependencies
Run npx playwright test --grep @vrt to run visual regression tests
Run npx playwright test --grep @art to run accessibility tests
Review test results

Merge checklist

[ ] Added/updated tests
[x] Added/updated documentation
[ ] Added/updated previews (Storybook)
[x] Changes are SSR compatible
[x] Tested in Chrome
[x] Tested in Firefox
[x] Tested in Safari
[ ] Tested in Edge
[x] (GitHub staff only) Integration tests pass at github/github (Learn more about how to run integration tests) - see https://github.com/github/github/actions/runs/9475842136