- errorText and state only appears when checkbox is unchecked;

- update scss to use vars;
- add more examples to states page;

Author: JoaoFerreira-FrontEnd

core/src/components/checkbox/checkbox.ionic.scss

@@ -27,7 +27,8 @@
 
   // Size
   --size: #{globals.$ion-scale-600};
-  --checkbox-background-checked: #{globals.$ion-semantics-primary-base};
+  --checkbox-background: #{globals.$ion-bg-input-default};
+  --checkbox-background-checked: #{globals.$ion-bg-primary-base-default};
   --border-color-checked: #{globals.$ion-semantics-primary-base};
   --checkmark-color: #{globals.$ion-primitives-base-white};
   --transition: none;
@@ -116,11 +117,11 @@ input {
 }
 
 .checkbox-bottom .error-text {
-  color: globals.$ion-semantics-danger-800;
+  color: globals.$ion-text-danger;
 }
 
 .checkbox-bottom .helper-text {
-  color: globals.$ion-primitives-neutral-800;
+  color: globals.$ion-text-subtlest;
 }
 
 // Label Placement - Start
@@ -187,7 +188,6 @@ input {
 
 // Checked / Indeterminate Checkbox
 // ---------------------------------------------
-
 :host(.checkbox-checked) .native-wrapper,
 :host(.checkbox-indeterminate) .native-wrapper {
   border-color: var(--border-color-checked);
@@ -197,11 +197,17 @@ input {
 
 // Ionic Design Checkbox Invalid
 // --------------------------------------------------
-:host(.ion-invalid) {
+:host(.ion-invalid:not(.checkbox-checked)) {
   --focus-ring-color: #{globals.$ion-border-focus-error};
 
   .native-wrapper {
-    border-color: globals.$ion-semantics-danger-800;
+    border-color: globals.$ion-border-danger-default;
+  }
+}
+
+:host(.ion-invalid:not(.checkbox-checked).checkbox-disabled) {
+  .native-wrapper {
+    border-color: globals.$ion-border-danger-default;
   }
 }
 
@@ -222,7 +228,7 @@ input {
 :host(.checkbox-disabled.checkbox-checked) .native-wrapper {
   border-width: globals.$ion-border-size-0;
 
-  background-color: globals.$ion-semantics-primary-base;
+  background-color: globals.$ion-bg-primary-base-default;
 }
 
 // Checkbox Hover
@@ -233,7 +239,9 @@ input {
   }
 
   :host(:hover.checkbox-checked) .native-wrapper,
-  :host(:hover.checkbox-indeterminate) .native-wrapper {
+  :host(:hover.checkbox-checked) .checkbox-icon,
+  :host(:hover.checkbox-indeterminate) .native-wrapper,
+  :host(:hover.checkbox-indeterminate) .checkbox-icon {
     background-color: globals.$ion-semantics-primary-800;
   }
 }
@@ -248,14 +256,25 @@ input {
 // Checkbox: Active
 // --------------------------------------------------------
 :host(.ion-activated) .native-wrapper {
-  background-color: globals.$ion-primitives-neutral-200;
+  background-color: globals.$ion-bg-input-press;
 }
 
 :host(.ion-activated.checkbox-checked) .native-wrapper,
-:host(.ion-activated.checkbox-indeterminate) .native-wrapper {
-  background-color: globals.$ion-semantics-primary-900;
+:host(.ion-activated.checkbox-checked) .checkbox-icon,
+:host(.ion-activated.checkbox-indeterminate) .native-wrapper,
+:host(.ion-activated.checkbox-indeterminate) .checkbox-icon {
+  background-color: globals.$ion-bg-primary-base-press;
 }
 
+:host(.ion-activated.ion-invalid:not(.checkbox-checked)) {
+  background-color: globals.$ion-bg-input-press;
+
+  .native-wrapper {
+    border-color: globals.$ion-border-danger-press;
+  }
+}
+
+
 // Ionic Design Checkbox Shapes
 // --------------------------------------------------
 :host(.checkbox-shape-soft) {

core/src/components/checkbox/checkbox.tsx

@@ -239,25 +239,30 @@ export class Checkbox implements ComponentInterface {
    * This element should only be rendered if hint text is set.
    */
   private renderHintText() {
-    const { helperText, errorText, helperTextId, errorTextId } = this;
+    const { helperText, errorText, helperTextId, errorTextId, checked } = this;
 
     /**
      * undefined and empty string values should
      * be treated as not having helper/error text.
      */
-    const hasHintText = !!helperText || !!errorText;
-    if (!hasHintText) {
+    const hasHelperText = !!helperText;
+    const hasErrorText = (!!errorText && !checked);
+    if (!hasHelperText && !hasErrorText) {
       return;
     }
 
     return (
       <div class="checkbox-bottom">
-        <div id={helperTextId} class="helper-text" part="supporting-text helper-text">
-          {helperText}
-        </div>
-        <div id={errorTextId} class="error-text" part="supporting-text error-text">
-          {errorText}
-        </div>
+        {hasHelperText && (
+          <div id={helperTextId} class="helper-text" part="supporting-text helper-text">
+            {helperText}
+          </div>
+        )}
+        {hasErrorText && (
+          <div id={errorTextId} class="error-text" part="supporting-text error-text">
+            {errorText}
+          </div>
+        )}
       </div>
     );
   }

core/src/components/checkbox/test/states/index.html

@@ -81,6 +81,16 @@ <h2>Focused, Unchecked</h2>
             <h2>Focused, Checked</h2>
             <ion-checkbox checked class="ion-focused">Enable Notifications</ion-checkbox>
           </div>
+
+          <div class="grid-item">
+            <h2>Focused, Invalid</h2>
+            <ion-checkbox error-text="Error text" class="ion-invalid ion-focused">Enable Notifications</ion-checkbox>
+          </div>
+
+          <div class="grid-item">
+            <h2>Disabled, Invalid</h2>
+            <ion-checkbox disabled="true" error-text="Error text" class="ion-invalid">Enable Notifications</ion-checkbox>
+          </div>
         </div>
       </ion-content>
     </ion-app>