fix: toggle skeleton label

carbon-design-system · May 31, 2021 · d302938 · d302938
1 parent a2064cb
commit d302938
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 14 deletions.
diff --git 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
@@ -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
@@ -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>
     );