From 275b9dc329104a75a48bfbd7b35bed57fa24788d Mon Sep 17 00:00:00 2001
From: Alex Sutcliffe <alex.sutcliffe@shopify.com>
Date: Wed, 1 Sep 2021 15:28:05 -0700
Subject: [PATCH] [Page] Add compactTitle prop

---
 UNRELEASED.md                                  |  1 +
 src/components/Page/README.md                  |  1 +
 .../Page/components/Header/Header.tsx          |  2 ++
 .../Header/components/Title/Title.scss         |  3 +++
 .../Header/components/Title/Title.tsx          | 18 ++++++++++++++++--
 .../components/Title/tests/Title.test.tsx      |  9 +++++++++
 6 files changed, 32 insertions(+), 2 deletions(-)

diff --git a/UNRELEASED.md b/UNRELEASED.md
index d7b2cd12b78..7a6db765cc3 100644
--- a/UNRELEASED.md
+++ b/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
 
diff --git a/src/components/Page/README.md b/src/components/Page/README.md
index 5f41202aa12..354e23474ca 100644
--- a/src/components/Page/README.md
+++ b/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={[
     {
diff --git a/src/components/Page/components/Header/Header.tsx b/src/components/Page/components/Header/Header.tsx
index 5d061dc03d7..3c922f7b237 100644
--- a/src/components/Page/components/Header/Header.tsx
+++ b/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>
   );
diff --git a/src/components/Page/components/Header/components/Title/Title.scss b/src/components/Page/components/Header/components/Title/Title.scss
index 30a75c99d7a..c99775f7c9a 100644
--- a/src/components/Page/components/Header/components/Title/Title.scss
+++ b/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 {
diff --git a/src/components/Page/components/Header/components/Title/Title.tsx b/src/components/Page/components/Header/components/Title/Title.tsx
index ecee407d365..4ea1386278f 100644
--- a/src/components/Page/components/Header/components/Title/Title.tsx
+++ b/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;
diff --git a/src/components/Page/components/Header/components/Title/tests/Title.test.tsx b/src/components/Page/components/Header/components/Title/tests/Title.test.tsx
index bd684984e7d..87873cb7c4e 100644
--- a/src/components/Page/components/Header/components/Title/tests/Title.test.tsx
+++ b/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', () => {