[Typography foundations] Add deprecation warnings for existing Text components (#6605)

chazdean · laurkim · laurkim · commit b79cf0fa0dcd · 2022-11-03T16:57:48.000-04:00
~~#### WARNING ⚠️~~ ~~https://polaris.shopify.com/components/text is not currently active~~ ~~Do Not Merge!~~ Fixes #6537   Add deprecation warnings to all of the following existing Text components: - TextStyle - DisplayText - Heading - Subheading - Caption - VisuallyHidden | Text component | `console.log` | | --- | --- | | <img width="870" alt="Screen Shot 2022-07-12 at 10 12 53 AM" src="https://user-images.githubusercontent.com/59836805/178513139-742442e5-ccdc-4591-b0ad-b5ad0a19cbf0.png"> | <img width="633" alt="Screen Shot 2022-07-12 at 10 12 23 AM" src="https://user-images.githubusercontent.com/59836805/178513188-95c3db0e-0536-4de8-8396-fc36cf876818.png"> | Co-authored-by: Lo Kim <lo.kim@shopify.com>
diff --git a/.changeset/grumpy-cycles-explode.md b/.changeset/grumpy-cycles-explode.md
@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': minor
+---
+
+Deprecated `DisplayText`, `Heading`, `Subheading`, `Caption`, `TextStyle`, and `VisuallyHidden` components
diff --git a/polaris-react/playground/DetailsPage.tsx b/polaris-react/playground/DetailsPage.tsx
@@ -19,6 +19,7 @@ import {
 import {
   ActionList,
   Badge,
+  // eslint-disable-next-line import/no-deprecated
   Caption,
   Card,
   ContextualSaveBar,
@@ -41,6 +42,7 @@ import {
   Thumbnail,
   Toast,
   TopBar,
+  // eslint-disable-next-line import/no-deprecated
   VisuallyHidden,
 } from '../src';
 
diff --git a/polaris-react/src/components/Caption/Caption.tsx b/polaris-react/src/components/Caption/Caption.tsx
@@ -7,6 +7,20 @@ export interface CaptionProps {
   children?: React.ReactNode;
 }
 
+/**
+ * @deprecated The Caption component will be removed in the next
+ * major version. Use the Text component instead. See the
+ * Polaris component guide on how to use Text.
+ *
+ * https://polaris.shopify.com/components/text
+ */
 export function Caption({children}: CaptionProps) {
+  if (process.env.NODE_ENV === 'development') {
+    // eslint-disable-next-line no-console
+    console.warn(
+      'Deprecation: The `Caption` component has been deprecated. Use the `Text` component instead. See the Polaris component guide on how to use `Text`. https://polaris.shopify.com/components/text',
+    );
+  }
+
   return <p className={styles.Caption}>{children}</p>;
 }
diff --git a/polaris-react/src/components/Caption/tests/Caption.test.tsx b/polaris-react/src/components/Caption/tests/Caption.test.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import {mountWithApp} from 'tests/utilities';
 
+// eslint-disable-next-line import/no-deprecated
 import {Caption} from '../Caption';
 
 describe('<Caption />', () => {
diff --git a/polaris-react/src/components/DisplayText/DisplayText.tsx b/polaris-react/src/components/DisplayText/DisplayText.tsx
@@ -22,6 +22,13 @@ export interface DisplayTextProps {
   children?: React.ReactNode;
 }
 
+/**
+ * @deprecated The DisplayText component will be removed in the next
+ * major version. Use the Text component instead. See the
+ * Polaris component guide on how to use Text.
+ *
+ * https://polaris.shopify.com/components/text
+ */
 export function DisplayText({
   element: Element = 'p',
   children,
@@ -32,5 +39,12 @@ export function DisplayText({
     size && styles[variationName('size', size)],
   );
 
+  if (process.env.NODE_ENV === 'development') {
+    // eslint-disable-next-line no-console
+    console.warn(
+      'Deprecation: The `DisplayText` component has been deprecated. Use the `Text` component instead. See the Polaris component guide on how to use `Text`. https://polaris.shopify.com/components/text',
+    );
+  }
+
   return <Element className={className}>{children}</Element>;
 }
diff --git a/polaris-react/src/components/DisplayText/tests/DisplayText.test.tsx b/polaris-react/src/components/DisplayText/tests/DisplayText.test.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import {mountWithApp} from 'tests/utilities';
 
+// eslint-disable-next-line import/no-deprecated
 import {DisplayText} from '../DisplayText';
 
 describe('<DisplayText />', () => {
diff --git a/polaris-react/src/components/Heading/Heading.tsx b/polaris-react/src/components/Heading/Heading.tsx
@@ -16,7 +16,21 @@ export interface HeadingProps {
   id?: string;
 }
 
+/**
+ * @deprecated The Heading component will be removed in the next
+ * major version. Use the Text component instead. See the
+ * Polaris component guide on how to use Text.
+ *
+ * https://polaris.shopify.com/components/text
+ */
 export function Heading({element: Element = 'h2', children, id}: HeadingProps) {
+  if (process.env.NODE_ENV === 'development') {
+    // eslint-disable-next-line no-console
+    console.warn(
+      'Deprecation: The `Heading` component has been deprecated. Use the `Text` component instead. See the Polaris component guide on how to use `Text`. https://polaris.shopify.com/components/text',
+    );
+  }
+
   return (
     <Element className={styles.Heading} id={id}>
       {children}
diff --git a/polaris-react/src/components/Heading/tests/Heading.test.tsx b/polaris-react/src/components/Heading/tests/Heading.test.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import {mountWithApp} from 'tests/utilities';
 
+// eslint-disable-next-line import/no-deprecated
 import {Heading} from '../Heading';
 
 describe('<Heading />', () => {
diff --git a/polaris-react/src/components/Subheading/Subheading.tsx b/polaris-react/src/components/Subheading/Subheading.tsx
@@ -13,12 +13,26 @@ export interface SubheadingProps {
   /** Text to display in subheading */
   children?: React.ReactNode;
 }
-
+/**
+ * @deprecated The Subheading component will be removed in the next
+ * major version. Use the Text component instead. See the
+ * Polaris component guide on how to use Text.
+ *
+ * https://polaris.shopify.com/components/text
+ */
 export function Subheading({
   element: Element = 'h3',
   children,
 }: SubheadingProps) {
   const ariaLabel = typeof children === 'string' ? children : undefined;
+
+  if (process.env.NODE_ENV === 'development') {
+    // eslint-disable-next-line no-console
+    console.warn(
+      'Deprecation: The `Subheading` component has been deprecated. Use the `Text` component instead. See the Polaris component guide on how to use `Text`. https://polaris.shopify.com/components/text',
+    );
+  }
+
   return (
     <Element aria-label={ariaLabel} className={styles.Subheading}>
       {children}
diff --git a/polaris-react/src/components/Subheading/tests/Subheading.test.tsx b/polaris-react/src/components/Subheading/tests/Subheading.test.tsx
@@ -2,6 +2,7 @@ import React from 'react';
 import {mountWithApp} from 'tests/utilities';
 
 import {Button} from '../../Button';
+// eslint-disable-next-line import/no-deprecated
 import {Subheading} from '../Subheading';
 
 describe('<Subheading />', () => {
diff --git a/polaris-react/src/components/TextField/TextField.tsx b/polaris-react/src/components/TextField/TextField.tsx
@@ -7,7 +7,6 @@ import React, {
 } from 'react';
 import {CircleCancelMinor} from '@shopify/polaris-icons';
 
-import {Text} from '../Text';
 import {classNames, variationName} from '../../utilities/css';
 import {useI18n} from '../../utilities/i18n';
 import {useUniqueId} from '../../utilities/unique-id';
@@ -16,6 +15,7 @@ import {Labelled, LabelledProps, helpTextID, labelID} from '../Labelled';
 import {Connected} from '../Connected';
 import {Error, Key} from '../../types';
 import {Icon} from '../Icon';
+import {Text} from '../Text';
 
 import {Resizer, Spinner, SpinnerProps} from './components';
 import styles from './TextField.scss';
diff --git a/polaris-react/src/components/TextStyle/TextStyle.tsx b/polaris-react/src/components/TextStyle/TextStyle.tsx
@@ -28,11 +28,26 @@ export interface TextStyleProps {
   children?: React.ReactNode;
 }
 
+/**
+ * @deprecated The TextStyle component will be removed in the next
+ * major version. Use the Text component instead. See the
+ * Polaris component guide on how to use Text.
+ *
+ * https://polaris.shopify.com/components/text
+ */
 export function TextStyle({variation, children}: TextStyleProps) {
   const className = classNames(
     variation && styles[variationName('variation', variation)],
     variation === VariationValue.Code && styles.code,
   );
+
+  if (process.env.NODE_ENV === 'development') {
+    // eslint-disable-next-line no-console
+    console.warn(
+      'Deprecation: The `TextStyle` component has been deprecated. Use the `Text` component instead. See the Polaris component guide on how to use `Text`. https://polaris.shopify.com/components/text',
+    );
+  }
+
   const Element = variationElement(variation);
 
   return <Element className={className}>{children}</Element>;
diff --git a/polaris-react/src/components/TextStyle/tests/TextStyle.test.tsx b/polaris-react/src/components/TextStyle/tests/TextStyle.test.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import {mountWithApp} from 'tests/utilities';
 
+// eslint-disable-next-line import/no-deprecated
 import {TextStyle} from '../TextStyle';
 
 describe('<TextStyle />', () => {
diff --git a/polaris-react/src/components/VisuallyHidden/VisuallyHidden.tsx b/polaris-react/src/components/VisuallyHidden/VisuallyHidden.tsx
@@ -7,6 +7,20 @@ export interface VisuallyHiddenProps {
   children?: React.ReactNode;
 }
 
+/**
+ * @deprecated The VisuallyHidden component will be removed in the next
+ * major version. Use the Text component instead. See the
+ * Polaris component guide on how to use Text.
+ *
+ * https://polaris.shopify.com/components/text
+ */
 export function VisuallyHidden({children}: VisuallyHiddenProps) {
+  if (process.env.NODE_ENV === 'development') {
+    // eslint-disable-next-line no-console
+    console.warn(
+      'Deprecation: The  VisuallyHidden` component has been deprecated. Use the `Text` component instead. See the Polaris component guide on how to use `Text`. https://polaris.shopify.com/components/text',
+    );
+  }
+
   return <span className={styles.VisuallyHidden}>{children}</span>;
 }

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +---
 +'@shopify/polaris': minor
 +---
++
 +Deprecated `DisplayText`, `Heading`, `Subheading`, `Caption`, `TextStyle`, and `VisuallyHidden` components