Merge pull request #563 from Shopify/fix-page-spacing

Fixing spacing on Page component with no header

Author: dfmcphee

src/components/Page/Page.scss

@@ -34,11 +34,15 @@ html, body {
 }
 
 .Content {
-  margin: 0 0 spacing(loose);
+  margin: spacing(loose) 0;
+
+  @include page-content-when-not-partially-condensed {
+    margin-top: spacing(extra-loose);
+  }
 }
 
 .Header {
-  padding: spacing(loose);
+  padding: spacing(loose) spacing(loose) 0;
 
   @include page-content-when-not-fully-condensed {
     padding-left: 0;
@@ -47,26 +51,20 @@ html, body {
 
   @include page-content-when-not-partially-condensed {
     padding-top: spacing(extra-loose);
-    padding-bottom: spacing(extra-loose);
   }
 }
 
 .Header-hasPagination,
 .Header-hasBreadcrumbs {
   padding-top: spacing(loose);
-  padding-bottom: rem(24px);
-
-  &.Header-hasSecondaryActions {
-    padding-bottom: spacing(loose);
-  }
 }
 
 .Header-hasSecondaryActions {
   padding-top: rem(24px);
-  padding-bottom: spacing(loose);
 }
 
 .Header-hasSeparator {
+  padding-bottom: spacing();
   border-bottom: border();
 
   + .Content {

src/components/Page/Page.tsx

@@ -53,7 +53,7 @@ export default class Page extends React.PureComponent<Props, never> {
       fullWidth && styles.fullWidth,
     );
 
-    const headerMarkup = this.context.easdk
+    const headerMarkup = this.context.easdk || !this.hasHeaderContent()
       ? null
       : <Header {...rest} />;
 
@@ -74,4 +74,14 @@ export default class Page extends React.PureComponent<Props, never> {
       easdk.Bar.update(this.props);
     }
   }
+
+  private hasHeaderContent() {
+    const { title, primaryAction, secondaryActions, breadcrumbs } = this.props;
+    return (
+      (title && title !== '')
+      || primaryAction
+      || (secondaryActions && secondaryActions.length > 0)
+      || (breadcrumbs && breadcrumbs.length > 0)
+    );
+  }
 }