From 54f0a0d1dfba3e20446ee142e7939b51aa0bf189 Mon Sep 17 00:00:00 2001
From: Josefina Mancilla <josefinanoemi4@gmail.com>
Date: Fri, 16 Apr 2021 15:12:43 -0500
Subject: [PATCH 1/7] feat: add toggle skeleton stories

---
 .../src/components/Toggle/Toggle-story.js     | 68 +++++++++++++------
 .../src/components/Toggle/Toggle.Skeleton.js  | 17 +++--
 .../ToggleSmall/ToggleSmall-story.js          | 33 +++++++++
 3 files changed, 90 insertions(+), 28 deletions(-)

diff --git a/packages/react/src/components/Toggle/Toggle-story.js b/packages/react/src/components/Toggle/Toggle-story.js
index 22c4ca0b0068..9f7d8493a1f8 100644
--- a/packages/react/src/components/Toggle/Toggle-story.js
+++ b/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>
+  );
+};
diff --git a/packages/react/src/components/Toggle/Toggle.Skeleton.js b/packages/react/src/components/Toggle/Toggle.Skeleton.js
index 1255f17af214..5ad9954285b8 100644
--- a/packages/react/src/components/Toggle/Toggle.Skeleton.js
+++ b/packages/react/src/components/Toggle/Toggle.Skeleton.js
@@ -32,22 +32,27 @@ 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`}
diff --git a/packages/react/src/components/ToggleSmall/ToggleSmall-story.js b/packages/react/src/components/ToggleSmall/ToggleSmall-story.js
index 3b3dfdff5b39..5ccd69ab877f 100644
--- a/packages/react/src/components/ToggleSmall/ToggleSmall-story.js
+++ b/packages/react/src/components/ToggleSmall/ToggleSmall-story.js
@@ -9,6 +9,7 @@ import React from 'react';
 import { action } from '@storybook/addon-actions';
 import { withKnobs, text, boolean } from '@storybook/addon-knobs';
 import ToggleSmall from '../ToggleSmall';
+import ToggleSmallSkeleton from '../ToggleSmall/ToggleSmall.Skeleton';
 
 const toggleProps = () => ({
   labelText: text(
@@ -62,3 +63,35 @@ Default.parameters = {
       `,
   },
 };
+
+export const Skeleton = () => {
+  const isLoading = boolean('isLoading', true);
+
+  return (
+    <div style={{ maxWidth: '100%' }}>
+      {isLoading ? (
+        <>
+          <h4>
+            This component has been deprecated, please use the `size` prop
+            provided by Toggle instead
+          </h4>
+          <ToggleSmallSkeleton labelText="label" id="toggle-skeleton-id" />
+        </>
+      ) : (
+        <>
+          <h4>
+            This component has been deprecated, please use the `size` prop
+            provided by Toggle instead
+          </h4>
+          <br />
+          <ToggleSmall
+            defaultToggled
+            {...toggleProps()}
+            className="some-class"
+            id="toggle-1"
+          />
+        </>
+      )}
+    </div>
+  );
+};

From 4f774102da50fe1ac4303b6c46b25152a132001a Mon Sep 17 00:00:00 2001
From: Josefina Mancilla <josefinanoemi4@gmail.com>
Date: Fri, 16 Apr 2021 15:13:44 -0500
Subject: [PATCH 2/7] fix: toggle input skeleton styles

---
 .../src/components/toggle/_toggle.scss        | 38 ++++++++++++++++---
 1 file changed, 32 insertions(+), 6 deletions(-)

diff --git a/packages/components/src/components/toggle/_toggle.scss b/packages/components/src/components/toggle/_toggle.scss
index b38e0c04b5c2..85004aa5e9af 100644
--- a/packages/components/src/components/toggle/_toggle.scss
+++ b/packages/components/src/components/toggle/_toggle.scss
@@ -483,13 +483,39 @@
   // Skeleton
   // ---------------------------------------------
 
-  .#{$prefix}--toggle__label.#{$prefix}--skeleton {
-    flex-direction: column;
-    align-items: flex-start;
+  .#{$prefix}--toggle.#{$prefix}--skeleton
+    + .#{$prefix}--toggle-input__label
+    .#{$prefix}--toggle__switch {
+    @include skeleton;
 
-    .#{$prefix}--toggle__label-text {
-      margin-bottom: $carbon--spacing-03;
-    }
+    width: 3rem;
+  }
+
+  .#{$prefix}--toggle-input--small.#{$prefix}--skeleton
+    + .#{$prefix}--toggle-input__label
+    .#{$prefix}--toggle__switch {
+    @include skeleton;
+
+    width: 2rem;
+  }
+
+  .#{$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__switch
+    ::before {
+    display: none;
+  }
+
+  .bx--toggle.bx--skeleton
+    + .bx--toggle-input__label
+    .bx--toggle__switch::before {
+    border-radius: 0;
   }
 }
 

From dbebd6e73b5fab9199b0e5131fe6e0143825d0ab Mon Sep 17 00:00:00 2001
From: Josefina Mancilla <josefinanoemi4@gmail.com>
Date: Fri, 16 Apr 2021 15:46:33 -0500
Subject: [PATCH 3/7] fix: add text skeleton

---
 .../src/components/toggle/_toggle.scss        | 26 +++++++++++++++++--
 1 file changed, 24 insertions(+), 2 deletions(-)

diff --git a/packages/components/src/components/toggle/_toggle.scss b/packages/components/src/components/toggle/_toggle.scss
index 85004aa5e9af..80564c3d585c 100644
--- a/packages/components/src/components/toggle/_toggle.scss
+++ b/packages/components/src/components/toggle/_toggle.scss
@@ -483,6 +483,7 @@
   // Skeleton
   // ---------------------------------------------
 
+  //md toggle input
   .#{$prefix}--toggle.#{$prefix}--skeleton
     + .#{$prefix}--toggle-input__label
     .#{$prefix}--toggle__switch {
@@ -491,6 +492,7 @@
     width: 3rem;
   }
 
+  //small toggle input
   .#{$prefix}--toggle-input--small.#{$prefix}--skeleton
     + .#{$prefix}--toggle-input__label
     .#{$prefix}--toggle__switch {
@@ -499,6 +501,26 @@
     width: 2rem;
   }
 
+  // on/off text skeleton
+  .#{$prefix}--toggle.#{$prefix}--skeleton
+    + .#{$prefix}--toggle-input__label
+    .#{$prefix}--toggle__switch
+    .#{$prefix}--toggle__text--left {
+    @include skeleton;
+
+    position: absolute;
+    width: 1rem;
+    height: 0.5rem;
+  }
+
+  .#{$prefix}--toggle-input--small.#{$prefix}--skeleton
+    + .#{$prefix}--toggle-input__label
+    .#{$prefix}--toggle__switch
+    .#{$prefix}--toggle__text--left {
+    left: 2rem;
+  }
+
+  //pseudo "toggle" button
   .#{$prefix}--toggle.#{$prefix}--skeleton
     + .#{$prefix}--toggle-input__label
     .#{$prefix}--toggle__switch::after,
@@ -507,11 +529,11 @@
     .#{$prefix}--toggle__appearance::after,
   .#{$prefix}--toggle.#{$prefix}--skeleton
     + .#{$prefix}--toggle-input__label
-    .#{$prefix}--toggle__switch
-    ::before {
+    .#{$prefix}--toggle__appearance::before {
     display: none;
   }
 
+  //make it square
   .bx--toggle.bx--skeleton
     + .bx--toggle-input__label
     .bx--toggle__switch::before {

From d80cd458468c1575f1a0c936c929ec54ae0ee89f Mon Sep 17 00:00:00 2001
From: Josefina Mancilla <josefinanoemi4@gmail.com>
Date: Fri, 16 Apr 2021 16:32:13 -0500
Subject: [PATCH 4/7] fix: deprecated ToggleSmall skeleton styles

---
 .../src/components/toggle/_toggle.scss        | 41 +++++++++++++++++--
 .../ToggleSmall/ToggleSmall-story.js          |  5 ++-
 .../ToggleSmall/ToggleSmall.Skeleton.js       |  8 +++-
 3 files changed, 49 insertions(+), 5 deletions(-)

diff --git a/packages/components/src/components/toggle/_toggle.scss b/packages/components/src/components/toggle/_toggle.scss
index 80564c3d585c..8647ba71821c 100644
--- a/packages/components/src/components/toggle/_toggle.scss
+++ b/packages/components/src/components/toggle/_toggle.scss
@@ -534,11 +534,46 @@
   }
 
   //make it square
-  .bx--toggle.bx--skeleton
-    + .bx--toggle-input__label
-    .bx--toggle__switch::before {
+  .#{$prefix}--toggle.#{$prefix}--skeleton
+    + .#{$prefix}--toggle-input__label
+    .#{$prefix}--toggle__switch::before {
     border-radius: 0;
   }
+
+  //----------------------------------------------
+  // Skeleton - ToggleSmall
+  // TO-DO: remove these styles when component is no longer supported
+  // ---------------------------------------------
+  .#{$prefix}--toggle-small__deprecated {
+    .#{$prefix}--skeleton {
+      display: flex;
+      flex-direction: column;
+    }
+
+    .#{$prefix}--toggle__label-text {
+      @include type-style('label-01');
+
+      margin: $carbon--spacing-03 0;
+      color: $text-secondary;
+    }
+
+    .#{$prefix}--toggle__appearance::after {
+      display: none;
+    }
+
+    .#{$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;
+    }
+  }
 }
 
 @include exports('toggle') {
diff --git a/packages/react/src/components/ToggleSmall/ToggleSmall-story.js b/packages/react/src/components/ToggleSmall/ToggleSmall-story.js
index 5ccd69ab877f..5687cfd7df68 100644
--- a/packages/react/src/components/ToggleSmall/ToggleSmall-story.js
+++ b/packages/react/src/components/ToggleSmall/ToggleSmall-story.js
@@ -75,7 +75,10 @@ export const Skeleton = () => {
             This component has been deprecated, please use the `size` prop
             provided by Toggle instead
           </h4>
-          <ToggleSmallSkeleton labelText="label" id="toggle-skeleton-id" />
+          <ToggleSmallSkeleton
+            labelText="Toggle label"
+            id="toggle-skeleton-id"
+          />
         </>
       ) : (
         <>
diff --git a/packages/react/src/components/ToggleSmall/ToggleSmall.Skeleton.js b/packages/react/src/components/ToggleSmall/ToggleSmall.Skeleton.js
index 99f904c596fc..cafcdfd504ca 100644
--- a/packages/react/src/components/ToggleSmall/ToggleSmall.Skeleton.js
+++ b/packages/react/src/components/ToggleSmall/ToggleSmall.Skeleton.js
@@ -41,7 +41,13 @@ export default class ToggleSmallSkeleton extends React.Component {
   render() {
     const { id, labelText, className, ...rest } = this.props;
     return (
-      <div className={cx(`${prefix}--form-item`, className)} {...rest}>
+      <div
+        className={cx(
+          `${prefix}--form-item`,
+          `${prefix}--toggle-small__deprecated`, //needed for different skeleton styles
+          className
+        )}
+        {...rest}>
         <input
           type="checkbox"
           id={id}

From 778fd7e3f7bc045bd6488327281d92ee0874bfd7 Mon Sep 17 00:00:00 2001
From: Josefina Mancilla <josefinanoemi4@gmail.com>
Date: Fri, 16 Apr 2021 16:39:11 -0500
Subject: [PATCH 5/7] fix: togglesmall label margin

---
 packages/components/src/components/toggle/_toggle.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/components/src/components/toggle/_toggle.scss b/packages/components/src/components/toggle/_toggle.scss
index 8647ba71821c..5984efca5352 100644
--- a/packages/components/src/components/toggle/_toggle.scss
+++ b/packages/components/src/components/toggle/_toggle.scss
@@ -553,7 +553,7 @@
     .#{$prefix}--toggle__label-text {
       @include type-style('label-01');
 
-      margin: $carbon--spacing-03 0;
+      margin: $carbon--spacing-03 0 $carbon--spacing-05 0;
       color: $text-secondary;
     }
 

From 43e9a82ef3807b901f2ff2f92c8189ba3a381bd8 Mon Sep 17 00:00:00 2001
From: Josefina Mancilla <josefinanoemi4@gmail.com>
Date: Fri, 23 Apr 2021 08:26:40 -0500
Subject: [PATCH 6/7] chore: update tests

---
 .../__tests__/__snapshots__/PublicAPI-test.js.snap     | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
index a18eb3c4124f..e8d844a608bb 100644
--- a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
+++ b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
@@ -6742,6 +6742,7 @@ Map {
   "ToggleSkeleton" => Object {
     "defaultProps": Object {
       "aria-label": "Toggle is loading",
+      "size": "md",
     },
     "propTypes": Object {
       "aria-label": Object {
@@ -6757,6 +6758,15 @@ Map {
       "labelText": Object {
         "type": "string",
       },
+      "size": Object {
+        "args": Array [
+          Array [
+            "sm",
+            "md",
+          ],
+        ],
+        "type": "oneOf",
+      },
     },
   },
   "ToggleSmallSkeleton" => Object {

From d302938957690db8870ec8293571920e70a74ac3 Mon Sep 17 00:00:00 2001
From: Josefina Mancilla <josefinanoemi4@gmail.com>
Date: Mon, 31 May 2021 12:01:38 -0700
Subject: [PATCH 7/7] fix: toggle skeleton label

---
 .../src/components/toggle/_toggle.scss        | 33 ++++++++++++++++++-
 .../src/components/Toggle/Toggle.Skeleton.js  |  2 +-
 .../ToggleSmall/ToggleSmall.Skeleton.js       | 15 ++-------
 3 files changed, 36 insertions(+), 14 deletions(-)

diff --git a/packages/components/src/components/toggle/_toggle.scss b/packages/components/src/components/toggle/_toggle.scss
index 1db2348ee3d3..7144f89327ef 100644
--- a/packages/components/src/components/toggle/_toggle.scss
+++ b/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,6 +512,9 @@
       cursor: not-allowed;
     }
 
+    //----------------------------------------------
+    // Skeleton
+    // ---------------------------------------------
     //md toggle input
     .#{$prefix}--toggle.#{$prefix}--skeleton
       + .#{$prefix}--toggle-input__label
@@ -521,6 +524,20 @@
       width: 3rem;
     }
 
+    //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;
+
+      @include skeleton;
+    }
+
     //small toggle input
     .#{$prefix}--toggle-input--small.#{$prefix}--skeleton
       + .#{$prefix}--toggle-input__label
@@ -530,6 +547,20 @@
       width: 2rem;
     }
 
+    //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;
+
+      @include skeleton;
+    }
+
     // on/off text skeleton
     .#{$prefix}--toggle.#{$prefix}--skeleton
       + .#{$prefix}--toggle-input__label
diff --git a/packages/react/src/components/Toggle/Toggle.Skeleton.js b/packages/react/src/components/Toggle/Toggle.Skeleton.js
index 5ad9954285b8..1536177bf591 100644
--- a/packages/react/src/components/Toggle/Toggle.Skeleton.js
+++ b/packages/react/src/components/Toggle/Toggle.Skeleton.js
@@ -58,7 +58,7 @@ export default class ToggleSkeleton extends React.Component {
           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`} />
diff --git a/packages/react/src/components/ToggleSmall/ToggleSmall.Skeleton.js b/packages/react/src/components/ToggleSmall/ToggleSmall.Skeleton.js
index cafcdfd504ca..5e20621c159b 100644
--- a/packages/react/src/components/ToggleSmall/ToggleSmall.Skeleton.js
+++ b/packages/react/src/components/ToggleSmall/ToggleSmall.Skeleton.js
@@ -48,8 +48,7 @@ export default class ToggleSmallSkeleton extends React.Component {
           className
         )}
         {...rest}>
-        <input
-          type="checkbox"
+        <span
           id={id}
           className={`${prefix}--toggle ${prefix}--toggle--small ${prefix}--skeleton`}
         />
@@ -58,17 +57,9 @@ export default class ToggleSmallSkeleton extends React.Component {
           className={`${prefix}--toggle__label ${prefix}--skeleton`}
           htmlFor={id}>
           {labelText && (
-            <span className={`${prefix}--toggle__label-text`}>{labelText}</span>
+            <div className={`${prefix}--toggle__label-text`}>{labelText}</div>
           )}
-          <span className={`${prefix}--toggle__appearance`}>
-            <svg
-              className={`${prefix}--toggle__check`}
-              width="6px"
-              height="5px"
-              viewBox="0 0 6 5">
-              <path d="M2.2403 2.7299L4.9245 0 6 1.1117 2.2384 5 0 2.6863 1.0612 1.511z" />
-            </svg>
-          </span>
+          <span className={`${prefix}--toggle__appearance`} />
         </label>
       </div>
     );