[Emotion] Convert EuiCheckbox, EuiRadio, and EuiSwitch

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