Skip to content

PageLayout: Add padding prop to subcomponents #2201

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.

Sign up for GitHub

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

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
Aug 2, 2022
Merged

PageLayout: Add padding prop to subcomponents #2201

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
783c17a
Add a padding prop to PageLayout subcomponents
colebemis Jul 28, 2022
16e6249
Create funny-roses-impress.md
colebemis Jul 28, 2022
1add45a
Merge remote-tracking branch 'origin/main' into pagelayout-padding-prop
colebemis Aug 2, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/funny-roses-impress.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@primer/react": minor
---

Add `padding` prop to `PageLayout.Header`, `PageLayout.Content`, `PageLayout.Pane`, and `PageLayout.Footer`
63 changes: 57 additions & 6 deletions docs/content/PageLayout.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,6 +57,25 @@ See [storybook](https://primer.style/react/storybook?path=/story/layout-pagelayo
</PageLayout>
```

### With connected dividers

```jsx live
<PageLayout padding="none" rowGap="none" columnGap="none">
<PageLayout.Header padding="normal" divider="line">
<Placeholder label="Header" height={64} />
</PageLayout.Header>
<PageLayout.Content padding="normal">
<Placeholder label="Content" height={240} />
</PageLayout.Content>
<PageLayout.Pane padding="normal" divider="line">
<Placeholder label="Pane" height={120} />
</PageLayout.Pane>
<PageLayout.Footer padding="normal" divider="line">
<Placeholder label="Footer" height={64} />
</PageLayout.Footer>
</PageLayout>
```

### With pane on left

```jsx live
Expand Down Expand Up @@ -144,23 +163,23 @@ See [storybook](https://primer.style/react/storybook?path=/story/layout-pagelayo
<PropsTableRow
name="padding"
type={`| 'none'
| 'normal'
| 'condensed'`}
| 'condensed'
| 'normal'`}
defaultValue="'normal'"
description="The spacing between the outer edges of the page container and the viewport"
/>
<PropsTableRow
name="columnGap"
type={`| 'none'
| 'normal'
| 'condensed'`}
| 'condensed'
| 'normal'`}
defaultValue="'normal'"
/>
<PropsTableRow
name="rowGap"
type={`| 'none'
| 'normal'
| 'condensed'`}
| 'condensed'
| 'normal'`}
defaultValue="'normal'"
/>
<PropsTableSxRow />
Expand All @@ -169,6 +188,14 @@ See [storybook](https://primer.style/react/storybook?path=/story/layout-pagelayo
### PageLayout.Header

<PropsTable>
<PropsTableRow
name="padding"
type={`| 'none'
| 'condensed'
| 'normal'`}
defaultValue="'normal'"
description="The amount of padding inside the header."
/>
<PropsTableRow
name="divider"
type={`| 'none'
Expand Down Expand Up @@ -209,6 +236,14 @@ See [storybook](https://primer.style/react/storybook?path=/story/layout-pagelayo
defaultValue="'full'"
description="The maximum width of the content region."
/>
<PropsTableRow
name="padding"
type={`| 'none'
| 'condensed'
| 'normal'`}
defaultValue="'normal'"
description="The amount of padding inside the content."
/>
<PropsTableRow
name="hidden"
type={`| boolean
Expand Down Expand Up @@ -247,6 +282,14 @@ See [storybook](https://primer.style/react/storybook?path=/story/layout-pagelayo
defaultValue="'medium'"
description="The width of the pane."
/>
<PropsTableRow
name="padding"
type={`| 'none'
| 'condensed'
| 'normal'`}
defaultValue="'normal'"
description="The amount of padding inside the pane."
/>
<PropsTableRow
name="divider"
type={`| 'none'
Expand Down Expand Up @@ -278,6 +321,14 @@ See [storybook](https://primer.style/react/storybook?path=/story/layout-pagelayo
### PageLayout.Footer

<PropsTable>
<PropsTableRow
name="padding"
type={`| 'none'
| 'condensed'
| 'normal'`}
defaultValue="'normal'"
description="The amount of padding inside the footer."
/>
<PropsTableRow
name="divider"
type={`| 'none'
Expand Down
18 changes: 14 additions & 4 deletions src/PageLayout/PageLayout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -185,12 +185,14 @@ const VerticalDivider: React.FC<React.PropsWithChildren<DividerProps>> = ({
// PageLayout.Header

export type PageLayoutHeaderProps = {
padding?: keyof typeof SPACING_MAP
divider?: 'none' | 'line'
dividerWhenNarrow?: 'inherit' | 'none' | 'line' | 'filled'
hidden?: boolean | ResponsiveValue<boolean>
} & SxProp

const Header: React.FC<React.PropsWithChildren<PageLayoutHeaderProps>> = ({
padding = 'none',
divider = 'none',
dividerWhenNarrow = 'inherit',
hidden = false,
Expand All @@ -212,7 +214,7 @@ const Header: React.FC<React.PropsWithChildren<PageLayoutHeaderProps>> = ({
sx
)}
>
{children}
<Box sx={{padding: SPACING_MAP[padding]}}>{children}</Box>
<HorizontalDivider
variant={divider}
variantWhenNarrow={dividerWhenNarrow}
Expand All @@ -229,6 +231,7 @@ Header.displayName = 'PageLayout.Header'

export type PageLayoutContentProps = {
width?: keyof typeof contentWidths
padding?: keyof typeof SPACING_MAP
hidden?: boolean | ResponsiveValue<boolean>
} & SxProp

Expand All @@ -242,6 +245,7 @@ const contentWidths = {

const Content: React.FC<React.PropsWithChildren<PageLayoutContentProps>> = ({
width = 'full',
padding = 'none',
hidden = false,
children,
sx = {}
Expand All @@ -265,7 +269,9 @@ const Content: React.FC<React.PropsWithChildren<PageLayoutContentProps>> = ({
sx
)}
>
<Box sx={{width: '100%', maxWidth: contentWidths[width], marginX: 'auto'}}>{children}</Box>
<Box sx={{width: '100%', maxWidth: contentWidths[width], marginX: 'auto', padding: SPACING_MAP[padding]}}>
{children}
</Box>
</Box>
)
}
Expand All @@ -279,6 +285,7 @@ export type PageLayoutPaneProps = {
position?: keyof typeof panePositions
positionWhenNarrow?: 'inherit' | keyof typeof panePositions
width?: keyof typeof paneWidths
padding?: keyof typeof SPACING_MAP
divider?: 'none' | 'line'
dividerWhenNarrow?: 'inherit' | 'none' | 'line' | 'filled'
hidden?: boolean | ResponsiveValue<boolean>
Expand All @@ -299,6 +306,7 @@ const Pane: React.FC<React.PropsWithChildren<PageLayoutPaneProps>> = ({
position = 'end',
positionWhenNarrow = 'inherit',
width = 'medium',
padding = 'none',
divider = 'none',
dividerWhenNarrow = 'inherit',
hidden = false,
Expand Down Expand Up @@ -346,7 +354,7 @@ const Pane: React.FC<React.PropsWithChildren<PageLayoutPaneProps>> = ({
sx={{[position === 'end' ? 'marginRight' : 'marginLeft']: SPACING_MAP[columnGap]}}
/>

<Box sx={{width: paneWidths[width]}}>{children}</Box>
<Box sx={{width: paneWidths[width], padding: SPACING_MAP[padding]}}>{children}</Box>
</Box>
)
}
Expand All @@ -357,12 +365,14 @@ Pane.displayName = 'PageLayout.Pane'
// PageLayout.Footer

export type PageLayoutFooterProps = {
padding?: keyof typeof SPACING_MAP
divider?: 'none' | 'line'
dividerWhenNarrow?: 'inherit' | 'none' | 'line' | 'filled'
hidden?: boolean | ResponsiveValue<boolean>
} & SxProp

const Footer: React.FC<React.PropsWithChildren<PageLayoutFooterProps>> = ({
padding = 'none',
divider = 'none',
dividerWhenNarrow = 'inherit',
hidden = false,
Expand All @@ -389,7 +399,7 @@ const Footer: React.FC<React.PropsWithChildren<PageLayoutFooterProps>> = ({
variantWhenNarrow={dividerWhenNarrow}
sx={{marginBottom: SPACING_MAP[rowGap]}}
/>
{children}
<Box sx={{padding: SPACING_MAP[padding]}}>{children}</Box>
</Box>
)
}
Expand Down
Loading