diff --git a/core/src/components/toggle/test/color/toggle.e2e.ts b/core/src/components/toggle/test/color/toggle.e2e.ts index cdebe75ec79..49dd68ee8c0 100644 --- a/core/src/components/toggle/test/color/toggle.e2e.ts +++ b/core/src/components/toggle/test/color/toggle.e2e.ts @@ -1,7 +1,7 @@ import { expect } from '@playwright/test'; import { configs, test } from '@utils/test/playwright'; -configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => { +configs({ directions: ['ltr'], modes: ['ios', 'md', 'ionic-md'] }).forEach(({ title, screenshot, config }) => { test.describe(title('toggle: color'), () => { test('should apply color when checked', async ({ page }) => { await page.setContent( diff --git a/core/src/components/toggle/test/color/toggle.e2e.ts-snapshots/toggle-color-checked-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/toggle/test/color/toggle.e2e.ts-snapshots/toggle-color-checked-ionic-md-ltr-light-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..e998cf0b595 Binary files /dev/null and b/core/src/components/toggle/test/color/toggle.e2e.ts-snapshots/toggle-color-checked-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/toggle/test/color/toggle.e2e.ts-snapshots/toggle-color-checked-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/toggle/test/color/toggle.e2e.ts-snapshots/toggle-color-checked-ionic-md-ltr-light-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..23b9a5e2dd1 Binary files /dev/null and b/core/src/components/toggle/test/color/toggle.e2e.ts-snapshots/toggle-color-checked-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/toggle/test/color/toggle.e2e.ts-snapshots/toggle-color-checked-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/toggle/test/color/toggle.e2e.ts-snapshots/toggle-color-checked-ionic-md-ltr-light-Mobile-Safari-linux.png new file mode 100644 index 00000000000..5919cbb0e2a Binary files /dev/null and b/core/src/components/toggle/test/color/toggle.e2e.ts-snapshots/toggle-color-checked-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/toggle/test/color/toggle.e2e.ts-snapshots/toggle-color-unchecked-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/toggle/test/color/toggle.e2e.ts-snapshots/toggle-color-unchecked-ionic-md-ltr-light-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..a38102e2df3 Binary files /dev/null and b/core/src/components/toggle/test/color/toggle.e2e.ts-snapshots/toggle-color-unchecked-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/toggle/test/color/toggle.e2e.ts-snapshots/toggle-color-unchecked-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/toggle/test/color/toggle.e2e.ts-snapshots/toggle-color-unchecked-ionic-md-ltr-light-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..3910e074aff Binary files /dev/null and b/core/src/components/toggle/test/color/toggle.e2e.ts-snapshots/toggle-color-unchecked-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/toggle/test/color/toggle.e2e.ts-snapshots/toggle-color-unchecked-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/toggle/test/color/toggle.e2e.ts-snapshots/toggle-color-unchecked-ionic-md-ltr-light-Mobile-Safari-linux.png new file mode 100644 index 00000000000..1127415615d Binary files /dev/null and b/core/src/components/toggle/test/color/toggle.e2e.ts-snapshots/toggle-color-unchecked-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts b/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts index 0f0b33cb512..d15b56a6a01 100644 --- a/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts +++ b/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts @@ -1,7 +1,7 @@ import { expect } from '@playwright/test'; import { configs, test } from '@utils/test/playwright'; -configs({ palettes: ['light', 'dark'] }).forEach(({ title, screenshot, config }) => { +configs({ palettes: ['light', 'dark'], modes: ['ios', 'md', 'ionic-md'] }).forEach(({ title, screenshot, config }) => { test.describe(title('toggle: enable-on-off-labels'), () => { test('should not have visual regressions', async ({ page }) => { await page.setContent( diff --git a/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-color-ionic-md-ltr-dark-Mobile-Chrome-linux.png b/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-color-ionic-md-ltr-dark-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..031127f2ca5 Binary files /dev/null and b/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-color-ionic-md-ltr-dark-Mobile-Chrome-linux.png differ diff --git a/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-color-ionic-md-ltr-dark-Mobile-Firefox-linux.png b/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-color-ionic-md-ltr-dark-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..863ae791197 Binary files /dev/null and b/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-color-ionic-md-ltr-dark-Mobile-Firefox-linux.png differ diff --git a/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-color-ionic-md-ltr-dark-Mobile-Safari-linux.png b/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-color-ionic-md-ltr-dark-Mobile-Safari-linux.png new file mode 100644 index 00000000000..fae96b60fe1 Binary files /dev/null and b/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-color-ionic-md-ltr-dark-Mobile-Safari-linux.png differ diff --git a/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-color-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-color-ionic-md-ltr-light-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..6a2d693fe94 Binary files /dev/null and b/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-color-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-color-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-color-ionic-md-ltr-light-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..17f0be5df79 Binary files /dev/null and b/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-color-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-color-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-color-ionic-md-ltr-light-Mobile-Safari-linux.png new file mode 100644 index 00000000000..3d6b35dcc6f Binary files /dev/null and b/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-color-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-color-ionic-md-rtl-dark-Mobile-Chrome-linux.png b/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-color-ionic-md-rtl-dark-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..469687c4ad4 Binary files /dev/null and b/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-color-ionic-md-rtl-dark-Mobile-Chrome-linux.png differ diff --git a/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-color-ionic-md-rtl-dark-Mobile-Firefox-linux.png b/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-color-ionic-md-rtl-dark-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..fd9ca5eab73 Binary files /dev/null and b/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-color-ionic-md-rtl-dark-Mobile-Firefox-linux.png differ diff --git a/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-color-ionic-md-rtl-dark-Mobile-Safari-linux.png b/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-color-ionic-md-rtl-dark-Mobile-Safari-linux.png new file mode 100644 index 00000000000..75d3b9d59b9 Binary files /dev/null and b/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-color-ionic-md-rtl-dark-Mobile-Safari-linux.png differ diff --git a/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-color-ionic-md-rtl-light-Mobile-Chrome-linux.png b/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-color-ionic-md-rtl-light-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..cda532cf672 Binary files /dev/null and b/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-color-ionic-md-rtl-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-color-ionic-md-rtl-light-Mobile-Firefox-linux.png b/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-color-ionic-md-rtl-light-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..1efe99884d9 Binary files /dev/null and b/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-color-ionic-md-rtl-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-color-ionic-md-rtl-light-Mobile-Safari-linux.png b/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-color-ionic-md-rtl-light-Mobile-Safari-linux.png new file mode 100644 index 00000000000..aa5acf7336e Binary files /dev/null and b/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-color-ionic-md-rtl-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-ionic-md-ltr-dark-Mobile-Chrome-linux.png b/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-ionic-md-ltr-dark-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..0dcc949cebc Binary files /dev/null and b/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-ionic-md-ltr-dark-Mobile-Chrome-linux.png differ diff --git a/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-ionic-md-ltr-dark-Mobile-Firefox-linux.png b/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-ionic-md-ltr-dark-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..82a34ea76ad Binary files /dev/null and b/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-ionic-md-ltr-dark-Mobile-Firefox-linux.png differ diff --git a/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-ionic-md-ltr-dark-Mobile-Safari-linux.png b/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-ionic-md-ltr-dark-Mobile-Safari-linux.png new file mode 100644 index 00000000000..ae0558b5636 Binary files /dev/null and b/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-ionic-md-ltr-dark-Mobile-Safari-linux.png differ diff --git a/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-ionic-md-ltr-light-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..3b26f568995 Binary files /dev/null and b/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-ionic-md-ltr-light-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..9cb2e34c443 Binary files /dev/null and b/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-ionic-md-ltr-light-Mobile-Safari-linux.png new file mode 100644 index 00000000000..d8c57349cbc Binary files /dev/null and b/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-ionic-md-rtl-dark-Mobile-Chrome-linux.png b/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-ionic-md-rtl-dark-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..6c4f109ab3e Binary files /dev/null and b/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-ionic-md-rtl-dark-Mobile-Chrome-linux.png differ diff --git a/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-ionic-md-rtl-dark-Mobile-Firefox-linux.png b/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-ionic-md-rtl-dark-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..fc9dec8ac3b Binary files /dev/null and b/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-ionic-md-rtl-dark-Mobile-Firefox-linux.png differ diff --git a/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-ionic-md-rtl-dark-Mobile-Safari-linux.png b/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-ionic-md-rtl-dark-Mobile-Safari-linux.png new file mode 100644 index 00000000000..0b9c376338e Binary files /dev/null and b/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-ionic-md-rtl-dark-Mobile-Safari-linux.png differ diff --git a/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-ionic-md-rtl-light-Mobile-Chrome-linux.png b/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-ionic-md-rtl-light-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..549622a38a8 Binary files /dev/null and b/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-ionic-md-rtl-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-ionic-md-rtl-light-Mobile-Firefox-linux.png b/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-ionic-md-rtl-light-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..03530d6e197 Binary files /dev/null and b/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-ionic-md-rtl-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-ionic-md-rtl-light-Mobile-Safari-linux.png b/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-ionic-md-rtl-light-Mobile-Safari-linux.png new file mode 100644 index 00000000000..0352fe713dd Binary files /dev/null and b/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-ionic-md-rtl-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/toggle/test/item/toggle.e2e.ts b/core/src/components/toggle/test/item/toggle.e2e.ts index 1dff98c31be..2be6cf09c5a 100644 --- a/core/src/components/toggle/test/item/toggle.e2e.ts +++ b/core/src/components/toggle/test/item/toggle.e2e.ts @@ -1,7 +1,7 @@ import { expect } from '@playwright/test'; import { configs, test } from '@utils/test/playwright'; -configs().forEach(({ title, screenshot, config }) => { +configs({ modes: ['ios', 'md', 'ionic-md'] }).forEach(({ title, screenshot, config }) => { test.describe(title('toggle: item'), () => { test('should render correctly in list', async ({ page }) => { await page.setContent( @@ -34,7 +34,7 @@ configs().forEach(({ title, screenshot, config }) => { }); }); -configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => { +configs({ directions: ['ltr'], modes: ['ios', 'md', 'ionic-md'] }).forEach(({ title, screenshot, config }) => { test.describe(title('toggle: item color contrast'), () => { test('label should have correct contrast when used in an item', async ({ page }) => { await page.setContent( @@ -89,7 +89,9 @@ configs({ directions: ['ltr'], modes: ['md'] }).forEach(({ title, screenshot, co await expect(list).toHaveScreenshot(screenshot(`toggle-stacked-label-in-item`)); }); }); +}); +configs({ directions: ['ltr'], modes: ['ios', 'md', 'ionic-md'] }).forEach(({ title, config }) => { test.describe(title('toggle: ionChange'), () => { test('clicking padded space within item should click the toggle', async ({ page }) => { await page.setContent( diff --git a/core/src/components/toggle/test/item/toggle.e2e.ts-snapshots/toggle-inset-list-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/toggle/test/item/toggle.e2e.ts-snapshots/toggle-inset-list-ionic-md-ltr-light-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..eb2ace6413e Binary files /dev/null and b/core/src/components/toggle/test/item/toggle.e2e.ts-snapshots/toggle-inset-list-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/toggle/test/item/toggle.e2e.ts-snapshots/toggle-inset-list-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/toggle/test/item/toggle.e2e.ts-snapshots/toggle-inset-list-ionic-md-ltr-light-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..4e09cc30515 Binary files /dev/null and b/core/src/components/toggle/test/item/toggle.e2e.ts-snapshots/toggle-inset-list-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/toggle/test/item/toggle.e2e.ts-snapshots/toggle-inset-list-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/toggle/test/item/toggle.e2e.ts-snapshots/toggle-inset-list-ionic-md-ltr-light-Mobile-Safari-linux.png new file mode 100644 index 00000000000..1d18c529ba8 Binary files /dev/null and b/core/src/components/toggle/test/item/toggle.e2e.ts-snapshots/toggle-inset-list-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/toggle/test/item/toggle.e2e.ts-snapshots/toggle-inset-list-ionic-md-rtl-light-Mobile-Chrome-linux.png b/core/src/components/toggle/test/item/toggle.e2e.ts-snapshots/toggle-inset-list-ionic-md-rtl-light-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..19a7460e519 Binary files /dev/null and b/core/src/components/toggle/test/item/toggle.e2e.ts-snapshots/toggle-inset-list-ionic-md-rtl-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/toggle/test/item/toggle.e2e.ts-snapshots/toggle-inset-list-ionic-md-rtl-light-Mobile-Firefox-linux.png b/core/src/components/toggle/test/item/toggle.e2e.ts-snapshots/toggle-inset-list-ionic-md-rtl-light-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..2dfc0829f86 Binary files /dev/null and b/core/src/components/toggle/test/item/toggle.e2e.ts-snapshots/toggle-inset-list-ionic-md-rtl-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/toggle/test/item/toggle.e2e.ts-snapshots/toggle-inset-list-ionic-md-rtl-light-Mobile-Safari-linux.png b/core/src/components/toggle/test/item/toggle.e2e.ts-snapshots/toggle-inset-list-ionic-md-rtl-light-Mobile-Safari-linux.png new file mode 100644 index 00000000000..f1d22f40ff1 Binary files /dev/null and b/core/src/components/toggle/test/item/toggle.e2e.ts-snapshots/toggle-inset-list-ionic-md-rtl-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/toggle/test/item/toggle.e2e.ts-snapshots/toggle-item-color-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/toggle/test/item/toggle.e2e.ts-snapshots/toggle-item-color-ionic-md-ltr-light-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..90c6e16551f Binary files /dev/null and b/core/src/components/toggle/test/item/toggle.e2e.ts-snapshots/toggle-item-color-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/toggle/test/item/toggle.e2e.ts-snapshots/toggle-item-color-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/toggle/test/item/toggle.e2e.ts-snapshots/toggle-item-color-ionic-md-ltr-light-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..d58e1c7d769 Binary files /dev/null and b/core/src/components/toggle/test/item/toggle.e2e.ts-snapshots/toggle-item-color-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/toggle/test/item/toggle.e2e.ts-snapshots/toggle-item-color-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/toggle/test/item/toggle.e2e.ts-snapshots/toggle-item-color-ionic-md-ltr-light-Mobile-Safari-linux.png new file mode 100644 index 00000000000..eb5f318c1ae Binary files /dev/null and b/core/src/components/toggle/test/item/toggle.e2e.ts-snapshots/toggle-item-color-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/toggle/test/item/toggle.e2e.ts-snapshots/toggle-list-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/toggle/test/item/toggle.e2e.ts-snapshots/toggle-list-ionic-md-ltr-light-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..90c6e16551f Binary files /dev/null and b/core/src/components/toggle/test/item/toggle.e2e.ts-snapshots/toggle-list-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/toggle/test/item/toggle.e2e.ts-snapshots/toggle-list-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/toggle/test/item/toggle.e2e.ts-snapshots/toggle-list-ionic-md-ltr-light-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..d58e1c7d769 Binary files /dev/null and b/core/src/components/toggle/test/item/toggle.e2e.ts-snapshots/toggle-list-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/toggle/test/item/toggle.e2e.ts-snapshots/toggle-list-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/toggle/test/item/toggle.e2e.ts-snapshots/toggle-list-ionic-md-ltr-light-Mobile-Safari-linux.png new file mode 100644 index 00000000000..eb5f318c1ae Binary files /dev/null and b/core/src/components/toggle/test/item/toggle.e2e.ts-snapshots/toggle-list-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/toggle/test/item/toggle.e2e.ts-snapshots/toggle-list-ionic-md-rtl-light-Mobile-Chrome-linux.png b/core/src/components/toggle/test/item/toggle.e2e.ts-snapshots/toggle-list-ionic-md-rtl-light-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..4bcadc06aa5 Binary files /dev/null and b/core/src/components/toggle/test/item/toggle.e2e.ts-snapshots/toggle-list-ionic-md-rtl-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/toggle/test/item/toggle.e2e.ts-snapshots/toggle-list-ionic-md-rtl-light-Mobile-Firefox-linux.png b/core/src/components/toggle/test/item/toggle.e2e.ts-snapshots/toggle-list-ionic-md-rtl-light-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..4a0e11570c5 Binary files /dev/null and b/core/src/components/toggle/test/item/toggle.e2e.ts-snapshots/toggle-list-ionic-md-rtl-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/toggle/test/item/toggle.e2e.ts-snapshots/toggle-list-ionic-md-rtl-light-Mobile-Safari-linux.png b/core/src/components/toggle/test/item/toggle.e2e.ts-snapshots/toggle-list-ionic-md-rtl-light-Mobile-Safari-linux.png new file mode 100644 index 00000000000..2de89a41293 Binary files /dev/null and b/core/src/components/toggle/test/item/toggle.e2e.ts-snapshots/toggle-list-ionic-md-rtl-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/toggle/test/label/toggle.e2e.ts b/core/src/components/toggle/test/label/toggle.e2e.ts index 92c491853eb..80eb1a0de1e 100644 --- a/core/src/components/toggle/test/label/toggle.e2e.ts +++ b/core/src/components/toggle/test/label/toggle.e2e.ts @@ -169,3 +169,47 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config, screen }); }); }); + +configs({ modes: ['ionic-md'] }).forEach(({ title, screenshot, config }) => { + test.describe(title('toggle: start placement'), () => { + test('should render the label in the start position', async ({ page }) => { + await page.setContent( + ` + Label + `, + config + ); + + const toggle = page.locator('ion-toggle'); + await expect(toggle).toHaveScreenshot(screenshot(`toggle-label-start`)); + }); + }); + + test.describe(title('toggle: end placement'), () => { + test('should render the label in the end position', async ({ page }) => { + await page.setContent( + ` + Label + `, + config + ); + + const toggle = page.locator('ion-toggle'); + await expect(toggle).toHaveScreenshot(screenshot(`toggle-label-end`)); + }); + }); + + test.describe(title('toggle: start long label'), () => { + test('long label should truncate', async ({ page }) => { + await page.setContent( + ` + Enable Notifications Enable Notifications Enable Notifications Enable Notifications Enable Notifications Enable Notifications Enable Notifications + `, + config + ); + + const toggle = page.locator('ion-toggle'); + await expect(toggle).toHaveScreenshot(screenshot(`toggle-label-start-long-label`)); + }); + }); +}); diff --git a/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-end-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-end-ionic-md-ltr-light-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..fe97948f726 Binary files /dev/null and b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-end-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-end-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-end-ionic-md-ltr-light-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..52812fc8fce Binary files /dev/null and b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-end-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-end-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-end-ionic-md-ltr-light-Mobile-Safari-linux.png new file mode 100644 index 00000000000..099a5d161ee Binary files /dev/null and b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-end-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-end-ionic-md-rtl-light-Mobile-Chrome-linux.png b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-end-ionic-md-rtl-light-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..848f33be91d Binary files /dev/null and b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-end-ionic-md-rtl-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-end-ionic-md-rtl-light-Mobile-Firefox-linux.png b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-end-ionic-md-rtl-light-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..73e9a3a8978 Binary files /dev/null and b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-end-ionic-md-rtl-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-end-ionic-md-rtl-light-Mobile-Safari-linux.png b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-end-ionic-md-rtl-light-Mobile-Safari-linux.png new file mode 100644 index 00000000000..ce6fd237d37 Binary files /dev/null and b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-end-ionic-md-rtl-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-start-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-start-ionic-md-ltr-light-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..a38102e2df3 Binary files /dev/null and b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-start-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-start-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-start-ionic-md-ltr-light-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..3910e074aff Binary files /dev/null and b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-start-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-start-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-start-ionic-md-ltr-light-Mobile-Safari-linux.png new file mode 100644 index 00000000000..1127415615d Binary files /dev/null and b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-start-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-start-ionic-md-rtl-light-Mobile-Chrome-linux.png b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-start-ionic-md-rtl-light-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..6e9a2c0c8ac Binary files /dev/null and b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-start-ionic-md-rtl-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-start-ionic-md-rtl-light-Mobile-Firefox-linux.png b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-start-ionic-md-rtl-light-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..fb00c92a451 Binary files /dev/null and b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-start-ionic-md-rtl-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-start-ionic-md-rtl-light-Mobile-Safari-linux.png b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-start-ionic-md-rtl-light-Mobile-Safari-linux.png new file mode 100644 index 00000000000..cee676e87c0 Binary files /dev/null and b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-start-ionic-md-rtl-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-start-long-label-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-start-long-label-ionic-md-ltr-light-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..b64dbcbf091 Binary files /dev/null and b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-start-long-label-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-start-long-label-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-start-long-label-ionic-md-ltr-light-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..615d11700bd Binary files /dev/null and b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-start-long-label-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-start-long-label-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-start-long-label-ionic-md-ltr-light-Mobile-Safari-linux.png new file mode 100644 index 00000000000..9e380a53e71 Binary files /dev/null and b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-start-long-label-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-start-long-label-ionic-md-rtl-light-Mobile-Chrome-linux.png b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-start-long-label-ionic-md-rtl-light-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..eb3fa30e09b Binary files /dev/null and b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-start-long-label-ionic-md-rtl-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-start-long-label-ionic-md-rtl-light-Mobile-Firefox-linux.png b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-start-long-label-ionic-md-rtl-light-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..34312a9b4ea Binary files /dev/null and b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-start-long-label-ionic-md-rtl-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-start-long-label-ionic-md-rtl-light-Mobile-Safari-linux.png b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-start-long-label-ionic-md-rtl-light-Mobile-Safari-linux.png new file mode 100644 index 00000000000..eb9fb1c0088 Binary files /dev/null and b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-start-long-label-ionic-md-rtl-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/toggle/test/sizes/toggle.e2e.ts b/core/src/components/toggle/test/sizes/toggle.e2e.ts index 22b18d4e8d4..53fc889cc8a 100644 --- a/core/src/components/toggle/test/sizes/toggle.e2e.ts +++ b/core/src/components/toggle/test/sizes/toggle.e2e.ts @@ -1,7 +1,7 @@ import { expect } from '@playwright/test'; import { configs, test } from '@utils/test/playwright'; -configs().forEach(({ title, screenshot, config }) => { +configs({ modes: ['ios', 'md', 'ionic-md'] }).forEach(({ title, screenshot, config }) => { test.describe(title('toggle: sizes'), () => { test('should not have visual regressions', async ({ page }) => { await page.goto(`/src/components/toggle/test/sizes`, config); diff --git a/core/src/components/toggle/test/sizes/toggle.e2e.ts-snapshots/toggle-sizes-diff-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/toggle/test/sizes/toggle.e2e.ts-snapshots/toggle-sizes-diff-ionic-md-ltr-light-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..6edcfa7b900 Binary files /dev/null and b/core/src/components/toggle/test/sizes/toggle.e2e.ts-snapshots/toggle-sizes-diff-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/toggle/test/sizes/toggle.e2e.ts-snapshots/toggle-sizes-diff-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/toggle/test/sizes/toggle.e2e.ts-snapshots/toggle-sizes-diff-ionic-md-ltr-light-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..1f4f7b5a3fe Binary files /dev/null and b/core/src/components/toggle/test/sizes/toggle.e2e.ts-snapshots/toggle-sizes-diff-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/toggle/test/sizes/toggle.e2e.ts-snapshots/toggle-sizes-diff-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/toggle/test/sizes/toggle.e2e.ts-snapshots/toggle-sizes-diff-ionic-md-ltr-light-Mobile-Safari-linux.png new file mode 100644 index 00000000000..d9e6b61535b Binary files /dev/null and b/core/src/components/toggle/test/sizes/toggle.e2e.ts-snapshots/toggle-sizes-diff-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/toggle/test/sizes/toggle.e2e.ts-snapshots/toggle-sizes-diff-ionic-md-rtl-light-Mobile-Chrome-linux.png b/core/src/components/toggle/test/sizes/toggle.e2e.ts-snapshots/toggle-sizes-diff-ionic-md-rtl-light-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..1797a8f03ad Binary files /dev/null and b/core/src/components/toggle/test/sizes/toggle.e2e.ts-snapshots/toggle-sizes-diff-ionic-md-rtl-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/toggle/test/sizes/toggle.e2e.ts-snapshots/toggle-sizes-diff-ionic-md-rtl-light-Mobile-Firefox-linux.png b/core/src/components/toggle/test/sizes/toggle.e2e.ts-snapshots/toggle-sizes-diff-ionic-md-rtl-light-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..647bf6c212f Binary files /dev/null and b/core/src/components/toggle/test/sizes/toggle.e2e.ts-snapshots/toggle-sizes-diff-ionic-md-rtl-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/toggle/test/sizes/toggle.e2e.ts-snapshots/toggle-sizes-diff-ionic-md-rtl-light-Mobile-Safari-linux.png b/core/src/components/toggle/test/sizes/toggle.e2e.ts-snapshots/toggle-sizes-diff-ionic-md-rtl-light-Mobile-Safari-linux.png new file mode 100644 index 00000000000..b4173561cca Binary files /dev/null and b/core/src/components/toggle/test/sizes/toggle.e2e.ts-snapshots/toggle-sizes-diff-ionic-md-rtl-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/toggle/test/states/toggle.e2e.ts b/core/src/components/toggle/test/states/toggle.e2e.ts index 22c1c98e1bc..6194a61f9d6 100644 --- a/core/src/components/toggle/test/states/toggle.e2e.ts +++ b/core/src/components/toggle/test/states/toggle.e2e.ts @@ -1,7 +1,7 @@ import { expect } from '@playwright/test'; import { configs, test } from '@utils/test/playwright'; -configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => { +configs({ directions: ['ltr'], modes: ['ios', 'md', 'ionic-md'] }).forEach(({ title, screenshot, config }) => { test.describe(title('toggle: states'), () => { test('should render disabled toggle correctly', async ({ page }) => { await page.setContent( @@ -40,3 +40,46 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => { }); }); }); + +/** + * Focused and Pressed states are only available in the Ionic theme + */ +configs({ directions: ['ltr'], modes: ['ionic-md'] }).forEach(({ title, screenshot, config }) => { + test.describe(title('toggle: states'), () => { + test('should render focused toggle correctly', async ({ page }) => { + await page.setContent( + ` + Label + `, + config + ); + + const toggle = page.locator('ion-toggle'); + await expect(toggle).toHaveScreenshot(screenshot(`toggle-focused`)); + }); + + test('should render pressed unchecked toggle correctly', async ({ page }) => { + await page.setContent( + ` + Label + `, + config + ); + + const toggle = page.locator('ion-toggle'); + await expect(toggle).toHaveScreenshot(screenshot(`toggle-unchecked-pressed`)); + }); + + test('should render pressed checked toggle correctly', async ({ page }) => { + await page.setContent( + ` + Label + `, + config + ); + + const toggle = page.locator('ion-toggle'); + await expect(toggle).toHaveScreenshot(screenshot(`toggle-checked-pressed`)); + }); + }); +}); diff --git a/core/src/components/toggle/test/states/toggle.e2e.ts-snapshots/toggle-checked-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/toggle/test/states/toggle.e2e.ts-snapshots/toggle-checked-ionic-md-ltr-light-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..6c80183dbd6 Binary files /dev/null and b/core/src/components/toggle/test/states/toggle.e2e.ts-snapshots/toggle-checked-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/toggle/test/states/toggle.e2e.ts-snapshots/toggle-checked-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/toggle/test/states/toggle.e2e.ts-snapshots/toggle-checked-ionic-md-ltr-light-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..3e45b14e6ea Binary files /dev/null and b/core/src/components/toggle/test/states/toggle.e2e.ts-snapshots/toggle-checked-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/toggle/test/states/toggle.e2e.ts-snapshots/toggle-checked-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/toggle/test/states/toggle.e2e.ts-snapshots/toggle-checked-ionic-md-ltr-light-Mobile-Safari-linux.png new file mode 100644 index 00000000000..daac94cb116 Binary files /dev/null and b/core/src/components/toggle/test/states/toggle.e2e.ts-snapshots/toggle-checked-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/toggle/test/states/toggle.e2e.ts-snapshots/toggle-checked-pressed-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/toggle/test/states/toggle.e2e.ts-snapshots/toggle-checked-pressed-ionic-md-ltr-light-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..7b949e7fc35 Binary files /dev/null and b/core/src/components/toggle/test/states/toggle.e2e.ts-snapshots/toggle-checked-pressed-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/toggle/test/states/toggle.e2e.ts-snapshots/toggle-checked-pressed-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/toggle/test/states/toggle.e2e.ts-snapshots/toggle-checked-pressed-ionic-md-ltr-light-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..8b5a1a71dbc Binary files /dev/null and b/core/src/components/toggle/test/states/toggle.e2e.ts-snapshots/toggle-checked-pressed-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/toggle/test/states/toggle.e2e.ts-snapshots/toggle-checked-pressed-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/toggle/test/states/toggle.e2e.ts-snapshots/toggle-checked-pressed-ionic-md-ltr-light-Mobile-Safari-linux.png new file mode 100644 index 00000000000..ea984a86b1a Binary files /dev/null and b/core/src/components/toggle/test/states/toggle.e2e.ts-snapshots/toggle-checked-pressed-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/toggle/test/states/toggle.e2e.ts-snapshots/toggle-disabled-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/toggle/test/states/toggle.e2e.ts-snapshots/toggle-disabled-ionic-md-ltr-light-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..b96ef5310e4 Binary files /dev/null and b/core/src/components/toggle/test/states/toggle.e2e.ts-snapshots/toggle-disabled-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/toggle/test/states/toggle.e2e.ts-snapshots/toggle-disabled-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/toggle/test/states/toggle.e2e.ts-snapshots/toggle-disabled-ionic-md-ltr-light-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..ed3169e3a6f Binary files /dev/null and b/core/src/components/toggle/test/states/toggle.e2e.ts-snapshots/toggle-disabled-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/toggle/test/states/toggle.e2e.ts-snapshots/toggle-disabled-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/toggle/test/states/toggle.e2e.ts-snapshots/toggle-disabled-ionic-md-ltr-light-Mobile-Safari-linux.png new file mode 100644 index 00000000000..645575425e9 Binary files /dev/null and b/core/src/components/toggle/test/states/toggle.e2e.ts-snapshots/toggle-disabled-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/toggle/test/states/toggle.e2e.ts-snapshots/toggle-focused-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/toggle/test/states/toggle.e2e.ts-snapshots/toggle-focused-ionic-md-ltr-light-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..e377aa783ec Binary files /dev/null and b/core/src/components/toggle/test/states/toggle.e2e.ts-snapshots/toggle-focused-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/toggle/test/states/toggle.e2e.ts-snapshots/toggle-focused-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/toggle/test/states/toggle.e2e.ts-snapshots/toggle-focused-ionic-md-ltr-light-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..c2ffd3db529 Binary files /dev/null and b/core/src/components/toggle/test/states/toggle.e2e.ts-snapshots/toggle-focused-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/toggle/test/states/toggle.e2e.ts-snapshots/toggle-focused-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/toggle/test/states/toggle.e2e.ts-snapshots/toggle-focused-ionic-md-ltr-light-Mobile-Safari-linux.png new file mode 100644 index 00000000000..64e0467f5c4 Binary files /dev/null and b/core/src/components/toggle/test/states/toggle.e2e.ts-snapshots/toggle-focused-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/toggle/test/states/toggle.e2e.ts-snapshots/toggle-unchecked-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/toggle/test/states/toggle.e2e.ts-snapshots/toggle-unchecked-ionic-md-ltr-light-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..5c9a6f478f7 Binary files /dev/null and b/core/src/components/toggle/test/states/toggle.e2e.ts-snapshots/toggle-unchecked-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/toggle/test/states/toggle.e2e.ts-snapshots/toggle-unchecked-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/toggle/test/states/toggle.e2e.ts-snapshots/toggle-unchecked-ionic-md-ltr-light-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..3910e074aff Binary files /dev/null and b/core/src/components/toggle/test/states/toggle.e2e.ts-snapshots/toggle-unchecked-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/toggle/test/states/toggle.e2e.ts-snapshots/toggle-unchecked-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/toggle/test/states/toggle.e2e.ts-snapshots/toggle-unchecked-ionic-md-ltr-light-Mobile-Safari-linux.png new file mode 100644 index 00000000000..1127415615d Binary files /dev/null and b/core/src/components/toggle/test/states/toggle.e2e.ts-snapshots/toggle-unchecked-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/toggle/test/states/toggle.e2e.ts-snapshots/toggle-unchecked-pressed-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/toggle/test/states/toggle.e2e.ts-snapshots/toggle-unchecked-pressed-ionic-md-ltr-light-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..753f7fcd4a0 Binary files /dev/null and b/core/src/components/toggle/test/states/toggle.e2e.ts-snapshots/toggle-unchecked-pressed-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/toggle/test/states/toggle.e2e.ts-snapshots/toggle-unchecked-pressed-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/toggle/test/states/toggle.e2e.ts-snapshots/toggle-unchecked-pressed-ionic-md-ltr-light-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..d1ce2fafb9a Binary files /dev/null and b/core/src/components/toggle/test/states/toggle.e2e.ts-snapshots/toggle-unchecked-pressed-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/toggle/test/states/toggle.e2e.ts-snapshots/toggle-unchecked-pressed-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/toggle/test/states/toggle.e2e.ts-snapshots/toggle-unchecked-pressed-ionic-md-ltr-light-Mobile-Safari-linux.png new file mode 100644 index 00000000000..b3e26d3df64 Binary files /dev/null and b/core/src/components/toggle/test/states/toggle.e2e.ts-snapshots/toggle-unchecked-pressed-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/toggle/toggle.scss b/core/src/components/toggle/toggle.common.scss similarity index 62% rename from core/src/components/toggle/toggle.scss rename to core/src/components/toggle/toggle.common.scss index 37a222831c1..60c6c854058 100644 --- a/core/src/components/toggle/toggle.scss +++ b/core/src/components/toggle/toggle.common.scss @@ -1,5 +1,5 @@ -@import "../../themes/native/native.globals"; @import "./toggle.vars.scss"; +@import "../../themes/mixins.scss"; // Toggle // -------------------------------------------------- @@ -35,7 +35,6 @@ cursor: pointer; user-select: none; - z-index: $z-index-item-input; } :host(.in-item) { @@ -93,26 +92,6 @@ input { // Input Label // ---------------------------------------------------------------- -.label-text-wrapper { - text-overflow: ellipsis; - - white-space: nowrap; - - overflow: hidden; -} - -:host(.in-item) .label-text-wrapper { - @include margin($toggle-item-label-margin-top, null, $toggle-item-label-margin-bottom, null); -} - -:host(.in-item.toggle-label-placement-stacked) .label-text-wrapper { - @include margin($toggle-item-label-margin-top, null, $form-control-label-margin, null); -} - -:host(.in-item.toggle-label-placement-stacked) .native-wrapper { - @include margin(null, null, $toggle-item-label-margin-bottom, null); -} - /** * If no label text is placed into the slot * then the element should be hidden otherwise @@ -131,32 +110,6 @@ input { align-items: center; } -// Toggle Justify -// -------------------------------------------------- - -:host(.toggle-justify-space-between) .toggle-wrapper { - justify-content: space-between; -} - -:host(.toggle-justify-start) .toggle-wrapper { - justify-content: start; -} - -:host(.toggle-justify-end) .toggle-wrapper { - justify-content: end; -} - -// Toggle Align -// -------------------------------------------------- - -:host(.toggle-alignment-start) .toggle-wrapper { - align-items: start; -} - -:host(.toggle-alignment-center) .toggle-wrapper { - align-items: center; -} - // Toggle Label Placement - Start // ---------------------------------------------------------------- @@ -168,15 +121,6 @@ input { flex-direction: row; } -:host(.toggle-label-placement-start) .label-text-wrapper { - /** - * The margin between the label and - * the input should be on the end - * when the label sits at the start. - */ - @include margin(null, $form-control-label-margin, null, 0); -} - // Toggle Label Placement - End // ---------------------------------------------------------------- @@ -188,74 +132,6 @@ input { flex-direction: row-reverse; } -/** - * The margin between the label and - * the input should be on the start - * when the label sits at the end. - */ -:host(.toggle-label-placement-end) .label-text-wrapper { - @include margin(null, 0, null, $form-control-label-margin); -} - -// Input Label Placement - Fixed -// ---------------------------------------------------------------- - -:host(.toggle-label-placement-fixed) .label-text-wrapper { - /** - * The margin between the label and - * the input should be on the end - * when the label sits at the start. - */ - @include margin(null, $form-control-label-margin, null, 0); -} - -/** - * Label is on the left of the input in LTR and - * on the right in RTL. Label also has a fixed width. - */ -:host(.toggle-label-placement-fixed) .label-text-wrapper { - flex: 0 0 100px; - - width: 100px; - min-width: 100px; - max-width: 200px; -} - -// Toggle Label Placement - Stacked -// ---------------------------------------------------------------- - -/** - * Label is on top of the toggle. - */ -:host(.toggle-label-placement-stacked) .toggle-wrapper { - flex-direction: column; -} - -:host(.toggle-label-placement-stacked) .label-text-wrapper { - @include transform(scale(#{$form-control-label-stacked-scale})); - - /** - * The margin between the label and - * the toggle should be on the bottom - * when the label sits on top. - */ - @include margin(null, 0, $form-control-label-margin, 0); - - /** - * Label text should not extend - * beyond the bounds of the toggle. - */ - max-width: calc(100% / #{$form-control-label-stacked-scale}); -} - -:host(.toggle-label-placement-stacked.toggle-alignment-start) .label-text-wrapper { - @include transform-origin(start, top); -} - -:host(.toggle-label-placement-stacked.toggle-alignment-center) .label-text-wrapper { - @include transform-origin(center, top); -} - // Toggle Background Track: Unchecked // -------------------------------------------------- diff --git a/core/src/components/toggle/toggle.ionic.scss b/core/src/components/toggle/toggle.ionic.scss new file mode 100644 index 00000000000..670a8cddcf6 --- /dev/null +++ b/core/src/components/toggle/toggle.ionic.scss @@ -0,0 +1,137 @@ +@use "../../themes/ionic/ionic.globals.scss" as globals; +@use "./toggle.common"; + +// Ionic Toggle +// ----------------------------------------- + +:host { + --track-background: #{globals.$ionic-color-neutral-800}; + --track-background-checked: #{globals.ion-color(primary, base)}; + --border-radius: #{globals.$ionic-border-radius-full}; + --focus-ring-color: #{globals.$ionic-state-focus-1}; + --focus-ring-width: #{globals.$ionic-border-size-050}; + --handle-background: #{globals.$ionic-color-base-white}; + --handle-background-checked: #{globals.$ionic-color-base-white}; + --handle-border-radius: #{globals.$ionic-border-radius-full}; + --handle-height: #{globals.$ionic-scale-500}; + --handle-max-height: #{globals.$ionic-scale-500}; + --handle-width: #{globals.$ionic-scale-500}; + --handle-spacing: #{globals.$ionic-space-050}; + --handle-transition: transform 300ms, width 120ms ease-in-out 80ms, left 110ms ease-in-out 80ms, + right 110ms ease-in-out 80ms; + + @include globals.typography(globals.$ionic-body-md-regular); + + width: 100%; + + z-index: 2; // TODO(ROU-10853): replace this value with a layer token. +} + +// Toggle Wrapper +// -------------------------------------------------- + +.toggle-wrapper { + align-items: center; + + min-height: globals.$ionic-scale-1200; +} + +// Toggle Native Wrapper +// ---------------------------------------------------------------- + +.native-wrapper .toggle-icon { + width: globals.$ionic-scale-1100; + height: globals.$ionic-scale-600; + + /** + * The handle box shadow should not + * overflow outside of the track container. + */ + overflow: hidden; +} + +:host(.ion-color.toggle-checked) .toggle-icon { + background: globals.current-color(base); +} + +// Toggle Native Wrapper: Focused +// ---------------------------------------------------------------- + +:host(.ion-focused) .toggle-icon { + outline: var(--focus-ring-width) globals.$ionic-border-style-solid var(--focus-ring-color); + outline-offset: var(--focus-ring-width); +} + +// Toggle Native Wrapper: Pressed +// ---------------------------------------------------------------- + +:host(.ion-activated) .toggle-icon::after { + @include globals.pressed-state(); +} + +// Ionic Toggle: Disabled +// ---------------------------------------------------------- + +:host(.toggle-disabled) .toggle-icon::after { + @include globals.disabled-state(); +} + +// Ionic Toggle Inner Knob: Unchecked +// ---------------------------------------------------------- + +.toggle-inner { + will-change: background-color, transform; + + display: flex; + + align-items: center; + justify-content: center; + + color: globals.$ionic-color-neutral-1200; +} + +.toggle-inner .toggle-switch-icon { + width: globals.$ionic-scale-400; + height: globals.$ionic-scale-400; +} + +// Toggle Label Placement - Start/Default +// ---------------------------------------------------------------- + +/** +* Label is on the left of the input in LTR and +* on the right in RTL. +*/ +:host .toggle-wrapper { + justify-content: space-between; +} + +:host .label-text-wrapper { + /** + * The margin between the label and + * the input should be on the end + * when the label sits at the start. + */ + @include globals.margin(null, globals.$ionic-space-400, null, 0); + color: globals.$ionic-color-neutral-1200; +} + +// Toggle Label Placement - End +// ---------------------------------------------------------------- + +/** +* Label is on the right of the input in LTR and +* on the left in RTL. +*/ +:host(.toggle-label-placement-end) .toggle-wrapper { + justify-content: start; +} + +/** +* The margin between the label and +* the input should be on the start +* when the label sits at the end. +*/ +:host(.toggle-label-placement-end) .label-text-wrapper { + @include globals.margin(null, 0, null, globals.$ionic-space-400); +} diff --git a/core/src/components/toggle/toggle.ios.scss b/core/src/components/toggle/toggle.ios.scss index 2cfd60ec1b7..bfc55ef3ee0 100644 --- a/core/src/components/toggle/toggle.ios.scss +++ b/core/src/components/toggle/toggle.ios.scss @@ -1,4 +1,4 @@ -@import "./toggle"; +@import "./toggle.native"; @import "./toggle.ios.vars"; // iOS Toggle diff --git a/core/src/components/toggle/toggle.md.scss b/core/src/components/toggle/toggle.md.scss index d0a3bfda360..9f8ae5ba632 100644 --- a/core/src/components/toggle/toggle.md.scss +++ b/core/src/components/toggle/toggle.md.scss @@ -1,4 +1,4 @@ -@import "./toggle"; +@import "./toggle.native"; @import "./toggle.md.vars"; // Material Design Toggle diff --git a/core/src/components/toggle/toggle.native.scss b/core/src/components/toggle/toggle.native.scss new file mode 100644 index 00000000000..d28059e8de3 --- /dev/null +++ b/core/src/components/toggle/toggle.native.scss @@ -0,0 +1,138 @@ +@import "../../themes/native/native.globals"; +@import "toggle.common"; + +:host { + z-index: $z-index-item-input; +} + +:host(.in-item) .label-text-wrapper { + @include margin($toggle-item-label-margin-top, null, $toggle-item-label-margin-bottom, null); +} + +:host(.in-item.toggle-label-placement-stacked) .label-text-wrapper { + @include margin($toggle-item-label-margin-top, null, $form-control-label-margin, null); +} + +:host(.in-item.toggle-label-placement-stacked) .native-wrapper { + @include margin(null, null, $toggle-item-label-margin-bottom, null); +} + +// Input Label +// ---------------------------------------------------------------- + +.label-text-wrapper { + text-overflow: ellipsis; + + white-space: nowrap; + + overflow: hidden; +} + +// Toggle Justify +// -------------------------------------------------- + +:host(.toggle-justify-space-between) .toggle-wrapper { + justify-content: space-between; +} + +:host(.toggle-justify-start) .toggle-wrapper { + justify-content: start; +} + +:host(.toggle-justify-end) .toggle-wrapper { + justify-content: end; +} + +// Toggle Align +// -------------------------------------------------- + +:host(.toggle-alignment-start) .toggle-wrapper { + align-items: start; +} + +:host(.toggle-alignment-center) .toggle-wrapper { + align-items: center; +} + +// Input Label Placement - Fixed +// ---------------------------------------------------------------- + +:host(.toggle-label-placement-fixed) .label-text-wrapper { + /** + * The margin between the label and + * the input should be on the end + * when the label sits at the start. + */ + @include margin(null, $form-control-label-margin, null, 0); +} + +/** +* Label is on the left of the input in LTR and +* on the right in RTL. Label also has a fixed width. +*/ +:host(.toggle-label-placement-fixed) .label-text-wrapper { + flex: 0 0 100px; + + width: 100px; + min-width: 100px; + max-width: 200px; +} + +// Toggle Label Placement - Stacked +// ---------------------------------------------------------------- + +/** +* Label is on top of the toggle. +*/ +:host(.toggle-label-placement-stacked) .toggle-wrapper { + flex-direction: column; +} + +:host(.toggle-label-placement-stacked) .label-text-wrapper { + @include transform(scale(#{$form-control-label-stacked-scale})); + + /** + * The margin between the label and + * the toggle should be on the bottom + * when the label sits on top. + */ + @include margin(null, 0, $form-control-label-margin, 0); + + /** + * Label text should not extend + * beyond the bounds of the toggle. + */ + max-width: calc(100% / #{$form-control-label-stacked-scale}); +} + +:host(.toggle-label-placement-stacked.toggle-alignment-start) .label-text-wrapper { + @include transform-origin(start, top); +} + +:host(.toggle-label-placement-stacked.toggle-alignment-center) .label-text-wrapper { + @include transform-origin(center, top); +} + +// Toggle Label Placement - Start +// ---------------------------------------------------------------- + +:host(.toggle-label-placement-start) .label-text-wrapper { + /** + * The margin between the label and + * the input should be on the end + * when the label sits at the start. + */ + @include margin(null, $form-control-label-margin, null, 0); +} + +// Toggle Label Placement - End +// ---------------------------------------------------------------- + +/** +* The margin between the label and +* the input should be on the start +* when the label sits at the end. +*/ +:host(.toggle-label-placement-end) .label-text-wrapper { + @include margin(null, 0, null, $form-control-label-margin); +} diff --git a/core/src/components/toggle/toggle.tsx b/core/src/components/toggle/toggle.tsx index bbfc7d969cb..112fbb2c4b5 100644 --- a/core/src/components/toggle/toggle.tsx +++ b/core/src/components/toggle/toggle.tsx @@ -1,5 +1,5 @@ -import circleRegular from '@phosphor-icons/core/assets/regular/circle.svg'; -import lineVerticalRegular from '@phosphor-icons/core/assets/regular/line-vertical.svg'; +import checkRegular from '@phosphor-icons/core/assets/regular/check.svg'; +import minusRegular from '@phosphor-icons/core/assets/regular/minus.svg'; import type { ComponentInterface, EventEmitter } from '@stencil/core'; import { Component, Element, Event, Host, Prop, State, Watch, h } from '@stencil/core'; import { renderHiddenInput, inheritAriaAttributes } from '@utils/helpers'; @@ -30,7 +30,7 @@ import type { ToggleChangeEventDetail } from './toggle-interface'; styleUrls: { ios: 'toggle.ios.scss', md: 'toggle.md.scss', - ionic: 'toggle.md.scss', + ionic: 'toggle.ionic.scss', }, shadow: true, }) @@ -254,7 +254,7 @@ export class Toggle implements ComponentInterface { const theme = getIonTheme(this); const defaultIcons = { ios: removeOutline, - ionic: lineVerticalRegular, + ionic: checkRegular, md: checkmarkOutline, }; @@ -284,7 +284,7 @@ export class Toggle implements ComponentInterface { const theme = getIonTheme(this); const defaultIcons = { ios: ellipseOutline, - ionic: circleRegular, + ionic: minusRegular, md: removeOutline, }; @@ -334,7 +334,6 @@ export class Toggle implements ComponentInterface { theme === 'ios' && [this.renderOnOffSwitchLabels(true), this.renderOnOffSwitchLabels(false)]}
- {/* TODO(ROU-10830): The ionic theme will need to be moved up with ios when the design is implemented */} {enableOnOffLabels && (theme === 'md' || theme === 'ionic') && this.renderOnOffSwitchLabels(checked)}
@@ -352,6 +351,7 @@ export class Toggle implements ComponentInterface { const theme = getIonTheme(this); const value = this.getValue(); const rtl = isRTL(el) ? 'rtl' : 'ltr'; + const isIonicTheme = theme === 'ionic'; renderHiddenInput(true, el, name, checked ? value : '', disabled); return ( @@ -367,6 +367,8 @@ export class Toggle implements ComponentInterface { [`toggle-alignment-${alignment}`]: true, [`toggle-label-placement-${labelPlacement}`]: true, [`toggle-${rtl}`]: true, + 'ion-activatable': isIonicTheme, + 'ion-focusable': isIonicTheme, })} >