fix(checkbox): match MD spec (#16186)

* fix(checkbox): prevent transition inheritance

* fix(checkbox): use SVG for checkbox icon

* fix(checkbox): match MD spec size

* refactor(checkbox): use height/width custom props over size

* fix(checkbox): match MD spec off state border color

* feat(checkbox): animate check path for MD

core/src/components/checkbox/checkbox.ios.scss

@@ -5,7 +5,8 @@
 // --------------------------------------------------
 
 :host {
-  --size: #{$checkbox-ios-icon-size};
+  --height: #{$checkbox-ios-icon-size};
+  --width: #{$checkbox-ios-icon-size};
 
   // Border
   --border-radius: #{$checkbox-ios-icon-border-radius};
@@ -17,25 +18,6 @@
   --background: #{$checkbox-ios-background-color-off};
 }
 
-// iOS Checkbox Inner Checkmark: Checked
-// -----------------------------------------
-
-.checkbox-inner {
-  @include position(calc(var(--size) / 6), null, null, calc(var(--size) / 2.5 - 1px));
-
-  position: absolute;
-
-  width: calc(var(--size) / 6 + 1px);
-  height: calc(var(--size) / 2);
-
-  transform: rotate(45deg);
-
-  border-width: $checkbox-ios-checkmark-border-width;
-  border-top-width: 0;
-  border-left-width: 0;
-  border-style: $checkbox-ios-checkmark-border-style;
-}
-
 
 // iOS Checkbox: Disabled
 // -----------------------------------------

core/src/components/checkbox/checkbox.md.scss

@@ -5,10 +5,11 @@
 // --------------------------------------------------
 
 :host {
-  --size: #{$checkbox-md-icon-size};
+  --height: #{$checkbox-md-icon-size};
+  --width: #{$checkbox-md-icon-size};
 
   // Border
-  --border-radius: calc(var(--size) * .125);
+  --border-radius: calc(var(--height) * .125);
   --border-width: #{$checkbox-md-icon-border-width};
   --border-style: #{$checkbox-md-icon-border-style};
   --border-color: #{$checkbox-md-icon-border-color-off};
@@ -18,23 +19,17 @@
   --transition: #{background $checkbox-md-transition-duration $checkbox-md-transition-easing};
 }
 
-// Material Design Checkbox Inner Checkmark: Checked
-// -----------------------------------------
 
-:host(.checkbox-checked) .checkbox-inner {
+.checkbox-icon path {
-  @include position(calc(var(--size) * .05), null, null, calc(var(--size) * .3));
+  stroke-dasharray: 30;
+  stroke-dashoffset: 30;
+  stroke-width: 3;
+}
 
-  position: absolute;
+:host(.checkbox-checked) .checkbox-icon path {
+  stroke-dashoffset: 0;
 
-  width: calc(var(--size) * .3125);
+  transition: stroke-dashoffset 90ms linear 90ms;
-  height: calc(var(--size) * .625);
-
-  transform: rotate(45deg);
-
-  border-width: calc(var(--size) * .125);
-  border-top-width: 0;
-  border-left-width: 0;
-  border-style: $checkbox-md-icon-checkmark-style;
 }
 
 

core/src/components/checkbox/checkbox.md.vars.scss

@@ -17,7 +17,7 @@ $checkbox-md-background-color-focused:   ion-color(primary, tint) !default;
 $checkbox-md-icon-background-color-on:   ion-color(primary, base) !default;
 
 /// @prop - Size of the checkbox icon
-$checkbox-md-icon-size:                  16px !default;
+$checkbox-md-icon-size:                  14px !default;
 
 /// @prop - Width of the checkbox icon checkmark
 $checkbox-md-icon-checkmark-width:       2px !default;
@@ -38,13 +38,13 @@ $checkbox-md-icon-border-style:          solid !default;
 $checkbox-md-icon-border-radius:         2px !default;
 
 /// @prop - Border color of the checkbox icon when off
-$checkbox-md-icon-border-color-off:      $border-md-color !default;
+$checkbox-md-icon-border-color-off:      rgba(0, 0, 0, .54) !default;
 
 /// @prop - Border color of the checkbox icon when on
 $checkbox-md-icon-border-color-on:       ion-color(primary, base) !default;
 
 /// @prop - Transition duration of the checkbox
-$checkbox-md-transition-duration:        280ms !default;
+$checkbox-md-transition-duration:        180ms !default;
 
 /// @prop - Transition easing of the checkbox
 $checkbox-md-transition-easing:          cubic-bezier(.4, 0, .2, 1) !default;

core/src/components/checkbox/checkbox.scss

@@ -10,15 +10,17 @@
    * @prop --border-radius: Border radius of the checkbox icon
    * @prop --border-width: Border width of the checkbox icon
    * @prop --border-style: Border style of the checkbox icon
-   * @prop --size: Size of the checkbox icon
    * @prop --transition: Transition of the checkbox icon
    * @prop --background-checked: Background of the checkbox icon when checked
    * @prop --border-color-checked: Border color of the checkbox icon when checked
    * @prop --checkmark-color: Color of the checkbox checkmark when checked
+   * @prop --height: Height of the checkbox icon
+   * @prop --width: Width of the checkbox icon
    */
   --background-checked: #{ion-color(primary, base)};
   --border-color-checked: #{ion-color(primary, base)};
   --checkmark-color: #{ion-color(primary, contrast)};
+  --transition: none;
 
   display: inline-block;
   position: relative;
@@ -42,8 +44,8 @@ input {
 
   position: relative;
 
-  width: var(--size);
+  width: var(--width);
-  height: var(--size);
+  height: var(--height);
 
   transition: var(--transition);
 
@@ -56,8 +58,10 @@ input {
   contain: strict;
 }
 
-.checkbox-inner {
+.checkbox-icon path {
-  border-color: var(--checkmark-color);
+  fill: none;
+  stroke: var(--checkmark-color);
+  stroke-width: 1;
 
   opacity: 0;
 }
@@ -71,7 +75,7 @@ input {
   background: var(--background-checked);
 }
 
-:host(.checkbox-checked) .checkbox-inner {
+:host(.checkbox-checked) .checkbox-icon path {
   opacity: 1;
 }
 
@@ -80,4 +84,4 @@ input {
 
 :host(.checkbox-disabled) {
   pointer-events: none;
-}
+}

core/src/components/checkbox/checkbox.tsx

@@ -134,9 +134,12 @@ export class Checkbox implements ComponentInterface {
     renderHiddenInput(this.el, this.name, this.value, this.disabled);
 
     return [
-      <div class="checkbox-icon">
+      <svg class="checkbox-icon" viewBox="0 0 24 24">
-        <div class="checkbox-inner"></div>
+        { this.mode === 'md'
-      </div>,
+          ? <path d="M1.73,12.91 8.1,19.28 22.79,4.59"></path>
+          : <path d="M5.9,12.5l3.8,3.8l8.8-8.8"/>
+        }
+      </svg>,
       <input
         type="checkbox"
         id={this.inputId}

core/src/components/checkbox/readme.md

@@ -42,8 +42,9 @@ Checkboxes allow the selection of multiple options from a set of options. They a
 | `--border-style`         | Border style of the checkbox icon              |
 | `--border-width`         | Border width of the checkbox icon              |
 | `--checkmark-color`      | Color of the checkbox checkmark when checked   |
-| `--size`                 | Size of the checkbox icon                      |
+| `--height`               | Height of the checkbox icon                    |
 | `--transition`           | Transition of the checkbox icon                |
+| `--width`                | Width of the checkbox icon                     |
 
 
 ----------------------------------------------

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

@@ -52,7 +52,7 @@
 
       <ion-item>
         <ion-label>Dark</ion-label>
-        <ion-checkbox checked color="dark" style="--size: 100px;"></ion-checkbox>
+        <ion-checkbox checked color="dark" style="--height: 100px; --width: 100px;"></ion-checkbox>
       </ion-item>
 
       <ion-item>
@@ -72,7 +72,7 @@
 
       <ion-item>
         <ion-label>Dark</ion-label>
-        <ion-checkbox checked color="dark" slot="start" style="--size: 100px;"></ion-checkbox>
+        <ion-checkbox checked color="dark" slot="start" style="--height: 100px; --width: 100px;"></ion-checkbox>
       </ion-item>
 
       <ion-item>