Revert EuiSwitch conversions (#2255)

* Revert "Convert `EuiSwitch` to TS (#2243)" This reverts commit 39dbcf6. * Revert "Aligning switch semantics with aria role (#2193)" This reverts commit 76e58de. * CL
elastic · Aug 23, 2019 · e152ece · e152ece
1 parent 8502a0b
commit e152ece
Show file tree

Hide file tree

Showing 14 changed files with 268 additions and 257 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,14 +1,20 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
-No public interface changes since `13.5.0`.
+**Note: this contains a reversion backported for targeted release**
+
+- 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)
 
+**Note: this contains component code that was reverted in the next release. Use `13.6.0` instead**
+
 - Fixed `logoCloudEnterprise`, `logoLogging`, and `logoSecurity` SVGs in `EuiIcon` to be center aligned ([#2246](https://github.com/elastic/eui/pull/2246))
 - Added locking behavior of `EuiNavDrawer` expanded state inluding the following props `isLocked`, `onIsLockedUpdate` ([#2247](https://github.com/elastic/eui/pull/2247))
 
 ## [`13.4.1`](https://github.com/elastic/eui/tree/v13.4.1)
 
+**Note: this contains component code that was later reverted. Use `13.6.0` instead**
+
 - Converted `EuiSwitch` to TypeScript ([#2243](https://github.com/elastic/eui/pull/2243))
 
 **Bug fixes**
@@ -17,6 +23,8 @@ No public interface changes since `13.5.0`.
 
 ## [`13.4.0`](https://github.com/elastic/eui/tree/v13.4.0)
 
+**Note: this contains component code that was later reverted. Use `13.6.0` instead**
+
 - Converted `EuiFacetButton` to TypeScript ([#2226](https://github.com/elastic/eui/pull/2226))
 - Added an optional `onClear` prop to the the `EuiDatePicker` component ([#2235](https://github.com/elastic/eui/pull/2235))
 - Added support for `onClick` and `href` props on `EuiListGroupItem` and converted to TypeScript ([#1933](https://github.com/elastic/eui/pull/1933))

diff --git a/src-docs/src/views/form_controls/switch.js b/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,
     });
   };
 

diff --git a/src/components/form/_variables.scss b/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%);
diff --git a/src/components/form/index.d.ts b/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';

diff --git a/src/components/form/switch/__snapshots__/switch.test.js.snap b/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>
+`;
diff --git a/src/components/form/switch/__snapshots__/switch.test.tsx.snap b/src/components/form/switch/__snapshots__/switch.test.tsx.snap
diff --git a/src/components/form/switch/_switch.scss b/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));
+      }
+    }
+  }
 }