Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We鈥檒l occasionally send you account related emails.

Already on GitHub? Sign in to your account

Make pane an optional region for PageLayout component #1989

Merged
merged 6 commits into from Mar 14, 2022

Conversation

vdepizzol
Copy link
Contributor

@vdepizzol vdepizzol commented Mar 14, 2022

What are you trying to accomplish?

This PR adds an expected functionality to PageLayout, making the pane region optional, and allowing single-column pages to also benefit from PageLayout's spacing structure.

Screen Shot

I've also fixed two Storybook-related issues:

What approach did you choose and why?

PageLayout has two wrapping elements: PageLayout-wrapper and PageLayout-columns. wrapper takes care of vertical stack (header, content+pane, footer), while columns handles the horizontal the stack (content + pane).

For single column layouts, I've removed PageLayout-columns from the markup, leaving content as a direct sibling of header and footer.

Note that the hasPane prop from Storybook shouldn't translate 1:1 to ViewComponent or React APIs; the presence of compound components or slots should determine the region existence.

What should reviewers focus on?

Are additional changes needed?

  • No, this PR should be ok to ship as is. 馃殺

@vdepizzol vdepizzol requested a review from jonrohan March 14, 2022 20:02
@vdepizzol vdepizzol requested a review from a team as a code owner March 14, 2022 20:02
@changeset-bot
Copy link

changeset-bot bot commented Mar 14, 2022

馃 Changeset detected

Latest commit: 9c896d4

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package
Name Type
@primer/css 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

Copy link
Member

@jonrohan jonrohan left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

鉂わ笍 Love it, needing this for PageLayout propagation on dotcom

Copy link
Contributor

@langermank langermank left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Love the helpful CSS comments!

@vdepizzol vdepizzol merged commit f544ef8 into main Mar 14, 2022
@vdepizzol vdepizzol deleted the pageLayout-singleColumn branch March 14, 2022 21:26
@primer-css primer-css mentioned this pull request Mar 14, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

4 participants