feat(toggle): add experimental toggle (carbon-design-system#1267)

* feat(toggle): add experimental toggle styles * chore: toggle style updates * chore: update border radius
reinisg · Oct 16, 2018 · 1fe1a06 · 1fe1a06
1 parent f45f08d
commit 1fe1a06
Show file tree

Hide file tree

Showing 4 changed files with 191 additions and 4 deletions.
diff --git a/src/components/text-input/_text-input.scss b/src/components/text-input/_text-input.scss
@@ -169,7 +169,7 @@
     // THIS SHOULD BE MOVED TO AN INLINE SVG IN NEXT MAJOR RELEASE
     background-image: url("data:image/svg+xml;charset=UTF-8, %3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' width='16' height='16' class='ibm-icons ibm-icons--error--filled' fill='%23bebebe'%3e%3cpath d='M6.95 26.66A14 14 0 0 0 26.67 6.93zM16 2A14 14 0 0 0 5.35 25.07L25.08 5.34A13.93 13.93 0 0 0 16 2z'/%3e%3c/svg%3e");
     outline: none;
-    background-color: $disabled-bg;
+    background-color: $disabled-background-color;
     border-bottom: 1px solid transparent;
   }
 

diff --git a/src/components/toggle/_toggle.scss b/src/components/toggle/_toggle.scss
@@ -11,7 +11,7 @@
 @import '../../globals/scss/import-once';
 @import '../form/form';
 
-@include exports('toggle') {
+@mixin toggle {
   .#{$prefix}--toggle {
     @include hidden;
   }
@@ -178,6 +178,12 @@
     }
   }
 
+  // Hide labels for small toggle for default theme
+  .#{$prefix}--toggle.#{$prefix}--toggle--small + .#{$prefix}--toggle__label > .#{$prefix}--toggle__text--left,
+  .#{$prefix}--toggle.#{$prefix}--toggle--small + .#{$prefix}--toggle__label > .#{$prefix}--toggle__text--right {
+    @include hidden;
+  }
+
   // Skeleton state
   .#{$prefix}--toggle.#{$prefix}--skeleton + .#{$prefix}--toggle__label {
     cursor: default;
@@ -211,3 +217,178 @@
     }
   }
 }
+
+@mixin toggle--experimental {
+  .#{$prefix}--toggle {
+    @include hidden;
+
+    &:focus {
+      outline: none;
+    }
+  }
+
+  .#{$prefix}--toggle__label {
+    @include font-family;
+    position: relative;
+    display: flex;
+    align-items: center;
+    cursor: pointer;
+    margin: $spacing-xs 0;
+  }
+
+  .#{$prefix}--toggle__appearance {
+    position: relative;
+    width: rem(48px);
+    height: rem(24px);
+
+    // Toggle background oval
+    &:before {
+      position: absolute;
+      display: block;
+      content: '';
+      background-color: $ui-03;
+      cursor: pointer;
+      box-sizing: border-box;
+      height: rem(24px);
+      width: rem(48px);
+      border-radius: rem(15px);
+      border: 1px solid $ui-04;
+      top: 0;
+    }
+
+    // Toggle circle
+    &:after {
+      box-sizing: border-box;
+      position: absolute;
+      display: block;
+      cursor: pointer;
+      left: 3px;
+      top: 3px;
+      width: rem(18px);
+      height: rem(18px);
+      background-color: $ui-02;
+      border-radius: 50%;
+      content: '';
+      transition: $transition--base $carbon--standard-easing;
+    }
+  }
+
+  .#{$prefix}--toggle--small + .#{$prefix}--toggle__label .#{$prefix}--toggle__appearance {
+    width: rem(32px);
+    height: rem(16px);
+
+    &:before {
+      box-sizing: border-box;
+      height: rem(16px);
+      width: rem(32px);
+      border-radius: 0.9375rem;
+      top: 0;
+    }
+
+    &:after {
+      width: rem(10px);
+      height: rem(10px);
+      top: 3px;
+      left: 3px;
+    }
+  }
+
+  .#{$prefix}--toggle__text--left,
+  .#{$prefix}--toggle__text--right {
+    @include typescale('zeta');
+    position: relative;
+    margin-left: $spacing-xs;
+  }
+
+  .#{$prefix}--toggle__text--left {
+    position: absolute;
+    left: rem(48px);
+  }
+
+  .#{$prefix}--toggle--small + .#{$prefix}--toggle__label .#{$prefix}--toggle__text--left {
+    left: rem(32px);
+  }
+
+  .#{$prefix}--toggle:checked + .#{$prefix}--toggle__label .#{$prefix}--toggle__text--left,
+  .#{$prefix}--toggle:not(:checked) + .#{$prefix}--toggle__label .#{$prefix}--toggle__text--right {
+    visibility: hidden;
+  }
+
+  .#{$prefix}--toggle:checked + .#{$prefix}--toggle__label .#{$prefix}--toggle__text--right,
+  .#{$prefix}--toggle:not(:checked) + .#{$prefix}--toggle__label .#{$prefix}--toggle__text--left {
+    display: inline;
+  }
+
+  .#{$prefix}--toggle:checked + .#{$prefix}--toggle__label .#{$prefix}--toggle__appearance {
+    &:before {
+      background-color: $toggle-background-color;
+    }
+
+    &:after {
+      transform: translateX(24px);
+    }
+  }
+
+  .#{$prefix}--toggle__check {
+    @include hidden;
+  }
+
+  .#{$prefix}--toggle--small:checked + .#{$prefix}--toggle__label .#{$prefix}--toggle__appearance {
+    &:after {
+      margin-left: 0px;
+      transform: translateX(17px);
+    }
+  }
+
+  //----------------------------------------------
+  // Focus
+  // ---------------------------------------------
+  .#{$prefix}--toggle:focus + .#{$prefix}--toggle__label,
+  .#{$prefix}--toggle:active + .#{$prefix}--toggle__label {
+    .#{$prefix}--toggle__appearance:before {
+      box-shadow: 0 0 0 2px $focus;
+      border-color: $focus;
+    }
+  }
+
+  //----------------------------------------------
+  // Disabled
+  // ---------------------------------------------
+  .#{$prefix}--toggle:disabled + .#{$prefix}--toggle__label {
+    cursor: not-allowed;
+  }
+
+  .#{$prefix}--toggle:disabled + .#{$prefix}--toggle__label .#{$prefix}--toggle__appearance {
+    &:before {
+      background-color: $ibm-colors__gray--20; // TODO: Replace with role or add new color variable
+      border-color: $ibm-colors__gray--20; // TODO: Replace with role or add new color variable
+    }
+
+    &:after {
+      background-color: $disabled;
+    }
+
+    &:before,
+    &:after {
+      cursor: not-allowed;
+      transition: $transition--base $carbon--standard-easing;
+    }
+  }
+
+  .#{$prefix}--toggle:disabled + .#{$prefix}--toggle__label .#{$prefix}--toggle__text--left,
+  .#{$prefix}--toggle:disabled + .#{$prefix}--toggle__label .#{$prefix}--toggle__text--right {
+    color: $disabled;
+  }
+
+  .#{$prefix}--toggle:disabled:active + .#{$prefix}--toggle__label .#{$prefix}--toggle__appearance:before {
+    box-shadow: none;
+  }
+}
+
+@include exports('toggle') {
+  @if feature-flag-enabled('components-x') {
+    @include toggle--experimental;
+  } @else {
+    @include toggle;
+  }
+}
diff --git a/src/components/toggle/toggle--small.hbs b/src/components/toggle/toggle--small.hbs
@@ -1,21 +1,25 @@
 <div class="bx--form-item">
   <input class="bx--toggle bx--toggle--small" id="toggle4" type="checkbox" aria-label="Label Name">
   <label class="bx--toggle__label" for="toggle4">
+    <span class="bx--toggle__text--left">Off</span>
     <span class="bx--toggle__appearance">
       <svg class="bx--toggle__check" width="6px" height="5px" viewBox="0 0 6 5">
         <path d="M2.2 2.7L5 0 6 1 2.2 5 0 2.7 1 1.5z"/>
       </svg>
     </span>
+    <span class="bx--toggle__text--right">On</span>
   </label>
 </div>
 
 <div class="bx--form-item">
   <input class="bx--toggle bx--toggle--small" id="toggle5" type="checkbox" aria-label="Label Name" disabled>
   <label class="bx--toggle__label" for="toggle5"> 
+    <span class="bx--toggle__text--left">Off</span>
     <span class="bx--toggle__appearance">
       <svg class="bx--toggle__check" width="6px" height="5px" viewBox="0 0 6 5">
         <path d="M2.2 2.7L5 0 6 1 2.2 5 0 2.7 1 1.5z"/>
       </svg>
     </span>
+    <span class="bx--toggle__text--right">On</span>
   </label>
 </div>
diff --git a/src/globals/scss/_theme-tokens.scss b/src/globals/scss/_theme-tokens.scss
@@ -150,7 +150,7 @@
   $input-border: 1px solid transparent !default !global;
   $input-label-weight: 400 !default !global;
   $disabled: $ibm-colors__gray--30 !default !global;
-  $disabled-bg: $ibm-colors__gray--10 !default !global;
+  $disabled-background-color: $ibm-colors__gray--10 !default !global;
   $focus: $ibm-colors__blue--60 !default !global;
 
   // Link
@@ -212,8 +212,10 @@
   $structured-list-padding: 2rem !default !global;
   $structured-list-text-transform: none !default !global;
 
-  // Skeleton Loading
+  // Toggle
+  $toggle-background-color: $ibm-colors__green--30 !default !global;
 
+  // Skeleton Loading
   $skeleton: rgba($color__blue-51, 0.1) !default !global; //old $field-01 TODO: Define for experimental
 }