Merge branch 'next' into test-jess-new

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

@@ -8,7 +8,8 @@
   --border-width: #{globals.$ionic-border-size-025};
   --border-style: #{globals.$ionic-border-style-solid};
   --border-color: #{globals.$ionic-color-neutral-800};
-  --checkmark-width: 3;
+  --checkmark-width: #{globals.$ionic-scale-400};
+  --checkmark-height: var(--checkmark-width);
 
   // Focus
   --focus-ring-color: #{globals.$ionic-state-focus-1};
@@ -124,15 +125,14 @@ input {
 }
 
 .native-wrapper {
-  display: flex;
-
-  align-items: center;
-}
-
-.checkbox-icon {
   @include globals.border-radius(var(--border-radius));
 
-  position: relative;
+  display: flex;
+
+  flex-shrink: 0;
+
+  align-items: center;
+  justify-content: center;
 
   width: var(--size);
   height: var(--size);
@@ -148,6 +148,13 @@ input {
   box-sizing: border-box;
 }
 
+.checkbox-icon {
+  position: relative;
+
+  width: var(--checkmark-width);
+  height: var(--checkmark-height);
+}
+
 .checkbox-icon path {
   fill: var(--checkmark-color);
 
@@ -289,8 +296,8 @@ input {
 // Checked / Indeterminate Checkbox
 // ---------------------------------------------
 
-:host(.checkbox-checked) .checkbox-icon,
-:host(.checkbox-indeterminate) .checkbox-icon {
+:host(.checkbox-checked) .native-wrapper,
+:host(.checkbox-indeterminate) .native-wrapper {
   border-color: var(--border-color-checked);
 
   background: var(--checkbox-background-checked);
@@ -306,7 +313,7 @@ input {
 :host(.ion-invalid) {
   --focus-ring-color: #{globals.$ionic-state-focus-2};
 
-  .checkbox-icon {
+  .native-wrapper {
     border-color: globals.$ionic-color-danger-800;
   }
 }
@@ -317,19 +324,28 @@ input {
   pointer-events: none;
 }
 
+// Checkbox overrides the disabled state mixin properties
+// to fix positioning issues, as the top and left properties
+// cause the overlay to start inside the border. We unset
+// these position properties and inherit width and height to
+// ensure the border is covered.
 :host(.checkbox-disabled) .native-wrapper:after {
   @include globals.disabled-state();
+  @include globals.position(unset, unset, unset, unset);
+
+  width: inherit;
+  height: inherit;
 }
 
 // disabled, unchecked checkbox
-:host(.checkbox-disabled) .checkbox-icon {
+:host(.checkbox-disabled) .native-wrapper {
   border-color: globals.$ionic-color-neutral-800;
 
   background-color: globals.$ionic-state-disabled;
 }
 
 // disabled, checked checkbox
-:host(.checkbox-disabled.checkbox-checked) .checkbox-icon {
+:host(.checkbox-disabled.checkbox-checked) .native-wrapper {
   border-width: globals.$ionic-border-size-0;
 
   background-color: globals.$ionic-color-primary-base;
@@ -338,12 +354,12 @@ input {
 // Checkbox Hover
 // --------------------------------------------------------
 @media (any-hover: hover) {
-  :host(:hover) .checkbox-icon {
+  :host(:hover) .native-wrapper {
     background-color: globals.$ionic-color-neutral-100;
   }
 
-  :host(:hover.checkbox-checked) .checkbox-icon,
-  :host(:hover.checkbox-indeterminate) .checkbox-icon {
+  :host(:hover.checkbox-checked) .native-wrapper,
+  :host(:hover.checkbox-indeterminate) .native-wrapper {
     background-color: globals.$ionic-color-primary-800;
   }
 }
@@ -351,19 +367,19 @@ input {
 // Checkbox Focus
 // --------------------------------------------------
 // Only show the focus ring when the checkbox is focused and not disabled
-:host(.ion-focused:not(.checkbox-disabled)) .checkbox-icon {
+:host(.ion-focused:not(.checkbox-disabled)) .native-wrapper {
   outline: var(--focus-ring-width) globals.$ionic-border-style-solid var(--focus-ring-color);
   outline-offset: var(--focus-ring-offset);
 }
 
 // Checkbox: Active
 // --------------------------------------------------------
-:host(.ion-activated) .checkbox-icon {
+:host(.ion-activated) .native-wrapper {
   background-color: globals.$ionic-color-neutral-200;
 }
 
-:host(.ion-activated.checkbox-checked) .checkbox-icon,
-:host(.ion-activated.checkbox-indeterminate) .checkbox-icon {
+:host(.ion-activated.checkbox-checked) .native-wrapper,
+:host(.ion-activated.checkbox-indeterminate) .native-wrapper {
   background-color: globals.$ionic-color-primary-900;
 }
 

core/src/components/checkbox/test/basic/checkbox.e2e.ts

@@ -21,7 +21,18 @@ configs({ modes: ['ios', 'md', 'ionic-md'] }).forEach(({ title, screenshot, conf
     test('should render custom checkmark-width correctly', async ({ page }) => {
       await page.setContent(
         `
-        <ion-checkbox checked style="--checkmark-width: 7">Checkmark Width</ion-checkbox>
+        <style>
+          ion-checkbox {
+            --checkmark-width: 7;
+          }
+
+          /* The ionic theme sets the width of the svg not stroke-width */
+          ion-checkbox.ionic {
+            --checkmark-width: 22px;
+          }
+        </style>
+
+        <ion-checkbox checked>Checkmark Width</ion-checkbox>
       `,
         config
       );

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

@@ -23,6 +23,15 @@
       transform: scale(0.5);
       transform-origin: center;
     }
+
+    .checkmark-width {
+      --checkmark-width: 7;
+    }
+
+    /* The ionic theme sets the width of the svg not stroke-width */
+    .checkmark-width.ionic {
+      --checkmark-width: 22px;
+    }
   </style>
   <body>
     <ion-app>
@@ -38,7 +47,10 @@
           <ion-checkbox justify="start" checked>Checked</ion-checkbox>
           <ion-checkbox justify="start" disabled>Disabled</ion-checkbox>
           <ion-checkbox justify="start" disabled checked>Disabled, Checked</ion-checkbox>
-          <ion-checkbox justify="start" checked style="--checkmark-width: 7">Checkmark Width</ion-checkbox>
+          <ion-checkbox justify="start" disabled style="--border-width: 3px"
+            >Disabled, Custom Border Width</ion-checkbox
+          >
+          <ion-checkbox justify="start" checked class="checkmark-width">Checkmark Width</ion-checkbox>
           <ion-checkbox justify="start" checked class="checkbox-part">Checkmark Shadow Part</ion-checkbox>
           <ion-checkbox justify="start" checked style="--size: 100px">--size</ion-checkbox>
         </div>

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

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

core/src/foundations/ionic.root.scss

@@ -59,6 +59,7 @@
   --ionic-space-600: 24px;
   --ionic-space-700: 28px;
   --ionic-space-800: 32px;
+  --ionic-space-850: 34px;
   --ionic-space-900: 36px;
   --ionic-space-1000: 40px;
   --ionic-space-1200: 48px;
@@ -68,6 +69,7 @@
   --ionic-border-radius-200: 8px;
   --ionic-border-radius-300: 12px;
   --ionic-border-radius-400: 16px;
+  --ionic-border-radius-500: 20px;
   --ionic-border-radius-800: 32px;
   --ionic-border-radius-1000: 40px;
   --ionic-border-radius-050: 2px;
@@ -593,6 +595,7 @@
   --ionic-scale-600: 24px;
   --ionic-scale-700: 28px;
   --ionic-scale-800: 32px;
+  --ionic-scale-850: 34px;
   --ionic-scale-900: 36px;
   --ionic-scale-1000: 40px;
   --ionic-scale-1100: 44px;
@@ -602,7 +605,10 @@
   --ionic-scale-1800: 72px;
   --ionic-scale-2000: 80px;
   --ionic-scale-2400: 96px;
+  --ionic-scale-2800: 112px;
   --ionic-scale-3200: 128px;
+  --ionic-scale-3400: 136px;
+  --ionic-scale-3600: 144px;
   --ionic-scale-4000: 160px;
   --ionic-scale-5000: 200px;
   --ionic-scale-6200: 248px;

core/src/foundations/ionic.utility.scss

@@ -331,6 +331,24 @@
   @include padding($ionic-space-800);
 }
 
+.ionic-margin-space-850 {
+  --margin-start: #{$ionic-space-850};
+  --margin-end: #{$ionic-space-850};
+  --margin-top: #{$ionic-space-850};
+  --margin-bottom: #{$ionic-space-850};
+
+  @include margin($ionic-space-850);
+}
+
+.ionic-padding-space-850 {
+  --padding-start: #{$ionic-space-850};
+  --padding-end: #{$ionic-space-850};
+  --padding-top: #{$ionic-space-850};
+  --padding-bottom: #{$ionic-space-850};
+
+  @include padding($ionic-space-850);
+}
+
 .ionic-margin-space-900 {
   --margin-start: #{$ionic-space-900};
   --margin-end: #{$ionic-space-900};
@@ -417,6 +435,9 @@
 .ionic-border-radius-400 {
   border-radius: $ionic-border-radius-400;
 }
+.ionic-border-radius-500 {
+  border-radius: $ionic-border-radius-500;
+}
 .ionic-border-radius-800 {
   border-radius: $ionic-border-radius-800;
 }

core/src/foundations/ionic.vars.scss

@@ -90,6 +90,7 @@ $ionic-space-500: var(--ionic-space-500, 20px);
 $ionic-space-600: var(--ionic-space-600, 24px);
 $ionic-space-700: var(--ionic-space-700, 28px);
 $ionic-space-800: var(--ionic-space-800, 32px);
+$ionic-space-850: var(--ionic-space-850, 34px);
 $ionic-space-900: var(--ionic-space-900, 36px);
 $ionic-space-1000: var(--ionic-space-1000, 40px);
 $ionic-space-1200: var(--ionic-space-1200, 48px);
@@ -99,6 +100,7 @@ $ionic-border-radius-100: var(--ionic-border-radius-100, 4px);
 $ionic-border-radius-200: var(--ionic-border-radius-200, 8px);
 $ionic-border-radius-300: var(--ionic-border-radius-300, 12px);
 $ionic-border-radius-400: var(--ionic-border-radius-400, 16px);
+$ionic-border-radius-500: var(--ionic-border-radius-500, 20px);
 $ionic-border-radius-800: var(--ionic-border-radius-800, 32px);
 $ionic-border-radius-1000: var(--ionic-border-radius-1000, 40px);
 $ionic-border-radius-050: var(--ionic-border-radius-050, 2px);
@@ -624,6 +626,7 @@ $ionic-scale-500: var(--ionic-scale-500, 20px);
 $ionic-scale-600: var(--ionic-scale-600, 24px);
 $ionic-scale-700: var(--ionic-scale-700, 28px);
 $ionic-scale-800: var(--ionic-scale-800, 32px);
+$ionic-scale-850: var(--ionic-scale-850, 34px);
 $ionic-scale-900: var(--ionic-scale-900, 36px);
 $ionic-scale-1000: var(--ionic-scale-1000, 40px);
 $ionic-scale-1100: var(--ionic-scale-1100, 44px);
@@ -633,7 +636,10 @@ $ionic-scale-1600: var(--ionic-scale-1600, 64px);
 $ionic-scale-1800: var(--ionic-scale-1800, 72px);
 $ionic-scale-2000: var(--ionic-scale-2000, 80px);
 $ionic-scale-2400: var(--ionic-scale-2400, 96px);
+$ionic-scale-2800: var(--ionic-scale-2800, 112px);
 $ionic-scale-3200: var(--ionic-scale-3200, 128px);
+$ionic-scale-3400: var(--ionic-scale-3400, 136px);
+$ionic-scale-3600: var(--ionic-scale-3600, 144px);
 $ionic-scale-4000: var(--ionic-scale-4000, 160px);
 $ionic-scale-5000: var(--ionic-scale-5000, 200px);
 $ionic-scale-6200: var(--ionic-scale-6200, 248px);

core/src/foundations/tokens.preview.html

@@ -1657,6 +1657,8 @@
 
           <div class="border-token" style="border-radius: 16px">-border-radius-400 (16px)</div>
 
+          <div class="border-token" style="border-radius: 20px">-border-radius-500 (20px)</div>
+
           <div class="border-token" style="border-radius: 32px">-border-radius-800 (32px)</div>
 
           <div class="border-token" style="border-radius: 40px">-border-radius-1000 (40px)</div>
@@ -1725,6 +1727,10 @@
             <div class="space-token" style="margin: 32px">-space-800 (32px)</div>
           </div>
 
+          <div class="spacing-wrapper">
+            <div class="space-token" style="margin: 34px">-space-850 (34px)</div>
+          </div>
+
           <div class="spacing-wrapper">
             <div class="space-token" style="margin: 36px">-space-900 (36px)</div>
           </div>

core/src/foundations/tokens/primitives.value.tokens.json

@@ -148,10 +148,6 @@
       "$type": "dimension",
       "$value": "{scale.0}"
     },
-    "050": {
-      "$type": "dimension",
-      "$value": "{scale.050}"
-    },
     "100": {
       "$type": "dimension",
       "$value": "{scale.100}"
@@ -192,6 +188,10 @@
       "$type": "dimension",
       "$value": "{scale.800}"
     },
+    "850": {
+      "$type": "dimension",
+      "$value": "{scale.850}"
+    },
     "900": {
       "$type": "dimension",
       "$value": "{scale.900}"
@@ -203,6 +203,10 @@
     "1200": {
       "$type": "dimension",
       "$value": "{scale.1200}"
+    },
+    "050": {
+      "$type": "dimension",
+      "$value": "{scale.050}"
     }
   },
   "border-radius": {
@@ -210,10 +214,6 @@
       "$type": "dimension",
       "$value": "{scale.0}"
     },
-    "050": {
-      "$type": "dimension",
-      "$value": "{scale.050}"
-    },
     "100": {
       "$type": "dimension",
       "$value": "{scale.100}"
@@ -230,6 +230,10 @@
       "$type": "dimension",
       "$value": "{scale.400}"
     },
+    "500": {
+      "$type": "dimension",
+      "$value": "{scale.500}"
+    },
     "800": {
       "$type": "dimension",
       "$value": "{scale.800}"
@@ -238,6 +242,10 @@
       "$type": "dimension",
       "$value": "{scale.1000}"
     },
+    "050": {
+      "$type": "dimension",
+      "$value": "{scale.050}"
+    },
     "full": {
       "$type": "dimension",
       "$value": "999px"
@@ -1120,6 +1128,10 @@
       "$type": "dimension",
       "$value": "32px"
     },
+    "850": {
+      "$type": "dimension",
+      "$value": "34px"
+    },
     "900": {
       "$type": "dimension",
       "$value": "36px"
@@ -1156,10 +1168,22 @@
       "$type": "dimension",
       "$value": "96px"
     },
+    "2800": {
+      "$type": "dimension",
+      "$value": "112px"
+    },
     "3200": {
       "$type": "dimension",
       "$value": "128px"
     },
+    "3400": {
+      "$type": "dimension",
+      "$value": "136px"
+    },
+    "3600": {
+      "$type": "dimension",
+      "$value": "144px"
+    },
     "4000": {
       "$type": "dimension",
       "$value": "160px"

core/src/themes/ionic/ionic.mixins.scss

@@ -14,6 +14,7 @@
 // --------------------------------------------------
 @mixin disabled-state() {
   @include mixins.position(0, 0, 0, 0);
+
   position: absolute;
 
   background-color: tokens.$ionic-state-disabled;