fix(checkbox): update to use state class naming - hattip @goodwinchris

Kajabi · Apr 21, 2023 · 808f9c6 · 808f9c6
1 parent d02f067
commit 808f9c6
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 33 deletions.
diff --git a/libs/core/src/components/sage-checkbox/sage-checkbox.scss b/libs/core/src/components/sage-checkbox/sage-checkbox.scss
@@ -17,6 +17,36 @@
   align-items: center;
   display: flex;
   flex-flow: row wrap;
+
+  &.is-invalid {
+    input {
+      border-color: var(--invalid-color);
+
+      &:checked {
+        background: var(--invalid-color);
+        border-color: var(--invalid-color);
+      }
+
+      &:focus-visible {
+        box-shadow: 0 0 0 4px var(--invalid-focus-color);
+        outline: none;
+      }
+    }
+
+    label,
+    .sage-checkbox__message {
+      color: var(--invalid-color);
+    }
+  }
+
+  &.is-indeterminate {
+    input:checked {
+      &::after {
+        border-bottom: 0;
+        transform: rotate(87deg) translate3d(-114%, 25%, 0);
+      }
+    }
+  }
 }
 
 input {
@@ -90,36 +120,6 @@ label {
   width: 100%;
 }
 
-.sage-checkbox--indeterminate {
-  input:checked {
-    &::after {
-      border-bottom: 0;
-      transform: rotate(87deg) translate3d(-114%, 25%, 0);
-    }
-  }
-}
-
-.sage-checkbox--invalid {
-  input {
-    border-color: var(--invalid-color);
-
-    &:checked {
-      background: var(--invalid-color);
-      border-color: var(--invalid-color);
-    }
-
-    &:focus-visible {
-      box-shadow: 0 0 0 4px var(--invalid-focus-color);
-      outline: none;
-    }
-  }
-
-  label,
-  .sage-checkbox__message {
-    color: var(--invalid-color);
-  }
-}
-
 .sage-checkbox--disabled {
   .sage-checkbox__message {
     color: var(--disabled-message-color);

diff --git a/libs/core/src/components/sage-checkbox/sage-checkbox.tsx b/libs/core/src/components/sage-checkbox/sage-checkbox.tsx
@@ -61,17 +61,17 @@ export class SageCheckbox {
     let className = `sage-checkbox`;
 
     if (this.invalid) {
-      const invalidClassName = 'sage-checkbox--invalid';
+      const invalidClassName = 'is-invalid';
       className += ' ' + invalidClassName;
     }
 
     if (this.indeterminate) {
-      const indeterminateClassName = 'sage-checkbox--indeterminate';
+      const indeterminateClassName = 'is-indeterminate';
       className += ' ' + indeterminateClassName;
     }
 
     if (this.disabled) {
-      const disabledClassName = 'sage-checkbox--disabled';
+      const disabledClassName = 'is-disabled';
       className += ' ' + disabledClassName;
     }