[Emotion] Convert EuiFormLabel and EuiFormLegend (#7967)

packages/eui/changelogs/upcoming/7967.md

@@ -0,0 +1,3 @@
+**CSS-in-JS conversions**
+
+- Converted `EuiFormLabel` and `EuiFormLegend` to Emotion; Removed `@euiFormLabel` mixin

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

@@ -570,7 +570,7 @@ exports[`EuiColorPicker prepend and append 1`] = `
       class="euiFormControlLayout__prepend emotion-euiFormControlLayout__side-prepend"
     >
       <label
-        class="euiFormLabel"
+        class="euiFormLabel emotion-euiFormLabel"
       >
         prepend
       </label>
@@ -619,7 +619,7 @@ exports[`EuiColorPicker prepend and append 1`] = `
       class="euiFormControlLayout__append emotion-euiFormControlLayout__side-append"
     >
       <label
-        class="euiFormLabel"
+        class="euiFormLabel emotion-euiFormLabel"
       >
         append
       </label>

packages/eui/src/components/date_picker/super_date_picker/quick_select_popover/__snapshots__/quick_select_popover.test.tsx.snap

@@ -316,7 +316,7 @@ exports[`EuiQuickSelectPanels customQuickSelectPanels should render custom panel
             id="generated-id"
           >
             <label
-              class="euiFormLabel"
+              class="euiFormLabel emotion-euiFormLabel"
             >
               Refresh every
             </label>

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

@@ -1,6 +1,4 @@
 @import 'checkbox/index';
-@import 'form_fieldset/index';
-@import 'form_label/index';
 @import 'form_row/index';
 @import 'radio/index';
 @import 'switch/index';

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

@@ -52,7 +52,7 @@ exports[`EuiCheckboxGroup (mocked checkbox) legend is rendered 1`] = `
   class="euiCheckboxGroup emotion-euiCheckboxGroup"
 >
   <legend
-    class="euiFormLegend"
+    class="euiFormLegend emotion-euiFormLegend"
   >
     A legend
   </legend>

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

@@ -308,7 +308,7 @@ exports[`EuiDescribedFormGroup ties together parts for accessibility 1`] = `
       >
         <label
           aria-invalid="true"
-          class="euiFormLabel euiFormRow__label euiFormLabel-isInvalid"
+          class="euiFormLabel euiFormRow__label euiFormLabel-isInvalid emotion-euiFormLabel-invalid"
           for="generated-id"
           id="generated-id-label"
         >

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

@@ -102,7 +102,7 @@ exports[`EuiFieldPassword props dual dual type also renders append 1`] = `
     class="euiFormControlLayout__append emotion-euiFormControlLayout__side-append"
   >
     <label
-      class="euiFormLabel"
+      class="euiFormLabel emotion-euiFormLabel"
     >
       String
     </label>
@@ -299,7 +299,7 @@ exports[`EuiFieldPassword props prepend and append is rendered 1`] = `
     class="euiFormControlLayout__prepend emotion-euiFormControlLayout__side-prepend"
   >
     <label
-      class="euiFormLabel"
+      class="euiFormLabel emotion-euiFormLabel"
     >
       String
     </label>
@@ -333,7 +333,7 @@ exports[`EuiFieldPassword props prepend and append is rendered 1`] = `
     class="euiFormControlLayout__append emotion-euiFormControlLayout__side-append"
   >
     <label
-      class="euiFormLabel"
+      class="euiFormLabel emotion-euiFormLabel"
     >
       String
     </label>

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

@@ -369,7 +369,7 @@ exports[`EuiFormControlLayout props one append string is rendered 1`] = `
     class="euiFormControlLayout__append emotion-euiFormControlLayout__side-append"
   >
     <label
-      class="euiFormLabel"
+      class="euiFormLabel emotion-euiFormLabel"
     >
       1
     </label>
@@ -421,7 +421,7 @@ exports[`EuiFormControlLayout props one prepend string is rendered 1`] = `
     class="euiFormControlLayout__prepend emotion-euiFormControlLayout__side-prepend"
   >
     <label
-      class="euiFormLabel"
+      class="euiFormLabel emotion-euiFormLabel"
     >
       1
     </label>

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

@@ -125,7 +125,7 @@ export const euiFormControlLayoutSideNodeStyles = (
 
       ${text} {
         /* Override .euiFormLabel CSS */
-        cursor: default !important; /* stylelint-disable-line declaration-no-important */
+        cursor: default;
       }
 
       /* Account for button padding when spacing children */

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

@@ -13,7 +13,7 @@ exports[`EuiFormFieldset is rendered 1`] = `
 exports[`EuiFormFieldset props legend is rendered 1`] = `
 <fieldset>
   <legend
-    class="euiFormLegend"
+    class="euiFormLegend emotion-euiFormLegend"
   >
     Legend
   </legend>

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

@@ -3,7 +3,7 @@
 exports[`EuiFormLegend is rendered 1`] = `
 <legend
   aria-label="aria-label"
-  class="euiFormLegend testClass1 testClass2 emotion-euiTestCss"
+  class="euiFormLegend testClass1 testClass2 emotion-euiFormLegend-euiTestCss"
   data-test-subj="test subject string"
 >
   Legend
@@ -12,15 +12,15 @@ exports[`EuiFormLegend is rendered 1`] = `
 
 exports[`EuiFormLegend props compressed is rendered 1`] = `
 <legend
-  class="euiFormLegend euiFormLegend--compressed"
+  class="euiFormLegend emotion-euiFormLegend-compressed"
 >
   Legend
 </legend>
 `;
 
 exports[`EuiFormLegend props hidden is rendered 1`] = `
 <legend
-  class="euiFormLegend euiFormLegend-isHidden"
+  class="euiFormLegend euiFormLegend-isHidden emotion-euiFormLegend"
 >
   <span
     class="emotion-euiScreenReaderOnly"

packages/eui/src/components/form/form_fieldset/form_legend.styles.ts

@@ -0,0 +1,26 @@
+/*
+ * 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 { logicalCSS } from '../../../global_styling';
+import { euiFormLabel } from '../form_label/form_label.styles';
+
+export const euiFormLegendStyles = (euiThemeContext: UseEuiTheme) => {
+  const { euiTheme } = euiThemeContext;
+
+  return {
+    euiFormLegend: css`
+      ${euiFormLabel(euiThemeContext)}
+    `,
+    // Skip css`` to avoid generating an extra Emotion className
+    uncompressed: logicalCSS('margin-bottom', euiTheme.size.s),
+    compressed: css(logicalCSS('margin-bottom', euiTheme.size.xs)),
+  };
+};

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

@@ -7,10 +7,14 @@
  */
 
 import React, { HTMLAttributes, FunctionComponent, ReactNode } from 'react';
-import { CommonProps } from '../../common';
 import classNames from 'classnames';
+
+import { useEuiMemoizedStyles } from '../../../services';
+import { CommonProps } from '../../common';
 import { EuiScreenReaderOnly } from '../../accessibility';
 
+import { euiFormLegendStyles } from './form_legend.styles';
+
 export type EuiFormLegendProps = HTMLAttributes<HTMLLegendElement> &
   CommonProps & {
     /**
@@ -32,17 +36,21 @@ export const EuiFormLegend: FunctionComponent<EuiFormLegendProps> = ({
   ...rest
 }) => {
   const isLegendHidden = display === 'hidden';
+
+  const styles = useEuiMemoizedStyles(euiFormLegendStyles);
+  const cssStyles = [
+    styles.euiFormLegend,
+    !isLegendHidden && (compressed ? styles.compressed : styles.uncompressed),
+  ];
+
   const classes = classNames(
     'euiFormLegend',
-    {
-      'euiFormLegend-isHidden': isLegendHidden,
-      'euiFormLegend--compressed': compressed,
-    },
+    { 'euiFormLegend-isHidden': isLegendHidden },
     className
   );
 
   return (
-    <legend className={classes} {...rest}>
+    <legend css={cssStyles} className={classes} {...rest}>
       {isLegendHidden ? (
         <EuiScreenReaderOnly>
           <span>{children}</span>

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

@@ -3,38 +3,38 @@
 exports[`EuiFormLabel is rendered 1`] = `
 <label
   aria-label="aria-label"
-  class="euiFormLabel testClass1 testClass2 emotion-euiTestCss"
+  class="euiFormLabel testClass1 testClass2 emotion-euiFormLabel-euiTestCss"
   data-test-subj="test subject string"
 />
 `;
 
 exports[`EuiFormLabel props isDisabled is rendered 1`] = `
 <label
-  class="euiFormLabel euiFormLabel-isDisabled"
+  class="euiFormLabel euiFormLabel-isDisabled emotion-euiFormLabel"
 />
 `;
 
 exports[`EuiFormLabel props isDisabled is still disabled with for attribute 1`] = `
 <label
-  class="euiFormLabel euiFormLabel-isDisabled"
+  class="euiFormLabel euiFormLabel-isDisabled emotion-euiFormLabel"
   for=""
 />
 `;
 
 exports[`EuiFormLabel props isFocused is rendered 1`] = `
 <label
-  class="euiFormLabel euiFormLabel-isFocused"
+  class="euiFormLabel euiFormLabel-isFocused emotion-euiFormLabel-focused"
 />
 `;
 
 exports[`EuiFormLabel props isInvalid is rendered 1`] = `
 <label
-  class="euiFormLabel euiFormLabel-isInvalid"
+  class="euiFormLabel euiFormLabel-isInvalid emotion-euiFormLabel-invalid"
 />
 `;
 
 exports[`EuiFormLabel props type can be changed to legend 1`] = `
 <legend
-  class="euiFormLabel"
+  class="euiFormLabel emotion-euiFormLabel"
 />
 `;

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

@@ -0,0 +1,59 @@
+/*
+ * 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 { serializeStyles, type CSSObject } from '@emotion/serialize';
+
+import { UseEuiTheme } from '../../../services';
+import { euiCanAnimate, euiTextBreakWord } from '../../../global_styling';
+import { euiTitle } from '../../title/title.styles';
+
+export const euiFormLabel = (euiThemeContext: UseEuiTheme) => {
+  const { euiTheme } = euiThemeContext;
+  // Exclude the fontWeight from the title, since we're setting our own later
+  const { fontWeight: _, ..._titleStyles } = euiTitle(euiThemeContext, 'xxxs');
+  // Since we're not returning a css`` string (to avoid generating an extra Emotion
+  // className), we need to manually serialize the style object into a string
+  const titleStyles = serializeStyles([_titleStyles as CSSObject]).styles;
+
+  return `
+    ${titleStyles}
+    font-weight: ${euiTheme.font.weight.semiBold};
+    ${euiTextBreakWord()}
+  `;
+};
+
+export const euiFormLabelStyles = (euiThemeContext: UseEuiTheme) => {
+  const { euiTheme } = euiThemeContext;
+
+  return {
+    euiFormLabel: css`
+      ${euiFormLabel(euiThemeContext)}
+      display: inline-block;
+
+      ${euiCanAnimate} {
+        transition: color ${euiTheme.animation.fast}
+          ${euiTheme.animation.resistance};
+      }
+    `,
+    // Skip css`` to avoid generating an extra Emotion className
+    // Use :where to reduce specificity & make the CSS easier to override by prepend/append nodes
+    notDisabled: `
+      &:where([for]) {
+        cursor: pointer;
+      }
+    `,
+    invalid: css`
+      color: ${euiTheme.colors.danger};
+    `,
+    // Focused state should override invalid state
+    focused: css`
+      color: ${euiTheme.colors.primary};
+    `,
+  };
+};