[Emotion] Convert EuiFormLayout (1/3)

packages/eui/changelogs/upcoming/7954.md

@@ -0,0 +1,4 @@
+**CSS-in-JS conversions**
+
+- Converted `EuiFormControlLayout` to Emotion
+  - Removed `.euiFormControlLayout--*icons` classNames and `--eui-form-control-layout-icons-padding` CSS var. Use `--euiFormControlRightIconsCount` or `--euiFormControlLeftIconsCount` instead

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

@@ -5,10 +5,10 @@ exports[`EuiColorPicker color empty string 1`] = `
   class="euiPopover euiColorPicker__popoverAnchor emotion-euiPopover-block"
 >
   <div
-    class="euiFormControlLayout"
+    class="euiFormControlLayout emotion-euiFormControlLayout"
   >
     <div
-      class="euiFormControlLayout__childrenWrapper"
+      class="euiFormControlLayout__childrenWrapper emotion-euiFormControlLayout__childrenWrapper"
       style="--euiFormControlLeftIconsCount: 1; --euiFormControlRightIconsCount: 1;"
     >
       <div
@@ -57,10 +57,10 @@ exports[`EuiColorPicker color null 1`] = `
   class="euiPopover euiColorPicker__popoverAnchor emotion-euiPopover-block"
 >
   <div
-    class="euiFormControlLayout"
+    class="euiFormControlLayout emotion-euiFormControlLayout"
   >
     <div
-      class="euiFormControlLayout__childrenWrapper"
+      class="euiFormControlLayout__childrenWrapper emotion-euiFormControlLayout__childrenWrapper"
       style="--euiFormControlLeftIconsCount: 1; --euiFormControlRightIconsCount: 1;"
     >
       <div
@@ -109,10 +109,10 @@ exports[`EuiColorPicker color valid string 1`] = `
   class="euiPopover euiColorPicker__popoverAnchor emotion-euiPopover-block"
 >
   <div
-    class="euiFormControlLayout"
+    class="euiFormControlLayout emotion-euiFormControlLayout"
   >
     <div
-      class="euiFormControlLayout__childrenWrapper"
+      class="euiFormControlLayout__childrenWrapper emotion-euiFormControlLayout__childrenWrapper"
       style="--euiFormControlLeftIconsCount: 1; --euiFormControlRightIconsCount: 1;"
     >
       <div
@@ -160,10 +160,10 @@ exports[`EuiColorPicker compressed 1`] = `
   class="euiPopover euiColorPicker__popoverAnchor emotion-euiPopover-block"
 >
   <div
-    class="euiFormControlLayout euiFormControlLayout--compressed"
+    class="euiFormControlLayout emotion-euiFormControlLayout-compressed"
   >
     <div
-      class="euiFormControlLayout__childrenWrapper"
+      class="euiFormControlLayout__childrenWrapper emotion-euiFormControlLayout__childrenWrapper"
       style="--euiFormControlLeftIconsCount: 1; --euiFormControlRightIconsCount: 1;"
     >
       <div
@@ -211,10 +211,10 @@ exports[`EuiColorPicker disabled 1`] = `
   class="euiPopover euiColorPicker__popoverAnchor emotion-euiPopover-block"
 >
   <div
-    class="euiFormControlLayout euiFormControlLayout-isDisabled"
+    class="euiFormControlLayout euiFormControlLayout-isDisabled emotion-euiFormControlLayout"
   >
     <div
-      class="euiFormControlLayout__childrenWrapper"
+      class="euiFormControlLayout__childrenWrapper emotion-euiFormControlLayout__childrenWrapper"
       style="--euiFormControlLeftIconsCount: 1;"
     >
       <div
@@ -250,10 +250,10 @@ exports[`EuiColorPicker fullWidth 1`] = `
   class="euiPopover euiColorPicker__popoverAnchor emotion-euiPopover-block"
 >
   <div
-    class="euiFormControlLayout euiFormControlLayout--fullWidth"
+    class="euiFormControlLayout emotion-euiFormControlLayout-fullWidth"
   >
     <div
-      class="euiFormControlLayout__childrenWrapper"
+      class="euiFormControlLayout__childrenWrapper emotion-euiFormControlLayout__childrenWrapper"
       style="--euiFormControlLeftIconsCount: 1; --euiFormControlRightIconsCount: 1;"
     >
       <div
@@ -451,10 +451,10 @@ exports[`EuiColorPicker isClearable 1`] = `
   class="euiPopover euiColorPicker__popoverAnchor emotion-euiPopover-block"
 >
   <div
-    class="euiFormControlLayout"
+    class="euiFormControlLayout emotion-euiFormControlLayout"
   >
     <div
-      class="euiFormControlLayout__childrenWrapper"
+      class="euiFormControlLayout__childrenWrapper emotion-euiFormControlLayout__childrenWrapper"
       style="--euiFormControlLeftIconsCount: 1; --euiFormControlRightIconsCount: 2;"
     >
       <div
@@ -512,10 +512,10 @@ exports[`EuiColorPicker placeholder 1`] = `
   class="euiPopover euiColorPicker__popoverAnchor emotion-euiPopover-block"
 >
   <div
-    class="euiFormControlLayout"
+    class="euiFormControlLayout emotion-euiFormControlLayout"
   >
     <div
-      class="euiFormControlLayout__childrenWrapper"
+      class="euiFormControlLayout__childrenWrapper emotion-euiFormControlLayout__childrenWrapper"
       style="--euiFormControlLeftIconsCount: 1; --euiFormControlRightIconsCount: 1;"
     >
       <div
@@ -564,15 +564,19 @@ exports[`EuiColorPicker prepend and append 1`] = `
   class="euiPopover euiColorPicker__popoverAnchor emotion-euiPopover-block"
 >
   <div
-    class="euiFormControlLayout euiFormControlLayout--group"
+    class="euiFormControlLayout euiFormControlLayout--group emotion-euiFormControlLayout-group"
   >
-    <label
-      class="euiFormLabel euiFormControlLayout__prepend"
+    <div
+      class="euiFormControlLayout__prepend emotion-euiFormControlLayout__side-prepend"
     >
-      prepend
-    </label>
+      <label
+        class="euiFormLabel"
+      >
+        prepend
+      </label>
+    </div>
     <div
-      class="euiFormControlLayout__childrenWrapper"
+      class="euiFormControlLayout__childrenWrapper emotion-euiFormControlLayout__childrenWrapper-inGroup"
       style="--euiFormControlLeftIconsCount: 1; --euiFormControlRightIconsCount: 1;"
     >
       <div
@@ -611,11 +615,15 @@ exports[`EuiColorPicker prepend and append 1`] = `
         </span>
       </div>
     </div>
-    <label
-      class="euiFormLabel euiFormControlLayout__append"
+    <div
+      class="euiFormControlLayout__append emotion-euiFormControlLayout__side-append"
     >
-      append
-    </label>
+      <label
+        class="euiFormLabel"
+      >
+        append
+      </label>
+    </div>
   </div>
 </div>
 `;
@@ -625,10 +633,10 @@ exports[`EuiColorPicker readOnly 1`] = `
   class="euiPopover euiColorPicker__popoverAnchor emotion-euiPopover-block"
 >
   <div
-    class="euiFormControlLayout euiFormControlLayout--readOnly"
+    class="euiFormControlLayout euiFormControlLayout-readOnly emotion-euiFormControlLayout"
   >
     <div
-      class="euiFormControlLayout__childrenWrapper"
+      class="euiFormControlLayout__childrenWrapper emotion-euiFormControlLayout__childrenWrapper"
       style="--euiFormControlLeftIconsCount: 1;"
     >
       <div
@@ -664,10 +672,10 @@ exports[`EuiColorPicker renders 1`] = `
   class="euiPopover euiColorPicker__popoverAnchor emotion-euiPopover-block"
 >
   <div
-    class="euiFormControlLayout"
+    class="euiFormControlLayout emotion-euiFormControlLayout"
   >
     <div
-      class="euiFormControlLayout__childrenWrapper"
+      class="euiFormControlLayout__childrenWrapper emotion-euiFormControlLayout__childrenWrapper"
       style="--euiFormControlLeftIconsCount: 1; --euiFormControlRightIconsCount: 1;"
     >
       <div
@@ -715,10 +723,10 @@ exports[`EuiColorPicker showAlpha 1`] = `
   class="euiPopover euiColorPicker__popoverAnchor emotion-euiPopover-block"
 >
   <div
-    class="euiFormControlLayout"
+    class="euiFormControlLayout emotion-euiFormControlLayout"
   >
     <div
-      class="euiFormControlLayout__childrenWrapper"
+      class="euiFormControlLayout__childrenWrapper emotion-euiFormControlLayout__childrenWrapper"
       style="--euiFormControlLeftIconsCount: 1; --euiFormControlRightIconsCount: 1;"
     >
       <div

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

@@ -9,10 +9,10 @@ exports[`EuiColorPalettePicker is rendered 1`] = `
     value=""
   />
   <div
-    class="euiFormControlLayout"
+    class="euiFormControlLayout emotion-euiFormControlLayout"
   >
     <div
-      class="euiFormControlLayout__childrenWrapper"
+      class="euiFormControlLayout__childrenWrapper emotion-euiFormControlLayout__childrenWrapper"
       style="--euiFormControlRightIconsCount: 1;"
     >
       <button
@@ -49,10 +49,10 @@ exports[`EuiColorPalettePicker is rendered with a selected custom text 1`] = `
     value="custom"
   />
   <div
-    class="euiFormControlLayout"
+    class="euiFormControlLayout emotion-euiFormControlLayout"
   >
     <div
-      class="euiFormControlLayout__childrenWrapper"
+      class="euiFormControlLayout__childrenWrapper emotion-euiFormControlLayout__childrenWrapper"
       style="--euiFormControlRightIconsCount: 1;"
     >
       <button
@@ -91,10 +91,10 @@ exports[`EuiColorPalettePicker is rendered with a selected fixed palette 1`] = `
     value="paletteFixed"
   />
   <div
-    class="euiFormControlLayout"
+    class="euiFormControlLayout emotion-euiFormControlLayout"
   >
     <div
-      class="euiFormControlLayout__childrenWrapper"
+      class="euiFormControlLayout__childrenWrapper emotion-euiFormControlLayout__childrenWrapper"
       style="--euiFormControlRightIconsCount: 1;"
     >
       <button
@@ -161,10 +161,10 @@ exports[`EuiColorPalettePicker is rendered with a selected gradient palette 1`]
     value="paletteLinear"
   />
   <div
-    class="euiFormControlLayout"
+    class="euiFormControlLayout emotion-euiFormControlLayout"
   >
     <div
-      class="euiFormControlLayout__childrenWrapper"
+      class="euiFormControlLayout__childrenWrapper emotion-euiFormControlLayout__childrenWrapper"
       style="--euiFormControlRightIconsCount: 1;"
     >
       <button
@@ -211,10 +211,10 @@ exports[`EuiColorPalettePicker is rendered with a selected gradient palette with
     value="paletteLinearStops"
   />
   <div
-    class="euiFormControlLayout"
+    class="euiFormControlLayout emotion-euiFormControlLayout"
   >
     <div
-      class="euiFormControlLayout__childrenWrapper"
+      class="euiFormControlLayout__childrenWrapper emotion-euiFormControlLayout__childrenWrapper"
       style="--euiFormControlRightIconsCount: 1;"
     >
       <button
@@ -261,10 +261,10 @@ exports[`EuiColorPalettePicker is rendered with the prop selectionDisplay set as
     value="paletteFixed"
   />
   <div
-    class="euiFormControlLayout"
+    class="euiFormControlLayout emotion-euiFormControlLayout"
   >
     <div
-      class="euiFormControlLayout__childrenWrapper"
+      class="euiFormControlLayout__childrenWrapper emotion-euiFormControlLayout__childrenWrapper"
       style="--euiFormControlRightIconsCount: 1;"
     >
       <button
@@ -305,10 +305,10 @@ exports[`EuiColorPalettePicker more props are propagated to each option 1`] = `
         value="paletteFixed"
       />
       <div
-        class="euiFormControlLayout"
+        class="euiFormControlLayout emotion-euiFormControlLayout"
       >
         <div
-          class="euiFormControlLayout__childrenWrapper"
+          class="euiFormControlLayout__childrenWrapper emotion-euiFormControlLayout__childrenWrapper"
           style="--euiFormControlRightIconsCount: 1;"
         >
           <button

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

@@ -9,10 +9,10 @@ exports[`EuiComboBox renders 1`] = `
     class="euiPopover euiInputPopover emotion-euiPopover-block-EuiInputPopover"
   >
     <div
-      class="euiFormControlLayout emotion-euiComboBox__formControlLayout-multiSelect"
+      class="euiFormControlLayout emotion-euiFormControlLayout-euiComboBox__formControlLayout-multiSelect"
     >
       <div
-        class="euiFormControlLayout__childrenWrapper"
+        class="euiFormControlLayout__childrenWrapper emotion-euiFormControlLayout__childrenWrapper"
         style="--euiFormControlRightIconsCount: 1;"
       >
         <div
@@ -69,10 +69,10 @@ exports[`EuiComboBox renders the options list dropdown 1`] = `
         class="euiPopover euiPopover-isOpen euiInputPopover emotion-euiPopover-block-EuiInputPopover"
       >
         <div
-          class="euiFormControlLayout emotion-euiComboBox__formControlLayout-multiSelect"
+          class="euiFormControlLayout emotion-euiFormControlLayout-euiComboBox__formControlLayout-multiSelect"
         >
           <div
-            class="euiFormControlLayout__childrenWrapper"
+            class="euiFormControlLayout__childrenWrapper emotion-euiFormControlLayout__childrenWrapper"
             style="--euiFormControlRightIconsCount: 1;"
           >
             <div

packages/eui/src/components/combo_box/combo_box.test.tsx

@@ -358,9 +358,9 @@ describe('EuiComboBox', () => {
         );
 
         expect(container.firstElementChild!.className).toContain('-fullWidth');
-        expect(container.innerHTML).toContain(
-          'euiFormControlLayout--fullWidth'
-        );
+        expect(
+          container.querySelector('.euiFormControlLayout')!.className
+        ).toContain('-fullWidth');
       });
 
       test('autoFocus', () => {

packages/eui/src/components/combo_box/combo_box_input/combo_box_input.styles.ts

@@ -91,24 +91,8 @@ export const euiComboBoxInputStyles = (euiThemeContext: UseEuiTheme) => {
     formLayout: {
       euiComboBox__formControlLayout: css``,
       // Allow the form control to expand to any height to accommodate multiple rows of pills
-      // TODO: Remove && specificity override once EuiFormControlLayout is on Emotion
       multiSelect: css`
-        && {
-          ${logicalCSS('height', 'auto')}
-        }
-      `,
-      // Fix overflowing input wrapper background
-      prependOnly: css`
-        .euiFormControlLayout__childrenWrapper {
-          ${logicalCSS('border-top-right-radius', 'inherit')}
-          ${logicalCSS('border-bottom-right-radius', 'inherit')}
-        }
-      `,
-      appendOnly: css`
-        .euiFormControlLayout__childrenWrapper {
-          ${logicalCSS('border-top-left-radius', 'inherit')}
-          ${logicalCSS('border-bottom-left-radius', 'inherit')}
-        }
+        ${logicalCSS('height', 'auto')}
       `,
     },
   };

packages/eui/src/components/combo_box/combo_box_input/combo_box_input.tsx

@@ -342,8 +342,6 @@ export class EuiComboBoxInput<T> extends Component<
           const formLayoutStyles = [
             styles.formLayout.euiComboBox__formControlLayout,
             !singleSelection && styles.formLayout.multiSelect,
-            isInGroup && !append && styles.formLayout.prependOnly,
-            isInGroup && !prepend && styles.formLayout.appendOnly,
           ];
 
           return (

packages/eui/src/components/datagrid/controls/__snapshots__/column_selector.test.tsx.snap

@@ -62,10 +62,10 @@ exports[`useDataGridColumnSelector columnSelector [React 16] renders a toolbar b
       class="euiPopoverTitle emotion-euiPopoverTitle-s-s"
     >
       <div
-        class="euiFormControlLayout euiFormControlLayout--compressed"
+        class="euiFormControlLayout emotion-euiFormControlLayout-compressed"
       >
         <div
-          class="euiFormControlLayout__childrenWrapper"
+          class="euiFormControlLayout__childrenWrapper emotion-euiFormControlLayout__childrenWrapper"
         >
           <input
             aria-label="Search columns"
@@ -354,10 +354,10 @@ exports[`useDataGridColumnSelector columnSelector [React 17] renders a toolbar b
       class="euiPopoverTitle emotion-euiPopoverTitle-s-s"
     >
       <div
-        class="euiFormControlLayout euiFormControlLayout--compressed"
+        class="euiFormControlLayout emotion-euiFormControlLayout-compressed"
       >
         <div
-          class="euiFormControlLayout__childrenWrapper"
+          class="euiFormControlLayout__childrenWrapper emotion-euiFormControlLayout__childrenWrapper"
         >
           <input
             aria-label="Search columns"
@@ -646,10 +646,10 @@ exports[`useDataGridColumnSelector columnSelector [React 18] renders a toolbar b
       class="euiPopoverTitle emotion-euiPopoverTitle-s-s"
     >
       <div
-        class="euiFormControlLayout euiFormControlLayout--compressed"
+        class="euiFormControlLayout emotion-euiFormControlLayout-compressed"
       >
         <div
-          class="euiFormControlLayout__childrenWrapper"
+          class="euiFormControlLayout__childrenWrapper emotion-euiFormControlLayout__childrenWrapper"
         >
           <input
             aria-label="Search columns"