diff --git a/core/api.txt b/core/api.txt index 70cd499a604..73135538efc 100644 --- a/core/api.txt +++ b/core/api.txt @@ -1948,6 +1948,8 @@ ion-toggle,prop,checked,boolean,false,false,false ion-toggle,prop,color,"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string & Record | undefined,undefined,false,true ion-toggle,prop,disabled,boolean,false,false,false ion-toggle,prop,enableOnOffLabels,boolean | undefined,config.get('toggleOnOffLabels'),false,false +ion-toggle,prop,errorText,string | undefined,undefined,false,false +ion-toggle,prop,helperText,string | undefined,undefined,false,false ion-toggle,prop,justify,"end" | "space-between" | "start" | undefined,undefined,false,false ion-toggle,prop,labelPlacement,"end" | "fixed" | "stacked" | "start",'start',false,false ion-toggle,prop,mode,"ios" | "md",undefined,false,false @@ -1981,8 +1983,11 @@ ion-toggle,css-prop,--track-background,ios ion-toggle,css-prop,--track-background,md ion-toggle,css-prop,--track-background-checked,ios ion-toggle,css-prop,--track-background-checked,md +ion-toggle,part,error-text ion-toggle,part,handle +ion-toggle,part,helper-text ion-toggle,part,label +ion-toggle,part,supporting-text ion-toggle,part,track ion-toolbar,shadow diff --git a/core/src/components.d.ts b/core/src/components.d.ts index bd7426116f1..b4587c7c2d9 100644 --- a/core/src/components.d.ts +++ b/core/src/components.d.ts @@ -3284,6 +3284,14 @@ export namespace Components { * Enables the on/off accessibility switch labels within the toggle. */ "enableOnOffLabels": boolean | undefined; + /** + * Text that is placed under the toggle label and displayed when an error is detected. + */ + "errorText"?: string; + /** + * Text that is placed under the toggle label and displayed when no error is detected. + */ + "helperText"?: string; /** * How to pack the label and toggle within a line. `"start"`: The label and toggle will appear on the left in LTR and on the right in RTL. `"end"`: The label and toggle will appear on the right in LTR and on the left in RTL. `"space-between"`: The label and toggle will appear on opposite ends of the line with space between the two elements. Setting this property will change the toggle `display` to `block`. */ @@ -8171,6 +8179,14 @@ declare namespace LocalJSX { * Enables the on/off accessibility switch labels within the toggle. */ "enableOnOffLabels"?: boolean | undefined; + /** + * Text that is placed under the toggle label and displayed when an error is detected. + */ + "errorText"?: string; + /** + * Text that is placed under the toggle label and displayed when no error is detected. + */ + "helperText"?: string; /** * How to pack the label and toggle within a line. `"start"`: The label and toggle will appear on the left in LTR and on the right in RTL. `"end"`: The label and toggle will appear on the right in LTR and on the left in RTL. `"space-between"`: The label and toggle will appear on opposite ends of the line with space between the two elements. Setting this property will change the toggle `display` to `block`. */ diff --git a/core/src/components/toggle/test/bottom-content/index.html b/core/src/components/toggle/test/bottom-content/index.html new file mode 100644 index 00000000000..d2537f01083 --- /dev/null +++ b/core/src/components/toggle/test/bottom-content/index.html @@ -0,0 +1,132 @@ + + + + + Toggle - Bottom Content + + + + + + + + + + + + + + Toggle - Bottom Content + + + + +
+
+

No Hint

+ Label +
+ +
+

No Hint: Stacked

+ Label +
+ +
+

Helper Text: Label Start

+ Label +
+ +
+

Helper Text: Label End

+ Label +
+ +
+

Helper Text: Label Stacked

+ Label +
+ +
+

Helper Text: Label Fixed

+ Label +
+ +
+

Error Text: Label Start

+ Label +
+ +
+

Error Text: Label End

+ Label +
+ +
+

Error Text: Label Stacked

+ Label +
+ +
+

Error Text: Label Fixed

+ Label +
+
+ + + + + + + + diff --git a/core/src/components/toggle/test/bottom-content/toggle.e2e.ts b/core/src/components/toggle/test/bottom-content/toggle.e2e.ts new file mode 100644 index 00000000000..306831ad2f0 --- /dev/null +++ b/core/src/components/toggle/test/bottom-content/toggle.e2e.ts @@ -0,0 +1,198 @@ +import { expect } from '@playwright/test'; +import { configs, test } from '@utils/test/playwright'; + +/** + * Functionality is the same across modes & directions + */ +configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) => { + test.describe(title('toggle: bottom content functionality'), () => { + test('should not render bottom content if no hint is enabled', async ({ page }) => { + await page.setContent(`Label`, config); + + const bottomEl = page.locator('ion-toggle .toggle-bottom'); + await expect(bottomEl).toHaveCount(0); + }); + test('helper text should be visible initially', async ({ page }) => { + await page.setContent(`Label`, config); + + const helperText = page.locator('ion-toggle .helper-text'); + const errorText = page.locator('ion-toggle .error-text'); + await expect(helperText).toBeVisible(); + await expect(helperText).toHaveText('Helper text'); + await expect(errorText).toBeHidden(); + }); + test('toggle should have an aria-describedby attribute when helper text is present', async ({ page }) => { + await page.setContent(`Label`, config); + + const toggle = page.locator('ion-toggle'); + const helperText = page.locator('ion-toggle .helper-text'); + const helperTextId = await helperText.getAttribute('id'); + const ariaDescribedBy = await toggle.getAttribute('aria-describedby'); + + expect(ariaDescribedBy).toBe(helperTextId); + }); + test('error text should be visible when toggle is invalid', async ({ page }) => { + await page.setContent( + `Label`, + config + ); + + const helperText = page.locator('ion-toggle .helper-text'); + const errorText = page.locator('ion-toggle .error-text'); + await expect(helperText).toBeHidden(); + await expect(errorText).toBeVisible(); + await expect(errorText).toHaveText('Error text'); + }); + + test('toggle should have an aria-describedby attribute when error text is present', async ({ page }) => { + await page.setContent( + `Label`, + config + ); + + const toggle = page.locator('ion-toggle'); + const errorText = page.locator('ion-toggle .error-text'); + const errorTextId = await errorText.getAttribute('id'); + const ariaDescribedBy = await toggle.getAttribute('aria-describedby'); + + expect(ariaDescribedBy).toBe(errorTextId); + }); + test('toggle should have aria-invalid attribute when toggle is invalid', async ({ page }) => { + await page.setContent( + `Label`, + config + ); + + const toggle = page.locator('ion-toggle'); + + await expect(toggle).toHaveAttribute('aria-invalid'); + }); + test('toggle should not have aria-invalid attribute when toggle is valid', async ({ page }) => { + await page.setContent(`Label`, config); + + const toggle = page.locator('ion-toggle'); + + await expect(toggle).not.toHaveAttribute('aria-invalid'); + }); + test('toggle should not have aria-describedby attribute when no hint or error text is present', async ({ + page, + }) => { + await page.setContent(`Label`, config); + + const toggle = page.locator('ion-toggle'); + + await expect(toggle).not.toHaveAttribute('aria-describedby'); + }); + }); +}); + +/** + * Rendering is different across modes + */ +configs({ modes: ['ios', 'md'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => { + test.describe(title('toggle: helper text rendering'), () => { + // Check the default label placement, end, and stacked + [undefined, 'end', 'stacked'].forEach((labelPlacement) => { + test(`${ + labelPlacement ? `${labelPlacement} label - ` : '' + }should not have visual regressions when rendering helper text`, async ({ page }) => { + await page.setContent( + `Label`, + config + ); + + const bottomEl = page.locator('ion-toggle'); + await expect(bottomEl).toHaveScreenshot( + screenshot(`toggle-helper-text${labelPlacement ? `-${labelPlacement}` : ''}`) + ); + }); + + test(`${ + labelPlacement ? `${labelPlacement} label - ` : '' + }should not have visual regressions when rendering helper text with wrapping text`, async ({ page }) => { + await page.setContent( + `Label`, + config + ); + + const bottomEl = page.locator('ion-toggle'); + await expect(bottomEl).toHaveScreenshot( + screenshot(`toggle-helper-text${labelPlacement ? `-${labelPlacement}` : ''}-wrapping`) + ); + }); + }); + }); + + test.describe(title('toggle: error text rendering'), () => { + test('should not have visual regressions when rendering error text', async ({ page }) => { + await page.setContent( + `Label`, + config + ); + + const bottomEl = page.locator('ion-toggle'); + await expect(bottomEl).toHaveScreenshot(screenshot(`toggle-error-text`)); + }); + test('should not have visual regressions when rendering error text with a stacked label', async ({ page }) => { + await page.setContent( + `Label`, + config + ); + + const bottomEl = page.locator('ion-toggle'); + await expect(bottomEl).toHaveScreenshot(screenshot(`toggle-error-text-stacked-label`)); + }); + }); +}); + +/** + * Customizing supporting text is the same across modes and directions + */ +configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => { + test.describe(title('toggle: supporting text customization'), () => { + test('should not have visual regressions when rendering helper text with custom css', async ({ page }) => { + await page.setContent( + ` + + Label + `, + config + ); + + const helperText = page.locator('ion-toggle'); + await expect(helperText).toHaveScreenshot(screenshot(`toggle-helper-text-custom-css`)); + }); + test('should not have visual regressions when rendering error text with custom css', async ({ page }) => { + await page.setContent( + ` + + Label + `, + config + ); + + const errorText = page.locator('ion-toggle'); + await expect(errorText).toHaveScreenshot(screenshot(`toggle-error-text-custom-css`)); + }); + }); +}); diff --git a/core/src/components/toggle/test/bottom-content/toggle.e2e.ts-snapshots/toggle-error-text-custom-css-md-ltr-Mobile-Chrome-linux.png b/core/src/components/toggle/test/bottom-content/toggle.e2e.ts-snapshots/toggle-error-text-custom-css-md-ltr-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..2b7a724e9fe Binary files /dev/null and b/core/src/components/toggle/test/bottom-content/toggle.e2e.ts-snapshots/toggle-error-text-custom-css-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/toggle/test/bottom-content/toggle.e2e.ts-snapshots/toggle-error-text-custom-css-md-ltr-Mobile-Firefox-linux.png b/core/src/components/toggle/test/bottom-content/toggle.e2e.ts-snapshots/toggle-error-text-custom-css-md-ltr-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..b0f6f4e36c7 Binary files /dev/null and b/core/src/components/toggle/test/bottom-content/toggle.e2e.ts-snapshots/toggle-error-text-custom-css-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/toggle/test/bottom-content/toggle.e2e.ts-snapshots/toggle-error-text-custom-css-md-ltr-Mobile-Safari-linux.png b/core/src/components/toggle/test/bottom-content/toggle.e2e.ts-snapshots/toggle-error-text-custom-css-md-ltr-Mobile-Safari-linux.png new file mode 100644 index 00000000000..17de22cf581 Binary files /dev/null and b/core/src/components/toggle/test/bottom-content/toggle.e2e.ts-snapshots/toggle-error-text-custom-css-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/toggle/test/bottom-content/toggle.e2e.ts-snapshots/toggle-error-text-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/toggle/test/bottom-content/toggle.e2e.ts-snapshots/toggle-error-text-ios-ltr-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..0250e0edac0 Binary files /dev/null and b/core/src/components/toggle/test/bottom-content/toggle.e2e.ts-snapshots/toggle-error-text-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/toggle/test/bottom-content/toggle.e2e.ts-snapshots/toggle-error-text-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/toggle/test/bottom-content/toggle.e2e.ts-snapshots/toggle-error-text-ios-ltr-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..b20ec556ba6 Binary files /dev/null and b/core/src/components/toggle/test/bottom-content/toggle.e2e.ts-snapshots/toggle-error-text-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/toggle/test/bottom-content/toggle.e2e.ts-snapshots/toggle-error-text-ios-ltr-Mobile-Safari-linux.png b/core/src/components/toggle/test/bottom-content/toggle.e2e.ts-snapshots/toggle-error-text-ios-ltr-Mobile-Safari-linux.png new file mode 100644 index 00000000000..46546ab7b42 Binary files /dev/null and b/core/src/components/toggle/test/bottom-content/toggle.e2e.ts-snapshots/toggle-error-text-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/toggle/test/bottom-content/toggle.e2e.ts-snapshots/toggle-error-text-md-ltr-Mobile-Chrome-linux.png b/core/src/components/toggle/test/bottom-content/toggle.e2e.ts-snapshots/toggle-error-text-md-ltr-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..c9cf7c3b15a Binary files /dev/null and b/core/src/components/toggle/test/bottom-content/toggle.e2e.ts-snapshots/toggle-error-text-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/toggle/test/bottom-content/toggle.e2e.ts-snapshots/toggle-error-text-md-ltr-Mobile-Firefox-linux.png b/core/src/components/toggle/test/bottom-content/toggle.e2e.ts-snapshots/toggle-error-text-md-ltr-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..feccd3a9854 Binary files /dev/null and b/core/src/components/toggle/test/bottom-content/toggle.e2e.ts-snapshots/toggle-error-text-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/toggle/test/bottom-content/toggle.e2e.ts-snapshots/toggle-error-text-md-ltr-Mobile-Safari-linux.png b/core/src/components/toggle/test/bottom-content/toggle.e2e.ts-snapshots/toggle-error-text-md-ltr-Mobile-Safari-linux.png new file mode 100644 index 00000000000..9f097ef6a56 Binary files /dev/null and b/core/src/components/toggle/test/bottom-content/toggle.e2e.ts-snapshots/toggle-error-text-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/toggle/test/bottom-content/toggle.e2e.ts-snapshots/toggle-error-text-stacked-label-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/toggle/test/bottom-content/toggle.e2e.ts-snapshots/toggle-error-text-stacked-label-ios-ltr-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..adcae6b810d Binary files /dev/null and b/core/src/components/toggle/test/bottom-content/toggle.e2e.ts-snapshots/toggle-error-text-stacked-label-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/toggle/test/bottom-content/toggle.e2e.ts-snapshots/toggle-error-text-stacked-label-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/toggle/test/bottom-content/toggle.e2e.ts-snapshots/toggle-error-text-stacked-label-ios-ltr-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..54a9d8ead96 Binary files /dev/null and b/core/src/components/toggle/test/bottom-content/toggle.e2e.ts-snapshots/toggle-error-text-stacked-label-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/toggle/test/bottom-content/toggle.e2e.ts-snapshots/toggle-error-text-stacked-label-ios-ltr-Mobile-Safari-linux.png b/core/src/components/toggle/test/bottom-content/toggle.e2e.ts-snapshots/toggle-error-text-stacked-label-ios-ltr-Mobile-Safari-linux.png new file mode 100644 index 00000000000..63b1b3e7d99 Binary files /dev/null and b/core/src/components/toggle/test/bottom-content/toggle.e2e.ts-snapshots/toggle-error-text-stacked-label-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/toggle/test/bottom-content/toggle.e2e.ts-snapshots/toggle-error-text-stacked-label-md-ltr-Mobile-Chrome-linux.png b/core/src/components/toggle/test/bottom-content/toggle.e2e.ts-snapshots/toggle-error-text-stacked-label-md-ltr-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..2c5bacb4b08 Binary files /dev/null and b/core/src/components/toggle/test/bottom-content/toggle.e2e.ts-snapshots/toggle-error-text-stacked-label-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/toggle/test/bottom-content/toggle.e2e.ts-snapshots/toggle-error-text-stacked-label-md-ltr-Mobile-Firefox-linux.png b/core/src/components/toggle/test/bottom-content/toggle.e2e.ts-snapshots/toggle-error-text-stacked-label-md-ltr-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..392392a234f Binary files /dev/null and b/core/src/components/toggle/test/bottom-content/toggle.e2e.ts-snapshots/toggle-error-text-stacked-label-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/toggle/test/bottom-content/toggle.e2e.ts-snapshots/toggle-error-text-stacked-label-md-ltr-Mobile-Safari-linux.png b/core/src/components/toggle/test/bottom-content/toggle.e2e.ts-snapshots/toggle-error-text-stacked-label-md-ltr-Mobile-Safari-linux.png new file mode 100644 index 00000000000..539362ef9f2 Binary files /dev/null and b/core/src/components/toggle/test/bottom-content/toggle.e2e.ts-snapshots/toggle-error-text-stacked-label-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/toggle/test/bottom-content/toggle.e2e.ts-snapshots/toggle-helper-text-custom-css-md-ltr-Mobile-Chrome-linux.png b/core/src/components/toggle/test/bottom-content/toggle.e2e.ts-snapshots/toggle-helper-text-custom-css-md-ltr-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..e4a5166ecd0 Binary files /dev/null and b/core/src/components/toggle/test/bottom-content/toggle.e2e.ts-snapshots/toggle-helper-text-custom-css-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/toggle/test/bottom-content/toggle.e2e.ts-snapshots/toggle-helper-text-custom-css-md-ltr-Mobile-Firefox-linux.png b/core/src/components/toggle/test/bottom-content/toggle.e2e.ts-snapshots/toggle-helper-text-custom-css-md-ltr-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..ddfda93ed97 Binary files /dev/null and b/core/src/components/toggle/test/bottom-content/toggle.e2e.ts-snapshots/toggle-helper-text-custom-css-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/toggle/test/bottom-content/toggle.e2e.ts-snapshots/toggle-helper-text-custom-css-md-ltr-Mobile-Safari-linux.png b/core/src/components/toggle/test/bottom-content/toggle.e2e.ts-snapshots/toggle-helper-text-custom-css-md-ltr-Mobile-Safari-linux.png new file mode 100644 index 00000000000..500a223bc01 Binary files /dev/null and b/core/src/components/toggle/test/bottom-content/toggle.e2e.ts-snapshots/toggle-helper-text-custom-css-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/toggle/test/bottom-content/toggle.e2e.ts-snapshots/toggle-helper-text-end-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/toggle/test/bottom-content/toggle.e2e.ts-snapshots/toggle-helper-text-end-ios-ltr-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..0015b76f3b7 Binary files /dev/null and b/core/src/components/toggle/test/bottom-content/toggle.e2e.ts-snapshots/toggle-helper-text-end-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/toggle/test/bottom-content/toggle.e2e.ts-snapshots/toggle-helper-text-end-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/toggle/test/bottom-content/toggle.e2e.ts-snapshots/toggle-helper-text-end-ios-ltr-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..fc553334bd8 Binary files /dev/null and b/core/src/components/toggle/test/bottom-content/toggle.e2e.ts-snapshots/toggle-helper-text-end-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/toggle/test/bottom-content/toggle.e2e.ts-snapshots/toggle-helper-text-end-ios-ltr-Mobile-Safari-linux.png b/core/src/components/toggle/test/bottom-content/toggle.e2e.ts-snapshots/toggle-helper-text-end-ios-ltr-Mobile-Safari-linux.png new file mode 100644 index 00000000000..3b83514e2bf Binary files /dev/null and b/core/src/components/toggle/test/bottom-content/toggle.e2e.ts-snapshots/toggle-helper-text-end-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/toggle/test/bottom-content/toggle.e2e.ts-snapshots/toggle-helper-text-end-md-ltr-Mobile-Chrome-linux.png b/core/src/components/toggle/test/bottom-content/toggle.e2e.ts-snapshots/toggle-helper-text-end-md-ltr-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..e4e064fa8c8 Binary files /dev/null and b/core/src/components/toggle/test/bottom-content/toggle.e2e.ts-snapshots/toggle-helper-text-end-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/toggle/test/bottom-content/toggle.e2e.ts-snapshots/toggle-helper-text-end-md-ltr-Mobile-Firefox-linux.png b/core/src/components/toggle/test/bottom-content/toggle.e2e.ts-snapshots/toggle-helper-text-end-md-ltr-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..f22f29ebff2 Binary files /dev/null and b/core/src/components/toggle/test/bottom-content/toggle.e2e.ts-snapshots/toggle-helper-text-end-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/toggle/test/bottom-content/toggle.e2e.ts-snapshots/toggle-helper-text-end-md-ltr-Mobile-Safari-linux.png b/core/src/components/toggle/test/bottom-content/toggle.e2e.ts-snapshots/toggle-helper-text-end-md-ltr-Mobile-Safari-linux.png new file mode 100644 index 00000000000..e8fc0b0b148 Binary files /dev/null and b/core/src/components/toggle/test/bottom-content/toggle.e2e.ts-snapshots/toggle-helper-text-end-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/toggle/test/bottom-content/toggle.e2e.ts-snapshots/toggle-helper-text-end-wrapping-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/toggle/test/bottom-content/toggle.e2e.ts-snapshots/toggle-helper-text-end-wrapping-ios-ltr-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..1756f99d31e Binary files /dev/null and b/core/src/components/toggle/test/bottom-content/toggle.e2e.ts-snapshots/toggle-helper-text-end-wrapping-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/toggle/test/bottom-content/toggle.e2e.ts-snapshots/toggle-helper-text-end-wrapping-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/toggle/test/bottom-content/toggle.e2e.ts-snapshots/toggle-helper-text-end-wrapping-ios-ltr-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..3f699287ba8 Binary files /dev/null and b/core/src/components/toggle/test/bottom-content/toggle.e2e.ts-snapshots/toggle-helper-text-end-wrapping-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/toggle/test/bottom-content/toggle.e2e.ts-snapshots/toggle-helper-text-end-wrapping-ios-ltr-Mobile-Safari-linux.png b/core/src/components/toggle/test/bottom-content/toggle.e2e.ts-snapshots/toggle-helper-text-end-wrapping-ios-ltr-Mobile-Safari-linux.png new file mode 100644 index 00000000000..896289c846e Binary files /dev/null and b/core/src/components/toggle/test/bottom-content/toggle.e2e.ts-snapshots/toggle-helper-text-end-wrapping-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/toggle/test/bottom-content/toggle.e2e.ts-snapshots/toggle-helper-text-end-wrapping-md-ltr-Mobile-Chrome-linux.png b/core/src/components/toggle/test/bottom-content/toggle.e2e.ts-snapshots/toggle-helper-text-end-wrapping-md-ltr-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..99b0699dce3 Binary files /dev/null and b/core/src/components/toggle/test/bottom-content/toggle.e2e.ts-snapshots/toggle-helper-text-end-wrapping-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/toggle/test/bottom-content/toggle.e2e.ts-snapshots/toggle-helper-text-end-wrapping-md-ltr-Mobile-Firefox-linux.png b/core/src/components/toggle/test/bottom-content/toggle.e2e.ts-snapshots/toggle-helper-text-end-wrapping-md-ltr-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..ff7cff4d9ba Binary files /dev/null and b/core/src/components/toggle/test/bottom-content/toggle.e2e.ts-snapshots/toggle-helper-text-end-wrapping-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/toggle/test/bottom-content/toggle.e2e.ts-snapshots/toggle-helper-text-end-wrapping-md-ltr-Mobile-Safari-linux.png b/core/src/components/toggle/test/bottom-content/toggle.e2e.ts-snapshots/toggle-helper-text-end-wrapping-md-ltr-Mobile-Safari-linux.png new file mode 100644 index 00000000000..528ebd678a8 Binary files /dev/null and b/core/src/components/toggle/test/bottom-content/toggle.e2e.ts-snapshots/toggle-helper-text-end-wrapping-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/toggle/test/bottom-content/toggle.e2e.ts-snapshots/toggle-helper-text-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/toggle/test/bottom-content/toggle.e2e.ts-snapshots/toggle-helper-text-ios-ltr-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..9e3b8e21ffd Binary files /dev/null and b/core/src/components/toggle/test/bottom-content/toggle.e2e.ts-snapshots/toggle-helper-text-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/toggle/test/bottom-content/toggle.e2e.ts-snapshots/toggle-helper-text-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/toggle/test/bottom-content/toggle.e2e.ts-snapshots/toggle-helper-text-ios-ltr-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..b8de8497a13 Binary files /dev/null and b/core/src/components/toggle/test/bottom-content/toggle.e2e.ts-snapshots/toggle-helper-text-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/toggle/test/bottom-content/toggle.e2e.ts-snapshots/toggle-helper-text-ios-ltr-Mobile-Safari-linux.png b/core/src/components/toggle/test/bottom-content/toggle.e2e.ts-snapshots/toggle-helper-text-ios-ltr-Mobile-Safari-linux.png new file mode 100644 index 00000000000..b1fc904d265 Binary files /dev/null and b/core/src/components/toggle/test/bottom-content/toggle.e2e.ts-snapshots/toggle-helper-text-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/toggle/test/bottom-content/toggle.e2e.ts-snapshots/toggle-helper-text-md-ltr-Mobile-Chrome-linux.png b/core/src/components/toggle/test/bottom-content/toggle.e2e.ts-snapshots/toggle-helper-text-md-ltr-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..c2740175a67 Binary files /dev/null and b/core/src/components/toggle/test/bottom-content/toggle.e2e.ts-snapshots/toggle-helper-text-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/toggle/test/bottom-content/toggle.e2e.ts-snapshots/toggle-helper-text-md-ltr-Mobile-Firefox-linux.png b/core/src/components/toggle/test/bottom-content/toggle.e2e.ts-snapshots/toggle-helper-text-md-ltr-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..ba1d128eb28 Binary files /dev/null and b/core/src/components/toggle/test/bottom-content/toggle.e2e.ts-snapshots/toggle-helper-text-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/toggle/test/bottom-content/toggle.e2e.ts-snapshots/toggle-helper-text-md-ltr-Mobile-Safari-linux.png b/core/src/components/toggle/test/bottom-content/toggle.e2e.ts-snapshots/toggle-helper-text-md-ltr-Mobile-Safari-linux.png new file mode 100644 index 00000000000..a1e236e7eaa Binary files /dev/null and b/core/src/components/toggle/test/bottom-content/toggle.e2e.ts-snapshots/toggle-helper-text-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/toggle/test/bottom-content/toggle.e2e.ts-snapshots/toggle-helper-text-stacked-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/toggle/test/bottom-content/toggle.e2e.ts-snapshots/toggle-helper-text-stacked-ios-ltr-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..0f74d3ae43d Binary files /dev/null and b/core/src/components/toggle/test/bottom-content/toggle.e2e.ts-snapshots/toggle-helper-text-stacked-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/toggle/test/bottom-content/toggle.e2e.ts-snapshots/toggle-helper-text-stacked-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/toggle/test/bottom-content/toggle.e2e.ts-snapshots/toggle-helper-text-stacked-ios-ltr-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..04470670915 Binary files /dev/null and b/core/src/components/toggle/test/bottom-content/toggle.e2e.ts-snapshots/toggle-helper-text-stacked-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/toggle/test/bottom-content/toggle.e2e.ts-snapshots/toggle-helper-text-stacked-ios-ltr-Mobile-Safari-linux.png b/core/src/components/toggle/test/bottom-content/toggle.e2e.ts-snapshots/toggle-helper-text-stacked-ios-ltr-Mobile-Safari-linux.png new file mode 100644 index 00000000000..dc098631283 Binary files /dev/null and b/core/src/components/toggle/test/bottom-content/toggle.e2e.ts-snapshots/toggle-helper-text-stacked-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/toggle/test/bottom-content/toggle.e2e.ts-snapshots/toggle-helper-text-stacked-md-ltr-Mobile-Chrome-linux.png b/core/src/components/toggle/test/bottom-content/toggle.e2e.ts-snapshots/toggle-helper-text-stacked-md-ltr-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..fad2e2ab83d Binary files /dev/null and b/core/src/components/toggle/test/bottom-content/toggle.e2e.ts-snapshots/toggle-helper-text-stacked-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/toggle/test/bottom-content/toggle.e2e.ts-snapshots/toggle-helper-text-stacked-md-ltr-Mobile-Firefox-linux.png b/core/src/components/toggle/test/bottom-content/toggle.e2e.ts-snapshots/toggle-helper-text-stacked-md-ltr-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..3b30ff9a221 Binary files /dev/null and b/core/src/components/toggle/test/bottom-content/toggle.e2e.ts-snapshots/toggle-helper-text-stacked-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/toggle/test/bottom-content/toggle.e2e.ts-snapshots/toggle-helper-text-stacked-md-ltr-Mobile-Safari-linux.png b/core/src/components/toggle/test/bottom-content/toggle.e2e.ts-snapshots/toggle-helper-text-stacked-md-ltr-Mobile-Safari-linux.png new file mode 100644 index 00000000000..5e2aad8c6be Binary files /dev/null and b/core/src/components/toggle/test/bottom-content/toggle.e2e.ts-snapshots/toggle-helper-text-stacked-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/toggle/test/bottom-content/toggle.e2e.ts-snapshots/toggle-helper-text-stacked-wrapping-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/toggle/test/bottom-content/toggle.e2e.ts-snapshots/toggle-helper-text-stacked-wrapping-ios-ltr-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..a45dbd73c18 Binary files /dev/null and b/core/src/components/toggle/test/bottom-content/toggle.e2e.ts-snapshots/toggle-helper-text-stacked-wrapping-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/toggle/test/bottom-content/toggle.e2e.ts-snapshots/toggle-helper-text-stacked-wrapping-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/toggle/test/bottom-content/toggle.e2e.ts-snapshots/toggle-helper-text-stacked-wrapping-ios-ltr-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..9ef4441bff8 Binary files /dev/null and b/core/src/components/toggle/test/bottom-content/toggle.e2e.ts-snapshots/toggle-helper-text-stacked-wrapping-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/toggle/test/bottom-content/toggle.e2e.ts-snapshots/toggle-helper-text-stacked-wrapping-ios-ltr-Mobile-Safari-linux.png b/core/src/components/toggle/test/bottom-content/toggle.e2e.ts-snapshots/toggle-helper-text-stacked-wrapping-ios-ltr-Mobile-Safari-linux.png new file mode 100644 index 00000000000..8e9ddf157ba Binary files /dev/null and b/core/src/components/toggle/test/bottom-content/toggle.e2e.ts-snapshots/toggle-helper-text-stacked-wrapping-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/toggle/test/bottom-content/toggle.e2e.ts-snapshots/toggle-helper-text-stacked-wrapping-md-ltr-Mobile-Chrome-linux.png b/core/src/components/toggle/test/bottom-content/toggle.e2e.ts-snapshots/toggle-helper-text-stacked-wrapping-md-ltr-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..8c7250ec50a Binary files /dev/null and b/core/src/components/toggle/test/bottom-content/toggle.e2e.ts-snapshots/toggle-helper-text-stacked-wrapping-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/toggle/test/bottom-content/toggle.e2e.ts-snapshots/toggle-helper-text-stacked-wrapping-md-ltr-Mobile-Firefox-linux.png b/core/src/components/toggle/test/bottom-content/toggle.e2e.ts-snapshots/toggle-helper-text-stacked-wrapping-md-ltr-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..2ea0049324d Binary files /dev/null and b/core/src/components/toggle/test/bottom-content/toggle.e2e.ts-snapshots/toggle-helper-text-stacked-wrapping-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/toggle/test/bottom-content/toggle.e2e.ts-snapshots/toggle-helper-text-stacked-wrapping-md-ltr-Mobile-Safari-linux.png b/core/src/components/toggle/test/bottom-content/toggle.e2e.ts-snapshots/toggle-helper-text-stacked-wrapping-md-ltr-Mobile-Safari-linux.png new file mode 100644 index 00000000000..0b9c4106d92 Binary files /dev/null and b/core/src/components/toggle/test/bottom-content/toggle.e2e.ts-snapshots/toggle-helper-text-stacked-wrapping-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/toggle/test/bottom-content/toggle.e2e.ts-snapshots/toggle-helper-text-wrapping-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/toggle/test/bottom-content/toggle.e2e.ts-snapshots/toggle-helper-text-wrapping-ios-ltr-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..a2af24cd421 Binary files /dev/null and b/core/src/components/toggle/test/bottom-content/toggle.e2e.ts-snapshots/toggle-helper-text-wrapping-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/toggle/test/bottom-content/toggle.e2e.ts-snapshots/toggle-helper-text-wrapping-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/toggle/test/bottom-content/toggle.e2e.ts-snapshots/toggle-helper-text-wrapping-ios-ltr-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..aa72e387dca Binary files /dev/null and b/core/src/components/toggle/test/bottom-content/toggle.e2e.ts-snapshots/toggle-helper-text-wrapping-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/toggle/test/bottom-content/toggle.e2e.ts-snapshots/toggle-helper-text-wrapping-ios-ltr-Mobile-Safari-linux.png b/core/src/components/toggle/test/bottom-content/toggle.e2e.ts-snapshots/toggle-helper-text-wrapping-ios-ltr-Mobile-Safari-linux.png new file mode 100644 index 00000000000..b82aa472de6 Binary files /dev/null and b/core/src/components/toggle/test/bottom-content/toggle.e2e.ts-snapshots/toggle-helper-text-wrapping-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/toggle/test/bottom-content/toggle.e2e.ts-snapshots/toggle-helper-text-wrapping-md-ltr-Mobile-Chrome-linux.png b/core/src/components/toggle/test/bottom-content/toggle.e2e.ts-snapshots/toggle-helper-text-wrapping-md-ltr-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..64b42019310 Binary files /dev/null and b/core/src/components/toggle/test/bottom-content/toggle.e2e.ts-snapshots/toggle-helper-text-wrapping-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/toggle/test/bottom-content/toggle.e2e.ts-snapshots/toggle-helper-text-wrapping-md-ltr-Mobile-Firefox-linux.png b/core/src/components/toggle/test/bottom-content/toggle.e2e.ts-snapshots/toggle-helper-text-wrapping-md-ltr-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..35e2203fa5e Binary files /dev/null and b/core/src/components/toggle/test/bottom-content/toggle.e2e.ts-snapshots/toggle-helper-text-wrapping-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/toggle/test/bottom-content/toggle.e2e.ts-snapshots/toggle-helper-text-wrapping-md-ltr-Mobile-Safari-linux.png b/core/src/components/toggle/test/bottom-content/toggle.e2e.ts-snapshots/toggle-helper-text-wrapping-md-ltr-Mobile-Safari-linux.png new file mode 100644 index 00000000000..ccdc8f680fc Binary files /dev/null and b/core/src/components/toggle/test/bottom-content/toggle.e2e.ts-snapshots/toggle-helper-text-wrapping-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/toggle/test/item/index.html b/core/src/components/toggle/test/item/index.html index df48514445f..caeda79d077 100644 --- a/core/src/components/toggle/test/item/index.html +++ b/core/src/components/toggle/test/item/index.html @@ -47,6 +47,15 @@

Placement Start

+
+

Default Justify

+ + + Enable Notifications + + +
+

Justify Start

@@ -77,6 +86,15 @@

Justify Space Between

Placement End

+
+

Default Justify

+ + + Enable Notifications + + +
+

Justify Start

@@ -107,6 +125,15 @@

Justify Space Between

Placement Fixed

+
+

Default Justify

+ + + Enable Notifications + + +
+

Justify Start

@@ -167,6 +194,33 @@

Multiline Label

+
+ + + + Enable Notifications Enable Notifications Enable Notifications + + + +
+
+ + + + Enable Notifications Enable Notifications Enable Notifications + + + +
+
+ + + + Enable Notifications Enable Notifications Enable Notifications + + + +
diff --git a/core/src/components/toggle/test/item/toggle.e2e.ts b/core/src/components/toggle/test/item/toggle.e2e.ts index 1dff98c31be..f5db0dab8ab 100644 --- a/core/src/components/toggle/test/item/toggle.e2e.ts +++ b/core/src/components/toggle/test/item/toggle.e2e.ts @@ -53,7 +53,7 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => { configs({ directions: ['ltr'], modes: ['md'] }).forEach(({ title, screenshot, config }) => { test.describe(title('toggle: long label in item'), () => { - test('should render margins correctly when using long label in item', async ({ page }) => { + test('should not have visual regressions when using long label in item', async ({ page }) => { await page.setContent( ` @@ -71,8 +71,27 @@ configs({ directions: ['ltr'], modes: ['md'] }).forEach(({ title, screenshot, co }); }); + test.describe(title('toggle: end label in item'), () => { + test('should not have visual regressions when using end label in item', async ({ page }) => { + await page.setContent( + ` + + + + Enable Notifications + + + + `, + config + ); + const list = page.locator('ion-list'); + await expect(list).toHaveScreenshot(screenshot(`toggle-end-label-in-item`)); + }); + }); + test.describe(title('toggle: stacked label in item'), () => { - test('should render margins correctly when using stacked label in item', async ({ page }) => { + test('should not have visual regressions when using stacked label in item', async ({ page }) => { await page.setContent( ` diff --git a/core/src/components/toggle/test/item/toggle.e2e.ts-snapshots/toggle-end-label-in-item-md-ltr-Mobile-Chrome-linux.png b/core/src/components/toggle/test/item/toggle.e2e.ts-snapshots/toggle-end-label-in-item-md-ltr-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..218ee735ef5 Binary files /dev/null and b/core/src/components/toggle/test/item/toggle.e2e.ts-snapshots/toggle-end-label-in-item-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/toggle/test/item/toggle.e2e.ts-snapshots/toggle-end-label-in-item-md-ltr-Mobile-Firefox-linux.png b/core/src/components/toggle/test/item/toggle.e2e.ts-snapshots/toggle-end-label-in-item-md-ltr-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..73d9a9fd86a Binary files /dev/null and b/core/src/components/toggle/test/item/toggle.e2e.ts-snapshots/toggle-end-label-in-item-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/toggle/test/item/toggle.e2e.ts-snapshots/toggle-end-label-in-item-md-ltr-Mobile-Safari-linux.png b/core/src/components/toggle/test/item/toggle.e2e.ts-snapshots/toggle-end-label-in-item-md-ltr-Mobile-Safari-linux.png new file mode 100644 index 00000000000..d176f1ed59f Binary files /dev/null and b/core/src/components/toggle/test/item/toggle.e2e.ts-snapshots/toggle-end-label-in-item-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/toggle/toggle.scss b/core/src/components/toggle/toggle.scss index fa89fb2128f..ad78e471c0b 100644 --- a/core/src/components/toggle/toggle.scss +++ b/core/src/components/toggle/toggle.scss @@ -134,47 +134,53 @@ input { align-items: center; } -// Toggle Justify -// -------------------------------------------------- +// Toggle Bottom Content +// ---------------------------------------------------------------- + +.toggle-bottom { + @include padding(4px, null, null, null); + + display: flex; -:host(.toggle-justify-space-between) .toggle-wrapper { justify-content: space-between; -} -:host(.toggle-justify-start) .toggle-wrapper { - justify-content: start; + font-size: dynamic-font(12px); + + white-space: normal; } -:host(.toggle-justify-end) .toggle-wrapper { - justify-content: end; +:host(.toggle-label-placement-stacked) .toggle-bottom { + font-size: dynamic-font(16px); } -// Toggle Align -// -------------------------------------------------- +// Toggle Hint Text +// ---------------------------------------------------------------- +/** + * Error text should only be shown when .ion-invalid is + * present on the checkbox. Otherwise the helper text should + * be shown. + */ +.toggle-bottom .error-text { + display: none; -:host(.toggle-alignment-start) .toggle-wrapper { - align-items: start; + color: ion-color(danger, base); } -:host(.toggle-alignment-center) .toggle-wrapper { - align-items: center; -} +.toggle-bottom .helper-text { + display: block; -// Justify Content & Align Items -// --------------------------------------------- + color: $text-color-step-300; +} -// The toggle should be displayed as block when either justify -// or alignment is set; otherwise, these properties will have no -// visible effect. -:host(.toggle-justify-space-between), -:host(.toggle-justify-start), -:host(.toggle-justify-end), -:host(.toggle-alignment-start), -:host(.toggle-alignment-center) { +:host(.ion-touched.ion-invalid) .toggle-bottom .error-text { display: block; } +:host(.ion-touched.ion-invalid) .toggle-bottom .helper-text { + display: none; +} + // Toggle Label Placement - Start // ---------------------------------------------------------------- @@ -204,6 +210,8 @@ input { */ :host(.toggle-label-placement-end) .toggle-wrapper { flex-direction: row-reverse; + + justify-content: start; } /** @@ -247,6 +255,8 @@ input { */ :host(.toggle-label-placement-stacked) .toggle-wrapper { flex-direction: column; + + text-align: center; } :host(.toggle-label-placement-stacked) .label-text-wrapper { @@ -274,6 +284,46 @@ input { @include transform-origin(center, top); } +// 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; +} + +// Justify Content & Align Items +// --------------------------------------------- + +// The toggle should be displayed as block when either justify +// or alignment is set; otherwise, these properties will have no +// visible effect. +:host(.toggle-justify-space-between), +:host(.toggle-justify-start), +:host(.toggle-justify-end), +:host(.toggle-alignment-start), +:host(.toggle-alignment-center) { + display: block; +} + // Toggle Background Track: Unchecked // -------------------------------------------------- diff --git a/core/src/components/toggle/toggle.tsx b/core/src/components/toggle/toggle.tsx index e50a81bea57..8ccdb60d3dd 100644 --- a/core/src/components/toggle/toggle.tsx +++ b/core/src/components/toggle/toggle.tsx @@ -21,6 +21,9 @@ import type { ToggleChangeEventDetail } from './toggle-interface'; * @part track - The background track of the toggle. * @part handle - The toggle handle, or knob, used to change the checked state. * @part label - The label text describing the toggle. + * @part supporting-text - Supporting text displayed beneath the toggle label. + * @part helper-text - Supporting text displayed beneath the toggle label when the toggle is valid. + * @part error-text - Supporting text displayed beneath the toggle label when the toggle is invalid and touched. */ @Component({ tag: 'ion-toggle', @@ -32,6 +35,8 @@ import type { ToggleChangeEventDetail } from './toggle-interface'; }) export class Toggle implements ComponentInterface { private inputId = `ion-tg-${toggleIds++}`; + private helperTextId = `${this.inputId}-helper-text`; + private errorTextId = `${this.inputId}-error-text`; private gesture?: Gesture; private focusEl?: HTMLElement; private lastDrag = 0; @@ -65,6 +70,16 @@ export class Toggle implements ComponentInterface { */ @Prop() disabled = false; + /** + * Text that is placed under the toggle label and displayed when an error is detected. + */ + @Prop() errorText?: string; + + /** + * Text that is placed under the toggle label and displayed when no error is detected. + */ + @Prop() helperText?: string; + /** * The value of the toggle does not mean if it's checked or not, use the `checked` * property for that. @@ -297,6 +312,48 @@ export class Toggle implements ComponentInterface { return this.el.textContent !== ''; } + private getHintTextID(): string | undefined { + const { el, helperText, errorText, helperTextId, errorTextId } = this; + + if (el.classList.contains('ion-touched') && el.classList.contains('ion-invalid') && errorText) { + return errorTextId; + } + + if (helperText) { + return helperTextId; + } + + return undefined; + } + + /** + * Responsible for rendering helper text and error text. + * This element should only be rendered if hint text is set. + */ + private renderHintText() { + const { helperText, errorText, helperTextId, errorTextId } = this; + + /** + * undefined and empty string values should + * be treated as not having helper/error text. + */ + const hasHintText = !!helperText || !!errorText; + if (!hasHintText) { + return; + } + + return ( +
+
+ {helperText} +
+
+ {errorText} +
+
+ ); + } + render() { const { activated, color, checked, disabled, el, justify, labelPlacement, inputId, name, alignment, required } = this; @@ -308,6 +365,8 @@ export class Toggle implements ComponentInterface { return ( + {this.renderHintText()}
{this.renderToggleControl()}
diff --git a/packages/angular/src/directives/proxies.ts b/packages/angular/src/directives/proxies.ts index 69c2f742454..ce4560e0095 100644 --- a/packages/angular/src/directives/proxies.ts +++ b/packages/angular/src/directives/proxies.ts @@ -2473,14 +2473,14 @@ Shorthand for ionToastDidDismiss. @ProxyCmp({ - inputs: ['alignment', 'checked', 'color', 'disabled', 'enableOnOffLabels', 'justify', 'labelPlacement', 'mode', 'name', 'required', 'value'] + inputs: ['alignment', 'checked', 'color', 'disabled', 'enableOnOffLabels', 'errorText', 'helperText', 'justify', 'labelPlacement', 'mode', 'name', 'required', 'value'] }) @Component({ selector: 'ion-toggle', changeDetection: ChangeDetectionStrategy.OnPush, template: '', // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property - inputs: ['alignment', 'checked', 'color', 'disabled', 'enableOnOffLabels', 'justify', 'labelPlacement', 'mode', 'name', 'required', 'value'], + inputs: ['alignment', 'checked', 'color', 'disabled', 'enableOnOffLabels', 'errorText', 'helperText', 'justify', 'labelPlacement', 'mode', 'name', 'required', 'value'], }) export class IonToggle { protected el: HTMLIonToggleElement; diff --git a/packages/angular/standalone/src/directives/toggle.ts b/packages/angular/standalone/src/directives/toggle.ts index 76e37ad1a04..83915dc9eab 100644 --- a/packages/angular/standalone/src/directives/toggle.ts +++ b/packages/angular/standalone/src/directives/toggle.ts @@ -21,6 +21,8 @@ const TOGGLE_INPUTS = [ 'color', 'disabled', 'enableOnOffLabels', + 'errorText', + 'helperText', 'justify', 'labelPlacement', 'mode', diff --git a/packages/vue/src/proxies.ts b/packages/vue/src/proxies.ts index 79a0953d053..b194d5e9ce9 100644 --- a/packages/vue/src/proxies.ts +++ b/packages/vue/src/proxies.ts @@ -1015,6 +1015,8 @@ export const IonToggle = /*@__PURE__*/ defineContainer