PageLayout: Update divider prop responsive API (#2198)

* Deprecate dividerWhenNarrow in favor of responsive values * Update PageLayout docs * Create spotty-parents-cheat.md * Update spotty-parents-cheat.md * Update snapshots
primer · Jul 29, 2022 · 4d9b7db · 4d9b7db
1 parent 4156b71
commit 4d9b7db
Show file tree

Hide file tree

Showing 4 changed files with 220 additions and 183 deletions.
diff --git a/.changeset/spotty-parents-cheat.md b/.changeset/spotty-parents-cheat.md
@@ -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'}}
+```
diff --git a/docs/content/PageLayout.mdx b/docs/content/PageLayout.mdx
@@ -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">
@@ -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'
+  }`}
     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."
   />
@@ -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."
   />
@@ -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."
   />
@@ -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."
   />