Add resizable support to the `<PageLayout>` component

[japf]

Describe your changes here.

This PR adds resizable support to the <PageLayout> component.

Screenshots

Please provide before/after screenshots for any visual changes

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[bot]]

🦋 Changeset detected

Latest commit: 6edaf11398d4f031398943f9f0352546cfd13cdc

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	78.8 KB (+0.85% 🔺)
dist/browser.umd.js	79.44 KB (+0.84% 🔺)

[colebemis]

This is looking great, @japf! 💖

I was poking around in the storybook and noticed that the pane width seems to "jump" when you start dragging. Any ideas why this might be happening?

https://user-images.githubusercontent.com/4608155/191313165-55ca089b-35ca-4a7f-865a-7708bf907584.mp4

I see this PR is marked as "work in progress" so feel free to ignore if this is a known issue :)

[japf]

👋 @colebemis I pushed a few fixes, feel free to have another look. Please let me know what you think is missing to mark the PR as ready for review. I guess I should update the docs?

Edit: there is an issue with the positioning of the divider, I'll look into that.

[japf]

@colebemis updated again, please have another look 😄

[colebemis]

@japf this is looking great! @joshblack is going to take the lead on code review. He'll be your point-of-contact for any questions you have :)

[joshblack]

Looking great! 🥳 Thanks so much for taking this on 🙏 Just wanted to leave some notes/questions on behavior since I wasn't sure what was expected

1. SC seems to be generating class names per clamp value

   It seems like Styled Components might be generating class names for each value in the clamp() 🤔 Would it be possible to pull the value out into an inline style or CSS Custom Property to avoid generating the class names? Or is there potentially something we can do with SC?

   https://user-images.githubusercontent.com/3901764/192837578-f4f902a7-0043-4591-baee-b94b658abbd5.mov

2. What's the expectation for when the layout goes narrow?

   I wasn't sure what the intent was for when the layout goes narrow, should the resize bar effectively be hidden at that breakpoint? Just wanted to double-check

   

3. Text selection when resizing on FF

   Super minor, but noticed that text selection was happening for FF when hitting the edges of the resize behavior 🤔

   https://user-images.githubusercontent.com/3901764/192835796-9e77d4c2-a51f-43af-9857-b5442729fc10.mov

4. Safari on iPad

   I wasn't sure how to get this to work when testing on iPad, it seems like the resize bar is interactive but when dragging it didn't seem to work (I guess because of onMouseDown?) Would we need to use something like onPointerDown to try and capture both cases or is the intent to drop down to touch events for iPad support?

5. Making the resize focusable

   Was curious what direction we were thinking about for making this keyboard operable 👀 One idea I had was to give the resize bar role="separator" and tabindex="0" to make it focusable. We could then use the following attributes to communicate state + purpose as it changes:

   • aria-label to label the resize bar
   • aria-valuenow to set the number reflecting the current position
   • aria-valuemin and aria-valuemax to represent the min/max values for resize
   • aria-orientation="vertical" to reflect orientation

   We could use onKeyDown on that element then and listen to ArrowLeft/ArrowRight to adjust it by px values and Shift+ArrowLeft, Shift+ArrowRight for increments of 10

   Reference: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/separator_role#focusable_separator

Sorry for the long list here! Just wanted to say thanks again for taking this on and let me know if you have any questions or if I'm missing anything!

[davekenn]

Just a note that our new code view is getting feedback that our file tree is too narrow when searching for files (goto file). This resizing will solve that problem for us! Cant wait for this to get to production!

[joshblack]

@japf just pushed up a small change for that styled components issue! Let me know what you think, also happy to make a PR for this kind of stuff in the future to merge into your branch if that's preferred. Just let me know!

[joshblack]

@japf just pushed up some docs btw for the two props added!

[colebemis]

Looks like this change causes the gap between the pane and content to be twice as large when there's no divider displayed:

[colebemis]

👋 @japf FYI I'm going to work on getting this over the finish line today. Planning to polish some of the interactions and styling.

[colebemis]

Update: I finished addressing @joshblack's comments. Here's a quick video demo: https://share.cleanshot.com/imPRk8

This should be ready for another round of review. cc @joshblack

[colebemis]

@joshblack I think those odd behaviors are related to how we set the max width of the pane. The max width of the pane is relative to the entire viewport size (vw), which can lead to unexpected behavior when PageLayout is nested inside smaller containers (as seen in the docs). Do those odd behaviors occur in Firefox and Safari in the fullscreen storybook example?

[colebemis]

@joshblack I'm open to new ideas about how to handle min/max pane width if you have any! Here's the spec from @vdepizzol: https://github.com/github/primer/issues/581