Convert constrainedWidth modifier CSS to Emotion

src/components/empty_prompt/_empty_prompt.scss

@@ -1,5 +1,3 @@
-@import '../text/_variables';
-
 .euiEmptyPrompt {
   text-align: center;
   margin: auto;
@@ -60,7 +58,7 @@
   }
 
   .euiEmptyPrompt__contentInner {
-    max-width: $euiTextConstrainedMaxWidth;
+    max-width: 36em; // TODO: Use euiTextConstrainedMaxWidth in text.styles.ts
     margin: auto;
   }
 
@@ -97,7 +95,7 @@
   }
 
   .euiEmptyPrompt__content {
-    max-width: $euiTextConstrainedMaxWidth;
+    max-width: 36em; // TODO: Use euiTextConstrainedMaxWidth in text.styles.ts
 
     @include euiBreakpoint('l', 'xl') {
       padding: $euiSizeL 0;

src/components/text/__snapshots__/text.test.tsx.snap

@@ -12,10 +12,10 @@ exports[`EuiText is rendered 1`] = `
 </div>
 `;
 
-exports[`EuiText props grow is rendered 1`] = `
+exports[`EuiText props grow false 1`] = `
 <div
   aria-label="aria-label"
-  class="euiText euiText--medium testClass1 testClass2"
+  class="euiText euiText--medium testClass1 testClass2 css-19nx0h7-euiText-constrainedWidth"
   data-test-subj="test subject string"
 >
   <p>

src/components/text/_index.scss

@@ -1,4 +1,3 @@
-@import 'variables';
 @import 'text';
 @import 'text_color';
 @import 'text_align';

src/components/text/text.styles.ts

@@ -12,6 +12,8 @@ import { UseEuiTheme } from '../../services';
 import { euiLinkCSS } from '../link/link.styles';
 import { euiTitle } from '../title/title.styles';
 
+export const euiTextConstrainedMaxWidth = '36em';
+
 /**
  * Mixins
  */
@@ -142,16 +144,15 @@ export const euiTextStyles = ({ euiTheme }: UseEuiTheme) => ({
       letter-spacing: normal;
     }
 
-    &.euiText--constrainedWidth {
-      max-width: 36em; // TODO
-      // If the max-width is way too short of the width of the container,
-      // at least make it 2/3 of its parent
-      min-width: 75%;
-    }
-
     > :last-child,
     .euiTextColor > :last-child {
       margin-bottom: 0 !important;
     }
   `,
+  constrainedWidth: css`
+    max-width: ${euiTextConstrainedMaxWidth};
+    // If the max-width is way too short of the width of the container,
+    // at least make it 2/3 of its parent
+    min-width: 75%;
+  `,
 });

src/components/text/text.test.tsx

@@ -28,9 +28,9 @@ describe('EuiText', () => {
 
   describe('props', () => {
     describe('grow', () => {
-      test('is rendered', () => {
+      test('false', () => {
         const component = render(
-          <EuiText {...requiredProps} grow>
+          <EuiText {...requiredProps} grow={false}>
             <p>Content</p>
           </EuiText>
         );

src/components/text/text.tsx

@@ -53,15 +53,15 @@ export const EuiText: FunctionComponent<EuiTextProps> = ({
 }) => {
   const euiTheme = useEuiTheme();
   const styles = euiTextStyles(euiTheme);
-  const cssStyles = [styles.euiText];
+  const cssStyles = [
+    styles.euiText,
+    !grow ? styles.constrainedWidth : undefined,
+  ];
 
   const classes = classNames(
     'euiText',
     textSizeToClassNameMap[size],
-    className,
-    {
-      'euiText--constrainedWidth': !grow,
-    }
+    className
   );
 
   let optionallyAlteredText;