Convert EuiText, EuiTextColor and EuiTextAlign to TS

CHANGELOG.md

@@ -2,6 +2,7 @@
 
 - Converted `EuiTitle` to TS ([#1810](https://github.com/elastic/eui/pull/1810))
 - Added `adjustDateOnChange` prop to date pickers, enabling month and year changes to trigger `onChange` ([#1817](https://github.com/elastic/eui/pull/1817))
+- Convert `EuiText`, `EuiTextColor` and `EuiTextAlign` to TS ([#1791](https://github.com/elastic/eui/pull/1791))
 
 ## [`9.9.1`](https://github.com/elastic/eui/tree/v9.9.1)
 

src/components/form/described_form_group/__snapshots__/described_form_group.test.js.snap

@@ -25,7 +25,6 @@ exports[`EuiDescribedFormGroup is rendered 1`] = `
       <EuiText
         className="euiDescribedFormGroup__description"
         color="subdued"
-        grow={true}
         id="generated-id"
         size="s"
       >
@@ -111,7 +110,6 @@ exports[`EuiDescribedFormGroup props fullWidth is rendered 1`] = `
       <EuiText
         className="euiDescribedFormGroup__description"
         color="subdued"
-        grow={true}
         id="generated-id"
         size="s"
       >
@@ -159,7 +157,6 @@ exports[`EuiDescribedFormGroup props gutterSize is rendered 1`] = `
       <EuiText
         className="euiDescribedFormGroup__description"
         color="subdued"
-        grow={true}
         id="generated-id"
         size="s"
       >
@@ -207,7 +204,6 @@ exports[`EuiDescribedFormGroup props titleSize is rendered 1`] = `
       <EuiText
         className="euiDescribedFormGroup__description"
         color="subdued"
-        grow={true}
         id="generated-id"
         size="s"
       >
@@ -279,7 +275,6 @@ exports[`EuiDescribedFormGroup ties together parts for accessibility 1`] = `
             <EuiText
               className="euiDescribedFormGroup__description"
               color="subdued"
-              grow={true}
               id="test-id"
               size="s"
             >

src/components/index.d.ts

@@ -28,7 +28,6 @@
 /// <reference path="./steps/index.d.ts" />
 /// <reference path="./table/index.d.ts" />
 /// <reference path="./tabs/index.d.ts" />
-/// <reference path="./text/index.d.ts" />
 /// <reference path="./toast/index.d.ts" />
 /// <reference path="./tool_tip/index.d.ts" />
 

src/components/selectable/selectable_message/selectable_message.tsx

@@ -1,10 +1,12 @@
 import React, { HTMLAttributes } from 'react';
-import { CommonProps } from '../../common';
+import { CommonProps, Omit } from '../../common';
 import classNames from 'classnames';
-// @ts-ignore
 import { EuiText } from '../../text';
 
-export type EuiSelectableMessageProps = HTMLAttributes<HTMLDivElement> &
+export type EuiSelectableMessageProps = Omit<
+  HTMLAttributes<HTMLDivElement>,
+  'color'
+> &
   CommonProps & {};
 
 export const EuiSelectableMessage: React.FunctionComponent<

src/components/text/index.ts

@@ -0,0 +1,5 @@
+export { EuiText, TextSize, TEXT_SIZES } from './text';
+
+export { EuiTextColor, TextColor, COLORS } from './text_color';
+
+export { EuiTextAlign, TextAlignment, ALIGNMENTS } from './text_align';

src/components/text/text.tsx

@@ -0,0 +1,67 @@
+import React, { FunctionComponent, HTMLAttributes } from 'react';
+import classNames from 'classnames';
+import { CommonProps, keysOf, Omit } from '../common';
+
+import { TextColor, EuiTextColor } from './text_color';
+
+import { EuiTextAlign, TextAlignment } from './text_align';
+
+const textSizeToClassNameMap = {
+  xs: 'euiText--extraSmall',
+  s: 'euiText--small',
+  m: 'euiText--medium',
+};
+
+export type TextSize = keyof typeof textSizeToClassNameMap;
+
+export const TEXT_SIZES = keysOf(textSizeToClassNameMap);
+
+type Props = CommonProps &
+  Omit<HTMLAttributes<HTMLDivElement>, 'color'> & {
+    textAlign?: TextAlignment;
+    size?: TextSize;
+    color?: TextColor;
+    grow?: boolean;
+  };
+
+export const EuiText: FunctionComponent<Props> = ({
+  size = 'm',
+  color,
+  grow = true,
+  textAlign,
+  children,
+  className,
+  ...rest
+}) => {
+  const classes = classNames(
+    'euiText',
+    textSizeToClassNameMap[size],
+    className,
+    {
+      'euiText--constrainedWidth': !grow,
+    }
+  );
+
+  let optionallyAlteredText;
+  if (color) {
+    optionallyAlteredText = (
+      <EuiTextColor color={color} component="div">
+        {children}
+      </EuiTextColor>
+    );
+  }
+
+  if (textAlign) {
+    optionallyAlteredText = (
+      <EuiTextAlign textAlign={textAlign}>
+        {optionallyAlteredText || children}
+      </EuiTextAlign>
+    );
+  }
+
+  return (
+    <div className={classes} {...rest}>
+      {optionallyAlteredText || children}
+    </div>
+  );
+};

src/components/text/text_align.test.js → src/components/text/text_align.test.tsx

@@ -6,11 +6,8 @@ import { EuiTextAlign } from './text_align';
 
 describe('EuiTextAlign', () => {
   test('is rendered', () => {
-    const component = render(
-      <EuiTextAlign {...requiredProps} />
-    );
+    const component = render(<EuiTextAlign {...requiredProps} />);
 
-    expect(component)
-      .toMatchSnapshot();
+    expect(component).toMatchSnapshot();
   });
 });

src/components/text/text_align.tsx

@@ -0,0 +1,37 @@
+import React, { FunctionComponent, HTMLAttributes } from 'react';
+import classNames from 'classnames';
+import { CommonProps, keysOf } from '../common';
+
+export const alignmentToClassNameMap = {
+  left: 'euiTextAlign--left',
+  right: 'euiTextAlign--right',
+  center: 'euiTextAlign--center',
+};
+
+export type TextAlignment = keyof typeof alignmentToClassNameMap;
+
+export const ALIGNMENTS = keysOf(alignmentToClassNameMap);
+
+type Props = CommonProps &
+  HTMLAttributes<HTMLDivElement> & {
+    textAlign?: TextAlignment;
+  };
+
+export const EuiTextAlign: FunctionComponent<Props> = ({
+  children,
+  className,
+  textAlign = 'left',
+  ...rest
+}) => {
+  const classes = classNames(
+    'euiTextAlign',
+    alignmentToClassNameMap[textAlign],
+    className
+  );
+
+  return (
+    <div className={classes} {...rest}>
+      {children}
+    </div>
+  );
+};