[Emotion] Convert EuiForm help/error text (#7966)

packages/eui/changelogs/upcoming/7966.md

@@ -0,0 +1,3 @@
+**CSS-in-JS conversions**
+
+- Converted `EuiForm`, `EuiFormHelpText`, and `EuiFormErrorText` to Emotion

packages/eui/src/components/form/__snapshots__/form.test.tsx.snap

@@ -34,6 +34,9 @@ exports[`EuiForm renders with error callout when isInvalid is "true" 1`] = `
       Please address the highlighted errors.
     </p>
   </div>
+  <div
+    class="euiSpacer euiSpacer--m emotion-euiSpacer-m"
+  />
 </div>
 `;
 
@@ -78,6 +81,9 @@ exports[`EuiForm renders with error callout when isInvalid is "true" and has mul
       </ul>
     </div>
   </div>
+  <div
+    class="euiSpacer euiSpacer--m emotion-euiSpacer-m"
+  />
 </div>
 `;
 
@@ -115,6 +121,9 @@ exports[`EuiForm renders with error callout when isInvalid is "true" and has one
       </ul>
     </div>
   </div>
+  <div
+    class="euiSpacer euiSpacer--m emotion-euiSpacer-m"
+  />
 </div>
 `;
 

packages/eui/src/components/form/_index.scss

@@ -1,8 +1,5 @@
 @import 'checkbox/index';
-@import 'form';
-@import 'form_error_text/index';
 @import 'form_fieldset/index';
-@import 'form_help_text/index';
 @import 'form_label/index';
 @import 'form_row/index';
 @import 'radio/index';

packages/eui/src/components/form/described_form_group/__snapshots__/described_form_group.test.tsx.snap

@@ -324,20 +324,20 @@ exports[`EuiDescribedFormGroup ties together parts for accessibility 1`] = `
         />
         <div
           aria-live="polite"
-          class="euiFormErrorText euiFormRow__text"
+          class="euiFormErrorText euiFormRow__text emotion-euiFormErrorText"
           id="generated-id-error-0"
         >
           Error one
         </div>
         <div
           aria-live="polite"
-          class="euiFormErrorText euiFormRow__text"
+          class="euiFormErrorText euiFormRow__text emotion-euiFormErrorText"
           id="generated-id-error-1"
         >
           Error two
         </div>
         <div
-          class="euiFormHelpText euiFormRow__text"
+          class="euiFormHelpText euiFormRow__text emotion-euiFormHelpText"
           id="generated-id-help-0"
         >
           Help text

packages/eui/src/components/form/form.tsx

@@ -11,12 +11,15 @@ import React, {
   HTMLAttributes,
   FormHTMLAttributes,
   useCallback,
+  useMemo,
   forwardRef,
 } from 'react';
 import classNames from 'classnames';
+
+import { CommonProps, ExclusiveUnion } from '../common';
 import { EuiCallOut } from '../call_out';
 import { EuiI18n } from '../i18n';
-import { CommonProps, ExclusiveUnion } from '../common';
+import { EuiSpacer } from '../spacer';
 
 import { FormContext, FormContextValue } from './eui_form_context';
 
@@ -59,7 +62,7 @@ export const EuiForm = forwardRef<HTMLElement, EuiFormProps>(
     },
     ref
   ) => {
-    const formContext = React.useMemo(
+    const formContext = useMemo(
       (): FormContextValue => ({
         defaultFullWidth: fullWidth ?? false,
       }),
@@ -96,17 +99,20 @@ export const EuiForm = forwardRef<HTMLElement, EuiFormProps>(
           default="Please address the highlighted errors."
         >
           {(addressFormErrors: string) => (
-            <EuiCallOut
-              tabIndex={-1}
-              ref={handleFocus}
-              className="euiForm__errors"
-              title={addressFormErrors}
-              color="danger"
-              role="alert"
-              aria-live="assertive"
-            >
-              {optionalErrors}
-            </EuiCallOut>
+            <>
+              <EuiCallOut
+                tabIndex={-1}
+                ref={handleFocus}
+                className="euiForm__errors"
+                title={addressFormErrors}
+                color="danger"
+                role="alert"
+                aria-live="assertive"
+              >
+                {optionalErrors}
+              </EuiCallOut>
+              <EuiSpacer size="m" />
+            </>
           )}
         </EuiI18n>
       );

packages/eui/src/components/form/form_error_text/__snapshots__/form_error_text.test.tsx.snap

@@ -4,7 +4,7 @@ exports[`EuiFormErrorText is rendered 1`] = `
 <div
   aria-label="aria-label"
   aria-live="polite"
-  class="euiFormErrorText testClass1 testClass2 emotion-euiTestCss"
+  class="euiFormErrorText testClass1 testClass2 emotion-euiFormErrorText-euiTestCss"
   data-test-subj="test subject string"
 >
   This is an error.

packages/eui/src/components/form/form_error_text/form_error_text.styles.ts

@@ -0,0 +1,24 @@
+/*
+ * 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 { UseEuiTheme } from '../../../services';
+import { euiFontSize, logicalCSS } from '../../../global_styling';
+
+export const euiFormErrorTextStyles = (euiThemeContext: UseEuiTheme) => {
+  const { euiTheme } = euiThemeContext;
+
+  return {
+    euiFormErrorText: css`
+      ${logicalCSS('padding-top', euiTheme.size.xs)}
+      ${euiFontSize(euiThemeContext, 'xs')}
+      color: ${euiTheme.colors.danger};
+    `,
+  };
+};

packages/eui/src/components/form/form_error_text/form_error_text.tsx

@@ -7,10 +7,13 @@
  */
 
 import React, { FunctionComponent, HTMLAttributes } from 'react';
-
 import classNames from 'classnames';
+
+import { useEuiMemoizedStyles } from '../../../services';
 import { CommonProps } from '../../common';
 
+import { euiFormErrorTextStyles } from './form_error_text.styles';
+
 export type EuiFormErrorTextProps = CommonProps &
   HTMLAttributes<HTMLDivElement>;
 
@@ -20,9 +23,15 @@ export const EuiFormErrorText: FunctionComponent<EuiFormErrorTextProps> = ({
   ...rest
 }) => {
   const classes = classNames('euiFormErrorText', className);
+  const styles = useEuiMemoizedStyles(euiFormErrorTextStyles);
 
   return (
-    <div className={classes} aria-live="polite" {...rest}>
+    <div
+      css={styles.euiFormErrorText}
+      className={classes}
+      aria-live="polite"
+      {...rest}
+    >
       {children}
     </div>
   );

packages/eui/src/components/form/form_help_text/__snapshots__/form_help_text.test.tsx.snap

@@ -3,7 +3,7 @@
 exports[`EuiFormHelpText is rendered 1`] = `
 <div
   aria-label="aria-label"
-  class="euiFormHelpText testClass1 testClass2 emotion-euiTestCss"
+  class="euiFormHelpText testClass1 testClass2 emotion-euiFormHelpText-euiTestCss"
   data-test-subj="test subject string"
 >
   This is help text.

packages/eui/src/components/form/form_help_text/form_help_text.styles.ts

@@ -0,0 +1,24 @@
+/*
+ * 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 { UseEuiTheme } from '../../../services';
+import { euiFontSize, logicalCSS } from '../../../global_styling';
+
+export const euiFormHelpTextStyles = (euiThemeContext: UseEuiTheme) => {
+  const { euiTheme } = euiThemeContext;
+
+  return {
+    euiFormHelpText: css`
+      ${logicalCSS('padding-top', euiTheme.size.xs)}
+      ${euiFontSize(euiThemeContext, 'xs')}
+      color: ${euiTheme.colors.darkShade};
+    `,
+  };
+};

packages/eui/src/components/form/form_help_text/form_help_text.tsx

@@ -7,10 +7,13 @@
  */
 
 import React, { FunctionComponent, HTMLAttributes } from 'react';
-
 import classNames from 'classnames';
+
+import { useEuiMemoizedStyles } from '../../../services';
 import { CommonProps } from '../../common';
 
+import { euiFormHelpTextStyles } from './form_help_text.styles';
+
 export type EuiFormHelpTextProps = CommonProps & HTMLAttributes<HTMLDivElement>;
 
 export const EuiFormHelpText: FunctionComponent<EuiFormHelpTextProps> = ({
@@ -19,9 +22,10 @@ export const EuiFormHelpText: FunctionComponent<EuiFormHelpTextProps> = ({
   ...rest
 }) => {
   const classes = classNames('euiFormHelpText', className);
+  const styles = useEuiMemoizedStyles(euiFormHelpTextStyles);
 
   return (
-    <div className={classes} {...rest}>
+    <div css={styles.euiFormHelpText} className={classes} {...rest}>
       {children}
     </div>
   );

packages/eui/src/components/form/form_row/__snapshots__/form_row.test.tsx.snap

@@ -341,14 +341,14 @@ exports[`EuiFormRow props error as array is rendered 1`] = `
     />
     <div
       aria-live="polite"
-      class="euiFormErrorText euiFormRow__text"
+      class="euiFormErrorText euiFormRow__text emotion-euiFormErrorText"
       id="generated-id-error-0"
     >
       Error
     </div>
     <div
       aria-live="polite"
-      class="euiFormErrorText euiFormRow__text"
+      class="euiFormErrorText euiFormRow__text emotion-euiFormErrorText"
       id="generated-id-error-1"
     >
       Error2
@@ -371,7 +371,7 @@ exports[`EuiFormRow props error as string is rendered 1`] = `
     />
     <div
       aria-live="polite"
-      class="euiFormErrorText euiFormRow__text"
+      class="euiFormErrorText euiFormRow__text emotion-euiFormErrorText"
       id="generated-id-error-0"
     >
       Error
@@ -438,7 +438,7 @@ exports[`EuiFormRow props helpText is rendered 1`] = `
       id="generated-id"
     />
     <div
-      class="euiFormHelpText euiFormRow__text"
+      class="euiFormHelpText euiFormRow__text emotion-euiFormHelpText"
       id="generated-id-help-0"
     >
       <span>