[Layout foundations] Deprecate TextContainer (#8441)

Closes: #7404

Author: kyledurand

.changeset/real-rules-shave.md

@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': minor
+---
+
+Deprecated TextContainer in favor of AlphaStack

polaris-react/playground/DetailsPage.tsx

@@ -36,6 +36,7 @@ import {
   SkeletonPage,
   Stack,
   Text,
+  // eslint-disable-next-line import/no-deprecated
   TextContainer,
   TextField,
   Thumbnail,

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

@@ -4,6 +4,7 @@ import {CancelSmallMinor} from '@shopify/polaris-icons';
 import {classNames} from '../../utilities/css';
 import type {Action} from '../../types';
 import {LegacyCard} from '../LegacyCard';
+// eslint-disable-next-line import/no-deprecated
 import {TextContainer} from '../TextContainer';
 import {ButtonGroup} from '../ButtonGroup';
 import {Button, buttonFrom} from '../Button';

polaris-react/src/components/Layout/components/AnnotatedSection/AnnotatedSection.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 
 import {Box} from '../../../Box';
 import {Text} from '../../../Text';
+// eslint-disable-next-line import/no-deprecated
 import {TextContainer} from '../../../TextContainer';
 import styles from '../../Layout.scss';
 

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

@@ -2,6 +2,7 @@ import React from 'react';
 import {mountWithApp} from 'tests/utilities';
 
 import {Text} from '../../Text';
+// eslint-disable-next-line import/no-deprecated
 import {TextContainer} from '../../TextContainer';
 import {Section} from '../components';
 import {Layout} from '../Layout';
@@ -57,6 +58,7 @@ describe('<Layout />', () => {
       );
 
       const annotedDescriptionTextContainer =
+        // eslint-disable-next-line import/no-deprecated
         annotatedSection.find(TextContainer)!;
 
       expect(annotedDescriptionTextContainer.find('div')).toContainReactText(
@@ -68,8 +70,8 @@ describe('<Layout />', () => {
       const annotatedSection = mountWithApp(
         <Layout.AnnotatedSection description={<MyComponent />} />,
       );
-
       const annotedDescriptionTextContainer =
+        // eslint-disable-next-line import/no-deprecated
         annotatedSection.find(TextContainer)!;
 
       expect(annotedDescriptionTextContainer).toContainReactComponent(
@@ -85,8 +87,9 @@ describe('<Layout />', () => {
       );
 
       const annotedDescriptionTextContainer =
+        // eslint-disable-next-line import/no-deprecated
         annotatedSection.find(TextContainer)!;
-
+      // eslint-disable-next-line import/no-deprecated
       expect(annotatedSection).toContainReactComponent(TextContainer);
       expect(annotedDescriptionTextContainer).not.toContainReactComponent(
         'div',

polaris-react/src/components/Popover/components/Pane/tests/Pane.test.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import {mountWithApp} from 'tests/utilities';
 
 import {Scrollable} from '../../../../Scrollable';
+// eslint-disable-next-line import/no-deprecated
 import {TextContainer} from '../../../../TextContainer';
 import {Pane} from '../Pane';
 import {Section} from '../../Section';

polaris-react/src/components/Popover/components/PopoverOverlay/tests/PopoverOverlay.test.tsx

@@ -2,6 +2,7 @@ import React, {useRef} from 'react';
 import {mountWithApp} from 'tests/utilities';
 
 import {Key} from '../../../../../types';
+// eslint-disable-next-line import/no-deprecated
 import {TextContainer} from '../../../../TextContainer';
 import {TextField} from '../../../../TextField';
 import {PositionedOverlay} from '../../../../PositionedOverlay';

polaris-react/src/components/Popover/components/Section/tests/Section.test.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import {mountWithApp} from 'tests/utilities';
 
+// eslint-disable-next-line import/no-deprecated
 import {TextContainer} from '../../../../TextContainer';
 import {Section} from '../Section';
 
@@ -14,6 +15,7 @@ describe('<Section />', () => {
   it('renders its children', () => {
     const section = mountWithApp(<Section>{children}</Section>);
 
+    // eslint-disable-next-line import/no-deprecated
     expect(section.find(TextContainer)).toContainReactHtml('<p>Content</p>');
   });
 

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

@@ -7,6 +7,7 @@ import {Popover} from '../Popover';
 import type {PopoverPublicAPI} from '../Popover';
 import {Pane, PopoverCloseSource, PopoverOverlay} from '../components';
 import * as setActivatorAttributes from '../set-activator-attributes';
+// eslint-disable-next-line import/no-deprecated
 import {TextContainer} from '../../TextContainer';
 
 describe('<Popover />', () => {

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

@@ -13,6 +13,7 @@ export interface TextContainerProps {
   children?: React.ReactNode;
 }
 
+/** @deprecated Use AlphaStack instead */
 export function TextContainer({spacing, children}: TextContainerProps) {
   const className = classNames(
     styles.TextContainer,