PageLayout component / Layout beta + storybook
#1737
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
🦋 Changeset detectedLatest commit: 0f5f357 The changes in this PR will be included in the next version bump. This PR includes changesets to release 1 package
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 |
this is a reminder that all the abstraction can happen in the viewComponent; there's no need to flood the css with constricted behaviors
Changelog: ### CSS classes - `PageLayout--variant-stackRegions` → `PageLayout--responsive-stackRegions` - `PageLayout--variant-separateRegions` → `PageLayout--responsive-separateRegions` - `PageLayout--variant-stackRegions-panePos-*` →`PageLayout--responsive-panePos-*` - `PageLayout--variant-separateRegions-primary-*` →`PageLayout--responsive-primary-*` - `PageLayout-region--hasDivider-*` → `PageLayout-region--dividerNarrow-*` ### Prop names - `responsivePrimaryRegion` → `primaryRegion` - `paneResponsivePosition` → `panePositionNarrow` - `paneResponsiveDivider` → `paneDividerNarrow` - `headerResponsiveDivider`→ `headerDividerNarrow` - `footerResponsiveDivider`→ `footerDividerNarrow` ### Args - `*DividerNarrow` props have new `inherit` value by default
langermank
approved these changes
Dec 21, 2021
There was a problem hiding this comment.
Looks great @vdepizzol! I read through the props again in Storybook and it all feels clear to me
Merged
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
This PR adds the
PageLayoutcomponent to Primer CSS as part of https://github.com/github/primer/issues/374, to be used alongside its Primer ViewComponent counterpart in primer/view_components#937.This PR also adds storybook stories to the existing
Layoutand newPageLayoutcomponents.PageLayoutcomponent(previously known as "Layout beta")
PageLayoutis responsible to determine the arrangement of the main regions that compose a page. This means anything after the global and local headers (i.e. repo or org headers), and anything before the global footer.While the
Layoutcomponent only handles columns meant to be placed inside a container wrapper,PageLayoutcontrols the page spacings, supports header and footer regions, provides different styles of sidebars, and handles responsive strategies.✨ Test it in Storybook ✨
Component usage
When consuming
PageLayoutvia Primer ViewComponents, two components will be available, based on this CSS implementation:<PageLayout />- This is the classic™ GitHub layout style. By default it's a centeredxlcontainer with a pane region on the right.<SplitPageLayout />- This is a new "split" style layout, useful for hierarchical experiences where changes in thepaneregion are reflected in thecontentregion.Responsive variants
There are two ways
PageLayoutmay appear on smaller viewports,mdbreakpoint and below:stackRegions: presents the columns in a vertical flow, withpaneandcontentvertically arranged.separateRegions: presentspaneandcontentregions as different pages on smaller viewports. This is useful for list/detail patterns, like the Settings example below.<SplitPageLayout />only supports this variant.Storybook files
Layout/Beta/Playgroundhas props and descriptions for all features supported by this component
Layout/Beta/PageLayout/Playgroundshows which props will be available for consumption in the
<PageLayout />viewComponent.Layout/Beta/SplitPageLayout/Playgroundshow which props will be available for consumption in the
<SplitPageLayout />viewComponent.PageLayoutvsLayoutcomponentsFor now we'll continue having
Layoutas a generic two-column layout component. My plan is to updateLayoutto continue supporting nested applications in 3-column pages, and rename it to a more specificContentPaneLayout.Examples/applications
Settings
<SplitPageLayout />applicationseparateRegionsbehavior on smaller viewportscontentwith anmdwidth gets centered to the viewport whenever there's enough space.PageLayout-RepoSettings.mov
Discussions
Layoutcomponent. The third column stacks vertically on algbreakpoint before the other columns.PageLayout-Discussions.mov
Issue detail
stackRegionsdefault responsive variant.filleddivider on responsive variantPageLayout-IssueDetail.mov
CSS implementation
I've had to disable some
stylelintchecks, particularlymax-nesting-depthandselector-max-specificitydue to the component granularity.I've also disabled
no-duplicate-selectorsfor code readability, with groupings by@mediaqueries when addressing responsive variants, instead of grouping by selectors.separateRegions-specific javascriptThis component requires javascript to support anchor navigation when responsive variant is set to
separateRegions. This only applies to small viewports — presentation in scenarios without JS is not compromised on larger viewports.It's unclear where this javascript will ultimately live, whether in https://github.com/primer/behaviors or inside github/github proper. For now, a behavior reference can be found at:
https://github.com/primer/css/blob/layout-stories/docs/src/stories/helpers/pageLayoutBehavior.jsx
References