PageLayout.Pane: Add `sticky` prop

[colebemis]

Motivation

Pages with a lot of content (examples: files changed tab, settings page, etc.) might want to display a sticky side pane that stays in view as you scroll down through the content. This is not currently supported by the PageLayout component

Summary

This PR adds a sticky prop to the PageLayout.Pane component that provides a convenient way for consumers to make side panes sticky:

<PageLayout>
- <PageLayout.Pane>...</PageLayout.Pane>
+ <PageLayout.Pane sticky>...</PageLayout.Pane>
  <PageLayout.Content>...</PageLayout.Content>
</PageLayout>

Here's a quick demo of the sticky behavior:

https://user-images.githubusercontent.com/4608155/182470609-8ea88a18-af50-4ba3-be6f-22d76595577a.mp4

Implementation

The sticky is more complex than you might expect so I recorded a quick demo to explain why the complexity exists and how it works:

🎥 🍿 https://share.cleanshot.com/O9uSpc

Merge checklist

• [ ] Added/updated tests (I'm not sure how to write tests for this behavior 😅)
• [x] Added/updated documentation
• [x] Tested in Chrome
• [x] Tested in Firefox
• [x] 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[bot]]

🦋 Changeset detected

Latest commit: 295a1ae3a9c7032eeca70943654187c712768c59

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	Minor

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
dist/browser.esm.js	74.21 KB (+1.7% 🔺)
dist/browser.umd.js	74.75 KB (+1.93% 🔺)