feat(toggle): add ionic theme styles (#29790)

Issue number: internal

---------

<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->

<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->

## What is the new behavior?
- Updated ionic theme styles for the toggle
- Added new states for the toggle (only for ionic theme)

## Does this introduce a breaking change?
- [ ] Yes
- [x] No

<!--
  If this introduces a breaking change:
1. Describe the impact and migration path for existing applications
below.
  2. Update the BREAKING.md file with the breaking change.
3. Add "BREAKING CHANGE: [...]" to the commit description when merging.
See
https://github.com/ionic-team/ionic-framework/blob/main/docs/CONTRIBUTING.md#footer
for more information.
-->


## Other information

<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->

---------

Co-authored-by: ionitron <[email protected]>
Co-authored-by: Maria Hutt <[email protected]>

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(

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(

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(

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(
+        `
+         <ion-toggle label-placement="start">Label</ion-toggle>
+       `,
+        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(
+        `
+         <ion-toggle label-placement="end">Label</ion-toggle>
+       `,
+        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(
+        `
+          <ion-toggle label-placement="start">Enable Notifications Enable Notifications Enable Notifications Enable Notifications Enable Notifications Enable Notifications Enable Notifications</ion-toggle>
+        `,
+        config
+      );
+
+      const toggle = page.locator('ion-toggle');
+      await expect(toggle).toHaveScreenshot(screenshot(`toggle-label-start-long-label`));
+    });
+  });
+});

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);

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(
+        `
+        <ion-toggle class="ion-focused">Label</ion-toggle>
+      `,
+        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(
+        `
+        <ion-toggle class="ion-activated">Label</ion-toggle>
+      `,
+        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(
+        `
+        <ion-toggle class="ion-activated" checked>Label</ion-toggle>
+      `,
+        config
+      );
+
+      const toggle = page.locator('ion-toggle');
+      await expect(toggle).toHaveScreenshot(screenshot(`toggle-checked-pressed`));
+    });
+  });
+});

core/src/components/toggle/toggle.scss → 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
 // --------------------------------------------------