Skip to content

PageLayout: Update divider prop responsive API#2198

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
colebemis merged 6 commits into from
Jul 29, 2022
Merged

PageLayout: Update divider prop responsive API #2198

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
d6298c2
Deprecate dividerWhenNarrow in favor of responsive values
colebemis Jul 27, 2022
ff34a35
Update PageLayout docs
colebemis Jul 27, 2022
e7c1512
Create spotty-parents-cheat.md
colebemis Jul 27, 2022
31ba88c
Update spotty-parents-cheat.md
colebemis Jul 27, 2022
205788d
Update snapshots
colebemis Jul 27, 2022
4b6a267
Merge branch 'main' into update-divider-prop
colebemis Jul 29, 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
19 changes: 19 additions & 0 deletions .changeset/spotty-parents-cheat.md
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
---
"@primer/react": minor
---

* Updated the `divider` prop in `PageLayout.Header`, `PageLayout.Pane`, and `PageLayout.Footer` to use the new responsive prop API introduced in https://github.com/primer/react/pull/2174.
* Deprecated the `dividerWhenNarrow` prop in favor of the new responsive prop API

**Before**

```
divider="line"
dividerWhenNarrow="filled"
```

**After**

```
divider={{regular: 'line', narrow: 'filled'}}
```

@siddharthkpsiddharthkpJul 29, 2022

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

this will be really helpful for next major changelog 🏆

83 changes: 63 additions & 20 deletions docs/content/PageLayout.mdx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -48,7 +48,8 @@ See [storybook](https://primer.style/react/storybook?path=/story/layout-pagelayo
<PageLayout.Content>
<Placeholder label="Content" height={240} />
</PageLayout.Content>
<PageLayout.Pane divider="line">
{/* You can change the divider based on the viewport width */}
<PageLayout.Pane divider={{narrow: 'line'}}>
<Placeholder label="Pane" height={120} />
</PageLayout.Pane>
<PageLayout.Footer divider="line">
Expand DownExpand Up@@ -172,25 +173,39 @@ See [storybook](https://primer.style/react/storybook?path=/story/layout-pagelayo
<PropsTableRow
name="divider"
type={`| 'none'
| 'line'`}
| 'line'
| {
narrow?:
| 'none'
| 'line'
| 'filled'
regular?:
| 'none'
| 'line'
wide?:
| 'none'
| 'line'
}`}

@siddharthkpsiddharthkpJul 29, 2022

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

(not blocker) we should think about how we want to show "type" in the docs, showing the typescript type isn't the most readable 😅

image

@colebemiscolebemisJul 29, 2022

Copy link
Copy Markdown
ContributorAuthor

Choose a reason for hiding this comment

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

Agreed! Open to ideas here.

defaultValue="'none'"
/>
<PropsTableRow
name="dividerWhenNarrow"
deprecated
type={`| 'inherit'
| 'none'
| 'line'
| 'filled'`}
defaultValue="'inherit'"
description="Use the divider prop with a responsive value instead."
/>
<PropsTableRow
name="hidden"
type={`| boolean
| {
narrow?: boolean
regular?: boolean
wide?: boolean
}`}
narrow?: boolean
regular?: boolean
wide?: boolean
}`}
defaultValue="false"
description="Whether the header is hidden."
/>
Expand All@@ -213,10 +228,10 @@ See [storybook](https://primer.style/react/storybook?path=/story/layout-pagelayo
name="hidden"
type={`| boolean
| {
narrow?: boolean
regular?: boolean
wide?: boolean
}`}
narrow?: boolean
regular?: boolean
wide?: boolean
}`}
defaultValue="false"
description="Whether the content is hidden."
/>
Expand DownExpand Up@@ -250,25 +265,39 @@ See [storybook](https://primer.style/react/storybook?path=/story/layout-pagelayo
<PropsTableRow
name="divider"
type={`| 'none'
| 'line'`}
| 'line'
| {
narrow?:
| 'none'
| 'line'
| 'filled'
regular?:
| 'none'
| 'line'
wide?:
| 'none'
| 'line'
}`}
defaultValue="'none'"
/>
<PropsTableRow
name="dividerWhenNarrow"
deprecated
type={`| 'inherit'
| 'none'
| 'line'
| 'filled'`}
defaultValue="'inherit'"
description="Use the divider prop with a responsive value instead."
/>
<PropsTableRow
name="hidden"
type={`| boolean
| {
narrow?: boolean
regular?: boolean
wide?: boolean
}`}
narrow?: boolean
regular?: boolean
wide?: boolean
}`}
defaultValue="false"
description="Whether the pane is hidden."
/>
Expand All@@ -281,25 +310,39 @@ See [storybook](https://primer.style/react/storybook?path=/story/layout-pagelayo
<PropsTableRow
name="divider"
type={`| 'none'
| 'line'`}
| 'line'
| {
narrow?:
| 'none'
| 'line'
| 'filled'
regular?:
| 'none'
| 'line'
wide?:
| 'none'
| 'line'
}`}
defaultValue="'none'"
/>
<PropsTableRow
name="dividerWhenNarrow"
deprecated
type={`| 'inherit'
| 'none'
| 'line'
| 'filled'`}
defaultValue="'inherit'"
description="Use the divider prop with a responsive value instead."
/>
<PropsTableRow
name="hidden"
type={`| boolean
| {
narrow?: boolean
regular?: boolean
wide?: boolean
}`}
narrow?: boolean
regular?: boolean
wide?: boolean
}`}
defaultValue="false"
description="Whether the footer is hidden."
/>
Expand Down
Loading