[Emotion] Convert EuiFieldText (#7770)

elastic · May 20, 2024 · 71c016a · 71c016a
1 parent a4d7638
commit 71c016a
Show file tree

Hide file tree

Showing 34 changed files with 641 additions and 363 deletions.
diff --git a/packages/eui/changelogs/upcoming/7770.md b/packages/eui/changelogs/upcoming/7770.md
@@ -0,0 +1,7 @@
+**Bug fixes**
+
+- Fixed broken focus/invalid styling on compressed `EuiDatePickerRange`s
+
+**CSS-in-JS conversions**
+
+- Converted `EuiFieldText` to Emotion
diff --git a/packages/eui/src-docs/src/views/form_controls/form_control_layout.tsx b/packages/eui/src-docs/src/views/form_controls/form_control_layout.tsx
@@ -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"
         />

diff --git a/packages/eui/src-docs/src/views/super_date_picker/super_date_picker.tsx b/packages/eui/src-docs/src/views/super_date_picker/super_date_picker.tsx
@@ -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"
             />
           }
         />

diff --git a/packages/eui/src/components/color_picker/__snapshots__/color_picker.test.tsx.snap b/packages/eui/src/components/color_picker/__snapshots__/color_picker.test.tsx.snap
@@ -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"

diff --git a/packages/eui/src/components/color_picker/_color_picker.scss b/packages/eui/src/components/color_picker/_color_picker.scss
@@ -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 {

diff --git a/packages/eui/src/components/color_picker/color_picker.tsx b/packages/eui/src/components/color_picker/color_picker.tsx
@@ -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);

diff --git a/packages/eui/src/components/datagrid/controls/__snapshots__/column_selector.test.tsx.snap b/packages/eui/src/components/datagrid/controls/__snapshots__/column_selector.test.tsx.snap
@@ -69,7 +69,7 @@ exports[`useDataGridColumnSelector columnSelector [React 16] renders a toolbar b
         >
           <input
             aria-label="Search columns"
-            class="euiFieldText euiFieldText--compressed"
+            class="euiFieldText emotion-euiFieldText-compressed"
             data-test-subj="dataGridColumnSelectorSearch"
             placeholder="Search"
             type="text"
@@ -361,7 +361,7 @@ exports[`useDataGridColumnSelector columnSelector [React 17] renders a toolbar b
         >
           <input
             aria-label="Search columns"
-            class="euiFieldText euiFieldText--compressed"
+            class="euiFieldText emotion-euiFieldText-compressed"
             data-test-subj="dataGridColumnSelectorSearch"
             placeholder="Search"
             type="text"
@@ -653,7 +653,7 @@ exports[`useDataGridColumnSelector columnSelector [React 18] renders a toolbar b
         >
           <input
             aria-label="Search columns"
-            class="euiFieldText euiFieldText--compressed"
+            class="euiFieldText emotion-euiFieldText-compressed"
             data-test-subj="dataGridColumnSelectorSearch"
             placeholder="Search"
             type="text"

diff --git a/packages/eui/src/components/date_picker/__snapshots__/date_picker.test.tsx.snap b/packages/eui/src/components/date_picker/__snapshots__/date_picker.test.tsx.snap
@@ -837,7 +837,7 @@ exports[`EuiDatePicker renders 1`] = `
         >
           <input
             aria-label="Press the down key to open a popover containing a calendar."
-            class="euiDatePicker euiFieldText euiFieldText--withIcon testClass1 testClass2 emotion-euiTestCss"
+            class="euiFieldText euiDatePicker testClass1 testClass2 emotion-euiFieldText-controlOnly-euiTestCss"
             type="text"
             value=""
           />