[Emotion] Convert basic form controls (#7823)

Co-authored-by: Lene Gadewoll <[email protected]>

Author: cee-chen

packages/eui/.loki/reference/chrome_desktop_Forms_EuiFieldNumber_Controlled_Component.png

@@ -0,0 +1,7 @@
+**Bug fixes**
+
+- Fixed broken focus/invalid styling on compressed `EuiDatePickerRange`s
+
+**CSS-in-JS conversions**
+
+- Converted `EuiFieldText` to Emotion

packages/eui/.loki/reference/chrome_desktop_Forms_EuiFieldNumber_Icon_Shape.png

@@ -0,0 +1,3 @@
+**CSS-in-JS conversions**
+
+- Updated the autofill colors of Chrome (and other webkit browsers) to better match EUI's light and dark mode

packages/eui/.loki/reference/chrome_desktop_Forms_EuiFieldNumber_Playground.png

@@ -0,0 +1 @@
+- Updated `EuiFormControlLayout` to automatically pass icon padding affordance down to child `input`s

packages/eui/.loki/reference/chrome_desktop_Forms_EuiFieldPassword_Playground.png

@@ -0,0 +1,5 @@
+**CSS-in-JS conversions**
+
+- Converted `EuiFieldNumber` to Emotion
+- Converted `EuiFieldSearch` to Emotion
+- Converted `EuiFieldPassword` to Emotion

packages/eui/.loki/reference/chrome_desktop_Forms_EuiFieldSearch_Playground.png

@@ -0,0 +1,5 @@
+**CSS-in-JS conversions**
+
+- Converted `EuiTextArea` to Emotion
+- Converted `EuiSelect` to Emotion
+- Converted `EuiSuperSelect` to Emotion

packages/eui/.loki/reference/chrome_desktop_Forms_EuiFieldText_Icon_Shape.png

@@ -100,12 +100,7 @@ export default () => {
       <EuiFormControlLayout
         prepend={<EuiFormLabel htmlFor={labelInputId}>Label</EuiFormLabel>}
       >
-        <EuiFieldText
-          type="text"
-          className="euiFieldText--inGroup"
-          controlOnly
-          id={labelInputId}
-        />
+        <EuiFieldText type="text" controlOnly id={labelInputId} />
       </EuiFormControlLayout>
 
       <EuiFormControlLayout
@@ -115,13 +110,7 @@ export default () => {
         }
         append={<EuiButtonEmpty size="xs">Button</EuiButtonEmpty>}
       >
-        <EuiFieldText
-          type="text"
-          className="euiFieldText--inGroup"
-          id={readOnlyInputId}
-          controlOnly
-          readOnly
-        />
+        <EuiFieldText type="text" id={readOnlyInputId} controlOnly readOnly />
       </EuiFormControlLayout>
 
       <EuiFormControlLayout
@@ -133,7 +122,6 @@ export default () => {
       >
         <EuiFieldText
           type="number"
-          className="euiFieldNumber--inGroup"
           controlOnly
           aria-label="Use aria labels when no actual label is in use"
         />
@@ -150,7 +138,6 @@ export default () => {
       >
         <EuiFieldText
           type="text"
-          className="euiFieldText--inGroup"
           controlOnly
           aria-label="Use aria labels when no actual label is in use"
         />

packages/eui/.loki/reference/chrome_desktop_Forms_EuiFieldText_Playground.png

@@ -477,16 +477,6 @@ export const FormControlsExample = {
             the <EuiCode>controlOnly</EuiCode> and <EuiCode>type</EuiCode> props
             of <strong>EuiFieldText</strong> as the wrapped control.
           </p>
-
-          <EuiCallOut title="Additional padding required" color="warning">
-            <p>
-              The padding on the <EuiCode>input</EuiCode> itself doesn&rsquo;t
-              take into account the presence of the various icons supported by{' '}
-              <strong>EuiFormControlLayout</strong>. Any input component
-              provided to <strong>EuiFormControlLayout</strong> is responsible
-              for its own padding.
-            </p>
-          </EuiCallOut>
         </>
       ),
       props: {

packages/eui/.loki/reference/chrome_desktop_Forms_EuiSelect_Playground.png

@@ -1,6 +1,7 @@
-import React, { Fragment, useState } from 'react';
+import React, { useState } from 'react';
 
 import {
+  EuiFlexGroup,
   EuiButtonEmpty,
   EuiButtonIcon,
   EuiFieldText,
@@ -19,24 +20,24 @@ export default () => {
   const [isReadOnly, setReadOnly] = useState(false);
 
   return (
-    <Fragment>
-      <EuiSwitch
-        label="compressed"
-        checked={isCompressed}
-        onChange={(e) => setCompressed(e.target.checked)}
-      />
-      &emsp;
-      <EuiSwitch
-        label="disabled"
-        checked={isDisabled}
-        onChange={(e) => setDisabled(e.target.checked)}
-      />
-      &emsp;
-      <EuiSwitch
-        label="readOnly"
-        checked={isReadOnly}
-        onChange={(e) => setReadOnly(e.target.checked)}
-      />
+    <>
+      <EuiFlexGroup responsive={false}>
+        <EuiSwitch
+          label="compressed"
+          checked={isCompressed}
+          onChange={(e) => setCompressed(e.target.checked)}
+        />
+        <EuiSwitch
+          label="disabled"
+          checked={isDisabled}
+          onChange={(e) => setDisabled(e.target.checked)}
+        />
+        <EuiSwitch
+          label="readOnly"
+          checked={isReadOnly}
+          onChange={(e) => setReadOnly(e.target.checked)}
+        />
+      </EuiFlexGroup>
       <EuiSpacer />
       <EuiFieldText
         placeholder="String & text in a tooltip"
@@ -180,6 +181,6 @@ export default () => {
         readOnly={isReadOnly}
         aria-label="Use aria labels when no actual label is in use"
       />
-    </Fragment>
+    </>
   );
 };

packages/eui/.loki/reference/chrome_desktop_Forms_EuiSuperSelect_Playground.png

@@ -5,6 +5,7 @@ import {
   EuiSpacer,
   EuiFormControlLayoutDelimited,
   EuiFormLabel,
+  EuiFieldText,
   EuiPanel,
   EuiText,
   OnRefreshProps,
@@ -58,21 +59,19 @@ export default () => {
         <EuiFormControlLayoutDelimited
           prepend={<EuiFormLabel>Dates</EuiFormLabel>}
           startControl={
-            <input
+            <EuiFieldText
+              controlOnly
               onChange={onStartInputChange}
-              type="text"
               value={start}
               placeholder="start"
-              className="euiFieldText"
             />
           }
           endControl={
-            <input
+            <EuiFieldText
+              controlOnly
               onChange={onEndInputChange}
-              type="text"
               placeholder="end"
               value={end}
-              className="euiFieldText"
             />
           }
         />

packages/eui/.loki/reference/chrome_desktop_Forms_EuiTextArea_Icon_Shape.png

@@ -947,7 +947,7 @@ describe('EuiInMemoryTable', () => {
       // should render with all three results visible
       expect(component.find('.testTable EuiTableRow').length).toBe(3);
 
-      const searchField = component.find('EuiFieldSearch input[type="search"]');
+      const searchField = component.find('input.euiFieldSearch');
 
       searchField.simulate('keyUp', {
         target: {

packages/eui/.loki/reference/chrome_desktop_Forms_EuiTextArea_Playground.png

@@ -27,7 +27,7 @@ exports[`renders EuiColorPicker 1`] = `
       <input
         aria-label="Press the down key to open a popover containing color options"
         autocomplete="off"
-        class="euiFieldText euiColorPicker__input euiFieldText--withIcon euiFormControlLayout--1icons"
+        class="euiFieldText euiColorPicker__input euiFormControlLayout--1icons emotion-euiFieldText-controlOnly"
         data-test-subj="euiColorPickerAnchor test subject string"
         type="text"
         value="#FFEEDD"
@@ -77,7 +77,7 @@ exports[`renders EuiColorPicker with a clearable input 1`] = `
       <input
         aria-label="Press the down key to open a popover containing color options"
         autocomplete="off"
-        class="euiFieldText euiColorPicker__input euiFieldText--withIcon euiFormControlLayout--2icons"
+        class="euiFieldText euiColorPicker__input euiFormControlLayout--2icons emotion-euiFieldText-controlOnly"
         data-test-subj="euiColorPickerAnchor test subject string"
         type="text"
         value="#FFEEDD"
@@ -137,7 +137,7 @@ exports[`renders EuiColorPicker with a color swatch when color is defined 1`] =
       <input
         aria-label="Press the down key to open a popover containing color options"
         autocomplete="off"
-        class="euiFieldText euiColorPicker__input euiFieldText--withIcon euiFormControlLayout--1icons"
+        class="euiFieldText euiColorPicker__input euiFormControlLayout--1icons emotion-euiFieldText-controlOnly"
         data-test-subj="euiColorPickerAnchor test subject string"
         type="text"
         value="#FFFFFF"
@@ -187,7 +187,7 @@ exports[`renders EuiColorPicker with a custom placeholder 1`] = `
       <input
         aria-label="Press the down key to open a popover containing color options"
         autocomplete="off"
-        class="euiFieldText euiColorPicker__input euiFieldText--withIcon euiFormControlLayout--1icons"
+        class="euiFieldText euiColorPicker__input euiFormControlLayout--1icons emotion-euiFieldText-controlOnly"
         data-test-subj="euiColorPickerAnchor test subject string"
         placeholder="Auto"
         type="text"
@@ -238,7 +238,7 @@ exports[`renders EuiColorPicker with an empty swatch when color is "" 1`] = `
       <input
         aria-label="Press the down key to open a popover containing color options"
         autocomplete="off"
-        class="euiFieldText euiColorPicker__input euiFieldText--withIcon euiFormControlLayout--1icons"
+        class="euiFieldText euiColorPicker__input euiFormControlLayout--1icons emotion-euiFieldText-controlOnly"
         data-test-subj="euiColorPickerAnchor test subject string"
         placeholder="Transparent"
         type="text"
@@ -289,7 +289,7 @@ exports[`renders EuiColorPicker with an empty swatch when color is null 1`] = `
       <input
         aria-label="Press the down key to open a popover containing color options"
         autocomplete="off"
-        class="euiFieldText euiColorPicker__input euiFieldText--withIcon euiFormControlLayout--1icons"
+        class="euiFieldText euiColorPicker__input euiFormControlLayout--1icons emotion-euiFieldText-controlOnly"
         data-test-subj="euiColorPickerAnchor test subject string"
         placeholder="Transparent"
         type="text"
@@ -345,7 +345,7 @@ exports[`renders a EuiColorPicker with a prepend and append 1`] = `
       <input
         aria-label="Press the down key to open a popover containing color options"
         autocomplete="off"
-        class="euiFieldText euiColorPicker__input euiColorPicker__input--inGroup euiFieldText--withIcon euiFormControlLayout--1icons"
+        class="euiFieldText euiColorPicker__input euiFormControlLayout--1icons emotion-euiFieldText-controlOnly"
         data-test-subj="euiColorPickerAnchor test subject string"
         type="text"
         value="#FFEEDD"
@@ -400,7 +400,7 @@ exports[`renders a EuiColorPicker with an alpha range selector 1`] = `
       <input
         aria-label="Press the down key to open a popover containing color options"
         autocomplete="off"
-        class="euiFieldText euiColorPicker__input euiFieldText--withIcon euiFormControlLayout--1icons"
+        class="euiFieldText euiColorPicker__input euiFormControlLayout--1icons emotion-euiFieldText-controlOnly"
         data-test-subj="euiColorPickerAnchor test subject string"
         type="text"
         value="#FFEEDD"
@@ -450,7 +450,7 @@ exports[`renders compressed EuiColorPicker 1`] = `
       <input
         aria-label="Press the down key to open a popover containing color options"
         autocomplete="off"
-        class="euiFieldText euiColorPicker__input euiFieldText--withIcon euiFormControlLayout--1icons euiFieldText--compressed"
+        class="euiFieldText euiColorPicker__input euiFormControlLayout--1icons emotion-euiFieldText-compressed-controlOnly"
         data-test-subj="euiColorPickerAnchor test subject string"
         type="text"
         value="#FFEEDD"
@@ -500,7 +500,7 @@ exports[`renders disabled EuiColorPicker 1`] = `
       <input
         aria-label="Press the down key to open a popover containing color options"
         autocomplete="off"
-        class="euiFieldText euiColorPicker__input euiFieldText--withIcon euiFormControlLayout--1icons"
+        class="euiFieldText euiColorPicker__input euiFormControlLayout--1icons emotion-euiFieldText-controlOnly"
         data-test-subj="euiColorPickerAnchor test subject string"
         disabled=""
         type="text"
@@ -538,7 +538,7 @@ exports[`renders fullWidth EuiColorPicker 1`] = `
       <input
         aria-label="Press the down key to open a popover containing color options"
         autocomplete="off"
-        class="euiFieldText euiColorPicker__input euiFieldText--withIcon euiFormControlLayout--1icons euiFieldText--fullWidth"
+        class="euiFieldText euiColorPicker__input euiFormControlLayout--1icons emotion-euiFieldText-fullWidth-controlOnly"
         data-test-subj="euiColorPickerAnchor test subject string"
         type="text"
         value="#FFEEDD"
@@ -760,7 +760,7 @@ exports[`renders readOnly EuiColorPicker 1`] = `
       <input
         aria-label="Press the down key to open a popover containing color options"
         autocomplete="off"
-        class="euiFieldText euiColorPicker__input euiFieldText--withIcon euiFormControlLayout--1icons"
+        class="euiFieldText euiColorPicker__input euiFormControlLayout--1icons emotion-euiFieldText-controlOnly"
         data-test-subj="euiColorPickerAnchor test subject string"
         readonly=""
         type="text"

packages/eui/.loki/reference/chrome_mobile_Forms_EuiFieldNumber_Controlled_Component.png

@@ -25,18 +25,10 @@
   padding-bottom: 0 !important;
 }
 
-// stylelint-disable declaration-no-important
-.euiColorPicker__input--inGroup {
-  height: $euiFormControlLayoutGroupInputHeight !important;
-  box-shadow: none !important;
-  border-radius: 0;
-
-  &.euiFieldText--compressed {
-    height: $euiFormControlLayoutGroupInputCompressedHeight !important;
-    border-radius: 0;
-  }
+.euiColorPicker__input {
+  // Manually account for custom left icon / color swatch preview
+  --euiFormControlLeftIconsCount: 1;
 }
-// stylelint-enable declaration-no-important
 
 .euiColorPicker__alphaRange {
   .euiRangeInput {

packages/eui/.loki/reference/chrome_mobile_Forms_EuiFieldNumber_Icon_Shape.png

@@ -17,7 +17,7 @@ exports[`EuiColorPalettePicker is rendered 1`] = `
       <button
         aria-haspopup="listbox"
         aria-label="aria-label"
-        class="euiSuperSelectControl euiFormControlLayout--1icons testClass1 testClass2 emotion-euiTestCss"
+        class="euiSuperSelectControl testClass1 testClass2 emotion-euiSuperSelect__control-euiTestCss"
         data-test-subj="test subject string"
         type="button"
       />
@@ -56,7 +56,7 @@ exports[`EuiColorPalettePicker is rendered with a selected custom text 1`] = `
       <button
         aria-haspopup="listbox"
         aria-label="aria-label"
-        class="euiSuperSelectControl euiFormControlLayout--1icons testClass1 testClass2 emotion-euiTestCss"
+        class="euiSuperSelectControl testClass1 testClass2 emotion-euiSuperSelect__control-euiTestCss"
         data-test-subj="test subject string"
         type="button"
       >
@@ -97,7 +97,7 @@ exports[`EuiColorPalettePicker is rendered with a selected fixed palette 1`] = `
       <button
         aria-haspopup="listbox"
         aria-label="aria-label"
-        class="euiSuperSelectControl euiFormControlLayout--1icons testClass1 testClass2 emotion-euiTestCss"
+        class="euiSuperSelectControl testClass1 testClass2 emotion-euiSuperSelect__control-euiTestCss"
         data-test-subj="test subject string"
         type="button"
       >
@@ -166,7 +166,7 @@ exports[`EuiColorPalettePicker is rendered with a selected gradient palette 1`]
       <button
         aria-haspopup="listbox"
         aria-label="aria-label"
-        class="euiSuperSelectControl euiFormControlLayout--1icons testClass1 testClass2 emotion-euiTestCss"
+        class="euiSuperSelectControl testClass1 testClass2 emotion-euiSuperSelect__control-euiTestCss"
         data-test-subj="test subject string"
         type="button"
       >
@@ -215,7 +215,7 @@ exports[`EuiColorPalettePicker is rendered with a selected gradient palette with
       <button
         aria-haspopup="listbox"
         aria-label="aria-label"
-        class="euiSuperSelectControl euiFormControlLayout--1icons testClass1 testClass2 emotion-euiTestCss"
+        class="euiSuperSelectControl testClass1 testClass2 emotion-euiSuperSelect__control-euiTestCss"
         data-test-subj="test subject string"
         type="button"
       >
@@ -264,7 +264,7 @@ exports[`EuiColorPalettePicker is rendered with the prop selectionDisplay set as
       <button
         aria-haspopup="listbox"
         aria-label="aria-label"
-        class="euiSuperSelectControl euiFormControlLayout--1icons testClass1 testClass2 emotion-euiTestCss"
+        class="euiSuperSelectControl testClass1 testClass2 emotion-euiSuperSelect__control-euiTestCss"
         data-test-subj="test subject string"
         type="button"
       >
@@ -304,7 +304,7 @@ exports[`EuiColorPalettePicker more props are propagated to each option 1`] = `
     >
       <button
         aria-haspopup="listbox"
-        class="euiSuperSelectControl euiFormControlLayout--1icons euiSuperSelect--isOpen__button"
+        class="euiSuperSelectControl emotion-euiSuperSelect__control-open"
         data-test-subj="colorPalettePicker"
         type="button"
       >

packages/eui/.loki/reference/chrome_mobile_Forms_EuiFieldNumber_Playground.png

@@ -293,13 +293,7 @@ export const EuiColorPicker: FunctionComponent<EuiColorPickerProps> = ({
     clear: isClearable,
     isInvalid,
   });
-  const inputClasses = classNames(
-    'euiColorPicker__input',
-    { 'euiColorPicker__input--inGroup': prepend || append },
-    // Manually account for input padding, since `controlOnly` disables that logic
-    'euiFieldText--withIcon',
-    numIconsClass
-  );
+  const inputClasses = classNames('euiColorPicker__input', numIconsClass);
 
   const handleOnChange = (text: string) => {
     const output = getOutput(text, showAlpha);