[Emotion] Pre-emptively fix/regression test form components with tricky className/css locations

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"

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"

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"

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"

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} />

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"

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"

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

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}

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"