Merge remote-tracking branch 'origin/main' into sp/sync-feature-7.1-with-main

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

@@ -21,6 +21,9 @@
 
 // iOS Checkbox: Disabled
 // -----------------------------------------
+// The checkbox and label should use the
+// same opacity and match the other form
+// controls
 
 :host(.checkbox-disabled) {
   opacity: $checkbox-ios-disabled-opacity;

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

@@ -54,7 +54,7 @@ $checkbox-ios-checkmark-width:            math.div($checkbox-ios-icon-size, 6) +
 $checkbox-ios-checkmark-height:           $checkbox-ios-icon-size * 0.5 !default;
 
 /// @prop - Opacity of the disabled checkbox
-$checkbox-ios-disabled-opacity:           .3 !default;
+$checkbox-ios-disabled-opacity:           $form-control-ios-disabled-opacity !default;
 
 /// @prop - Margin top of the left checkbox item
 $checkbox-ios-item-start-margin-top:      8px !default;

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

@@ -40,11 +40,19 @@
 
 // Material Design Checkbox: Disabled
 // --------------------------------------------------------
+// The checkbox itself should use the disabled
+// opacity set by its spec, while the label
+// should match the other form controls
 
-:host(.checkbox-disabled) {
+:host(.legacy-checkbox.checkbox-disabled),
+:host(.checkbox-disabled) .label-text-wrapper {
   opacity: $checkbox-md-disabled-opacity;
 }
 
+:host(.checkbox-disabled) .native-wrapper {
+  opacity: $checkbox-md-icon-disabled-opacity;
+}
+
 
 // Material Design Checkbox Within An Item
 // TODO(FW-3100): remove this

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

@@ -4,8 +4,8 @@
 // Material Design Checkbox
 // --------------------------------------------------
 
-/// @prop - Opacity of the disabled checkbox
-$checkbox-md-disabled-opacity:           .3 !default;
+/// @prop - Opacity of the disabled checkbox label
+$checkbox-md-disabled-opacity:           $form-control-md-disabled-opacity !default;
 
 /// @prop - Background color of the checkbox icon when off
 $checkbox-md-icon-background-color-off:  $item-md-background !default;
@@ -72,3 +72,12 @@ $checkbox-md-item-end-margin-bottom:     $checkbox-md-item-end-margin-top !defau
 
 /// @prop - Margin start of the end checkbox item
 $checkbox-md-item-end-margin-start:      0 !default;
+
+/// @prop - Opacity of the disabled checkbox
+/// This value is used because the checkbox color is set to
+/// `rgb(0, 0, 0, 0.60)` when enabled and we need it to be
+/// `rgb(0, 0, 0, 0.38)` when disabled but the disabled
+/// opacity is applied on top of the transparent color so
+/// this opacity gets us the equivalent of applying `0.38`
+/// on top of an opaque checkbox `rgb(0, 0, 0, 1.0)`
+$checkbox-md-icon-disabled-opacity:      0.63 !default;

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

@@ -3,42 +3,6 @@ import { configs, test } from '@utils/test/playwright';
 
 configs().forEach(({ title, screenshot, config }) => {
   test.describe(title('checkbox: basic visual tests'), () => {
-    test('should render unchecked checkbox correctly', async ({ page }) => {
-      await page.setContent(
-        `
-        <ion-checkbox>Unchecked</ion-checkbox>
-      `,
-        config
-      );
-
-      const checkbox = page.locator('ion-checkbox');
-      await expect(checkbox).toHaveScreenshot(screenshot(`checkbox-unchecked`));
-    });
-
-    test('should render checked checkbox correctly', async ({ page }) => {
-      await page.setContent(
-        `
-        <ion-checkbox checked>Checked</ion-checkbox>
-      `,
-        config
-      );
-
-      const checkbox = page.locator('ion-checkbox');
-      await expect(checkbox).toHaveScreenshot(screenshot(`checkbox-checked`));
-    });
-
-    test('should render disabled checkbox correctly', async ({ page }) => {
-      await page.setContent(
-        `
-        <ion-checkbox checked disabled>Disabled</ion-checkbox>
-      `,
-        config
-      );
-
-      const checkbox = page.locator('ion-checkbox');
-      await expect(checkbox).toHaveScreenshot(screenshot(`checkbox-disabled`));
-    });
-
     test('should render custom checkmark-width correctly', async ({ page }) => {
       await page.setContent(
         `

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

@@ -0,0 +1,54 @@
+import { expect } from '@playwright/test';
+import { configs, test } from '@utils/test/playwright';
+
+configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
+  test.describe(title('checkbox: states'), () => {
+    test('should render disabled checkbox correctly', async ({ page }) => {
+      await page.setContent(
+        `
+          <ion-checkbox disabled>Label</ion-checkbox>
+      `,
+        config
+      );
+
+      const checkbox = page.locator('ion-checkbox');
+      expect(await checkbox.screenshot()).toMatchSnapshot(screenshot(`checkbox-disabled`));
+    });
+
+    test('should render disabled checked checkbox correctly', async ({ page }) => {
+      await page.setContent(
+        `
+          <ion-checkbox checked disabled>Label</ion-checkbox>
+      `,
+        config
+      );
+
+      const checkbox = page.locator('ion-checkbox');
+      expect(await checkbox.screenshot()).toMatchSnapshot(screenshot(`checkbox-checked-disabled`));
+    });
+
+    test('should render checked checkbox correctly', async ({ page }) => {
+      await page.setContent(
+        `
+          <ion-checkbox checked>Label</ion-checkbox>
+      `,
+        config
+      );
+
+      const checkbox = page.locator('ion-checkbox');
+      expect(await checkbox.screenshot()).toMatchSnapshot(screenshot(`checkbox-checked`));
+    });
+
+    test('should render unchecked checkbox correctly', async ({ page }) => {
+      await page.setContent(
+        `
+          <ion-checkbox>Label</ion-checkbox>
+      `,
+        config
+      );
+
+      const checkbox = page.locator('ion-checkbox');
+      expect(await checkbox.screenshot()).toMatchSnapshot(screenshot(`checkbox-unchecked`));
+    });
+  });
+});

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

@@ -0,0 +1,78 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Checkbox - States</title>
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
+    />
+    <link href="../../../../../css/ionic.bundle.css" rel="stylesheet" />
+    <link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
+    <script src="../../../../../scripts/testing/scripts.js"></script>
+    <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
+    <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
+    <style>
+      .grid {
+        display: grid;
+        grid-template-columns: repeat(4, minmax(250px, 1fr));
+        grid-row-gap: 20px;
+        grid-column-gap: 20px;
+      }
+
+      h2 {
+        font-size: 12px;
+        font-weight: normal;
+
+        color: #6f7378;
+
+        margin-top: 10px;
+      }
+
+      @media screen and (max-width: 800px) {
+        .grid {
+          grid-template-columns: 1fr;
+          padding: 0;
+        }
+      }
+
+      ion-checkbox {
+        width: 100%;
+      }
+    </style>
+  </head>
+
+  <body>
+    <ion-app>
+      <ion-header>
+        <ion-toolbar>
+          <ion-title>Checkbox - States</ion-title>
+        </ion-toolbar>
+      </ion-header>
+
+      <ion-content id="content" class="ion-padding">
+        <div class="grid">
+          <div class="grid-item">
+            <h2>Unchecked</h2>
+            <ion-checkbox>Enable Notifications</ion-checkbox>
+          </div>
+
+          <div class="grid-item">
+            <h2>Checked</h2>
+            <ion-checkbox checked>Enable Notifications</ion-checkbox>
+          </div>
+
+          <div class="grid-item">
+            <h2>Disabled, Unchecked</h2>
+            <ion-checkbox disabled="true">Enable Notifications</ion-checkbox>
+          </div>
+
+          <div class="grid-item">
+            <h2>Disabled, Checked</h2>
+            <ion-checkbox disabled="true" checked>Enable Notifications</ion-checkbox>
+          </div>
+        </div>
+      </ion-content>
+    </ion-app>
+  </body>
+</html>