diff --git a/core/src/components/checkbox/checkbox.ionic.scss b/core/src/components/checkbox/checkbox.ionic.scss index 5e133d442c..71ef0202d5 100644 --- a/core/src/components/checkbox/checkbox.ionic.scss +++ b/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; @@ -120,7 +121,7 @@ input { } .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); @@ -199,9 +199,12 @@ input { // -------------------------------------------------- :host(.ion-invalid) { --focus-ring-color: #{globals.$ion-border-focus-error}; +} +:host(.ion-invalid:not(.checkbox-checked)), +:host(.ion-invalid:not(.checkbox-checked).checkbox-disabled) { .native-wrapper { - border-color: globals.$ion-semantics-danger-800; + border-color: globals.$ion-border-danger-default; } } @@ -222,7 +225,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 +236,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,12 +253,22 @@ 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 diff --git a/core/src/components/checkbox/test/states/checkbox.e2e.ts b/core/src/components/checkbox/test/states/checkbox.e2e.ts index 62343a32cb..1ca70ecbbb 100644 --- a/core/src/components/checkbox/test/states/checkbox.e2e.ts +++ b/core/src/components/checkbox/test/states/checkbox.e2e.ts @@ -15,6 +15,18 @@ configs({ modes: ['ios', 'md', 'ionic-md'], directions: ['ltr'] }).forEach(({ ti await expect(checkbox).toHaveScreenshot(screenshot(`checkbox-disabled`)); }); + test('should render disabled invalid checkbox correctly', async ({ page }) => { + await page.setContent( + ` + Label + `, + config + ); + + const checkbox = page.locator('ion-checkbox'); + await expect(checkbox).toHaveScreenshot(screenshot(`invalid-checkbox-disabled`)); + }); + test('should render disabled checked checkbox correctly', async ({ page }) => { await page.setContent( ` @@ -57,6 +69,7 @@ configs({ modes: ['ios', 'md', 'ionic-md'], directions: ['ltr'] }).forEach(({ ti
Label Label + Label
`, config diff --git a/core/src/components/checkbox/test/states/checkbox.e2e.ts-snapshots/checkbox-focused-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/checkbox/test/states/checkbox.e2e.ts-snapshots/checkbox-focused-ionic-md-ltr-light-Mobile-Chrome-linux.png index c51ce1463d..c8759f44f9 100644 Binary files a/core/src/components/checkbox/test/states/checkbox.e2e.ts-snapshots/checkbox-focused-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/checkbox/test/states/checkbox.e2e.ts-snapshots/checkbox-focused-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/checkbox/test/states/checkbox.e2e.ts-snapshots/checkbox-focused-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/checkbox/test/states/checkbox.e2e.ts-snapshots/checkbox-focused-ionic-md-ltr-light-Mobile-Firefox-linux.png index 7ff1d8101a..eaf7d7a631 100644 Binary files a/core/src/components/checkbox/test/states/checkbox.e2e.ts-snapshots/checkbox-focused-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/checkbox/test/states/checkbox.e2e.ts-snapshots/checkbox-focused-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/checkbox/test/states/checkbox.e2e.ts-snapshots/checkbox-focused-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/checkbox/test/states/checkbox.e2e.ts-snapshots/checkbox-focused-ionic-md-ltr-light-Mobile-Safari-linux.png index dbf5ec9bf5..f90b9ff170 100644 Binary files a/core/src/components/checkbox/test/states/checkbox.e2e.ts-snapshots/checkbox-focused-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/checkbox/test/states/checkbox.e2e.ts-snapshots/checkbox-focused-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/checkbox/test/states/checkbox.e2e.ts-snapshots/checkbox-focused-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/checkbox/test/states/checkbox.e2e.ts-snapshots/checkbox-focused-ios-ltr-Mobile-Chrome-linux.png index 9389c5bd41..f9cf0340c9 100644 Binary files a/core/src/components/checkbox/test/states/checkbox.e2e.ts-snapshots/checkbox-focused-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/checkbox/test/states/checkbox.e2e.ts-snapshots/checkbox-focused-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/checkbox/test/states/checkbox.e2e.ts-snapshots/checkbox-focused-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/checkbox/test/states/checkbox.e2e.ts-snapshots/checkbox-focused-ios-ltr-Mobile-Firefox-linux.png index 834b5dca54..5eea2b5f73 100644 Binary files a/core/src/components/checkbox/test/states/checkbox.e2e.ts-snapshots/checkbox-focused-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/checkbox/test/states/checkbox.e2e.ts-snapshots/checkbox-focused-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/checkbox/test/states/checkbox.e2e.ts-snapshots/checkbox-focused-ios-ltr-Mobile-Safari-linux.png b/core/src/components/checkbox/test/states/checkbox.e2e.ts-snapshots/checkbox-focused-ios-ltr-Mobile-Safari-linux.png index 1605f0da33..773a671f5f 100644 Binary files a/core/src/components/checkbox/test/states/checkbox.e2e.ts-snapshots/checkbox-focused-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/checkbox/test/states/checkbox.e2e.ts-snapshots/checkbox-focused-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/checkbox/test/states/checkbox.e2e.ts-snapshots/checkbox-focused-md-ltr-Mobile-Chrome-linux.png b/core/src/components/checkbox/test/states/checkbox.e2e.ts-snapshots/checkbox-focused-md-ltr-Mobile-Chrome-linux.png index 6667d5615c..8a35b6ae2f 100644 Binary files a/core/src/components/checkbox/test/states/checkbox.e2e.ts-snapshots/checkbox-focused-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/checkbox/test/states/checkbox.e2e.ts-snapshots/checkbox-focused-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/checkbox/test/states/checkbox.e2e.ts-snapshots/checkbox-focused-md-ltr-Mobile-Firefox-linux.png b/core/src/components/checkbox/test/states/checkbox.e2e.ts-snapshots/checkbox-focused-md-ltr-Mobile-Firefox-linux.png index d5c6c21620..036ff101ed 100644 Binary files a/core/src/components/checkbox/test/states/checkbox.e2e.ts-snapshots/checkbox-focused-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/checkbox/test/states/checkbox.e2e.ts-snapshots/checkbox-focused-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/checkbox/test/states/checkbox.e2e.ts-snapshots/checkbox-focused-md-ltr-Mobile-Safari-linux.png b/core/src/components/checkbox/test/states/checkbox.e2e.ts-snapshots/checkbox-focused-md-ltr-Mobile-Safari-linux.png index 8edeba42d4..eb948db095 100644 Binary files a/core/src/components/checkbox/test/states/checkbox.e2e.ts-snapshots/checkbox-focused-md-ltr-Mobile-Safari-linux.png and b/core/src/components/checkbox/test/states/checkbox.e2e.ts-snapshots/checkbox-focused-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/checkbox/test/states/checkbox.e2e.ts-snapshots/invalid-checkbox-disabled-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/checkbox/test/states/checkbox.e2e.ts-snapshots/invalid-checkbox-disabled-ionic-md-ltr-light-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..c32feb2e95 Binary files /dev/null and b/core/src/components/checkbox/test/states/checkbox.e2e.ts-snapshots/invalid-checkbox-disabled-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/checkbox/test/states/checkbox.e2e.ts-snapshots/invalid-checkbox-disabled-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/checkbox/test/states/checkbox.e2e.ts-snapshots/invalid-checkbox-disabled-ionic-md-ltr-light-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..c034ca7d29 Binary files /dev/null and b/core/src/components/checkbox/test/states/checkbox.e2e.ts-snapshots/invalid-checkbox-disabled-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/checkbox/test/states/checkbox.e2e.ts-snapshots/invalid-checkbox-disabled-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/checkbox/test/states/checkbox.e2e.ts-snapshots/invalid-checkbox-disabled-ionic-md-ltr-light-Mobile-Safari-linux.png new file mode 100644 index 0000000000..0501cde600 Binary files /dev/null and b/core/src/components/checkbox/test/states/checkbox.e2e.ts-snapshots/invalid-checkbox-disabled-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/checkbox/test/states/checkbox.e2e.ts-snapshots/invalid-checkbox-disabled-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/checkbox/test/states/checkbox.e2e.ts-snapshots/invalid-checkbox-disabled-ios-ltr-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..ec6b42dfb4 Binary files /dev/null and b/core/src/components/checkbox/test/states/checkbox.e2e.ts-snapshots/invalid-checkbox-disabled-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/checkbox/test/states/checkbox.e2e.ts-snapshots/invalid-checkbox-disabled-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/checkbox/test/states/checkbox.e2e.ts-snapshots/invalid-checkbox-disabled-ios-ltr-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..4814856a95 Binary files /dev/null and b/core/src/components/checkbox/test/states/checkbox.e2e.ts-snapshots/invalid-checkbox-disabled-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/checkbox/test/states/checkbox.e2e.ts-snapshots/invalid-checkbox-disabled-ios-ltr-Mobile-Safari-linux.png b/core/src/components/checkbox/test/states/checkbox.e2e.ts-snapshots/invalid-checkbox-disabled-ios-ltr-Mobile-Safari-linux.png new file mode 100644 index 0000000000..5d2766def1 Binary files /dev/null and b/core/src/components/checkbox/test/states/checkbox.e2e.ts-snapshots/invalid-checkbox-disabled-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/checkbox/test/states/checkbox.e2e.ts-snapshots/invalid-checkbox-disabled-md-ltr-Mobile-Chrome-linux.png b/core/src/components/checkbox/test/states/checkbox.e2e.ts-snapshots/invalid-checkbox-disabled-md-ltr-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..bc017058e2 Binary files /dev/null and b/core/src/components/checkbox/test/states/checkbox.e2e.ts-snapshots/invalid-checkbox-disabled-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/checkbox/test/states/checkbox.e2e.ts-snapshots/invalid-checkbox-disabled-md-ltr-Mobile-Firefox-linux.png b/core/src/components/checkbox/test/states/checkbox.e2e.ts-snapshots/invalid-checkbox-disabled-md-ltr-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..3775fb06c0 Binary files /dev/null and b/core/src/components/checkbox/test/states/checkbox.e2e.ts-snapshots/invalid-checkbox-disabled-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/checkbox/test/states/checkbox.e2e.ts-snapshots/invalid-checkbox-disabled-md-ltr-Mobile-Safari-linux.png b/core/src/components/checkbox/test/states/checkbox.e2e.ts-snapshots/invalid-checkbox-disabled-md-ltr-Mobile-Safari-linux.png new file mode 100644 index 0000000000..64dcd8bab0 Binary files /dev/null and b/core/src/components/checkbox/test/states/checkbox.e2e.ts-snapshots/invalid-checkbox-disabled-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/checkbox/test/states/index.html b/core/src/components/checkbox/test/states/index.html index b01fc1e0b9..c26f9d90ec 100644 --- a/core/src/components/checkbox/test/states/index.html +++ b/core/src/components/checkbox/test/states/index.html @@ -81,6 +81,18 @@

Focused, Checked

Enable Notifications + +
+

Focused, Invalid

+ Enable Notifications +
+ +
+

Disabled, Invalid

+ Enable Notifications + +