[Page] Normalise spacing within Header

UNRELEASED.md

@@ -12,6 +12,7 @@ Use [the changelog guidelines](/documentation/Versioning%20and%20changelog.md) t
 - Added new `duplicateRootItem` prop to a Navigation Section to support new mobile Navigation IA ([#4902](https://github.com/Shopify/polaris-react/pull/4902))
 - Updated mobile behaviour of Navigation to only show one sub-section at a time ([#4902](https://github.com/Shopify/polaris-react/pull/4902))
 - Remove the info icon and external link guidance from FooterHelp ([#4982](https://github.com/Shopify/polaris-react/pull/4982))
+- Normalise spacing around the `Header` within the `Page` ([#4911](https://github.com/Shopify/polaris-react/pull/4911))
 
 ### Bug fixes
 

src/components/Page/Page.scss

@@ -37,6 +37,6 @@ body {
 }
 
 .divider {
-  border-top: border();
+  border-top: border(divider);
   padding-top: spacing();
 }

src/components/Page/Page.tsx

@@ -37,7 +37,7 @@ export function Page({
     (rest.breadcrumbs != null && rest.breadcrumbs.length > 0);
 
   const contentClassName = classNames(
-    styles.Content,
+    !hasHeaderContent && styles.Content,
     divider && hasHeaderContent && styles.divider,
   );
 

src/components/Page/README.md

@@ -175,7 +175,9 @@ Use for detail pages, which should have pagination and breadcrumbs, and also oft
   }}
   additionalNavigation={<Avatar size="small" initials="CD" customer={false} />}
 >
-  <p>Page content</p>
+  <Card title="Credit card" sectioned>
+    <p>Credit card information</p>
+  </Card>
 </Page>
 ```
 
@@ -223,7 +225,9 @@ Use to create a custom primary action.
     </Button>
   }
 >
-  <p>Page content</p>
+  <Card title="Credit card" sectioned>
+    <p>Credit card information</p>
+  </Card>
 </Page>
 ```
 
@@ -286,7 +290,9 @@ Use when the page title benefits from secondary content.
   subtitle="Statement period: May 3, 2019 to June 2, 2019"
   secondaryActions={[{content: 'Download', icon: ArrowDownMinor}]}
 >
-  <p>Page content</p>
+  <Card title="Credit card" sectioned>
+    <p>Credit card information</p>
+  </Card>
 </Page>
 ```
 
@@ -332,7 +338,9 @@ Use when an image will help merchants identify the purpose of the page.
     hasNext: true,
   }}
 >
-  <p>Page content</p>
+  <Card title="Credit card" sectioned>
+    <p>Credit card information</p>
+  </Card>
 </Page>
 ```
 
@@ -355,7 +363,9 @@ Use when a secondary action links to another website. Actions marked external op
     },
   ]}
 >
-  <p>Page Content</p>
+  <Card title="Credit card" sectioned>
+    <p>Credit card information</p>
+  </Card>
 </Page>
 ```
 
@@ -371,7 +381,9 @@ Use when the page doesn’t represent a list of objects or a detail view for an
   title="General"
   primaryAction={{content: 'Save'}}
 >
-  <p>Page content</p>
+  <Card title="Credit card" sectioned>
+    <p>Credit card information</p>
+  </Card>
 </Page>
 ```
 
@@ -391,7 +403,9 @@ Use for layouts that benefit from more screen width, such as wide tables or list
     hasNext: true,
   }}
 >
-  <p>Wide page content</p>
+  <Card title="Credit card" sectioned>
+    <p>Credit card information</p>
+  </Card>
 </Page>
 ```
 
@@ -439,7 +453,9 @@ Use action groups for sets of actions that relate to one another, particularly w
     },
   ]}
 >
-  <p>Page content</p>
+  <Card title="Credit card" sectioned>
+    <p>Credit card information</p>
+  </Card>
 </Page>
 ```
 
@@ -461,7 +477,9 @@ Title metadata appears immediately after the page’s title. Use it to communica
     hasNext: true,
   }}
 >
-  <p>Page content</p>
+  <Card title="Credit card" sectioned>
+    <p>Credit card information</p>
+  </Card>
 </Page>
 ```
 
@@ -477,7 +495,9 @@ Use when the page needs visual separation between the page header and the conten
   title="General"
   divider
 >
-  <p>Page content</p>
+  <Card title="Credit card" sectioned>
+    <p>Credit card information</p>
+  </Card>
 </Page>
 ```
 

src/components/Page/components/Header/Header.scss

@@ -246,6 +246,9 @@ $action-menu-rollup-computed-width: rem(40px);
   // stylelint-disable-next-line selector-max-class
   .RightAlign {
     margin-bottom: spacing(extra-tight);
+    @include breakpoint-after(layout-width(page-with-nav)) {
+      margin-bottom: 0;
+    }
   }
   // stylelint-disable-next-line selector-max-class
   .Row {

src/components/Page/components/Header/components/Title/Title.scss

@@ -11,8 +11,12 @@
   }
 }
 
+.TitleWithSubtitle {
+  margin-top: spacing(extra-tight);
+}
+
 .SubTitle {
-  margin-top: spacing(tight);
+  margin-top: spacing(extra-tight);
   color: var(--p-text-subdued);
 
   &.SubtitleCompact {

src/components/Page/components/Header/components/Title/Title.tsx

@@ -33,7 +33,13 @@ export function Title({
     console.warn('The thumbnail prop from Page has been deprecated');
   }
 
-  const titleMarkup = title ? <h1 className={styles.Title}>{title}</h1> : null;
+  const titleMarkup = title ? (
+    <h1
+      className={classNames(styles.Title, subtitle && styles.TitleWithSubtitle)}
+    >
+      {title}
+    </h1>
+  ) : null;
 
   const titleMetadataMarkup = titleMetadata ? (
     <div className={styles.TitleMetadata}>{titleMetadata}</div>

src/components/Page/tests/Page.test.tsx

@@ -264,7 +264,7 @@ describe('<Page />', () => {
     it('renders border when divider is true and header props exist', () => {
       const wrapper = mountWithApp(<Page {...mockProps} divider />);
       expect(wrapper).toContainReactComponent('div', {
-        className: 'Content divider',
+        className: 'divider',
       });
     });
 
@@ -281,10 +281,7 @@ describe('<Page />', () => {
     it('does not render border when divider is false', () => {
       const wrapper = mountWithApp(<Page {...mockProps} divider={false} />);
       expect(wrapper).not.toContainReactComponent('div', {
-        className: 'Content divider',
-      });
-      expect(wrapper).toContainReactComponent('div', {
-        className: 'Content',
+        className: 'divider',
       });
     });
   });

src/styles/shared/_page.scss

@@ -26,7 +26,7 @@ $actions-vertical-spacing: spacing(tight);
   margin: spacing(tight) 0;
 
   @include page-content-when-not-partially-condensed {
-    margin-top: spacing(tight);
+    margin-top: spacing(loose);
   }
 }
 
@@ -46,15 +46,15 @@ $actions-vertical-spacing: spacing(tight);
 }
 
 @mixin page-header-layout {
-  padding: spacing() spacing() 0;
+  padding: spacing();
 
   @include page-content-when-not-fully-condensed {
     padding-left: 0;
     padding-right: 0;
   }
 
   @include page-content-when-not-partially-condensed {
-    padding-top: spacing();
+    padding: spacing(loose) 0;
   }
 }