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.

Rewatch.Screen.Recording.-.2024-06-10.at.1.57.mp4

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

• 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

• Added/updated tests
• Added/updated documentation
• Added/updated previews (Storybook)
• Changes are SSR compatible
• Tested in Chrome
• Tested in Firefox
• Tested in Safari
• Tested in Edge
• (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]

🦋 Changeset detected

Latest commit: 4ce72c2

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]

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%)

[mperrotti]

Shouldn't we be using var(--text-body-lineHeight-medium, 1.4285)?

[broccolinisoup]

Oh sorry I missed to update that! Just pushed it.

[mperrotti]

In the VRT snapshots, the text next to the "Open" badge looks vertically off-center, but I'm not actually seeing this when I look at the preview deployment. I checked this in Chrome, Safari, and Firefox.

[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.