fix(ToggleSkeleton): update styles to match design specs

packages/components/src/components/toggle/_toggle.scss

@@ -448,7 +448,7 @@
       }
 
       .#{$prefix}--toggle-input__label & {
-        margin-top: $carbon--spacing-05;
+        margin-top: $carbon--spacing-03;
       }
     }
 
@@ -512,103 +512,128 @@
       cursor: not-allowed;
     }
 
-    .#{$prefix}--toggle-input:disabled
+    //----------------------------------------------
+    // Skeleton
+    // ---------------------------------------------
+    //md toggle input
+    .#{$prefix}--toggle.#{$prefix}--skeleton
       + .#{$prefix}--toggle-input__label
-      > .#{$prefix}--toggle__switch {
-      cursor: not-allowed;
+      .#{$prefix}--toggle__switch {
+      @include skeleton;
 
-      &::before {
-        background-color: $button-disabled;
-      }
+      width: 3rem;
+    }
 
-      &::after {
-        background-color: $icon-on-color-disabled;
-      }
+    //md skeleton label text
+    .#{$prefix}--toggle.#{$prefix}--skeleton
+      + .#{$prefix}--toggle-input__label
+      > div {
+      overflow: hidden;
+      width: 1.5rem;
+      height: 0.5rem;
+      //hides text
+      font-size: 0%;
+      line-height: 0;
 
-      &::before,
-      &::after {
-        cursor: not-allowed;
-        transition: $duration--fast-01 motion(exit, productive);
-      }
+      @include skeleton;
     }
 
-    .#{$prefix}--toggle-input:disabled:active
+    //small toggle input
+    .#{$prefix}--toggle-input--small.#{$prefix}--skeleton
       + .#{$prefix}--toggle-input__label
-      > .#{$prefix}--toggle__switch::before {
-      box-shadow: none;
+      .#{$prefix}--toggle__switch {
+      @include skeleton;
+
+      width: 2rem;
     }
 
-    //----------------------------------------------
-    // Small toggle
-    // ---------------------------------------------
-    .#{$prefix}--toggle-input--small + .#{$prefix}--toggle-input__label {
-      > .#{$prefix}--toggle__switch {
-        width: carbon--rem(32px);
-        height: carbon--rem(16px);
+    //sm skeleton label text
+    .#{$prefix}--toggle-input--small.#{$prefix}--skeleton
+      + .#{$prefix}--toggle-input__label
+      > div {
+      overflow: hidden;
+      width: 1rem;
+      height: 0.5rem;
+      //hides text
+      font-size: 0%;
+      line-height: 0;
 
-        &::before {
-          width: carbon--rem(32px);
-          height: carbon--rem(16px);
-          border-radius: 0.9375rem;
-        }
+      @include skeleton;
+    }
 
-        &::after {
-          width: carbon--rem(10px);
-          height: carbon--rem(10px);
-        }
-      }
+    // on/off text skeleton
+    .#{$prefix}--toggle.#{$prefix}--skeleton
+      + .#{$prefix}--toggle-input__label
+      .#{$prefix}--toggle__switch
+      .#{$prefix}--toggle__text--left {
+      @include skeleton;
 
-      .#{$prefix}--toggle__text--off,
-      .#{$prefix}--toggle__text--on {
-        margin-left: carbon--rem(40px);
-      }
+      position: absolute;
+      width: 1rem;
+      height: 0.5rem;
     }
 
-    .#{$prefix}--toggle-input--small:checked
-      + .#{$prefix}--toggle-input__label {
-      > .#{$prefix}--toggle__switch::after {
-        transform: translateX(carbon--rem(17px));
-      }
+    .#{$prefix}--toggle-input--small.#{$prefix}--skeleton
+      + .#{$prefix}--toggle-input__label
+      .#{$prefix}--toggle__switch
+      .#{$prefix}--toggle__text--left {
+      left: 2rem;
+    }
 
-      .#{$prefix}--toggle__check {
-        fill: $support-success;
-        transform: scale(1) translateX(carbon--rem(16px));
-      }
+    //pseudo "toggle" button
+    .#{$prefix}--toggle.#{$prefix}--skeleton
+      + .#{$prefix}--toggle-input__label
+      .#{$prefix}--toggle__switch::after,
+    .#{$prefix}--toggle.#{$prefix}--skeleton
+      + .#{$prefix}--toggle-input__label
+      .#{$prefix}--toggle__appearance::after,
+    .#{$prefix}--toggle.#{$prefix}--skeleton
+      + .#{$prefix}--toggle-input__label
+      .#{$prefix}--toggle__appearance::before {
+      display: none;
     }
 
-    .#{$prefix}--toggle-input--small:disabled:checked
+    //make it square
+    .#{$prefix}--toggle.#{$prefix}--skeleton
       + .#{$prefix}--toggle-input__label
-      .#{$prefix}--toggle__check {
-      fill: $layer-disabled;
+      .#{$prefix}--toggle__switch::before {
+      border-radius: 0;
     }
 
     //----------------------------------------------
-    // Skeleton
+    // Skeleton - ToggleSmall
+    // v11: remove these styles when component is no longer supported
+    /// @deprecated
     // ---------------------------------------------
-
-    .#{$prefix}--toggle__label.#{$prefix}--skeleton {
-      flex-direction: column;
-      align-items: flex-start;
+    .#{$prefix}--toggle-small__deprecated {
+      .#{$prefix}--skeleton {
+        display: flex;
+        flex-direction: column;
+      }
 
       .#{$prefix}--toggle__label-text {
-        margin-bottom: $carbon--spacing-03;
+        @include type-style('label-01');
+
+        margin: $carbon--spacing-03 0 $carbon--spacing-05 0;
+        color: $text-secondary;
       }
-    }
 
-    // Windows HCM fix
-    .#{$prefix}--toggle__switch::after,
-    .#{$prefix}--toggle__switch::before {
-      @include high-contrast-mode('outline');
-    }
+      .#{$prefix}--toggle__appearance::after {
+        display: none;
+      }
 
-    // stylelint-disable-next-line no-duplicate-selectors
-    .#{$prefix}--toggle-input:focus
-      + .#{$prefix}--toggle-input__label
-      > .#{$prefix}--toggle__switch::before,
-    .#{$prefix}--toggle-input:active
-      + .#{$prefix}--toggle-input__label
-      > .#{$prefix}--toggle__switch::before {
-      @include high-contrast-mode('focus');
+      .#{$prefix}--toggle--small
+        + .#{$prefix}--toggle__label
+        .#{$prefix}--toggle__appearance::before {
+        border-radius: 0;
+      }
+
+      .#{$prefix}--toggle--small
+        + .#{$prefix}--toggle__label
+        .#{$prefix}--toggle__appearance {
+        left: -1rem;
+        @include skeleton;
+      }
     }
   }
 }

packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap

@@ -6622,6 +6622,7 @@ Map {
   "ToggleSkeleton" => Object {
     "defaultProps": Object {
       "aria-label": "Toggle is loading",
+      "size": "md",
     },
     "propTypes": Object {
       "aria-label": Object {
@@ -6637,6 +6638,15 @@ Map {
       "labelText": Object {
         "type": "string",
       },
+      "size": Object {
+        "args": Array [
+          Array [
+            "sm",
+            "md",
+          ],
+        ],
+        "type": "oneOf",
+      },
     },
   },
   "ToggleSmallSkeleton" => Object {

packages/react/src/components/Toggle/Toggle-story.js

@@ -6,28 +6,9 @@
  */
 
 import React from 'react';
-import { action } from '@storybook/addon-actions';
-import { withKnobs, text, boolean, select } from '@storybook/addon-knobs';
+import { withKnobs, boolean } from '@storybook/addon-knobs';
 import Toggle from '../Toggle';
-
-const sizes = {
-  'Small  (sm)': 'sm',
-  'Medium (md) - default': undefined,
-};
-
-const toggleProps = () => ({
-  labelText: text(
-    'Label toggle input control (labelText)',
-    'Toggle element label'
-  ),
-  className: 'some-class',
-  labelA: text('Label for untoggled state (labelA)', 'Off'),
-  labelB: text('Label for toggled state (labelB)', 'On'),
-  disabled: boolean('Disabled (disabled)', false),
-  onChange: action('onChange'),
-  onToggle: action('onToggle'),
-  size: select('Field size (size)', sizes, undefined) || undefined,
-});
+import ToggleSkeleton from '../Toggle/Toggle.Skeleton';
 
 export default {
   title: 'Components/Toggle',
@@ -42,8 +23,10 @@ export default {
 export const Default = () => (
   <Toggle
     defaultToggled
-    {...toggleProps()}
+    labelText="Toggle element label"
     className="some-class"
+    labelA="Off"
+    labelB="On"
     id="toggle-1"
   />
 );
@@ -60,3 +43,44 @@ Default.parameters = {
       `,
   },
 };
+
+export const Small = () => (
+  <Toggle
+    defaultToggled
+    size="sm"
+    labelText="Toggle element label"
+    className="some-class"
+    labelA="Off"
+    labelB="On"
+    id="toggle-1"
+  />
+);
+
+export const Skeleton = () => {
+  const isLoading = boolean('isLoading', true);
+
+  return (
+    <div style={{ maxWidth: '100%' }}>
+      {isLoading ? (
+        <>
+          <ToggleSkeleton labelText="Toggle label" id="toggle-skeleton-id" />
+          <br />
+          <ToggleSkeleton
+            labelText="Toggle label"
+            id="toggle-skeleton-id"
+            size="sm"
+          />
+        </>
+      ) : (
+        <Toggle
+          defaultToggled
+          labelText="Toggle element label"
+          className="some-class"
+          labelA="Off"
+          labelB="On"
+          id="toggle-1"
+        />
+      )}
+    </div>
+  );
+};

packages/react/src/components/Toggle/Toggle.Skeleton.js

@@ -32,28 +32,33 @@ export default class ToggleSkeleton extends React.Component {
      * provided
      */
     labelText: PropTypes.string,
+
+    /**
+     * Specify the size of the Toggle. Currently only supports 'sm' or 'md' (default)
+     */
+    size: PropTypes.oneOf(['sm', 'md']),
   };
 
   static defaultProps = {
     ['aria-label']: 'Toggle is loading',
+    size: 'md',
   };
 
   render() {
-    const { id, labelText, className, ...rest } = this.props;
+    const { id, labelText, className, size, ...rest } = this.props;
+    const toggleInputClassNames = cx(`${prefix}--toggle ${prefix}--skeleton`, {
+      [`${prefix}--toggle-input--small`]: size === 'sm',
+    });
 
     return (
       <div className={cx(`${prefix}--form-item`, className)} {...rest}>
-        <input
-          type="checkbox"
-          id={id}
-          className={`${prefix}--toggle ${prefix}--skeleton`}
-        />
+        <input type="checkbox" id={id} className={toggleInputClassNames} />
 
         <label
           className={`${prefix}--toggle-input__label`}
           htmlFor={id}
           aria-label={labelText ? null : this.props['aria-label']}>
-          {labelText}
+          {labelText ? <div>{labelText}</div> : null}
           <span className={`${prefix}--toggle__switch`}>
             <span className={`${prefix}--toggle__text--left`} />
             <span className={`${prefix}--toggle__appearance`} />