Enhance cloneElementWithCss to allow prepending cloned CSS as oppos…

…ed to always appending - this was otherwise causing a `shouldRenderWithCustomStyles` test failure in EuiDualRange
elastic · Aug 12, 2024 · 6bd72d5 · 6bd72d5
1 parent fc74c1c
commit 6bd72d5
Show file tree

Hide file tree

Showing 4 changed files with 50 additions and 11 deletions.
diff --git a/...rc/components/date_picker/super_date_picker/__snapshots__/super_date_picker.test.tsx.snap b/...rc/components/date_picker/super_date_picker/__snapshots__/super_date_picker.test.tsx.snap
@@ -806,7 +806,7 @@ exports[`EuiSuperDatePicker renders an EuiDatePickerRange 1`] = `
         class="euiFormControlLayout__childrenWrapper emotion-euiFormControlLayout__childrenWrapper-inGroup-prependOnly-delimited"
       >
         <div
-          class="euiPopover euiPopover-isOpen euiSuperDatePicker__startPopoverButton euiFormControlLayoutDelimited__input emotion-euiPopover-block-euiSuperDatePicker__rangeInput-euiFormControlLayoutDelimited__input"
+          class="euiPopover euiPopover-isOpen euiSuperDatePicker__startPopoverButton euiFormControlLayoutDelimited__input emotion-euiPopover-block-euiFormControlLayoutDelimited__input-euiSuperDatePicker__rangeInput"
         >
           <button
             class="euiDatePopoverButton euiDatePopoverButton--start euiDatePopoverButton-isSelected emotion-euiDatePopoverButton"
@@ -827,7 +827,7 @@ exports[`EuiSuperDatePicker renders an EuiDatePickerRange 1`] = `
           </span>
         </div>
         <div
-          class="euiPopover euiFormControlLayoutDelimited__input emotion-euiPopover-block-euiSuperDatePicker__rangeInput-euiFormControlLayoutDelimited__input"
+          class="euiPopover euiFormControlLayoutDelimited__input emotion-euiPopover-block-euiFormControlLayoutDelimited__input-euiSuperDatePicker__rangeInput"
         >
           <button
             class="euiDatePopoverButton euiDatePopoverButton--end emotion-euiDatePopoverButton"

diff --git a/packages/eui/src/components/form/form_control_layout/form_control_layout_delimited.tsx b/packages/eui/src/components/form/form_control_layout/form_control_layout_delimited.tsx
@@ -98,13 +98,17 @@ export const EuiFormControlLayoutDelimited: FunctionComponent<
 };
 
 const addClassesToControl = (control: ReactElement) => {
-  return cloneElementWithCss(control, {
-    css: euiFormControlLayoutDelimited__input,
-    className: classNames(
-      control.props.className,
-      'euiFormControlLayoutDelimited__input'
-    ),
-  });
+  return cloneElementWithCss(
+    control,
+    {
+      css: euiFormControlLayoutDelimited__input,
+      className: classNames(
+        control.props.className,
+        'euiFormControlLayoutDelimited__input'
+      ),
+    },
+    'before'
+  );
 };
 
 const EuiFormControlDelimiter = ({

diff --git a/packages/eui/src/services/emotion/clone_element.test.tsx b/packages/eui/src/services/emotion/clone_element.test.tsx
@@ -117,4 +117,34 @@ describe('cloneElementWithCss', () => {
     expect(container.children[1]).toHaveStyleRule('color', 'blue');
     expect(container.children[2]).not.toHaveStyleRule('color');
   });
+
+  describe('cssOrder', () => {
+    it('after', () => {
+      const { container } = render(
+        <>
+          {cloneElementWithCss(
+            <div css={{ label: 'foo' }} />,
+            { css: { label: 'bar' } },
+            'after'
+          )}
+        </>
+      );
+
+      expect(container.firstElementChild!.className).toContain('foo-bar');
+    });
+
+    it('before', () => {
+      const { container } = render(
+        <>
+          {cloneElementWithCss(
+            <div css={{ label: 'foo' }} />,
+            { css: { label: 'bar' } },
+            'before'
+          )}
+        </>
+      );
+
+      expect(container.firstElementChild!.className).toContain('bar-foo');
+    });
+  });
 });
diff --git a/packages/eui/src/services/emotion/clone_element.tsx b/packages/eui/src/services/emotion/clone_element.tsx
@@ -16,7 +16,9 @@ import { jsx } from '@emotion/react';
  */
 export const cloneElementWithCss = (
   element: any,
-  props: any
+  props: any,
+  // The order affects the className(s) that Emotion outputs
+  cssOrder: 'before' | 'after' = 'after'
 ): React.ReactElement => {
   const clonedElement =
     element.props.__EMOTION_TYPE_PLEASE_DO_NOT_USE__ || element.type; // EMOTION_TYPE handles non-React elements (native JSX/HTML nodes)
@@ -29,7 +31,10 @@ export const cloneElementWithCss = (
   };
 
   if (props.css || element.props.css) {
-    clonedProps.css = [element.props.css, props.css];
+    clonedProps.css =
+      cssOrder === 'before'
+        ? [props.css, element.props.css]
+        : [element.props.css, props.css];
   }
 
   return jsx(clonedElement, clonedProps);