[Emotion] Convert EuiFormControlLayoutDelimited (2/3) (#7957)

elastic · Aug 14, 2024 · bf9eb33 · bf9eb33
1 parent d4dc2f6
commit bf9eb33
Show file tree

Hide file tree

Showing 37 changed files with 547 additions and 323 deletions.
diff --git a/...es/eui/.loki/reference/chrome_desktop_Forms_EuiDualRange_Input_With_Popover.png b/...es/eui/.loki/reference/chrome_desktop_Forms_EuiDualRange_Input_With_Popover.png
diff --git a/...nce/chrome_desktop_Forms_EuiForm_EuiFormControlLayoutDelimited_Kitchen_Sink.png b/...nce/chrome_desktop_Forms_EuiForm_EuiFormControlLayoutDelimited_Kitchen_Sink.png
diff --git a/...rence/chrome_desktop_Forms_EuiForm_EuiFormControlLayoutDelimited_Playground.png b/...rence/chrome_desktop_Forms_EuiForm_EuiFormControlLayoutDelimited_Playground.png
diff --git a/.../reference/chrome_desktop_Forms_EuiForm_EuiFormControlLayout_Append_Prepend.png b/.../reference/chrome_desktop_Forms_EuiForm_EuiFormControlLayout_Append_Prepend.png
diff --git a/...ges/eui/.loki/reference/chrome_mobile_Forms_EuiDualRange_Input_With_Popover.png b/...ges/eui/.loki/reference/chrome_mobile_Forms_EuiDualRange_Input_With_Popover.png
diff --git a/...ence/chrome_mobile_Forms_EuiForm_EuiFormControlLayoutDelimited_Kitchen_Sink.png b/...ence/chrome_mobile_Forms_EuiForm_EuiFormControlLayoutDelimited_Kitchen_Sink.png
diff --git a/...erence/chrome_mobile_Forms_EuiForm_EuiFormControlLayoutDelimited_Playground.png b/...erence/chrome_mobile_Forms_EuiForm_EuiFormControlLayoutDelimited_Playground.png
diff --git a/...i/reference/chrome_mobile_Forms_EuiForm_EuiFormControlLayout_Append_Prepend.png b/...i/reference/chrome_mobile_Forms_EuiForm_EuiFormControlLayout_Append_Prepend.png
diff --git a/packages/eui/changelogs/upcoming/7957.md b/packages/eui/changelogs/upcoming/7957.md
@@ -0,0 +1,9 @@
+**Bug fixes**
+
+- Fixed a visual bug with `<EuiDualRange showInput="inputWithPopover" />` form controls
+
+**CSS-in-JS conversions**
+
+- Converted `EuiFormLayoutDelimited` to Emotion
+- Fixed `cloneElementWithCss` throwing an error when used multiple times without a `key` prop
+- Updated `cloneElementWithCss` utility to support a third argument that allows prepending vs. appending the cloned Emotion css className
diff --git a/packages/eui/src-docs/src/views/form_controls/form_control_layout_range.tsx b/packages/eui/src-docs/src/views/form_controls/form_control_layout_range.tsx
@@ -19,15 +19,15 @@ export default () => (
       fullWidth
       startControl={
         <EuiFieldNumber
+          controlOnly
           placeholder="0"
-          className="euiFieldNumber"
           aria-label="Use aria labels when no actual label is in use"
         />
       }
       endControl={
         <EuiFieldNumber
+          controlOnly
           placeholder="100"
-          className="euiFieldNumber"
           aria-label="Use aria labels when no actual label is in use"
         />
       }
@@ -36,15 +36,15 @@ export default () => (
     <EuiFormControlLayoutDelimited
       startControl={
         <EuiFieldNumber
+          controlOnly
           placeholder="0"
-          className="euiFieldNumber"
           aria-label="Use aria labels when no actual label is in use"
         />
       }
       endControl={
         <EuiFieldNumber
+          controlOnly
           placeholder="100"
-          className="euiFieldNumber"
           aria-label="Use aria labels when no actual label is in use"
         />
       }
@@ -54,15 +54,15 @@ export default () => (
       append={<EuiFormLabel>px</EuiFormLabel>}
       startControl={
         <EuiFieldNumber
+          controlOnly
           placeholder="0"
-          className="euiFieldNumber"
           aria-label="Use aria labels when no actual label is in use"
         />
       }
       endControl={
         <EuiFieldNumber
+          controlOnly
           placeholder="100"
-          className="euiFieldNumber"
           aria-label="Use aria labels when no actual label is in use"
         />
       }
@@ -73,14 +73,14 @@ export default () => (
       startControl={
         <EuiFieldNumber
           placeholder="0"
-          className="euiFieldNumber"
+          controlOnly
           aria-label="Use aria labels when no actual label is in use"
         />
       }
       endControl={
         <EuiFieldNumber
+          controlOnly
           placeholder="100"
-          className="euiFieldNumber"
           aria-label="Use aria labels when no actual label is in use"
         />
       }
@@ -91,15 +91,15 @@ export default () => (
       isLoading
       startControl={
         <EuiFieldNumber
+          controlOnly
           placeholder="0"
-          className="euiFieldNumber"
           aria-label="Use aria labels when no actual label is in use"
         />
       }
       endControl={
         <EuiFieldNumber
+          controlOnly
           placeholder="100"
-          className="euiFieldNumber"
           aria-label="Use aria labels when no actual label is in use"
         />
       }
@@ -109,15 +109,15 @@ export default () => (
       isLoading
       startControl={
         <EuiFieldNumber
+          controlOnly
           placeholder="0"
-          className="euiFieldNumber"
           aria-label="Use aria labels when no actual label is in use"
         />
       }
       endControl={
         <EuiFieldNumber
+          controlOnly
           placeholder="100"
-          className="euiFieldNumber"
           aria-label="Use aria labels when no actual label is in use"
         />
       }
@@ -127,15 +127,15 @@ export default () => (
       compressed
       startControl={
         <EuiFieldNumber
+          controlOnly
           placeholder="0"
-          className="euiFieldNumber"
           aria-label="Use aria labels when no actual label is in use"
         />
       }
       endControl={
         <EuiFieldNumber
+          controlOnly
           placeholder="100"
-          className="euiFieldNumber"
           aria-label="Use aria labels when no actual label is in use"
         />
       }
@@ -145,16 +145,16 @@ export default () => (
       prepend={<EuiFormLabel>Add</EuiFormLabel>}
       startControl={
         <EuiFieldNumber
+          controlOnly
           placeholder="0"
-          className="euiFieldNumber"
           aria-label="Use aria labels when no actual label is in use"
         />
       }
       delimiter="+"
       endControl={
         <EuiFieldNumber
+          controlOnly
           placeholder="100"
-          className="euiFieldNumber"
           aria-label="Use aria labels when no actual label is in use"
         />
       }
@@ -164,16 +164,16 @@ export default () => (
       prepend={<EuiFormLabel>Merge</EuiFormLabel>}
       startControl={
         <EuiFieldNumber
+          controlOnly
           placeholder="0"
-          className="euiFieldNumber"
           aria-label="Use aria labels when no actual label is in use"
         />
       }
       delimiter={<EuiIcon type="merge" />}
       endControl={
         <EuiFieldNumber
+          controlOnly
           placeholder="100"
-          className="euiFieldNumber"
           aria-label="Use aria labels when no actual label is in use"
         />
       }
@@ -184,16 +184,16 @@ export default () => (
       prepend={<EuiFormLabel>Read only</EuiFormLabel>}
       startControl={
         <EuiFieldNumber
+          controlOnly
           placeholder="0"
-          className="euiFieldNumber"
           readOnly
           aria-label="Use aria labels when no actual label is in use"
         />
       }
       endControl={
         <EuiFieldNumber
+          controlOnly
           placeholder="100"
-          className="euiFieldNumber"
           readOnly
           aria-label="Use aria labels when no actual label is in use"
         />
@@ -205,16 +205,16 @@ export default () => (
       prepend={<EuiFormLabel>Disabled</EuiFormLabel>}
       startControl={
         <EuiFieldNumber
+          controlOnly
           placeholder="0"
-          className="euiFieldNumber"
           disabled
           aria-label="Use aria labels when no actual label is in use"
         />
       }
       endControl={
         <EuiFieldNumber
+          controlOnly
           placeholder="100"
-          className="euiFieldNumber"
           disabled
           aria-label="Use aria labels when no actual label is in use"
         />

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
@@ -5,10 +5,10 @@ exports[`EuiDatePicker localization accepts the locale prop 1`] = `
   class="euiDatePicker testClass1 testClass2 emotion-euiDatePicker-inline-shadow-euiTestCss"
 >
   <div
-    class="euiFormControlLayout euiFormControlLayoutDelimited emotion-euiFormControlLayout"
+    class="euiFormControlLayout emotion-euiFormControlLayout-group"
   >
     <div
-      class="euiFormControlLayout__childrenWrapper emotion-euiFormControlLayout__childrenWrapper"
+      class="euiFormControlLayout__childrenWrapper emotion-euiFormControlLayout__childrenWrapper-inGroup-prependOnly-appendOnly"
     >
       <div
         class="react-datepicker emotion-euiReactDatePicker"
@@ -484,10 +484,10 @@ exports[`EuiDatePicker localization inherits locale from context 1`] = `
   class="euiDatePicker testClass1 testClass2 emotion-euiDatePicker-inline-shadow-euiTestCss"
 >
   <div
-    class="euiFormControlLayout euiFormControlLayoutDelimited emotion-euiFormControlLayout"
+    class="euiFormControlLayout emotion-euiFormControlLayout-group"
   >
     <div
-      class="euiFormControlLayout__childrenWrapper emotion-euiFormControlLayout__childrenWrapper"
+      class="euiFormControlLayout__childrenWrapper emotion-euiFormControlLayout__childrenWrapper-inGroup-prependOnly-appendOnly"
     >
       <div
         class="react-datepicker emotion-euiReactDatePicker"