[Page] prevent vertical content shift of header title with metadata

.changeset/smooth-bats-jump.md

@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': patch
+---
+
+[Page] prevent vertical content shift of header with metadata and actions

polaris-react/src/components/Page/Page.stories.tsx

@@ -1,20 +1,20 @@
 import React from 'react';
 import type {ComponentMeta} from '@storybook/react';
 import {
-  DeleteMinor,
-  PlusMinor,
   ArrowDownMinor,
+  DeleteMinor,
   ExternalMinor,
-  ViewMinor,
   MobileVerticalDotsMajor,
+  PlusMinor,
+  ViewMinor,
 } from '@shopify/polaris-icons';
 import {
   Badge,
   Button,
   LegacyCard,
+  LegacyStack,
   Page,
   PageActions,
-  LegacyStack,
 } from '@shopify/polaris';
 
 export default {
@@ -346,3 +346,31 @@ export function WithContentAfterTitle() {
     </Page>
   );
 }
+
+export function WithContentAfterTitleAndSubtitle() {
+  return (
+    <Page
+      backAction={{content: 'Products', url: '#'}}
+      title="Jar With Lock-Lid"
+      titleMetadata={
+        <Button disclosure size="large">
+          All locations
+        </Button>
+      }
+      subtitle="Created: May 3, 2019 to June 2, 2019"
+      primaryAction={{content: 'Save', disabled: true}}
+      secondaryActions={[
+        {content: 'Duplicate'},
+        {content: 'View on your store'},
+      ]}
+      pagination={{
+        hasPrevious: true,
+        hasNext: true,
+      }}
+    >
+      <LegacyCard title="Credit card" sectioned>
+        <p>Credit card information</p>
+      </LegacyCard>
+    </Page>
+  );
+}

polaris-react/src/components/Page/components/Header/components/Title/Title.scss

@@ -6,22 +6,13 @@
   font-weight: var(--p-font-weight-bold);
   font-size: var(--p-font-size-500);
   line-height: var(--p-font-line-height-600);
-}
-
-.TitleWithSubtitle {
-  margin-top: 0;
-}
 
-.SubTitle {
-  margin-top: var(--p-space-050);
-  color: var(--p-color-text-secondary);
-
-  &.SubtitleCompact {
-    margin-top: var(--p-space-050);
+  &.TitleWithSubtitle {
+    margin-top: 0;
   }
 }
 
-.TitleWithMetadataWrapper {
+.TitleWrapper {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
@@ -37,9 +28,13 @@
       display: inline;
     }
   }
+}
 
-  .TitleMetadata {
-    margin-top: 0;
-    vertical-align: bottom;
+.SubTitle {
+  margin-top: var(--p-space-050);
+  color: var(--p-color-text-secondary);
+
+  &.SubtitleCompact {
+    margin-top: var(--p-space-050);
   }
 }

polaris-react/src/components/Page/components/Header/components/Title/Title.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 
 import {classNames} from '../../../../../../utilities/css';
+import {Bleed} from '../../../../../Bleed';
 import {Text} from '../../../../../Text';
 
 import styles from './Title.scss';
@@ -30,16 +31,14 @@ export function Title({
   const titleMarkup = title ? <h1 className={className}>{title}</h1> : null;
 
   const titleMetadataMarkup = titleMetadata ? (
-    <div className={styles.TitleMetadata}>{titleMetadata}</div>
+    <Bleed marginBlock="100">{titleMetadata}</Bleed>
   ) : null;
 
-  const wrappedTitleMarkup = titleMetadata ? (
-    <div className={styles.TitleWithMetadataWrapper}>
+  const wrappedTitleMarkup = (
+    <div className={styles.TitleWrapper}>
       {titleMarkup}
       {titleMetadataMarkup}
     </div>
-  ) : (
-    titleMarkup
   );
 
   const subtitleMarkup = subtitle ? (