[Emotion] Convert Sass typography mixins to JS (#5854)

* Add unit tests for euiFontSize mixin

* Convert euiTextBreakWord to function + add unit test

* [misc] fix downstream mounted snapshot by changing to render

* Convert euiTextTruncate mixin from Sass to CSS-in-JS

+ add optional arg for max-width property

* Convert euiNumberFormat mixin from Sass to CSS-in-JS

* Convert euiTextShift from Sass to CSS-in-JS + move to `functions` rather than `mixin`

- per feedback from Caroline, this util is mostly used internally and does not need to be publicly exported/documented

* [Docs] Move text utilities to their own page

- a la https://elastic.github.io/eui/#/utilities/scroll

* [Docs] Split text utilities into sections + add mixin snippets

* [Docs] Add prop to ThemeExample that allows stacking/removing margin-bottom

- to group a class utility and its mixin together visually

* [PR feedback] Remove margin-bottom/stacking behavior - Caroline will style page later

This reverts commit 9fe7b65.

* [PR feedback] Documentation copy + example fixes

* [PR feedback] Comment copy, remove IE workaround

* [PR feedback] DRY out unit measurement tests

* [PR feedback] Fix euiNumberFormat to use `euiTheme.font.featureSettings`

+ add hook version, since this util now references euiTheme

* [PR feedback] Add callouts to CSS utilities docs page

* [PR feedback] Tweak text align documentation

* [PR feedback] Document euiTextTruncate parameters in title

Co-authored-by: Caroline Horn <549577+cchaos@users.noreply.github.com>

* Add changelog entry

Co-authored-by: Caroline Horn <549577+cchaos@users.noreply.github.com>

src-docs/src/routes.js

@@ -220,6 +220,8 @@ import { TextDiffExample } from './views/text_diff/text_diff_example';
 
 import { TextExample } from './views/text/text_example';
 
+import { TextUtilitiesExample } from './views/text_utilities/text_utilities_example';
+
 import { TimelineExample } from './views/timeline/timeline_example';
 
 import { TitleExample } from './views/title/title_example';
@@ -598,6 +600,7 @@ const navigation = [
       ResponsiveExample,
       ScrollExample,
       TextDiffExample,
+      TextUtilitiesExample,
       WindowEventExample,
     ].map((example) => createExample(example)),
   },

src-docs/src/views/text_utilities/align.tsx

@@ -0,0 +1,62 @@
+import React from 'react';
+
+import { EuiMark } from '../../../../src';
+import { ThemeExample } from '../theme/_components/_theme_example';
+
+export default () => (
+  <>
+    <ThemeExample
+      title={<code>.eui-textLeft</code>}
+      description={
+        <p>
+          Changes the element’s text alignment to the left/starting side of its
+          container.
+        </p>
+      }
+      example={
+        <div className="eui-textLeft">
+          <EuiMark>Left align text</EuiMark>
+        </div>
+      }
+      snippet={`<div className="eui-textLeft">
+  /* Your content */
+</div>`}
+    />
+
+    <ThemeExample
+      title={<code>.eui-textCenter</code>}
+      description={
+        <p>
+          Changes the element’s text alignment to the center/middle of its
+          container.
+        </p>
+      }
+      example={
+        <div className="eui-textCenter">
+          <EuiMark>Center align text</EuiMark>
+        </div>
+      }
+      snippet={`<div className="eui-textCenter">
+  /* Your content */
+</div>`}
+    />
+
+    <ThemeExample
+      title={<code>.eui-textRight</code>}
+      description={
+        <p>
+          Changes the element’s text alignment to the right/ending side of its
+          container.
+        </p>
+      }
+      example={
+        <div className="eui-textRight">
+          <EuiMark>Right align text</EuiMark>
+        </div>
+      }
+      snippet={`<div className="eui-textRight">
+  /* Your content */
+</div>`}
+    />
+  </>
+);

src-docs/src/views/text_utilities/color.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+
+import { EuiCode, EuiTextColor } from '../../../../src';
+import { ThemeExample } from '../theme/_components/_theme_example';
+
+export default () => (
+  <ThemeExample
+    title={<code>.eui-textInheritColor</code>}
+    description={
+      <>
+        <p>Forces the component to inherit its text color from its parent.</p>
+        <p>
+          For changing the color of your text to on of the named colors,{' '}
+          <Link to="/display/text#coloring-text">
+            use <strong>EuiText</strong> or <strong>EuiTextColor</strong>
+          </Link>
+          .
+        </p>
+      </>
+    }
+    example={
+      <EuiTextColor color="danger">
+        <EuiCode className="eui-textInheritColor">I am code</EuiCode> that
+        matches the EuiTextColor
+      </EuiTextColor>
+    }
+    snippet={`<EuiTextColor color="danger">
+  <EuiCode className="eui-textInheritColor">I am danger code</EuiCode>
+</EuiTextColor>`}
+  />
+);

src-docs/src/views/text_utilities/numbers.tsx

@@ -0,0 +1,88 @@
+import React, { useContext } from 'react';
+
+import { ThemeContext } from '../../components/with_theme';
+
+import {
+  EuiCode,
+  EuiTextAlign,
+  EuiFlexGrid,
+  EuiFlexItem,
+} from '../../../../src';
+import { ThemeExample } from '../theme/_components/_theme_example';
+
+export default () => {
+  const themeContext = useContext(ThemeContext);
+  const currentLanguage = themeContext.themeLanguage;
+  const showSass = currentLanguage.includes('sass');
+
+  return (
+    <>
+      <ThemeExample
+        title={<code>.eui-textNumber</code>}
+        description={
+          <p>
+            Applies{' '}
+            <EuiCode language="sass">
+              {'font-feature-settings: "tnum";'}
+            </EuiCode>{' '}
+            so that numbers align more properly in a column, especially when
+            right aligned.
+          </p>
+        }
+        example={
+          <EuiTextAlign textAlign="right">
+            <EuiFlexGrid columns={2}>
+              <EuiFlexItem>
+                <p>
+                  <strong>Without class</strong>
+                  <br />
+                  11317.11
+                  <br />
+                  0040.900
+                </p>
+              </EuiFlexItem>
+              <EuiFlexItem>
+                <p className="eui-textNumber">
+                  <strong>With class</strong>
+                  <br />
+                  11317.11
+                  <br />
+                  0040.900
+                </p>
+              </EuiFlexItem>
+            </EuiFlexGrid>
+          </EuiTextAlign>
+        }
+        snippet={`<div className="eui-textNumber">
+  /* Your number content */
+</div>`}
+      />
+      {/* Mixin */}
+      {!showSass ? (
+        <ThemeExample
+          title={<code>useEuiNumberFormat()</code>}
+          description={
+            <p>
+              Use this style function to apply number text styles within your
+              CSS-in-JS styling. No parameters are taken for this utility.
+            </p>
+          }
+          snippet={'${useEuiNumberFormat()}'}
+          snippetLanguage="emotion"
+        />
+      ) : (
+        <ThemeExample
+          title={<code>@include euiNumberFormat</code>}
+          description={
+            <p>
+              Use this Sass mixin to apply number text styles to your selectors.
+              No parameters are taken for this utility.
+            </p>
+          }
+          snippet={'@include euiNumberFormat;'}
+          snippetLanguage="scss"
+        />
+      )}
+    </>
+  );
+};

src-docs/src/views/text_utilities/text_utilities_example.js

@@ -0,0 +1,45 @@
+import React from 'react';
+
+import { EuiText } from '../../../../src/components';
+
+import TextAlignUtilities from './align';
+import TextWrappingUtilities from './wrapping';
+import TextNumberUtilities from './numbers';
+import TextColorUtilities from './color';
+
+export const TextUtilitiesExample = {
+  title: 'Text',
+  showThemeLanguageToggle: true,
+  intro: (
+    <EuiText>
+      <p>
+        These text utilities are available primarily as CSS classes to aid in
+        quickly styling your text. Some utilities are additionally available as
+        either CSS-in-JS or Sass mixins to optionally compose within your own
+        custom styles.
+      </p>
+    </EuiText>
+  ),
+  sections: [
+    {
+      title: 'Alignment',
+      wrapText: false,
+      text: <TextAlignUtilities />,
+    },
+    {
+      title: 'Wrapping',
+      wrapText: false,
+      text: <TextWrappingUtilities />,
+    },
+    {
+      title: 'Numbers',
+      wrapText: false,
+      text: <TextNumberUtilities />,
+    },
+    {
+      title: 'Color',
+      wrapText: false,
+      text: <TextColorUtilities />,
+    },
+  ],
+};