[Page] Add compactTitle prop

UNRELEASED.md

@@ -21,6 +21,7 @@ Use [the changelog guidelines](https://git.io/polaris-changelog-guidelines) to f
 - `PositionedOverlay` now exposes an imperative `forceUpdatePosition()` API for programmatically triggering a re-render of the component ([#4385](https://github.com/Shopify/polaris-react/pull/4385))
 - Updated `IndexTable` component to hide checkboxes when `selectable` prop is `false` ([#4376](https://github.com/Shopify/polaris-react/pull/4376))
 - [Accessibility] - Removes skeleton shimmer animation on devices that have Reduced motion setting enabled [#4460](https://github.com/Shopify/polaris-react/pull/4460)
+- Added optional `compactTitle` prop to `Page` which removes margin between `title` and `subtitle` ([#4463](https://github.com/Shopify/polaris-react/pull/4463))
 
 ### Bug fixes
 

src/components/Page/README.md

@@ -143,6 +143,7 @@ Use for detail pages, which should have pagination and breadcrumbs, and also oft
       alt="Black leather pet collar"
     />
   }
+  compactTitle
   primaryAction={{content: 'Save', disabled: true}}
   secondaryActions={[
     {

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

@@ -76,6 +76,7 @@ export function Header({
   breadcrumbs = [],
   secondaryActions = [],
   actionGroups = [],
+  compactTitle = false,
 }: HeaderProps) {
   const {isNavigationCollapsed} = useMediaQuery();
   const isSingleRow =
@@ -120,6 +121,7 @@ export function Header({
         subtitle={subtitle}
         titleMetadata={titleMetadata}
         thumbnail={thumbnail}
+        compactTitle={compactTitle}
       />
     </div>
   );

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

@@ -14,6 +14,9 @@
 .SubTitle {
   margin-top: spacing(tight);
   color: var(--p-text-subdued);
+  &.SubtitleCompact {
+    margin-top: 0;
+  }
 }
 
 .hasThumbnail {

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

@@ -2,6 +2,7 @@ import React from 'react';
 
 import type {AvatarProps} from '../../../../../Avatar';
 import type {ThumbnailProps} from '../../../../../Thumbnail';
+import {classNames} from '../../../../../../utilities/css';
 
 import styles from './Title.scss';
 
@@ -16,9 +17,17 @@ export interface TitleProps {
   thumbnail?:
     | React.ReactElement<AvatarProps | ThumbnailProps>
     | React.SFC<React.SVGProps<SVGSVGElement>>;
+  /** Removes spacing between title and subtitle */
+  compactTitle?: boolean;
 }
 
-export function Title({title, subtitle, titleMetadata, thumbnail}: TitleProps) {
+export function Title({
+  title,
+  subtitle,
+  titleMetadata,
+  thumbnail,
+  compactTitle,
+}: TitleProps) {
   const titleMarkup = title ? <h1 className={styles.Title}>{title}</h1> : null;
 
   const titleMetadataMarkup = titleMetadata ? (
@@ -35,7 +44,12 @@ export function Title({title, subtitle, titleMetadata, thumbnail}: TitleProps) {
   );
 
   const subtitleMarkup = subtitle ? (
-    <div className={styles.SubTitle}>
+    <div
+      className={classNames(
+        styles.SubTitle,
+        compactTitle && styles.SubtitleCompact,
+      )}
+    >
       <p>{subtitle}</p>
     </div>
   ) : null;

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

@@ -40,6 +40,15 @@ describe('<Title />', () => {
       const pageTitle = mountWithApp(<Title {...mockProps} />);
       expect(pageTitle).not.toContainReactComponent('p');
     });
+
+    it('renders styles when compactTitle prop is defined', () => {
+      const pageTitle = mountWithApp(
+        <Title {...propsWithSubtitle} compactTitle />,
+      );
+      expect(pageTitle).toContainReactComponent('div', {
+        className: expect.stringContaining('SubtitleCompact'),
+      });
+    });
   });
 
   describe('titleMetadata', () => {