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

~~#### WARNING ⚠️~~
~~https://polaris.shopify.com/components/text is not currently active~~

~~Do Not Merge!~~

### WHY are these changes introduced?

Fixes #6537 <!-- link to issue if one exists -->

<!--
  Context about the problem that’s being addressed.
-->

### WHAT is this pull request doing?
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 <[email protected]>

Author: chazdean

.changeset/grumpy-cycles-explode.md

@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': minor
+---
+
+Deprecated `DisplayText`, `Heading`, `Subheading`, `Caption`, `TextStyle`, and `VisuallyHidden` components

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';
 

polaris-react/src/components/AccountConnection/AccountConnection.tsx

@@ -5,6 +5,7 @@ import {Avatar} from '../Avatar';
 import {buttonFrom} from '../Button';
 import {Card} from '../Card';
 import {Stack} from '../Stack';
+// eslint-disable-next-line import/no-deprecated
 import {TextStyle} from '../TextStyle';
 import {SettingAction} from '../SettingAction';
 

polaris-react/src/components/ActionList/components/Item/Item.tsx

@@ -6,6 +6,7 @@ import {Scrollable} from '../../../Scrollable';
 import {Icon} from '../../../Icon';
 import {UnstyledLink} from '../../../UnstyledLink';
 import {Badge} from '../../../Badge';
+// eslint-disable-next-line import/no-deprecated
 import {TextStyle} from '../../../TextStyle';
 import styles from '../../ActionList.scss';
 import {handleMouseUpByBlurring} from '../../../../utilities/focus';

polaris-react/src/components/ActionList/components/Item/tests/Item.test.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import {mountWithApp} from 'tests/utilities';
 
 import {Item} from '../Item';
+// eslint-disable-next-line import/no-deprecated
 import {TextStyle} from '../../../../TextStyle';
 import {UnstyledLink} from '../../../../UnstyledLink';
 
@@ -54,6 +55,7 @@ describe('<Item />', () => {
   it('renders helpText when the helpText prop is defined', () => {
     const helpText = 'Foo';
     const item = mountWithApp(<Item helpText={helpText} />);
+    // eslint-disable-next-line import/no-deprecated
     expect(item.find(TextStyle)).toContainReactText(helpText);
   });
 

polaris-react/src/components/Autocomplete/components/MappedAction/MappedAction.tsx

@@ -6,6 +6,7 @@ import {classNames} from '../../../../utilities/css';
 import {MappedActionContext} from '../../../../utilities/autocomplete';
 import {Listbox} from '../../../Listbox';
 import {Icon} from '../../../Icon';
+// eslint-disable-next-line import/no-deprecated
 import {TextStyle} from '../../../TextStyle';
 import {useI18n} from '../../../../utilities/i18n';
 

polaris-react/src/components/Badge/Badge.tsx

@@ -3,6 +3,7 @@ import React, {useContext} from 'react';
 import {classNames, variationName} from '../../utilities/css';
 import {useI18n} from '../../utilities/i18n';
 import {WithinFilterContext} from '../../utilities/within-filter-context';
+// eslint-disable-next-line import/no-deprecated
 import {VisuallyHidden} from '../VisuallyHidden';
 import {Icon} from '../Icon';
 import type {IconSource} from '../../types';

polaris-react/src/components/Badge/components/Pip/Pip.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 
 import {classNames, variationName} from '../../../../utilities/css';
 import type {Progress, Status} from '../../types';
+// eslint-disable-next-line import/no-deprecated
 import {VisuallyHidden} from '../../../VisuallyHidden';
 import {useI18n} from '../../../../utilities/i18n';
 import {getDefaultAccessibilityLabel} from '../../utils';

polaris-react/src/components/Badge/tests/Badge.test.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import {mountWithApp} from 'tests/utilities';
 import {GlobeMinor} from '@shopify/polaris-icons';
 
+// eslint-disable-next-line import/no-deprecated
 import {VisuallyHidden} from '../../VisuallyHidden';
 import {Icon} from '../../Icon';
 import {Badge} from '../Badge';
@@ -14,11 +15,13 @@ describe('<Badge />', () => {
 
   it('accepts a status prop and renders a visually hidden label', () => {
     const badge = mountWithApp(<Badge status="success" />);
+    // eslint-disable-next-line import/no-deprecated
     expect(badge).toContainReactComponent(VisuallyHidden);
   });
 
   it('accepts a progress prop and renders a visually hidden label', () => {
     const badge = mountWithApp(<Badge progress="incomplete" />);
+    // eslint-disable-next-line import/no-deprecated
     expect(badge).toContainReactComponent(VisuallyHidden);
   });
 
@@ -27,6 +30,7 @@ describe('<Badge />', () => {
       <Badge progress="incomplete" status="attention" />,
     );
 
+    // eslint-disable-next-line import/no-deprecated
     expect(badge).toContainReactComponentTimes(VisuallyHidden, 1, {
       children: 'Attention Incomplete',
     });
@@ -87,6 +91,7 @@ describe('<Badge />', () => {
       />,
     );
 
+    // eslint-disable-next-line import/no-deprecated
     expect(badge).toContainReactComponent(VisuallyHidden, {
       children: mockAccessibilityLabel,
     });
@@ -102,6 +107,7 @@ describe('<Badge />', () => {
       />,
     );
 
+    // eslint-disable-next-line import/no-deprecated
     expect(badge).not.toContainReactComponent(VisuallyHidden, {
       children: 'Attention Incomplete',
     });
@@ -112,24 +118,28 @@ describe('<Badge />', () => {
       <Badge status="attention" progress="incomplete" />,
     );
 
+    // eslint-disable-next-line import/no-deprecated
     expect(badge).toContainReactComponent(VisuallyHidden, {
       children: 'Attention Incomplete',
     });
 
     badge = mountWithApp(<Badge progress="incomplete" />);
 
+    // eslint-disable-next-line import/no-deprecated
     expect(badge).toContainReactComponent(VisuallyHidden, {
       children: 'Incomplete',
     });
 
     badge = mountWithApp(<Badge status="attention" />);
 
+    // eslint-disable-next-line import/no-deprecated
     expect(badge).toContainReactComponent(VisuallyHidden, {
       children: 'Attention',
     });
 
     badge = mountWithApp(<Badge />);
 
+    // eslint-disable-next-line import/no-deprecated
     expect(badge).not.toContainReactComponent(VisuallyHidden);
   });
 });
@@ -140,24 +150,28 @@ describe('<Badge.Pip />', () => {
       <Badge.Pip status="attention" progress="incomplete" />,
     );
 
+    // eslint-disable-next-line import/no-deprecated
     expect(badge).toContainReactComponent(VisuallyHidden, {
       children: 'Attention Incomplete',
     });
 
     badge = mountWithApp(<Badge.Pip progress="partiallyComplete" />);
 
+    // eslint-disable-next-line import/no-deprecated
     expect(badge).toContainReactComponent(VisuallyHidden, {
       children: 'Partially complete',
     });
 
     badge = mountWithApp(<Badge.Pip status="attention" />);
 
+    // eslint-disable-next-line import/no-deprecated
     expect(badge).toContainReactComponent(VisuallyHidden, {
       children: 'Attention Complete',
     });
 
     badge = mountWithApp(<Badge.Pip />);
 
+    // eslint-disable-next-line import/no-deprecated
     expect(badge).toContainReactComponent(VisuallyHidden, {
       children: 'Complete',
     });

polaris-react/src/components/Banner/Banner.tsx

@@ -19,6 +19,7 @@ import {useUniqueId} from '../../utilities/unique-id';
 import {useI18n} from '../../utilities/i18n';
 import type {Action, DisableableAction, LoadableAction} from '../../types';
 import {Button} from '../Button';
+// eslint-disable-next-line import/no-deprecated
 import {Heading} from '../Heading';
 import {ButtonGroup} from '../ButtonGroup';
 import {UnstyledButton, unstyledButtonFrom} from '../UnstyledButton';