PageLayout: Add padding prop to subcomponents (#2201)

* Add a padding prop to PageLayout subcomponents * Create funny-roses-impress.md
primer · Aug 2, 2022 · 885064e · 885064e
1 parent 3756a1e
commit 885064e
Show file tree

Hide file tree

Showing 4 changed files with 236 additions and 114 deletions.
diff --git a/.changeset/funny-roses-impress.md b/.changeset/funny-roses-impress.md
@@ -0,0 +1,5 @@
+---
+"@primer/react": minor
+---
+
+Add `padding` prop to `PageLayout.Header`, `PageLayout.Content`, `PageLayout.Pane`, and `PageLayout.Footer`
diff --git a/docs/content/PageLayout.mdx b/docs/content/PageLayout.mdx
@@ -58,6 +58,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
@@ -145,23 +164,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 />
@@ -170,6 +189,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'
@@ -224,6 +251,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
@@ -275,6 +310,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'
@@ -320,6 +363,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'

diff --git a/src/PageLayout/PageLayout.tsx b/src/PageLayout/PageLayout.tsx
@@ -171,6 +171,7 @@ const VerticalDivider: React.FC<React.PropsWithChildren<DividerProps>> = ({varia
 // PageLayout.Header
 
 export type PageLayoutHeaderProps = {
+  padding?: keyof typeof SPACING_MAP
   divider?: 'none' | 'line' | ResponsiveValue<'none' | 'line', 'none' | 'line' | 'filled'>
   /**
    * @deprecated Use the `divider` prop with a responsive value instead.
@@ -191,6 +192,7 @@ export type PageLayoutHeaderProps = {
 } & SxProp
 
 const Header: React.FC<React.PropsWithChildren<PageLayoutHeaderProps>> = ({
+  padding = 'none',
   divider = 'none',
   dividerWhenNarrow = 'inherit',
   hidden = false,
@@ -219,7 +221,7 @@ const Header: React.FC<React.PropsWithChildren<PageLayoutHeaderProps>> = ({
         sx
       )}
     >
-      {children}
+      <Box sx={{padding: SPACING_MAP[padding]}}>{children}</Box>
       <HorizontalDivider variant={dividerVariant} sx={{marginTop: SPACING_MAP[rowGap]}} />
     </Box>
   )
@@ -232,6 +234,7 @@ Header.displayName = 'PageLayout.Header'
 
 export type PageLayoutContentProps = {
   width?: keyof typeof contentWidths
+  padding?: keyof typeof SPACING_MAP
   hidden?: boolean | ResponsiveValue<boolean>
 } & SxProp
 
@@ -245,6 +248,7 @@ const contentWidths = {
 
 const Content: React.FC<React.PropsWithChildren<PageLayoutContentProps>> = ({
   width = 'full',
+  padding = 'none',
   hidden = false,
   children,
   sx = {}
@@ -268,7 +272,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>
   )
 }
@@ -296,6 +302,7 @@ export type PageLayoutPaneProps = {
    */
   positionWhenNarrow?: 'inherit' | keyof typeof panePositions
   width?: keyof typeof paneWidths
+  padding?: keyof typeof SPACING_MAP
   divider?: 'none' | 'line' | ResponsiveValue<'none' | 'line', 'none' | 'line' | 'filled'>
   /**
    * @deprecated Use the `divider` prop with a responsive value instead.
@@ -330,6 +337,7 @@ const Pane: React.FC<React.PropsWithChildren<PageLayoutPaneProps>> = ({
   position = 'end',
   positionWhenNarrow = 'inherit',
   width = 'medium',
+  padding = 'none',
   divider = 'none',
   dividerWhenNarrow = 'inherit',
   hidden = false,
@@ -388,7 +396,7 @@ const Pane: React.FC<React.PropsWithChildren<PageLayoutPaneProps>> = ({
         sx={{[responsivePosition === '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>
   )
 }
@@ -399,6 +407,7 @@ Pane.displayName = 'PageLayout.Pane'
 // PageLayout.Footer
 
 export type PageLayoutFooterProps = {
+  padding?: keyof typeof SPACING_MAP
   divider?: 'none' | 'line' | ResponsiveValue<'none' | 'line', 'none' | 'line' | 'filled'>
   /**
    * @deprecated Use the `divider` prop with a responsive value instead.
@@ -419,6 +428,7 @@ export type PageLayoutFooterProps = {
 } & SxProp
 
 const Footer: React.FC<React.PropsWithChildren<PageLayoutFooterProps>> = ({
+  padding = 'none',
   divider = 'none',
   dividerWhenNarrow = 'inherit',
   hidden = false,
@@ -448,7 +458,7 @@ const Footer: React.FC<React.PropsWithChildren<PageLayoutFooterProps>> = ({
       )}
     >
       <HorizontalDivider variant={dividerVariant} sx={{marginBottom: SPACING_MAP[rowGap]}} />
-      {children}
+      <Box sx={{padding: SPACING_MAP[padding]}}>{children}</Box>
     </Box>
   )
 }