Use SSR-compatible slot implementation in PageLayout

[colebemis]

Problem

PageLayout.Header and PageLayout.Footer don't render server-side because PageLayout uses an SSR-incompatible approach to implement its slots API (issue).

Screen.Recording.2023-03-14.at.2.58.43.PM.mov

Notice that the layout shifts because the header appears after the page loads.

Slack discussion for context

Solution

This PR updates PageLayout to use an SSR-compatible slots implementation.

Tradeoff

In this new implementation, PageLayout.Header and PageLayout.Footer must be direct children of PageLayout. This feels like a reasonable tradeoff because PageLayout.Header and PageLayout.Footer aren't used often, and when they are used, they're almost always a direct child of PageLayout.

• Dotcom uses PageLayout.Header in 3 places. In 2 of 3 usages, PageLayout.Header is a direct child of PageLayout. In the 3rd case, PageLayout.Header can easily be refactored to be direct child of PageLayout.
• Dotcom doesn't use PageLayout.Footer.

Merge checklist

• Added/updated tests
• Added/updated documentation
• Tested in Chrome
• Tested in Firefox
• Tested in Safari
• Tested in Edge

Take a look at the What we look for in reviews section of the contributing guidelines for more information on how we review PRs.

[changeset-bot]

🦋 Changeset detected

Latest commit: 5dcc159

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
dist/browser.esm.js	94.61 KB (+0.09% 🔺)
dist/browser.umd.js	95.22 KB (+0.12% 🔺)

[joshblack]

Looks great 🔥 Just left some comments for some ideas while going through the code, feel free to ignore if they're not helpful 👍

[siddharthkp]

Hi!

Just leaving it here in case we need it: In case this change isn't backward compatible with instances of PageLayout in gh/gh, we can unblock this team by putting this in drafts/experimental first.

[colebemis]

@prashkan verified that this fixes SSR issues with PageLayout in gh/gh ✅ Slack