-
Notifications
You must be signed in to change notification settings - Fork 1.2k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
PageLayout component / Layout beta + storybook (#1737)
* storybook for layout alpha * the beginning of layout beta * simplify spacing structure and other things this is a reminder that all the abstraction can happen in the viewComponent; there's no need to flood the css with constricted behaviors * add rowGap & dividers, clean spacing props * content-width support, sticky pane * cleanup props * add preset property * !default * component name & settings example * typo, cleaner header & footer template * fix preset options * mobile-friendly responsive behavior * ongoing flowVertical breakpoint behavior * finish panePosition + responsive pos & dividers * panePosition fix * add splitAsPage, finish responsive divider * Layout beta ongoing updates (#1779) - simplify component with better names - rename it to `PageLayout` - stylelint cleanup - finalize responsive variants - finalize variant-specific region dividers * add minimum 320px viewport * fix layout alpha, add layout patterns * cleanup bg colors, stylint pass * enable debug bg colors * colorful regions by default for dubugging * "Needless disable for primer/no-undefined-vars" * Stylelint auto-fixes * line breaks a EOF * introduce page layout behavior as a sb helper * children props in specialized components * cleanup * typo * discussions responsive temporary example * layout alpha descriptions * pageLayout prop descriptions * cleanup * fix conflict * copy * responsiveVariant storybook description * 0 padding on fullscreen storybook layout * has__divider for boolean props * cleanup, copy * cleanup * cleanup * cleanup chained selections/descendants * Stylelint auto-fixes * inherit values for responsive divider props * consolidate modifier names for responsive props 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 * Create lemon-games-swim.md * Update lemon-games-swim.md * cleanup, header+footer dividers as local modifiers * hasFooterDivider instead of footerDivider * fix primaryRegion selector Co-authored-by: Actions Auto Build <actions@github.com> Co-authored-by: Katie Langerman <langermank@github.com>
- Loading branch information
3 people
authored
Dec 21, 2021
1 parent
995d790
commit 6b4089d
Showing
15 changed files
with
2,091 additions
and
9 deletions.
There are no files selected for viewing
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,5 @@ | ||
| --- | ||
| "@primer/css": minor | ||
| --- | ||
|
|
||
| Adds new PageLayout component CSS with Storybook documentation |
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
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
257 changes: 257 additions & 0 deletions
257
docs/src/stories/components/ActionList/ActionListExamples.stories.jsx
Large diffs are not rendered by default.
Oops, something went wrong.
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
204 changes: 204 additions & 0 deletions
204
docs/src/stories/components/Layout/LayoutAlpha.stories.jsx
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,204 @@ | ||
| import React from 'react' | ||
| import clsx from 'clsx' | ||
|
|
||
| export default { | ||
| title: 'Components/Layout/Alpha', | ||
| excludeStories: ['LayoutAlphaTemplate'], | ||
| argTypes: { | ||
| container: { | ||
| control: { type: 'select' }, | ||
| options: ['fluid', 'md', 'lg', 'xl'], | ||
| control: { | ||
| type: 'inline-radio' | ||
| }, | ||
| description: 'Wrapper around the entire component to define an optional maximum width.', | ||
| table: { | ||
| category: 'CSS' | ||
| } | ||
| }, | ||
| hasDivider: { | ||
| control: { type: 'boolean' }, | ||
| description: 'Whether to show a pane line divider.', | ||
| table: { | ||
| category: 'CSS' | ||
| } | ||
| }, | ||
| gutter: { | ||
| options: ['default', 'none', 'condensed', 'spacious'], | ||
| control: { | ||
| type: 'inline-radio' | ||
| }, | ||
| description: 'Sets the gap between columns.', | ||
| table: { | ||
| category: 'CSS' | ||
| } | ||
| }, | ||
| sidebarPosition: { | ||
| options: ['start', 'end'], | ||
| control: { | ||
| type: 'inline-radio' | ||
| }, | ||
| description: 'Sets the position of the sidebar.', | ||
| table: { | ||
| category: 'CSS' | ||
| } | ||
| }, | ||
| sidebarWidth: { | ||
| options: ['default', 'narrow', 'wide'], | ||
| control: { | ||
| type: 'inline-radio' | ||
| }, | ||
| description: 'Sets the width of the sidebar.', | ||
| table: { | ||
| category: 'CSS' | ||
| } | ||
| }, | ||
| mainWidth: { | ||
| options: ['fluid', 'md', 'lg', 'xl'], | ||
| control: { | ||
| type: 'inline-radio' | ||
| }, | ||
| description: 'Sets the width of the main content area.', | ||
| table: { | ||
| category: 'CSS' | ||
| } | ||
| }, | ||
| flowRowUntil: { | ||
| options: ['sm', 'md', 'lg'], | ||
| control: { | ||
| type: 'inline-radio', | ||
| }, | ||
| description: 'Sets the maximum breakpoint at which the layout will flow as row.', | ||
| table: { | ||
| category: 'CSS' | ||
| } | ||
| }, | ||
| mainChildren: { | ||
| description: 'creates a slot for main children', | ||
| table: { | ||
| category: 'HTML' | ||
| } | ||
| }, | ||
| sidebarChildren: { | ||
| description: 'creates a slot for sidebar children', | ||
| table: { | ||
| category: 'HTML' | ||
| } | ||
| }, | ||
| } | ||
| } | ||
|
|
||
| // build every component case here in the template (private api) | ||
| export const LayoutAlphaTemplate = ({ | ||
| container, | ||
| hasDivider, | ||
| gutter, | ||
| sidebarPosition, | ||
| sidebarWidth, | ||
| mainWidth, | ||
| flowRowUntil, | ||
| mainChildren, | ||
| sidebarChildren | ||
| }) => { | ||
|
|
||
| // Default values | ||
| container = container ?? 'xl'; | ||
| hasDivider = hasDivider ?? false; | ||
| gutter = gutter ?? 'default'; | ||
| sidebarPosition = sidebarPosition ?? 'end'; | ||
| sidebarWidth = sidebarWidth ?? 'default'; | ||
| mainWidth = mainWidth ?? 'full'; | ||
| flowRowUntil = flowRowUntil ?? 'md'; | ||
|
|
||
| // Leave `null` values for states that don't require a modifier class | ||
| container = (container === 'full') ? null : container; | ||
| hasDivider = (hasDivider === false) ? null : hasDivider; | ||
| gutter = (gutter === 'default') ? null : gutter; | ||
| sidebarWidth = (sidebarWidth === 'default') ? null : sidebarWidth; | ||
| mainWidth = (mainWidth === 'full') ? null : mainWidth; | ||
| flowRowUntil = (flowRowUntil === 'sm') ? null : flowRowUntil; | ||
|
|
||
| return ( | ||
| <div | ||
| // use clsx for multiple classnames | ||
| className={clsx( | ||
| 'Layout', | ||
| container && 'container-' + `${container}`, | ||
| gutter && 'Layout--gutter-' + `${gutter}`, | ||
| sidebarPosition && 'Layout--sidebarPosition-' + `${sidebarPosition}`, | ||
| sidebarWidth && 'Layout--sidebar-' + `${sidebarWidth}`, | ||
| hasDivider && 'Layout--divided', | ||
| flowRowUntil && '' + 'Layout--flowRow-until-' + `${flowRowUntil}` | ||
| )} | ||
| // use undefined for values that shouldn't be set if false | ||
| aria-hidden={hasDivider ? 'true' : undefined} | ||
| > | ||
| {/* use {children} for wrapper component templates */} | ||
| <> | ||
| <div className="Layout-main"> | ||
| {mainWidth ? ( | ||
| <> | ||
| <div className={'Layout-main-centered-' + mainWidth}> | ||
| <div className={clsx( mainWidth && 'container-' + mainWidth)}> | ||
| {mainChildren} | ||
| </div> | ||
| </div> | ||
| </> | ||
| ) : ( | ||
| <> | ||
| {mainChildren} | ||
| </> | ||
| )} | ||
| </div> | ||
| <div className="Layout-divider"></div> | ||
| <div className="Layout-sidebar">{sidebarChildren}</div> | ||
| </> | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| const sidebarPlaceholder = | ||
| <> | ||
| <div style={ | ||
| { | ||
| width: '100%', | ||
| height: '100%', | ||
| backgroundColor: '#DDF4FF', | ||
| border: '1px solid #80CCFF', | ||
| padding: '16px', | ||
| borderRadius: '6px' | ||
| } | ||
| }> | ||
| sidebar | ||
| </div> | ||
| </>; | ||
|
|
||
| const mainPlaceholder = | ||
| <> | ||
| <div style={ | ||
| { | ||
| width: '100%', | ||
| height: '100%', | ||
| backgroundColor: '#FFEFF7', | ||
| border: '1px solid #FFADDA', | ||
| padding: '16px', | ||
| borderRadius: '6px' | ||
| } | ||
| }> | ||
| main | ||
| </div> | ||
| </>; | ||
|
|
||
| // create a "playground" demo page that may set some defaults and allow story to access component controls | ||
| export const Playground = LayoutAlphaTemplate.bind({}) | ||
| Playground.args = { | ||
| container: 'full', | ||
| hasDivider: false, | ||
| gutter: 'default', | ||
| sidebarPosition: 'end', | ||
| sidebarWidth: 'default', | ||
| mainWidth: 'full', | ||
| flowRowUntil: 'md', | ||
| mainChildren: mainPlaceholder, | ||
| sidebarChildren: sidebarPlaceholder | ||
| } |
Oops, something went wrong.