PageHeader: Fixes layout issues on title and sub components

[broccolinisoup]

[!IMPORTANT]
For release coordinator: I would need two commits (commit1, commit2) to be added to the upgrade PR

Reported internally on Slack (Hubbers link only) that there is a layout shift happening on titles and sub components. (font-size (for titles) and the height of the actions change after the initial render)

Video describes the layout shift issue in the prod storybook and how this PR fixes it on the local environment. Especially the actions on the right side jumps quite visibly.

https://github.com/primer/react/assets/1446503/63211e18-6442-44c7-8d73-c2ec40665c5f

Changelog

New

Changed

• Updates root styles to select elements that has data-component="TitleArea" and each related variant data attribute, and sets the font styling and height for sub components (leading actions, actions etc) for each variant. Since we don't need to wait for any render as we did before, we don't see any layout shift.
• Since we set the font styles on TitleArea (as described just above), we don't hit specificity issues when there is an override on the Title (like the reported issue), therefore no layout shift on the titles either.

Removed

• Removes retrieving the variant value from PageHeader.TitleArea in the useeffect.

Rollout strategy

• [x] Patch release
• [ ] 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

Merge checklist

• [x] Added/updated tests
• [ ] Added/updated documentation
• [x] Added/updated previews (Storybook)
• [x] Changes are SSR compatible
• [ ] Tested in Chrome
• [ ] Tested in Firefox
• [ ] Tested in Safari
• [ ] Tested in Edge
• [x] (GitHub staff only) Integration tests pass at github/github - https://github.com/github/github/pull/328861 Performed manual testing at dotcom and can confirm that all is working fine 👍🏻

[changeset-bot[bot]]

🦋 Changeset detected

Latest commit: 4ce72c207e0117eaae6744f76e0093a8254bb018

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

| Name | Type | | ------------- | ----- | | @primer/react | Patch |

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[github-actions[bot]]

size-limit report 📦

Path	Size
packages/react/dist/browser.esm.js	91.1 KB (0%)
packages/react/dist/browser.umd.js	91.35 KB (0%)

[broccolinisoup]

@mperrotti yeah it is interesting! I can confirm that I see the same thing as you shared. It might be because of the font settings etc are different where these snapshots are generated.