Revert EuiSwitch conversions

CHANGELOG.md

@@ -7,6 +7,10 @@
 - Fixed `EuiSuperDatePicker` to update `asyncInterval.isStopped` on a `isPaused` prop change. ([#2250](https://github.com/elastic/eui/pull/2250))
 - Converted table, popover, buttons, pagination, outside click detector, focus trap, context menu, and panel to TypeScript ([#2212](https://github.com/elastic/eui/pull/2212))
 
+**Reverts**
+
+- Revert conversion of `EuiSwitch` to `button[role=switch]` and TypeScript ([#2255](https://github.com/elastic/eui/pull/2255))
+
 ## [`13.5.0`](https://github.com/elastic/eui/tree/v13.5.0)
 
 - Fixed `logoCloudEnterprise`, `logoLogging`, and `logoSecurity` SVGs in `EuiIcon` to be center aligned ([#2246](https://github.com/elastic/eui/pull/2246))

src-docs/src/views/form_controls/switch.js

@@ -11,9 +11,9 @@ export default class extends Component {
     };
   }
 
-  onChange = () => {
+  onChange = e => {
     this.setState({
-      checked: !this.state.checked,
+      checked: e.target.checked,
     });
   };
 

src/components/form/_variables.scss

@@ -21,5 +21,4 @@ $euiFormBorderDisabledColor: transparentize($euiColorFullShade, .92) !default;
 $euiFormCustomControlDisabledIconColor: shadeOrTint($euiColorMediumShade, 38%, 48.5%) !default; // exact 508c foreground for $euiColorLightShade
 $euiFormControlDisabledColor: $euiColorMediumShade !default;
 $euiFormControlBoxShadow: 0 1px 1px -1px transparentize($euiShadowColor, .8), 0 3px 2px -2px transparentize($euiShadowColor, .8);
-$euiFormInputGroupLabelBackground: shadeOrTint($euiFormBackgroundDisabledColor, 0, 3%);
-$euiSwitchOffColor: lightOrDarkTheme(transparentize($euiColorMediumShade, .8), transparentize($euiColorMediumShade, .3));
+$euiFormInputGroupLabelBackground: shadeOrTint($euiFormBackgroundDisabledColor, 0, 3%);

src/components/form/index.d.ts

@@ -9,6 +9,7 @@ import { CommonProps } from '../common';
 /// <reference path="./range/index.d.ts" />
 /// <reference path="./select/index.d.ts" />
 /// <reference path="./super_select/index.d.ts" />
+/// <reference path="./switch/index.d.ts" />
 /// <reference path="./text_area/index.d.ts" />
 
 import { FunctionComponent, FormHTMLAttributes, ReactNode } from 'react';

src/components/form/switch/__snapshots__/switch.test.js.snap

@@ -0,0 +1,81 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`EuiSwitch assigns automatically generated ID to label 1`] = `
+<div
+  class="euiSwitch"
+>
+  <input
+    class="euiSwitch__input"
+    id="generated-id"
+    type="checkbox"
+  />
+  <span
+    class="euiSwitch__body"
+  >
+    <span
+      class="euiSwitch__thumb"
+    />
+    <span
+      class="euiSwitch__track"
+    >
+      <svg
+        class="euiIcon euiIcon--medium euiIcon-isLoading euiSwitch__icon"
+        focusable="false"
+        height="16"
+        viewBox="0 0 16 16"
+        width="16"
+        xmlns="http://www.w3.org/2000/svg"
+      />
+      <svg
+        class="euiIcon euiIcon--medium euiIcon-isLoading euiSwitch__icon euiSwitch__icon--checked"
+        focusable="false"
+        height="16"
+        viewBox="0 0 16 16"
+        width="16"
+        xmlns="http://www.w3.org/2000/svg"
+      />
+    </span>
+  </span>
+</div>
+`;
+
+exports[`EuiSwitch is rendered 1`] = `
+<div
+  class="euiSwitch testClass1 testClass2"
+>
+  <input
+    aria-label="aria-label"
+    class="euiSwitch__input"
+    data-test-subj="test subject string"
+    id="test"
+    type="checkbox"
+  />
+  <span
+    class="euiSwitch__body"
+  >
+    <span
+      class="euiSwitch__thumb"
+    />
+    <span
+      class="euiSwitch__track"
+    >
+      <svg
+        class="euiIcon euiIcon--medium euiIcon-isLoading euiSwitch__icon"
+        focusable="false"
+        height="16"
+        viewBox="0 0 16 16"
+        width="16"
+        xmlns="http://www.w3.org/2000/svg"
+      />
+      <svg
+        class="euiIcon euiIcon--medium euiIcon-isLoading euiSwitch__icon euiSwitch__icon--checked"
+        focusable="false"
+        height="16"
+        viewBox="0 0 16 16"
+        width="16"
+        xmlns="http://www.w3.org/2000/svg"
+      />
+    </span>
+  </span>
+</div>
+`;

src/components/form/switch/_switch.scss

@@ -4,62 +4,29 @@
   min-height: $euiSwitchHeight;
 
   .euiSwitch__label {
-    cursor: pointer;
     padding-left: $euiSizeS;
     line-height: $euiSwitchHeight;
     font-size: $euiFontSizeS;
     vertical-align: middle;
   }
 
-  .euiSwitch__button {
-    line-height: 0; // ensures button takes height of switch inside
-
-    &:focus .euiSwitch__thumb {
-      @include euiCustomControlFocused;
-    }
-
-    &:disabled {
-      &:hover,
-      ~ .euiSwitch__label:hover {
-        cursor: not-allowed;
-      }
-
-      .euiSwitch__body {
-        background-color: $euiSwitchOffColor;
-      }
-
-      .euiSwitch__thumb {
-        @include euiCustomControlDisabled;
-        background-color: $euiSwitchOffColor;
-      }
-
-      .euiSwitch__icon {
-        fill: $euiFormCustomControlDisabledIconColor;
-      }
-
-      + .euiSwitch__label {
-        color: $euiFormControlDisabledColor;
-      }
-    }
-
-    &[aria-checked='false'] {
-      .euiSwitch__body {
-        background-color: $euiSwitchOffColor;
-      }
-
-      // When input is not checked, we shift around the positioning of the thumb and the icon
-      .euiSwitch__thumb { // move the thumb left
-        left: 0;
-      }
+  /**
+   * 1. The input is "hidden" but still focusable.
+   * 2. Make sure it's still hidden when [disabled].
+   */
+  .euiSwitch__input,
+  .euiSwitch__input[disabled] /* 2 */ {
+    position: absolute;
+    opacity: 0; /* 1 */
+    width: 100%;
+    height: 100%;
+    cursor: pointer;
+  }
 
-      .euiSwitch__icon { // move the icon right
-        right: -$euiSizeS;
+  .euiSwitch__input:focus + .euiSwitch__body {
 
-        &.euiSwitch__icon--checked {
-          right: auto;
-          left: -($euiSwitchWidth - ($euiSwitchThumbSize / 2));
-        }
-      }
+    .euiSwitch__thumb {
+      @include euiCustomControlFocused;
     }
   }
 
@@ -110,13 +77,64 @@
     fill: $euiColorEmptyShade;
   }
 
-  &:hover .euiSwitch__button {
-    &:not(:disabled) .euiSwitch__thumb {
-      transform: scale(1.05);
+  /**
+   * The thumb is slightly scaled when in use, unless it's disabled.
+   */
+  &:hover {
+    .euiSwitch__input:not(:disabled) ~ .euiSwitch__body {
+      .euiSwitch__thumb {
+        transform: scale(1.05);
+      }
     }
+  }
 
-    &:active .euiSwitch__thumb {
+  &:active {
+    .euiSwitch__thumb {
       transform: scale(.95);
     }
   }
+
+  .euiSwitch__input:disabled:hover {
+    cursor: not-allowed;
+  }
+
+  .euiSwitch__input:disabled ~ .euiSwitch__body,
+  .euiSwitch__input:checked:disabled ~ .euiSwitch__body {
+    background-color: lightOrDarkTheme(transparentize($euiColorMediumShade, .8), transparentize($euiColorMediumShade, .3));
+
+    .euiSwitch__thumb {
+      @include euiCustomControlDisabled;
+      background-color: lightOrDarkTheme(transparentize($euiColorMediumShade, .8), transparentize($euiColorMediumShade, .3));
+    }
+
+    .euiSwitch__icon {
+      fill: $euiFormCustomControlDisabledIconColor;
+    }
+
+    + label {
+      color: $euiFormControlDisabledColor;
+    }
+  }
+
+  .euiSwitch__input:not(:checked):not(:disabled) ~ .euiSwitch__body {
+    background-color: lightOrDarkTheme(transparentize($euiColorMediumShade, .8), transparentize($euiColorMediumShade, .3));
+  }
+
+  /**
+   * When input is not checked, we shift around the positioning of sibling/child selectors.
+   */
+  .euiSwitch__input:not(:checked) ~ .euiSwitch__body {
+    .euiSwitch__thumb {
+      left: 0;
+    }
+
+    .euiSwitch__icon {
+      right: -$euiSizeS;
+
+      &.euiSwitch__icon--checked {
+        right: auto;
+        left: -($euiSwitchWidth - ($euiSwitchThumbSize / 2));
+      }
+    }
+  }
 }

src/components/form/switch/index.d.ts

@@ -0,0 +1,15 @@
+import { CommonProps } from '../../common';
+
+import { FunctionComponent, InputHTMLAttributes, ReactNode } from 'react';
+
+declare module '@elastic/eui' {
+  /**
+   * @see './switch.js'
+   */
+  export type EuiSwitchProps = CommonProps &
+    InputHTMLAttributes<HTMLInputElement> & {
+      label?: ReactNode;
+    };
+
+  export const EuiSwitch: FunctionComponent<EuiSwitchProps>;
+}

src/components/form/switch/index.js

@@ -0,0 +1 @@
+export { EuiSwitch } from './switch';