use has prop to select the titlearea and different variants

[broccolinisoup]

Reported internally on Slack (Hubbers link only) - Please note this is the fix of thePageHeader.Actions layout shift issue in the PageHeader component. Not the font size which I am still working on it.

The layout shift was caused by setting the data-size-variant={titleVariant} on PageHeader component (to set height for other sub elements such as leading and trailing visual and actions) in the useeffect. We had to do it this way in the useeffect because we only get the value of the variant prop after rendering the PageHeader.TitleArea component. However, pairing with @siddharthkp yesterday, he suggested to explore using has prop since we only change styles based on variants and nothing else, it simply worked! ✨

This PR removes reading the variant value from PageHeader.TitleArea after the render. Instead, it simply looks for elements that has data-component="TitleArea" and each related variant data attributes and set the styling for sub components under. Since we don't need to wait for any render, it simply prevents layout shift.

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

I noticed this layout shift issue before but thought it is due to the slowness of the storybook but unfortunately it is quite visible in the real life too :/

Changelog

New

Changed

• Move the variant prop from PageHeader.TitleArea to PageHeader and rename it to titleVariant

Removed

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 (Learn more about how to run integration tests)

[changeset-bot]

⚠️ No Changeset found

Latest commit: fe52f0d

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

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

[github-actions]

size-limit report 📦

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

[broccolinisoup]

closing in favour of #4669