fix(checkbox-skeleton): apply skeleton class to checkbox (#4923)

Author: abbeyhrt

packages/components/src/components/checkbox/_checkbox.scss

@@ -185,6 +185,17 @@
   .#{$prefix}--checkbox-label[data-contained-checkbox-state='mixed'][data-contained-checkbox-disabled='true']::before {
     background-color: $disabled-02;
   }
+
+  //-----------------------------------------------
+  // Skeleton
+  //-----------------------------------------------
+
+  .#{$prefix}--checkbox-label-text.#{$prefix}--skeleton {
+    @include skeleton;
+    width: rem(100px);
+    height: $spacing-05;
+    margin: auto 0;
+  }
 }
 
 @include exports('checkbox') {

packages/react/src/components/Checkbox/Checkbox-test.js

@@ -163,7 +163,7 @@ describe('CheckboxSkeleton', () => {
       });
 
       it('has the expected classes', () => {
-        expect(label.hasClass(`${prefix}--checkbox-label`)).toEqual(true);
+        expect(label.hasClass(`${prefix}--checkbox-label-text`)).toEqual(true);
         expect(label.hasClass(`${prefix}--skeleton`)).toEqual(true);
       });
     });

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

@@ -17,10 +17,11 @@ const CheckboxSkeleton = ({ className, ...rest }) => (
     className={cx(
       `${prefix}--form-item`,
       `${prefix}--checkbox-wrapper`,
+      `${prefix}--checkbox-label`,
       className
     )}
     {...rest}>
-    <span className={`${prefix}--checkbox-label ${prefix}--skeleton`} />
+    <span className={`${prefix}--checkbox-label-text ${prefix}--skeleton`} />
   </div>
 );