From 4af62e67f6471fa7562b5ccb69eb1b65678f00c8 Mon Sep 17 00:00:00 2001
From: Abbey Hart <abbeyhrt@gmail.com>
Date: Tue, 7 Jan 2020 17:30:08 -0600
Subject: [PATCH] fix(checkbox-skeleton): apply skeleton class to checkbox
 (#4923)

---
 .../components/src/components/checkbox/_checkbox.scss | 11 +++++++++++
 .../react/src/components/Checkbox/Checkbox-test.js    |  2 +-
 .../src/components/Checkbox/Checkbox.Skeleton.js      |  3 ++-
 3 files changed, 14 insertions(+), 2 deletions(-)

diff --git a/packages/components/src/components/checkbox/_checkbox.scss b/packages/components/src/components/checkbox/_checkbox.scss
index df09d8a15e55..9317ad68368e 100644
--- a/packages/components/src/components/checkbox/_checkbox.scss
+++ b/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') {
diff --git a/packages/react/src/components/Checkbox/Checkbox-test.js b/packages/react/src/components/Checkbox/Checkbox-test.js
index 3e741af84da3..abdd198c4e9c 100644
--- a/packages/react/src/components/Checkbox/Checkbox-test.js
+++ b/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);
       });
     });
diff --git a/packages/react/src/components/Checkbox/Checkbox.Skeleton.js b/packages/react/src/components/Checkbox/Checkbox.Skeleton.js
index 9097ab5de778..6e7bf8bf071d 100644
--- a/packages/react/src/components/Checkbox/Checkbox.Skeleton.js
+++ b/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>
 );