[Emotion] Convert EuiCheckbox, EuiRadio, and EuiSwitch (#7969)

packages/eui/changelogs/upcoming/7969.md

@@ -0,0 +1,22 @@
+**CSS-in-JS conversions**
+
+- Converted `EuiCheckbox` to Emotion
+- Converted `EuiRadio` to Emotion
+- Converted `EuiSwitch` to Emotion
+- Removed the following Sass variables:
+  - `$euiFormCustomControlDisabledIconColor`
+  - `$euiFormCustomControlBorderColor`
+  - `$euiRadioSize`
+  - `$euiCheckBoxSize`
+  - `$euiCheckboxBorderRadius`
+  - `$euiSwitchHeight` (and compressed/mini variants)
+  - `$euiSwitchWidth` (and compressed/mini variants)
+  - `$euiSwitchThumbSize` (and compressed/mini variants)
+  - `$euiSwitchIconHeight`
+  - `$euiSwitchOffColor`
+- Removed the following Sass mixins:
+  - `euiIconBackground`
+  - `euiCustomControl`
+  - `euiCustomControlSelected`
+  - `euiCustomControlDisabled`
+  - `euiCustomControlFocused`

packages/eui/src-docs/src/views/selection_controls/checkbox.js

@@ -1,4 +1,4 @@
-import React, { useState, Fragment } from 'react';
+import React, { useState } from 'react';
 
 import { EuiCheckbox, EuiSpacer } from '../../../../src/components';
 
@@ -26,7 +26,7 @@ export default () => {
   };
 
   return (
-    <Fragment>
+    <>
       <EuiCheckbox
         id={basicCheckboxId}
         label="I am a checkbox"
@@ -59,9 +59,9 @@ export default () => {
         id={compressedCheckboxId}
         label="I am a readonly checkbox"
         checked={checked}
-        onChange={(e) => onChange(e)}
+        onChange={() => {}}
         readOnly
       />
-    </Fragment>
+    </>
   );
 };

packages/eui/src/components/basic_table/__snapshots__/basic_table.test.tsx.snap

@@ -145,19 +145,24 @@ exports[`EuiBasicTable renders (kitchen sink) with pagination, selection, sortin
             class="euiTableCellContent"
           >
             <div
-              class="euiCheckbox euiCheckbox--noLabel emotion-euiCheckbox"
+              class="euiCheckbox emotion-euiCheckbox"
             >
-              <input
-                aria-label="Select all rows"
-                class="euiCheckbox__input"
-                data-test-subj="checkboxSelectAll"
-                id="_selection_column-checkbox_generated-id"
-                title="Select all rows"
-                type="checkbox"
-              />
               <div
-                class="euiCheckbox__square"
-              />
+                class="euiCheckbox__square emotion-euiCheckbox__square-unselected"
+              >
+                <span
+                  class="emotion-euiCheckbox__icon-check"
+                  data-euiicon-type="empty"
+                />
+                <input
+                  aria-label="Select all rows"
+                  class="euiCheckbox__input emotion-euiCheckbox__input"
+                  data-test-subj="checkboxSelectAll"
+                  id="_selection_column-checkbox_generated-id"
+                  title="Select all rows"
+                  type="checkbox"
+                />
+              </div>
             </div>
           </div>
         </th>
@@ -269,19 +274,24 @@ exports[`EuiBasicTable renders (kitchen sink) with pagination, selection, sortin
             class="euiTableCellContent"
           >
             <div
-              class="euiCheckbox euiCheckbox--noLabel emotion-euiCheckbox"
+              class="euiCheckbox emotion-euiCheckbox"
             >
-              <input
-                aria-label="Select row 1"
-                class="euiCheckbox__input"
-                data-test-subj="checkboxSelectRow-1"
-                id="__table_generated-id_selection_column_1-checkbox"
-                title="Select row 1"
-                type="checkbox"
-              />
               <div
-                class="euiCheckbox__square"
-              />
+                class="euiCheckbox__square emotion-euiCheckbox__square-unselected"
+              >
+                <span
+                  class="emotion-euiCheckbox__icon-check"
+                  data-euiicon-type="empty"
+                />
+                <input
+                  aria-label="Select row 1"
+                  class="euiCheckbox__input emotion-euiCheckbox__input"
+                  data-test-subj="checkboxSelectRow-1"
+                  id="__table_generated-id_selection_column_1-checkbox"
+                  title="Select row 1"
+                  type="checkbox"
+                />
+              </div>
             </div>
           </div>
         </td>
@@ -375,19 +385,24 @@ exports[`EuiBasicTable renders (kitchen sink) with pagination, selection, sortin
             class="euiTableCellContent"
           >
             <div
-              class="euiCheckbox euiCheckbox--noLabel emotion-euiCheckbox"
+              class="euiCheckbox emotion-euiCheckbox"
             >
-              <input
-                aria-label="Select row 2"
-                class="euiCheckbox__input"
-                data-test-subj="checkboxSelectRow-2"
-                id="__table_generated-id_selection_column_2-checkbox"
-                title="Select row 2"
-                type="checkbox"
-              />
               <div
-                class="euiCheckbox__square"
-              />
+                class="euiCheckbox__square emotion-euiCheckbox__square-unselected"
+              >
+                <span
+                  class="emotion-euiCheckbox__icon-check"
+                  data-euiicon-type="empty"
+                />
+                <input
+                  aria-label="Select row 2"
+                  class="euiCheckbox__input emotion-euiCheckbox__input"
+                  data-test-subj="checkboxSelectRow-2"
+                  id="__table_generated-id_selection_column_2-checkbox"
+                  title="Select row 2"
+                  type="checkbox"
+                />
+              </div>
             </div>
           </div>
         </td>
@@ -481,19 +496,24 @@ exports[`EuiBasicTable renders (kitchen sink) with pagination, selection, sortin
             class="euiTableCellContent"
           >
             <div
-              class="euiCheckbox euiCheckbox--noLabel emotion-euiCheckbox"
+              class="euiCheckbox emotion-euiCheckbox"
             >
-              <input
-                aria-label="Select row 3"
-                class="euiCheckbox__input"
-                data-test-subj="checkboxSelectRow-3"
-                id="__table_generated-id_selection_column_3-checkbox"
-                title="Select row 3"
-                type="checkbox"
-              />
               <div
-                class="euiCheckbox__square"
-              />
+                class="euiCheckbox__square emotion-euiCheckbox__square-unselected"
+              >
+                <span
+                  class="emotion-euiCheckbox__icon-check"
+                  data-euiicon-type="empty"
+                />
+                <input
+                  aria-label="Select row 3"
+                  class="euiCheckbox__input emotion-euiCheckbox__input"
+                  data-test-subj="checkboxSelectRow-3"
+                  id="__table_generated-id_selection_column_3-checkbox"
+                  title="Select row 3"
+                  type="checkbox"
+                />
+              </div>
             </div>
           </div>
         </td>

packages/eui/src/components/basic_table/__snapshots__/in_memory_table.test.tsx.snap

@@ -7,19 +7,24 @@ exports[`EuiInMemoryTable behavior mobile header 1`] = `
   <div
     class="euiCheckbox emotion-euiCheckbox"
   >
-    <input
-      aria-label="Select all rows"
-      class="euiCheckbox__input"
-      data-test-subj="checkboxSelectAll"
-      id="_selection_column-checkbox_generated-id"
-      title="Select all rows"
-      type="checkbox"
-    />
     <div
-      class="euiCheckbox__square"
-    />
+      class="euiCheckbox__square emotion-euiCheckbox__square-unselected"
+    >
+      <span
+        class="emotion-euiCheckbox__icon-check"
+        data-euiicon-type="empty"
+      />
+      <input
+        aria-label="Select all rows"
+        class="euiCheckbox__input emotion-euiCheckbox__input"
+        data-test-subj="checkboxSelectAll"
+        id="_selection_column-checkbox_generated-id"
+        title="Select all rows"
+        type="checkbox"
+      />
+    </div>
     <label
-      class="euiCheckbox__label"
+      class="euiCheckbox__label emotion-euiCheckbox__label"
       for="_selection_column-checkbox_generated-id"
     >
       Select all rows

packages/eui/src/components/card/checkable_card/__snapshots__/checkable_card.test.tsx.snap

@@ -9,18 +9,23 @@ exports[`EuiCheckableCard is rendered 1`] = `
   >
     <div
       aria-label="aria-label"
-      class="euiRadio euiRadio--noLabel"
+      class="euiRadio emotion-euiRadio"
       data-test-subj="test subject string"
     >
-      <input
-        class="euiRadio__input"
-        id="id"
-        type="radio"
-        value=""
-      />
       <div
-        class="euiRadio__circle"
-      />
+        class="euiRadio__circle emotion-euiRadio__circle-unselected"
+      >
+        <span
+          class="emotion-euiRadio__icon"
+          data-euiicon-type="dot"
+        />
+        <input
+          class="euiRadio__input emotion-euiRadio__input"
+          id="id"
+          type="radio"
+          value=""
+        />
+      </div>
     </div>
   </div>
   <div
@@ -44,18 +49,23 @@ exports[`EuiCheckableCard renders a checkbox when specified 1`] = `
     class="euiPanel euiPanel--subdued euiPanel--paddingMedium euiSplitPanel__inner emotion-euiPanel-none-m-subdued-isClickable-euiSplitPanelInner"
   >
     <div
-      class="euiCheckbox euiCheckbox--noLabel emotion-euiCheckbox"
+      class="euiCheckbox emotion-euiCheckbox"
     >
-      <input
-        aria-label="aria-label"
-        class="euiCheckbox__input"
-        data-test-subj="test subject string"
-        id="id"
-        type="checkbox"
-      />
       <div
-        class="euiCheckbox__square"
-      />
+        class="euiCheckbox__square emotion-euiCheckbox__square-unselected"
+      >
+        <span
+          class="emotion-euiCheckbox__icon-check"
+          data-euiicon-type="empty"
+        />
+        <input
+          aria-label="aria-label"
+          class="euiCheckbox__input emotion-euiCheckbox__input"
+          data-test-subj="test subject string"
+          id="id"
+          type="checkbox"
+        />
+      </div>
     </div>
   </div>
   <div
@@ -79,17 +89,22 @@ exports[`EuiCheckableCard renders children 1`] = `
     class="euiPanel euiPanel--subdued euiPanel--paddingMedium euiSplitPanel__inner emotion-euiPanel-none-m-subdued-isClickable-euiSplitPanelInner"
   >
     <div
-      class="euiRadio euiRadio--noLabel"
+      class="euiRadio emotion-euiRadio"
     >
-      <input
-        class="euiRadio__input"
-        id="id"
-        type="radio"
-        value=""
-      />
       <div
-        class="euiRadio__circle"
-      />
+        class="euiRadio__circle emotion-euiRadio__circle-unselected"
+      >
+        <span
+          class="emotion-euiRadio__icon"
+          data-euiicon-type="dot"
+        />
+        <input
+          class="euiRadio__input emotion-euiRadio__input"
+          id="id"
+          type="radio"
+          value=""
+        />
+      </div>
     </div>
   </div>
   <div
@@ -120,18 +135,23 @@ exports[`EuiCheckableCard renders disabled 1`] = `
     class="euiPanel euiPanel--subdued euiPanel--paddingMedium euiSplitPanel__inner emotion-euiPanel-none-m-subdued-euiSplitPanelInner"
   >
     <div
-      class="euiRadio euiRadio--noLabel"
+      class="euiRadio emotion-euiRadio"
     >
-      <input
-        class="euiRadio__input"
-        disabled=""
-        id="id"
-        type="radio"
-        value=""
-      />
       <div
-        class="euiRadio__circle"
-      />
+        class="euiRadio__circle emotion-euiRadio__circle-disabled-unselected"
+      >
+        <span
+          class="emotion-euiRadio__icon"
+          data-euiicon-type="dot"
+        />
+        <input
+          class="euiRadio__input emotion-euiRadio__input"
+          disabled=""
+          id="id"
+          type="radio"
+          value=""
+        />
+      </div>
     </div>
   </div>
   <div
@@ -155,17 +175,22 @@ exports[`EuiCheckableCard renders panel props 1`] = `
     class="euiPanel euiPanel--subdued euiPanel--paddingMedium euiSplitPanel__inner emotion-euiPanel-none-m-subdued-isClickable-euiSplitPanelInner"
   >
     <div
-      class="euiRadio euiRadio--noLabel"
+      class="euiRadio emotion-euiRadio"
     >
-      <input
-        class="euiRadio__input"
-        id="id"
-        type="radio"
-        value=""
-      />
       <div
-        class="euiRadio__circle"
-      />
+        class="euiRadio__circle emotion-euiRadio__circle-unselected"
+      >
+        <span
+          class="emotion-euiRadio__icon"
+          data-euiicon-type="dot"
+        />
+        <input
+          class="euiRadio__input emotion-euiRadio__input"
+          id="id"
+          type="radio"
+          value=""
+        />
+      </div>
     </div>
   </div>
   <div