From 1a73735e7f37f48910e2f6e43225b07f55922133 Mon Sep 17 00:00:00 2001
From: Constance Chen <constance.chen.3@gmail.com>
Date: Tue, 20 Sep 2022 13:52:52 -0700
Subject: [PATCH 1/4] Update EuiCheckbox ahead of time to accept custom `css`

This adds an unused Emotion className, but I wanted to ensure

1. The css merging approach is in place and not forgotten when converted to EUI (since ...rest) is not passed to the className wrapper
2. the test is in place and not forgetten when it's converted to Emotion
---
 .../checkbox/__snapshots__/checkbox.test.tsx.snap    | 12 ++++++------
 src/components/form/checkbox/checkbox.test.tsx       | 10 ++++++++++
 src/components/form/checkbox/checkbox.tsx            |  7 ++++++-
 3 files changed, 22 insertions(+), 7 deletions(-)

diff --git a/src/components/form/checkbox/__snapshots__/checkbox.test.tsx.snap b/src/components/form/checkbox/__snapshots__/checkbox.test.tsx.snap
index 23677fab670..7fdb5b8be70 100644
--- a/src/components/form/checkbox/__snapshots__/checkbox.test.tsx.snap
+++ b/src/components/form/checkbox/__snapshots__/checkbox.test.tsx.snap
@@ -2,7 +2,7 @@
 
 exports[`EuiCheckbox is rendered 1`] = `
 <div
-  class="euiCheckbox euiCheckbox--noLabel testClass1 testClass2"
+  class="euiCheckbox euiCheckbox--noLabel testClass1 testClass2 emotion-euiCheckbox"
 >
   <input
     aria-label="aria-label"
@@ -19,7 +19,7 @@ exports[`EuiCheckbox is rendered 1`] = `
 
 exports[`EuiCheckbox props check is rendered 1`] = `
 <div
-  class="euiCheckbox euiCheckbox--noLabel"
+  class="euiCheckbox euiCheckbox--noLabel emotion-euiCheckbox"
 >
   <input
     checked=""
@@ -35,7 +35,7 @@ exports[`EuiCheckbox props check is rendered 1`] = `
 
 exports[`EuiCheckbox props disabled disabled is rendered 1`] = `
 <div
-  class="euiCheckbox euiCheckbox--noLabel"
+  class="euiCheckbox euiCheckbox--noLabel emotion-euiCheckbox"
 >
   <input
     class="euiCheckbox__input"
@@ -51,7 +51,7 @@ exports[`EuiCheckbox props disabled disabled is rendered 1`] = `
 
 exports[`EuiCheckbox props label is rendered 1`] = `
 <div
-  class="euiCheckbox"
+  class="euiCheckbox emotion-euiCheckbox"
 >
   <input
     class="euiCheckbox__input"
@@ -74,7 +74,7 @@ exports[`EuiCheckbox props label is rendered 1`] = `
 
 exports[`EuiCheckbox props labelProps is rendered 1`] = `
 <div
-  class="euiCheckbox"
+  class="euiCheckbox emotion-euiCheckbox"
 >
   <input
     class="euiCheckbox__input"
@@ -97,7 +97,7 @@ exports[`EuiCheckbox props labelProps is rendered 1`] = `
 
 exports[`EuiCheckbox props type inList is rendered 1`] = `
 <div
-  class="euiCheckbox euiCheckbox--inList euiCheckbox--noLabel"
+  class="euiCheckbox euiCheckbox--inList euiCheckbox--noLabel emotion-euiCheckbox"
 >
   <input
     class="euiCheckbox__input"
diff --git a/src/components/form/checkbox/checkbox.test.tsx b/src/components/form/checkbox/checkbox.test.tsx
index fd02f731ed8..22ca34f5db5 100644
--- a/src/components/form/checkbox/checkbox.test.tsx
+++ b/src/components/form/checkbox/checkbox.test.tsx
@@ -13,6 +13,7 @@ import {
   startThrowingReactWarnings,
   stopThrowingReactWarnings,
 } from '../../../test';
+import { shouldRenderCustomStyles } from '../../../test/internal';
 
 import { EuiCheckbox, TYPES } from './checkbox';
 
@@ -25,6 +26,15 @@ const checkboxRequiredProps = {
 };
 
 describe('EuiCheckbox', () => {
+  shouldRenderCustomStyles(
+    <EuiCheckbox {...checkboxRequiredProps} />,
+    { skipStyles: true } // styles get applied to the nested input, not to the className wrapper
+  );
+  shouldRenderCustomStyles(
+    <EuiCheckbox {...checkboxRequiredProps} label="test" />,
+    { childProps: ['labelProps'], skipParentTest: true }
+  );
+
   test('is rendered', () => {
     const component = render(
       <EuiCheckbox id="id" onChange={() => {}} {...requiredProps} />
diff --git a/src/components/form/checkbox/checkbox.tsx b/src/components/form/checkbox/checkbox.tsx
index 8ef768b4895..b678e749a0d 100644
--- a/src/components/form/checkbox/checkbox.tsx
+++ b/src/components/form/checkbox/checkbox.tsx
@@ -13,6 +13,7 @@ import React, {
   InputHTMLAttributes,
   LabelHTMLAttributes,
 } from 'react';
+import { css } from '@emotion/react';
 import classNames from 'classnames';
 
 import { keysOf, CommonProps } from '../../common';
@@ -67,6 +68,7 @@ export class EuiCheckbox extends Component<EuiCheckboxProps> {
   render() {
     const {
       className,
+      css: customCss,
       id,
       checked,
       label,
@@ -103,8 +105,11 @@ export class EuiCheckbox extends Component<EuiCheckboxProps> {
       );
     }
 
+    const styles = { euiCheckbox: css`` }; // TODO: Emotion conversion
+    const cssStyles = [styles.euiCheckbox, customCss];
+
     return (
-      <div className={classes}>
+      <div css={cssStyles} className={classes}>
         <input
           className="euiCheckbox__input"
           type="checkbox"

From 072c860d8e321b2048d1801eda734ae2bfcc0979 Mon Sep 17 00:00:00 2001
From: Constance Chen <constance.chen.3@gmail.com>
Date: Tue, 20 Sep 2022 13:53:28 -0700
Subject: [PATCH 2/4] Update downstream checkbox snapshots

---
 .../__snapshots__/basic_table.test.tsx.snap            | 10 +++++-----
 .../__snapshots__/checkable_card.test.tsx.snap         |  2 +-
 .../__snapshots__/key_pad_menu_item.test.tsx.snap      |  2 +-
 3 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/components/basic_table/__snapshots__/basic_table.test.tsx.snap b/src/components/basic_table/__snapshots__/basic_table.test.tsx.snap
index 60967358d11..8256fdeda7a 100644
--- a/src/components/basic_table/__snapshots__/basic_table.test.tsx.snap
+++ b/src/components/basic_table/__snapshots__/basic_table.test.tsx.snap
@@ -1418,7 +1418,7 @@ exports[`EuiBasicTable with initial selection 1`] = `
           class="euiFlexItem euiFlexItem--flexGrowZero"
         >
           <div
-            class="euiCheckbox"
+            class="euiCheckbox emotion-euiCheckbox"
           >
             <input
               aria-label="Select all rows"
@@ -1460,7 +1460,7 @@ exports[`EuiBasicTable with initial selection 1`] = `
               class="euiTableCellContent"
             >
               <div
-                class="euiCheckbox euiCheckbox--inList euiCheckbox--noLabel"
+                class="euiCheckbox euiCheckbox--inList euiCheckbox--noLabel emotion-euiCheckbox"
               >
                 <input
                   aria-label="Select all rows"
@@ -1510,7 +1510,7 @@ exports[`EuiBasicTable with initial selection 1`] = `
               class="euiTableCellContent"
             >
               <div
-                class="euiCheckbox euiCheckbox--inList euiCheckbox--noLabel"
+                class="euiCheckbox euiCheckbox--inList euiCheckbox--noLabel emotion-euiCheckbox"
               >
                 <input
                   aria-label="Select this row"
@@ -1555,7 +1555,7 @@ exports[`EuiBasicTable with initial selection 1`] = `
               class="euiTableCellContent"
             >
               <div
-                class="euiCheckbox euiCheckbox--inList euiCheckbox--noLabel"
+                class="euiCheckbox euiCheckbox--inList euiCheckbox--noLabel emotion-euiCheckbox"
               >
                 <input
                   aria-label="Select this row"
@@ -1600,7 +1600,7 @@ exports[`EuiBasicTable with initial selection 1`] = `
               class="euiTableCellContent"
             >
               <div
-                class="euiCheckbox euiCheckbox--inList euiCheckbox--noLabel"
+                class="euiCheckbox euiCheckbox--inList euiCheckbox--noLabel emotion-euiCheckbox"
               >
                 <input
                   aria-label="Select this row"
diff --git a/src/components/card/checkable_card/__snapshots__/checkable_card.test.tsx.snap b/src/components/card/checkable_card/__snapshots__/checkable_card.test.tsx.snap
index 5a1b635e74f..380025be112 100644
--- a/src/components/card/checkable_card/__snapshots__/checkable_card.test.tsx.snap
+++ b/src/components/card/checkable_card/__snapshots__/checkable_card.test.tsx.snap
@@ -43,7 +43,7 @@ exports[`EuiCheckableCard renders a checkbox when specified 1`] = `
     class="euiPanel euiPanel--subdued euiPanel--paddingMedium euiSplitPanel__inner emotion-euiPanel-none-m-subdued-isClickable"
   >
     <div
-      class="euiCheckbox euiCheckbox--noLabel"
+      class="euiCheckbox euiCheckbox--noLabel emotion-euiCheckbox"
     >
       <input
         aria-label="aria-label"
diff --git a/src/components/key_pad_menu/__snapshots__/key_pad_menu_item.test.tsx.snap b/src/components/key_pad_menu/__snapshots__/key_pad_menu_item.test.tsx.snap
index 4409b8dc5d7..ec663cd9cf6 100644
--- a/src/components/key_pad_menu/__snapshots__/key_pad_menu_item.test.tsx.snap
+++ b/src/components/key_pad_menu/__snapshots__/key_pad_menu_item.test.tsx.snap
@@ -9,7 +9,7 @@ exports[`EuiKeyPadMenuItem checkable renders as checkbox 1`] = `
     class="euiKeyPadMenuItem__inner"
   >
     <div
-      class="euiCheckbox euiCheckbox--noLabel euiKeyPadMenuItem__checkableInput"
+      class="euiCheckbox euiCheckbox--noLabel euiKeyPadMenuItem__checkableInput emotion-euiCheckbox"
     >
       <input
         class="euiCheckbox__input"

From 3197c615bbf12c291582ce12b3c93e075c84fe24 Mon Sep 17 00:00:00 2001
From: Constance Chen <constance.chen.3@gmail.com>
Date: Tue, 20 Sep 2022 13:55:32 -0700
Subject: [PATCH 3/4] Update EuiSwitch ahead of time to accept custom `css`

See previous commit message for EuiCheckbox
---
 .../controls/__snapshots__/column_selector.test.tsx.snap | 4 ++--
 .../form/switch/__snapshots__/switch.test.tsx.snap       | 6 +++---
 src/components/form/switch/switch.test.tsx               | 9 +++++++++
 src/components/form/switch/switch.tsx                    | 7 ++++++-
 4 files changed, 20 insertions(+), 6 deletions(-)

diff --git a/src/components/datagrid/controls/__snapshots__/column_selector.test.tsx.snap b/src/components/datagrid/controls/__snapshots__/column_selector.test.tsx.snap
index f37f6eddd43..118b0dab81f 100644
--- a/src/components/datagrid/controls/__snapshots__/column_selector.test.tsx.snap
+++ b/src/components/datagrid/controls/__snapshots__/column_selector.test.tsx.snap
@@ -109,7 +109,7 @@ exports[`useDataGridColumnSelector columnSelector renders a toolbar button/popov
                   class="euiFlexItem"
                 >
                   <div
-                    class="euiSwitch euiSwitch--compressed euiSwitch--mini"
+                    class="euiSwitch euiSwitch--compressed euiSwitch--mini emotion-euiSwitch"
                   >
                     <button
                       aria-checked="true"
@@ -174,7 +174,7 @@ exports[`useDataGridColumnSelector columnSelector renders a toolbar button/popov
                   class="euiFlexItem"
                 >
                   <div
-                    class="euiSwitch euiSwitch--compressed euiSwitch--mini"
+                    class="euiSwitch euiSwitch--compressed euiSwitch--mini emotion-euiSwitch"
                   >
                     <button
                       aria-checked="true"
diff --git a/src/components/form/switch/__snapshots__/switch.test.tsx.snap b/src/components/form/switch/__snapshots__/switch.test.tsx.snap
index a2b9d20b2f8..c88893700b5 100644
--- a/src/components/form/switch/__snapshots__/switch.test.tsx.snap
+++ b/src/components/form/switch/__snapshots__/switch.test.tsx.snap
@@ -2,7 +2,7 @@
 
 exports[`EuiSwitch assigns automatically generated ID to label 1`] = `
 <div
-  class="euiSwitch"
+  class="euiSwitch emotion-euiSwitch"
 >
   <button
     aria-checked="false"
@@ -43,7 +43,7 @@ exports[`EuiSwitch assigns automatically generated ID to label 1`] = `
 
 exports[`EuiSwitch is rendered 1`] = `
 <div
-  class="euiSwitch testClass1 testClass2"
+  class="euiSwitch testClass1 testClass2 emotion-euiSwitch"
 >
   <button
     aria-checked="false"
@@ -86,7 +86,7 @@ exports[`EuiSwitch is rendered 1`] = `
 
 exports[`EuiSwitch labelProps is rendered 1`] = `
 <div
-  class="euiSwitch"
+  class="euiSwitch emotion-euiSwitch"
 >
   <button
     aria-checked="false"
diff --git a/src/components/form/switch/switch.test.tsx b/src/components/form/switch/switch.test.tsx
index 7504b981043..bc37104a38d 100644
--- a/src/components/form/switch/switch.test.tsx
+++ b/src/components/form/switch/switch.test.tsx
@@ -9,6 +9,7 @@
 import React from 'react';
 import { render } from 'enzyme';
 import { requiredProps } from '../../../test/required_props';
+import { shouldRenderCustomStyles } from '../../../test/internal';
 
 import { EuiSwitch } from './switch';
 
@@ -19,6 +20,14 @@ const props = {
 };
 
 describe('EuiSwitch', () => {
+  shouldRenderCustomStyles(<EuiSwitch {...props} />, {
+    skipStyles: true, // styles are applied to the nested button instead of the className wrapper
+  });
+  shouldRenderCustomStyles(<EuiSwitch {...props} />, {
+    childProps: ['labelProps'],
+    skipParentTest: true,
+  });
+
   test('is rendered', () => {
     const component = render(
       <EuiSwitch id="test" {...props} {...requiredProps} />
diff --git a/src/components/form/switch/switch.tsx b/src/components/form/switch/switch.tsx
index 71fa2a0f056..063993bccf3 100644
--- a/src/components/form/switch/switch.tsx
+++ b/src/components/form/switch/switch.tsx
@@ -13,6 +13,7 @@ import React, {
   ReactNode,
   useCallback,
 } from 'react';
+import { css } from '@emotion/react';
 import classNames from 'classnames';
 
 import { CommonProps } from '../../common';
@@ -59,6 +60,7 @@ export const EuiSwitch: FunctionComponent<EuiSwitchProps> = ({
   compressed,
   onChange,
   className,
+  css: customCss,
   showLabel = true,
   type = 'button',
   labelProps,
@@ -94,8 +96,11 @@ export const EuiSwitch: FunctionComponent<EuiSwitchProps> = ({
     );
   }
 
+  const styles = { euiSwitch: css`` }; // TODO: Emotion conversion
+  const cssStyles = [styles.euiSwitch, customCss];
+
   return (
-    <div className={classes}>
+    <div css={cssStyles} className={classes}>
       <button
         id={switchId}
         aria-checked={checked || false}

From be53f60da3603ff5da13213fc8e135e4e9ae3423 Mon Sep 17 00:00:00 2001
From: Constance Chen <constance.chen.3@gmail.com>
Date: Tue, 20 Sep 2022 13:56:00 -0700
Subject: [PATCH 4/4] Update EuiDualRange ahead of time to accept custom `css`

see previous EuiCheckbox commit message for rationale
---
 .../__snapshots__/dual_range.test.tsx.snap    | 28 +++++++++----------
 src/components/form/range/dual_range.test.tsx | 10 +++++++
 src/components/form/range/dual_range.tsx      |  7 +++++
 3 files changed, 31 insertions(+), 14 deletions(-)

diff --git a/src/components/form/range/__snapshots__/dual_range.test.tsx.snap b/src/components/form/range/__snapshots__/dual_range.test.tsx.snap
index 2589c2a13ed..62be3a9f356 100644
--- a/src/components/form/range/__snapshots__/dual_range.test.tsx.snap
+++ b/src/components/form/range/__snapshots__/dual_range.test.tsx.snap
@@ -2,7 +2,7 @@
 
 exports[`EuiDualRange allows value prop to accept empty strings 1`] = `
 <div
-  class="euiRangeWrapper euiDualRange"
+  class="euiRangeWrapper euiDualRange emotion-euiDualRange"
 >
   <div
     aria-hidden="false"
@@ -24,7 +24,7 @@ exports[`EuiDualRange allows value prop to accept empty strings 1`] = `
 
 exports[`EuiDualRange allows value prop to accept numbers 1`] = `
 <div
-  class="euiRangeWrapper euiDualRange"
+  class="euiRangeWrapper euiDualRange emotion-euiDualRange"
 >
   <div
     aria-hidden="false"
@@ -54,7 +54,7 @@ exports[`EuiDualRange allows value prop to accept numbers 1`] = `
 
 exports[`EuiDualRange input props can be applied to min and max inputs 1`] = `
 <div
-  class="euiRangeWrapper euiDualRange"
+  class="euiRangeWrapper euiDualRange emotion-euiDualRange"
 >
   <div
     class="euiFormControlLayout"
@@ -129,7 +129,7 @@ exports[`EuiDualRange input props can be applied to min and max inputs 1`] = `
 
 exports[`EuiDualRange is rendered 1`] = `
 <div
-  class="euiRangeWrapper euiDualRange testClass1 testClass2"
+  class="euiRangeWrapper euiDualRange testClass1 testClass2 emotion-euiDualRange"
 >
   <div
     aria-hidden="false"
@@ -162,7 +162,7 @@ exports[`EuiDualRange is rendered 1`] = `
 
 exports[`EuiDualRange props compressed should render 1`] = `
 <div
-  class="euiRangeWrapper euiRangeWrapper--compressed euiDualRange"
+  class="euiRangeWrapper euiRangeWrapper--compressed euiDualRange emotion-euiDualRange"
 >
   <div
     aria-hidden="false"
@@ -192,7 +192,7 @@ exports[`EuiDualRange props compressed should render 1`] = `
 
 exports[`EuiDualRange props custom ticks should render 1`] = `
 <div
-  class="euiRangeWrapper euiDualRange"
+  class="euiRangeWrapper euiDualRange emotion-euiDualRange"
 >
   <div
     aria-hidden="false"
@@ -251,7 +251,7 @@ exports[`EuiDualRange props custom ticks should render 1`] = `
 
 exports[`EuiDualRange props disabled should render 1`] = `
 <div
-  class="euiRangeWrapper euiDualRange"
+  class="euiRangeWrapper euiDualRange emotion-euiDualRange"
 >
   <div
     aria-hidden="false"
@@ -282,7 +282,7 @@ exports[`EuiDualRange props disabled should render 1`] = `
 
 exports[`EuiDualRange props fullWidth should render 1`] = `
 <div
-  class="euiRangeWrapper euiRangeWrapper--fullWidth euiDualRange"
+  class="euiRangeWrapper euiRangeWrapper--fullWidth euiDualRange emotion-euiDualRange"
 >
   <div
     aria-hidden="false"
@@ -312,7 +312,7 @@ exports[`EuiDualRange props fullWidth should render 1`] = `
 
 exports[`EuiDualRange props inputs should render 1`] = `
 <div
-  class="euiRangeWrapper euiDualRange testClass1 testClass2"
+  class="euiRangeWrapper euiDualRange testClass1 testClass2 emotion-euiDualRange"
 >
   <div
     class="euiFormControlLayout"
@@ -389,7 +389,7 @@ exports[`EuiDualRange props inputs should render 1`] = `
 
 exports[`EuiDualRange props isDraggable should render 1`] = `
 <div
-  class="euiRangeWrapper euiDualRange"
+  class="euiRangeWrapper euiDualRange emotion-euiDualRange"
 >
   <div
     aria-hidden="false"
@@ -419,7 +419,7 @@ exports[`EuiDualRange props isDraggable should render 1`] = `
 
 exports[`EuiDualRange props labels should render 1`] = `
 <div
-  class="euiRangeWrapper euiDualRange"
+  class="euiRangeWrapper euiDualRange emotion-euiDualRange"
 >
   <label
     class="euiRangeLabel euiRangeLabel--min"
@@ -459,7 +459,7 @@ exports[`EuiDualRange props labels should render 1`] = `
 
 exports[`EuiDualRange props levels should render 1`] = `
 <div
-  class="euiRangeWrapper euiDualRange"
+  class="euiRangeWrapper euiDualRange emotion-euiDualRange"
 >
   <div
     aria-hidden="false"
@@ -556,7 +556,7 @@ exports[`EuiDualRange props loading should display when showInput="inputWithPopo
 
 exports[`EuiDualRange props range should render 1`] = `
 <div
-  class="euiRangeWrapper euiDualRange"
+  class="euiRangeWrapper euiDualRange emotion-euiDualRange"
 >
   <div
     aria-hidden="false"
@@ -632,7 +632,7 @@ exports[`EuiDualRange props slider should display in popover 1`] = `
 
 exports[`EuiDualRange props ticks should render 1`] = `
 <div
-  class="euiRangeWrapper euiDualRange"
+  class="euiRangeWrapper euiDualRange emotion-euiDualRange"
 >
   <div
     aria-hidden="false"
diff --git a/src/components/form/range/dual_range.test.tsx b/src/components/form/range/dual_range.test.tsx
index 2c2b6a1d40b..44f365b18f3 100644
--- a/src/components/form/range/dual_range.test.tsx
+++ b/src/components/form/range/dual_range.test.tsx
@@ -9,6 +9,7 @@
 import React from 'react';
 import { render } from 'enzyme';
 import { requiredProps } from '../../../test/required_props';
+import { shouldRenderCustomStyles } from '../../../test/internal';
 
 import { EuiDualRange } from './dual_range';
 
@@ -17,6 +18,15 @@ const props = {
 };
 
 describe('EuiDualRange', () => {
+  shouldRenderCustomStyles(
+    <EuiDualRange {...props} value={['1', '8']} />,
+    { skipStyles: true } // styles get applied to the underlying slider instead of the className wrapper
+  );
+  shouldRenderCustomStyles(
+    <EuiDualRange {...props} value={['1', '8']} showInput />,
+    { childProps: ['minInputProps', 'maxInputProps'], skipParentTest: true }
+  );
+
   test('is rendered', () => {
     const component = render(
       <EuiDualRange
diff --git a/src/components/form/range/dual_range.tsx b/src/components/form/range/dual_range.tsx
index 66b0b5ed001..93b7a6fac7f 100644
--- a/src/components/form/range/dual_range.tsx
+++ b/src/components/form/range/dual_range.tsx
@@ -7,6 +7,7 @@
  */
 
 import React, { Component } from 'react';
+import { css } from '@emotion/react';
 import classNames from 'classnames';
 
 import { keys } from '../../../services';
@@ -501,6 +502,7 @@ export class EuiDualRange extends Component<EuiDualRangeProps> {
   render() {
     const {
       className,
+      css: customCss,
       compressed,
       disabled,
       fullWidth,
@@ -613,8 +615,13 @@ export class EuiDualRange extends Component<EuiDualRangeProps> {
           this.state.rangeWidth
         )
       : { left: '0' };
+
+    const styles = { euiDualRange: css`` }; // TODO: Emotion conversion
+    const cssStyles = [styles.euiDualRange, customCss];
+
     const theRange = (
       <EuiRangeWrapper
+        css={cssStyles}
         className={classes}
         fullWidth={fullWidth}
         compressed={compressed}