Convert EuiTextAlign to Emotion

+ switch to logical properties

src/components/text/_index.scss

@@ -1,2 +1 @@
 @import 'text_color';
-@import 'text_align';

src/components/text/text_align.styles.ts

@@ -0,0 +1,23 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { css } from '@emotion/react';
+import { logicalTextAlignCSS } from '../../global_styling';
+
+export const euiTextAlignStyles = () => ({
+  euiTextAlign: css``,
+  left: css`
+    ${logicalTextAlignCSS('left')}
+  `,
+  right: css`
+    ${logicalTextAlignCSS('right')}
+  `,
+  center: css`
+    ${logicalTextAlignCSS('center')}
+  `,
+});

src/components/text/text_align.test.tsx

@@ -9,6 +9,7 @@
 import React from 'react';
 import { render } from 'enzyme';
 import { requiredProps } from '../../test';
+import { shouldRenderCustomStyles } from '../../test/internal';
 
 import { EuiTextAlign, ALIGNMENTS } from './text_align';
 
@@ -19,6 +20,8 @@ describe('EuiTextAlign', () => {
     expect(component).toMatchSnapshot();
   });
 
+  shouldRenderCustomStyles(<EuiTextAlign textAlign="right" />);
+
   describe('direction prop', () => {
     ALIGNMENTS.forEach((direction) => {
       test(`${direction} is rendered`, () => {

src/components/text/text_align.tsx

@@ -8,17 +8,12 @@
 
 import React, { FunctionComponent, HTMLAttributes } from 'react';
 import classNames from 'classnames';
-import { CommonProps, keysOf } from '../common';
+import { CommonProps } from '../common';
 
-export const alignmentToClassNameMap = {
-  left: 'euiTextAlign--left',
-  right: 'euiTextAlign--right',
-  center: 'euiTextAlign--center',
-};
-
-export type TextAlignment = keyof typeof alignmentToClassNameMap;
+import { euiTextAlignStyles } from './text_align.styles';
 
-export const ALIGNMENTS = keysOf(alignmentToClassNameMap);
+export const ALIGNMENTS = ['left', 'right', 'center'] as const;
+export type TextAlignment = typeof ALIGNMENTS[number];
 
 export type EuiTextAlignProps = CommonProps &
   HTMLAttributes<HTMLDivElement> & {
@@ -31,14 +26,13 @@ export const EuiTextAlign: FunctionComponent<EuiTextAlignProps> = ({
   textAlign = 'left',
   ...rest
 }) => {
-  const classes = classNames(
-    'euiTextAlign',
-    alignmentToClassNameMap[textAlign],
-    className
-  );
+  const styles = euiTextAlignStyles();
+  const cssStyles = [styles.euiTextAlign, styles[textAlign]];
+
+  const classes = classNames('euiTextAlign', className);
 
   return (
-    <div className={classes} {...rest}>
+    <div css={cssStyles} className={classes} {...rest}>
       {children}
     </div>
   );