diff --git a/core/api.txt b/core/api.txt index 6679bd89aa1..1069e42fb80 100644 --- a/core/api.txt +++ b/core/api.txt @@ -1619,8 +1619,10 @@ ion-select,prop,cancelText,string,'Cancel',false,false ion-select,prop,color,"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string & Record | undefined,undefined,false,true ion-select,prop,compareWith,((currentValue: any, compareValue: any) => boolean) | null | string | undefined,undefined,false,false ion-select,prop,disabled,boolean,false,false,false +ion-select,prop,errorText,string | undefined,undefined,false,false ion-select,prop,expandedIcon,string | undefined,undefined,false,false ion-select,prop,fill,"outline" | "solid" | undefined,undefined,false,false +ion-select,prop,helperText,string | undefined,undefined,false,false ion-select,prop,interface,"action-sheet" | "alert" | "modal" | "popover",'alert',false,false ion-select,prop,interfaceOptions,any,{},false,false ion-select,prop,justify,"end" | "space-between" | "start" | undefined,undefined,false,false @@ -1674,9 +1676,12 @@ ion-select,css-prop,--placeholder-opacity,md ion-select,css-prop,--ripple-color,ios ion-select,css-prop,--ripple-color,md ion-select,part,container +ion-select,part,error-text +ion-select,part,helper-text ion-select,part,icon ion-select,part,label ion-select,part,placeholder +ion-select,part,supporting-text ion-select,part,text ion-select-modal,scoped diff --git a/core/src/components.d.ts b/core/src/components.d.ts index 1bdfaa88545..a77c651c8ad 100644 --- a/core/src/components.d.ts +++ b/core/src/components.d.ts @@ -2755,6 +2755,10 @@ export namespace Components { * If `true`, the user cannot interact with the select. */ "disabled": boolean; + /** + * Text that is placed under the select and displayed when an error is detected. + */ + "errorText"?: string; /** * The toggle icon to show when the select is open. If defined, the icon rotation behavior in `md` mode will be disabled. If undefined, `toggleIcon` will be used for when the select is both open and closed. */ @@ -2763,6 +2767,10 @@ export namespace Components { * The fill for the item. If `"solid"` the item will have a background. If `"outline"` the item will be transparent with a border. Only available in `md` mode. */ "fill"?: 'outline' | 'solid'; + /** + * Text that is placed under the select and displayed when no error is detected. + */ + "helperText"?: string; /** * The interface the select should use: `action-sheet`, `popover`, `alert`, or `modal`. */ @@ -7568,6 +7576,10 @@ declare namespace LocalJSX { * If `true`, the user cannot interact with the select. */ "disabled"?: boolean; + /** + * Text that is placed under the select and displayed when an error is detected. + */ + "errorText"?: string; /** * The toggle icon to show when the select is open. If defined, the icon rotation behavior in `md` mode will be disabled. If undefined, `toggleIcon` will be used for when the select is both open and closed. */ @@ -7576,6 +7588,10 @@ declare namespace LocalJSX { * The fill for the item. If `"solid"` the item will have a background. If `"outline"` the item will be transparent with a border. Only available in `md` mode. */ "fill"?: 'outline' | 'solid'; + /** + * Text that is placed under the select and displayed when no error is detected. + */ + "helperText"?: string; /** * The interface the select should use: `action-sheet`, `popover`, `alert`, or `modal`. */ diff --git a/core/src/components/select/select.ios.scss b/core/src/components/select/select.ios.scss index a1d3f5df087..5b5e2f913ee 100644 --- a/core/src/components/select/select.ios.scss +++ b/core/src/components/select/select.ios.scss @@ -5,6 +5,8 @@ // -------------------------------------------------- :host { + --border-width: #{$hairlines-width}; + --border-color: #{$item-ios-border-color}; --highlight-height: 0px; } diff --git a/core/src/components/select/select.md.solid.scss b/core/src/components/select/select.md.solid.scss index 7d48ddb10be..321065ea803 100644 --- a/core/src/components/select/select.md.solid.scss +++ b/core/src/components/select/select.md.solid.scss @@ -32,6 +32,10 @@ --border-color: var(--highlight-color); } +/** + * The bottom content should never have + * a border with the solid style. + */ :host(.select-fill-solid) .select-bottom { border-top: none; } diff --git a/core/src/components/select/select.scss b/core/src/components/select/select.scss index 8b12f01ec1c..cd0a7707aa8 100644 --- a/core/src/components/select/select.scss +++ b/core/src/components/select/select.scss @@ -275,6 +275,71 @@ button { --highlight-color: var(--highlight-color-valid); } +// Select Bottom Content +// ---------------------------------------------------------------- + +.select-bottom { + /** + * The bottom content should take on the start and end + * padding so it is always aligned with either the label + * or the start of the text select. + */ + @include padding(5px, var(--padding-end), 0, var(--padding-start)); + + display: flex; + + justify-content: space-between; + + border-top: var(--border-width) var(--border-style) var(--border-color); + + font-size: dynamic-font(12px); + + white-space: normal; +} + +/** + * If the select has a validity state, the + * border and label should reflect that as a color. + * The invalid state should show if the select is + * invalid and has already been touched. + * The valid state should show if the select + * is valid, has already been touched, and + * is currently focused. Do not show the valid + * highlight when the select is blurred. + */ +:host(.has-focus.ion-valid), +:host(.ion-touched.ion-invalid) { + --border-color: var(--highlight-color); +} + +// Select Hint Text +// ---------------------------------------------------------------- + +/** + * Error text should only be shown when .ion-invalid is + * present on the select. Otherwise the helper text should + * be shown. + */ + .select-bottom .error-text { + display: none; + + color: var(--highlight-color-invalid); +} + +.select-bottom .helper-text { + display: block; + + color: $text-color-step-300; +} + +:host(.ion-touched.ion-invalid) .select-bottom .error-text { + display: block; +} + +:host(.ion-touched.ion-invalid) .select-bottom .helper-text { + display: none; +} + // Select Label // ---------------------------------------------------------------- diff --git a/core/src/components/select/select.tsx b/core/src/components/select/select.tsx index 3b4ef84f26f..9c1d9bbd3b0 100644 --- a/core/src/components/select/select.tsx +++ b/core/src/components/select/select.tsx @@ -41,6 +41,9 @@ import type { SelectChangeEventDetail, SelectInterface, SelectCompareFn } from ' * @part icon - The select icon container. * @part container - The container for the selected text or placeholder. * @part label - The label text describing the select. + * @part supporting-text - Supporting text displayed beneath the select. + * @part helper-text - Supporting text displayed beneath the select when the select is valid. + * @part error-text - Supporting text displayed beneath the select when the select is invalid and touched. */ @Component({ tag: 'ion-select', @@ -52,6 +55,8 @@ import type { SelectChangeEventDetail, SelectInterface, SelectCompareFn } from ' }) export class Select implements ComponentInterface { private inputId = `ion-sel-${selectIds++}`; + private helperTextId = `${this.inputId}-helper-text`; + private errorTextId = `${this.inputId}-error-text`; private overlay?: OverlaySelect; private focusEl?: HTMLButtonElement; private mutationO?: MutationObserver; @@ -98,6 +103,16 @@ export class Select implements ComponentInterface { */ @Prop() fill?: 'outline' | 'solid'; + /** + * Text that is placed under the select and displayed when an error is detected. + */ + @Prop() errorText?: string; + + /** + * Text that is placed under the select and displayed when no error is detected. + */ + @Prop() helperText?: string; + /** * The interface the select should use: `action-sheet`, `popover`, `alert`, or `modal`. */ @@ -983,6 +998,8 @@ export class Select implements ComponentInterface { aria-label={this.ariaLabel} aria-haspopup="dialog" aria-expanded={`${isExpanded}`} + aria-describedby={this.getHintTextID()} + aria-invalid={this.getHintTextID() === this.errorTextId} onFocus={this.onFocus} onBlur={this.onBlur} ref={(focusEl) => (this.focusEl = focusEl)} @@ -990,6 +1007,55 @@ export class Select implements ComponentInterface { ); } + 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; + } + + /** + * Renders the helper text or error text values + */ + private renderHintText() { + const { helperText, errorText, helperTextId, errorTextId } = this; + + return [ +
+ {helperText} +
, +
+ {errorText} +
, + ]; + } + + /** + * Responsible for rendering helper text, and error text. This element + * should only be rendered if hint text is set. + */ + private renderBottomContent() { + const { helperText, errorText } = this; + + /** + * undefined and empty string values should + * be treated as not having helper/error text. + */ + const hasHintText = !!helperText || !!errorText; + if (!hasHintText) { + return; + } + + return
{this.renderHintText()}
; + } + render() { const { disabled, el, isExpanded, expandedIcon, labelPlacement, justify, placeholder, fill, shape, name, value } = this; @@ -1069,6 +1135,7 @@ export class Select implements ComponentInterface { {hasFloatingOrStackedLabel && this.renderSelectIcon()} {shouldRenderHighlight &&
} + {this.renderBottomContent()} ); } diff --git a/core/src/components/select/test/bottom-content/index.html b/core/src/components/select/test/bottom-content/index.html new file mode 100644 index 00000000000..9241aedd45b --- /dev/null +++ b/core/src/components/select/test/bottom-content/index.html @@ -0,0 +1,141 @@ + + + + + Select - Bottom Content + + + + + + + + + + + + + + Select - Bottom Content + + + + +
+
+

No Hint

+ + Option + +
+ +
+

No Hint: Stacked

+ + Option + +
+ +
+

Helper Text

+ + Option + +
+ +
+

Helper Text: Stacked

+ Label + Option + +
+ +
+

Error Text

+ + Option +
+ +
+

Error Text: Stacked

+ + Option +
+ +
+

Error Text: Custom Color

+ + Option +
+ +
+

Helper Text: Wrapping

+ + Option + +
+
+ + +
+
+ + + + diff --git a/core/src/components/select/test/bottom-content/select.e2e.ts b/core/src/components/select/test/bottom-content/select.e2e.ts new file mode 100644 index 00000000000..12514c845cf --- /dev/null +++ b/core/src/components/select/test/bottom-content/select.e2e.ts @@ -0,0 +1,215 @@ +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('select: bottom content functionality'), () => { + test('should not render bottom content if no hint is enabled', async ({ page }) => { + await page.setContent(``, config); + + const bottomEl = page.locator('ion-select .select-bottom'); + await expect(bottomEl).toHaveCount(0); + }); + test('helper text should be visible initially', async ({ page }) => { + await page.setContent( + ``, + config + ); + + const helperText = page.locator('ion-select .helper-text'); + const errorText = page.locator('ion-select .error-text'); + await expect(helperText).toBeVisible(); + await expect(helperText).toHaveText('Helper text'); + await expect(errorText).toBeHidden(); + }); + test('select should have an aria-describedby attribute when helper text is present', async ({ page }) => { + await page.setContent( + ``, + config + ); + + const select = page.locator('ion-select button'); + const helperText = page.locator('ion-select .helper-text'); + const helperTextId = await helperText.getAttribute('id'); + const ariaDescribedBy = await select.getAttribute('aria-describedby'); + + expect(ariaDescribedBy).toBe(helperTextId); + }); + test('error text should be visible when select is invalid', async ({ page }) => { + await page.setContent( + ``, + config + ); + + const helperText = page.locator('ion-select .helper-text'); + const errorText = page.locator('ion-select .error-text'); + await expect(helperText).toBeHidden(); + await expect(errorText).toBeVisible(); + await expect(errorText).toHaveText('Error text'); + }); + + test('select should have an aria-describedby attribute when error text is present', async ({ page }) => { + await page.setContent( + ``, + config + ); + + const select = page.locator('ion-select button'); + const errorText = page.locator('ion-select .error-text'); + const errorTextId = await errorText.getAttribute('id'); + const ariaDescribedBy = await select.getAttribute('aria-describedby'); + + expect(ariaDescribedBy).toBe(errorTextId); + }); + test('select should have aria-invalid attribute when select is invalid', async ({ page }) => { + await page.setContent( + ``, + config + ); + + const select = page.locator('ion-select button'); + + await expect(select).toHaveAttribute('aria-invalid'); + }); + test('select should not have aria-invalid attribute when select is valid', async ({ page }) => { + await page.setContent( + ``, + config + ); + + const select = page.locator('ion-select button'); + + await expect(select).not.toHaveAttribute('aria-invalid'); + }); + test('select should not have aria-describedby attribute when no hint or error text is present', async ({ + page, + }) => { + await page.setContent(``, config); + + const select = page.locator('ion-select button'); + + await expect(select).not.toHaveAttribute('aria-describedby'); + }); + }); +}); + +/** + * Rendering is different across modes + */ +configs({ modes: ['ios', 'md'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => { + test.describe(title('select: helper text rendering'), () => { + test('should not have visual regressions when rendering helper text', async ({ page }) => { + await page.setContent(``, config); + + const bottomEl = page.locator('ion-select'); + await expect(bottomEl).toHaveScreenshot(screenshot(`select-helper-text`)); + }); + test('should not have visual regressions when rendering helper text with wrapping text', async ({ page }) => { + await page.setContent( + ``, + config + ); + + const bottomEl = page.locator('ion-select'); + await expect(bottomEl).toHaveScreenshot(screenshot(`select-helper-text-wrapping`)); + }); + test('should not have visual regressions when rendering helper text with a stacked label', async ({ page }) => { + await page.setContent( + ``, + config + ); + + const bottomEl = page.locator('ion-select'); + await expect(bottomEl).toHaveScreenshot(screenshot(`select-helper-text-stacked-label`)); + }); + }); + + test.describe(title('select: error text rendering'), () => { + test('should not have visual regressions when rendering error text', async ({ page }) => { + await page.setContent( + ``, + config + ); + + const bottomEl = page.locator('ion-select'); + await expect(bottomEl).toHaveScreenshot(screenshot(`select-error-text`)); + }); + test('should not have visual regressions when rendering error text with a stacked label', async ({ page }) => { + await page.setContent( + ``, + config + ); + + const bottomEl = page.locator('ion-select'); + await expect(bottomEl).toHaveScreenshot(screenshot(`select-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('select: supporting text customization'), () => { + test('should not have visual regressions when rendering helper text with custom css', async ({ page }) => { + await page.setContent( + ` + + + `, + config + ); + + const helperText = page.locator('ion-select'); + await expect(helperText).toHaveScreenshot(screenshot(`select-helper-text-custom-css`)); + }); + test('should not have visual regressions when rendering error text with custom css', async ({ page }) => { + await page.setContent( + ` + + + `, + config + ); + + const errorText = page.locator('ion-select'); + await expect(errorText).toHaveScreenshot(screenshot(`select-error-text-custom-css`)); + }); + test('should not have visual regressions when rendering error text with a custom css variable', async ({ + page, + }) => { + await page.setContent( + ` + + + `, + config + ); + + const errorText = page.locator('ion-select'); + await expect(errorText).toHaveScreenshot(screenshot(`select-error-text-custom-css-var`)); + }); + }); +}); diff --git a/core/src/components/select/test/bottom-content/select.e2e.ts-snapshots/select-error-text-custom-css-md-ltr-Mobile-Chrome-linux.png b/core/src/components/select/test/bottom-content/select.e2e.ts-snapshots/select-error-text-custom-css-md-ltr-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..0f095ef038e Binary files /dev/null and b/core/src/components/select/test/bottom-content/select.e2e.ts-snapshots/select-error-text-custom-css-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/select/test/bottom-content/select.e2e.ts-snapshots/select-error-text-custom-css-md-ltr-Mobile-Firefox-linux.png b/core/src/components/select/test/bottom-content/select.e2e.ts-snapshots/select-error-text-custom-css-md-ltr-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..a09c0d0d075 Binary files /dev/null and b/core/src/components/select/test/bottom-content/select.e2e.ts-snapshots/select-error-text-custom-css-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/select/test/bottom-content/select.e2e.ts-snapshots/select-error-text-custom-css-md-ltr-Mobile-Safari-linux.png b/core/src/components/select/test/bottom-content/select.e2e.ts-snapshots/select-error-text-custom-css-md-ltr-Mobile-Safari-linux.png new file mode 100644 index 00000000000..8b126b4e1bf Binary files /dev/null and b/core/src/components/select/test/bottom-content/select.e2e.ts-snapshots/select-error-text-custom-css-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/select/test/bottom-content/select.e2e.ts-snapshots/select-error-text-custom-css-var-md-ltr-Mobile-Chrome-linux.png b/core/src/components/select/test/bottom-content/select.e2e.ts-snapshots/select-error-text-custom-css-var-md-ltr-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..3dbf9ea1fad Binary files /dev/null and b/core/src/components/select/test/bottom-content/select.e2e.ts-snapshots/select-error-text-custom-css-var-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/select/test/bottom-content/select.e2e.ts-snapshots/select-error-text-custom-css-var-md-ltr-Mobile-Firefox-linux.png b/core/src/components/select/test/bottom-content/select.e2e.ts-snapshots/select-error-text-custom-css-var-md-ltr-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..24255dd5b38 Binary files /dev/null and b/core/src/components/select/test/bottom-content/select.e2e.ts-snapshots/select-error-text-custom-css-var-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/select/test/bottom-content/select.e2e.ts-snapshots/select-error-text-custom-css-var-md-ltr-Mobile-Safari-linux.png b/core/src/components/select/test/bottom-content/select.e2e.ts-snapshots/select-error-text-custom-css-var-md-ltr-Mobile-Safari-linux.png new file mode 100644 index 00000000000..b6d2a9d0c4a Binary files /dev/null and b/core/src/components/select/test/bottom-content/select.e2e.ts-snapshots/select-error-text-custom-css-var-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/select/test/bottom-content/select.e2e.ts-snapshots/select-error-text-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/select/test/bottom-content/select.e2e.ts-snapshots/select-error-text-ios-ltr-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..df4cd2580d4 Binary files /dev/null and b/core/src/components/select/test/bottom-content/select.e2e.ts-snapshots/select-error-text-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/select/test/bottom-content/select.e2e.ts-snapshots/select-error-text-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/select/test/bottom-content/select.e2e.ts-snapshots/select-error-text-ios-ltr-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..84d060bbfa9 Binary files /dev/null and b/core/src/components/select/test/bottom-content/select.e2e.ts-snapshots/select-error-text-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/select/test/bottom-content/select.e2e.ts-snapshots/select-error-text-ios-ltr-Mobile-Safari-linux.png b/core/src/components/select/test/bottom-content/select.e2e.ts-snapshots/select-error-text-ios-ltr-Mobile-Safari-linux.png new file mode 100644 index 00000000000..3dafcf20e10 Binary files /dev/null and b/core/src/components/select/test/bottom-content/select.e2e.ts-snapshots/select-error-text-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/select/test/bottom-content/select.e2e.ts-snapshots/select-error-text-md-ltr-Mobile-Chrome-linux.png b/core/src/components/select/test/bottom-content/select.e2e.ts-snapshots/select-error-text-md-ltr-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..d747d4b823e Binary files /dev/null and b/core/src/components/select/test/bottom-content/select.e2e.ts-snapshots/select-error-text-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/select/test/bottom-content/select.e2e.ts-snapshots/select-error-text-md-ltr-Mobile-Firefox-linux.png b/core/src/components/select/test/bottom-content/select.e2e.ts-snapshots/select-error-text-md-ltr-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..6ab72cb69ce Binary files /dev/null and b/core/src/components/select/test/bottom-content/select.e2e.ts-snapshots/select-error-text-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/select/test/bottom-content/select.e2e.ts-snapshots/select-error-text-md-ltr-Mobile-Safari-linux.png b/core/src/components/select/test/bottom-content/select.e2e.ts-snapshots/select-error-text-md-ltr-Mobile-Safari-linux.png new file mode 100644 index 00000000000..8c32aa48598 Binary files /dev/null and b/core/src/components/select/test/bottom-content/select.e2e.ts-snapshots/select-error-text-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/select/test/bottom-content/select.e2e.ts-snapshots/select-error-text-stacked-label-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/select/test/bottom-content/select.e2e.ts-snapshots/select-error-text-stacked-label-ios-ltr-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..fe8af5c7eb4 Binary files /dev/null and b/core/src/components/select/test/bottom-content/select.e2e.ts-snapshots/select-error-text-stacked-label-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/select/test/bottom-content/select.e2e.ts-snapshots/select-error-text-stacked-label-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/select/test/bottom-content/select.e2e.ts-snapshots/select-error-text-stacked-label-ios-ltr-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..f738f634102 Binary files /dev/null and b/core/src/components/select/test/bottom-content/select.e2e.ts-snapshots/select-error-text-stacked-label-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/select/test/bottom-content/select.e2e.ts-snapshots/select-error-text-stacked-label-ios-ltr-Mobile-Safari-linux.png b/core/src/components/select/test/bottom-content/select.e2e.ts-snapshots/select-error-text-stacked-label-ios-ltr-Mobile-Safari-linux.png new file mode 100644 index 00000000000..4c6e0e86542 Binary files /dev/null and b/core/src/components/select/test/bottom-content/select.e2e.ts-snapshots/select-error-text-stacked-label-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/select/test/bottom-content/select.e2e.ts-snapshots/select-error-text-stacked-label-md-ltr-Mobile-Chrome-linux.png b/core/src/components/select/test/bottom-content/select.e2e.ts-snapshots/select-error-text-stacked-label-md-ltr-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..2617d536de6 Binary files /dev/null and b/core/src/components/select/test/bottom-content/select.e2e.ts-snapshots/select-error-text-stacked-label-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/select/test/bottom-content/select.e2e.ts-snapshots/select-error-text-stacked-label-md-ltr-Mobile-Firefox-linux.png b/core/src/components/select/test/bottom-content/select.e2e.ts-snapshots/select-error-text-stacked-label-md-ltr-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..c25e9a40ce9 Binary files /dev/null and b/core/src/components/select/test/bottom-content/select.e2e.ts-snapshots/select-error-text-stacked-label-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/select/test/bottom-content/select.e2e.ts-snapshots/select-error-text-stacked-label-md-ltr-Mobile-Safari-linux.png b/core/src/components/select/test/bottom-content/select.e2e.ts-snapshots/select-error-text-stacked-label-md-ltr-Mobile-Safari-linux.png new file mode 100644 index 00000000000..f25cf7b6aaa Binary files /dev/null and b/core/src/components/select/test/bottom-content/select.e2e.ts-snapshots/select-error-text-stacked-label-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/select/test/bottom-content/select.e2e.ts-snapshots/select-helper-text-custom-css-md-ltr-Mobile-Chrome-linux.png b/core/src/components/select/test/bottom-content/select.e2e.ts-snapshots/select-helper-text-custom-css-md-ltr-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..ed1594e6273 Binary files /dev/null and b/core/src/components/select/test/bottom-content/select.e2e.ts-snapshots/select-helper-text-custom-css-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/select/test/bottom-content/select.e2e.ts-snapshots/select-helper-text-custom-css-md-ltr-Mobile-Firefox-linux.png b/core/src/components/select/test/bottom-content/select.e2e.ts-snapshots/select-helper-text-custom-css-md-ltr-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..fca86c70c13 Binary files /dev/null and b/core/src/components/select/test/bottom-content/select.e2e.ts-snapshots/select-helper-text-custom-css-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/select/test/bottom-content/select.e2e.ts-snapshots/select-helper-text-custom-css-md-ltr-Mobile-Safari-linux.png b/core/src/components/select/test/bottom-content/select.e2e.ts-snapshots/select-helper-text-custom-css-md-ltr-Mobile-Safari-linux.png new file mode 100644 index 00000000000..24969919b61 Binary files /dev/null and b/core/src/components/select/test/bottom-content/select.e2e.ts-snapshots/select-helper-text-custom-css-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/select/test/bottom-content/select.e2e.ts-snapshots/select-helper-text-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/select/test/bottom-content/select.e2e.ts-snapshots/select-helper-text-ios-ltr-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..0595d4ad2bd Binary files /dev/null and b/core/src/components/select/test/bottom-content/select.e2e.ts-snapshots/select-helper-text-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/select/test/bottom-content/select.e2e.ts-snapshots/select-helper-text-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/select/test/bottom-content/select.e2e.ts-snapshots/select-helper-text-ios-ltr-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..4113a659079 Binary files /dev/null and b/core/src/components/select/test/bottom-content/select.e2e.ts-snapshots/select-helper-text-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/select/test/bottom-content/select.e2e.ts-snapshots/select-helper-text-ios-ltr-Mobile-Safari-linux.png b/core/src/components/select/test/bottom-content/select.e2e.ts-snapshots/select-helper-text-ios-ltr-Mobile-Safari-linux.png new file mode 100644 index 00000000000..70ff705875b Binary files /dev/null and b/core/src/components/select/test/bottom-content/select.e2e.ts-snapshots/select-helper-text-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/select/test/bottom-content/select.e2e.ts-snapshots/select-helper-text-md-ltr-Mobile-Chrome-linux.png b/core/src/components/select/test/bottom-content/select.e2e.ts-snapshots/select-helper-text-md-ltr-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..55bfee4fafe Binary files /dev/null and b/core/src/components/select/test/bottom-content/select.e2e.ts-snapshots/select-helper-text-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/select/test/bottom-content/select.e2e.ts-snapshots/select-helper-text-md-ltr-Mobile-Firefox-linux.png b/core/src/components/select/test/bottom-content/select.e2e.ts-snapshots/select-helper-text-md-ltr-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..de1985cf689 Binary files /dev/null and b/core/src/components/select/test/bottom-content/select.e2e.ts-snapshots/select-helper-text-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/select/test/bottom-content/select.e2e.ts-snapshots/select-helper-text-md-ltr-Mobile-Safari-linux.png b/core/src/components/select/test/bottom-content/select.e2e.ts-snapshots/select-helper-text-md-ltr-Mobile-Safari-linux.png new file mode 100644 index 00000000000..c11f281c415 Binary files /dev/null and b/core/src/components/select/test/bottom-content/select.e2e.ts-snapshots/select-helper-text-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/select/test/bottom-content/select.e2e.ts-snapshots/select-helper-text-stacked-label-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/select/test/bottom-content/select.e2e.ts-snapshots/select-helper-text-stacked-label-ios-ltr-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..19369fc10e3 Binary files /dev/null and b/core/src/components/select/test/bottom-content/select.e2e.ts-snapshots/select-helper-text-stacked-label-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/select/test/bottom-content/select.e2e.ts-snapshots/select-helper-text-stacked-label-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/select/test/bottom-content/select.e2e.ts-snapshots/select-helper-text-stacked-label-ios-ltr-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..accddd7960e Binary files /dev/null and b/core/src/components/select/test/bottom-content/select.e2e.ts-snapshots/select-helper-text-stacked-label-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/select/test/bottom-content/select.e2e.ts-snapshots/select-helper-text-stacked-label-ios-ltr-Mobile-Safari-linux.png b/core/src/components/select/test/bottom-content/select.e2e.ts-snapshots/select-helper-text-stacked-label-ios-ltr-Mobile-Safari-linux.png new file mode 100644 index 00000000000..64eafdc9869 Binary files /dev/null and b/core/src/components/select/test/bottom-content/select.e2e.ts-snapshots/select-helper-text-stacked-label-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/select/test/bottom-content/select.e2e.ts-snapshots/select-helper-text-stacked-label-md-ltr-Mobile-Chrome-linux.png b/core/src/components/select/test/bottom-content/select.e2e.ts-snapshots/select-helper-text-stacked-label-md-ltr-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..c644e2f4c94 Binary files /dev/null and b/core/src/components/select/test/bottom-content/select.e2e.ts-snapshots/select-helper-text-stacked-label-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/select/test/bottom-content/select.e2e.ts-snapshots/select-helper-text-stacked-label-md-ltr-Mobile-Firefox-linux.png b/core/src/components/select/test/bottom-content/select.e2e.ts-snapshots/select-helper-text-stacked-label-md-ltr-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..96342840fd4 Binary files /dev/null and b/core/src/components/select/test/bottom-content/select.e2e.ts-snapshots/select-helper-text-stacked-label-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/select/test/bottom-content/select.e2e.ts-snapshots/select-helper-text-stacked-label-md-ltr-Mobile-Safari-linux.png b/core/src/components/select/test/bottom-content/select.e2e.ts-snapshots/select-helper-text-stacked-label-md-ltr-Mobile-Safari-linux.png new file mode 100644 index 00000000000..6a643e6ab5f Binary files /dev/null and b/core/src/components/select/test/bottom-content/select.e2e.ts-snapshots/select-helper-text-stacked-label-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/select/test/bottom-content/select.e2e.ts-snapshots/select-helper-text-wrapping-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/select/test/bottom-content/select.e2e.ts-snapshots/select-helper-text-wrapping-ios-ltr-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..ad48c13a1f5 Binary files /dev/null and b/core/src/components/select/test/bottom-content/select.e2e.ts-snapshots/select-helper-text-wrapping-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/select/test/bottom-content/select.e2e.ts-snapshots/select-helper-text-wrapping-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/select/test/bottom-content/select.e2e.ts-snapshots/select-helper-text-wrapping-ios-ltr-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..e672b8eb02b Binary files /dev/null and b/core/src/components/select/test/bottom-content/select.e2e.ts-snapshots/select-helper-text-wrapping-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/select/test/bottom-content/select.e2e.ts-snapshots/select-helper-text-wrapping-ios-ltr-Mobile-Safari-linux.png b/core/src/components/select/test/bottom-content/select.e2e.ts-snapshots/select-helper-text-wrapping-ios-ltr-Mobile-Safari-linux.png new file mode 100644 index 00000000000..42e54051219 Binary files /dev/null and b/core/src/components/select/test/bottom-content/select.e2e.ts-snapshots/select-helper-text-wrapping-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/select/test/bottom-content/select.e2e.ts-snapshots/select-helper-text-wrapping-md-ltr-Mobile-Chrome-linux.png b/core/src/components/select/test/bottom-content/select.e2e.ts-snapshots/select-helper-text-wrapping-md-ltr-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..339eeaeecb5 Binary files /dev/null and b/core/src/components/select/test/bottom-content/select.e2e.ts-snapshots/select-helper-text-wrapping-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/select/test/bottom-content/select.e2e.ts-snapshots/select-helper-text-wrapping-md-ltr-Mobile-Firefox-linux.png b/core/src/components/select/test/bottom-content/select.e2e.ts-snapshots/select-helper-text-wrapping-md-ltr-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..bb10ded2ea9 Binary files /dev/null and b/core/src/components/select/test/bottom-content/select.e2e.ts-snapshots/select-helper-text-wrapping-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/select/test/bottom-content/select.e2e.ts-snapshots/select-helper-text-wrapping-md-ltr-Mobile-Safari-linux.png b/core/src/components/select/test/bottom-content/select.e2e.ts-snapshots/select-helper-text-wrapping-md-ltr-Mobile-Safari-linux.png new file mode 100644 index 00000000000..7baa724e31e Binary files /dev/null and b/core/src/components/select/test/bottom-content/select.e2e.ts-snapshots/select-helper-text-wrapping-md-ltr-Mobile-Safari-linux.png differ diff --git a/packages/angular/src/directives/proxies.ts b/packages/angular/src/directives/proxies.ts index af8825714f7..44a85d7bee5 100644 --- a/packages/angular/src/directives/proxies.ts +++ b/packages/angular/src/directives/proxies.ts @@ -2060,7 +2060,7 @@ export declare interface IonSegmentView extends Components.IonSegmentView { @ProxyCmp({ - inputs: ['cancelText', 'color', 'compareWith', 'disabled', 'expandedIcon', 'fill', 'interface', 'interfaceOptions', 'justify', 'label', 'labelPlacement', 'mode', 'multiple', 'name', 'okText', 'placeholder', 'selectedText', 'shape', 'toggleIcon', 'value'], + inputs: ['cancelText', 'color', 'compareWith', 'disabled', 'errorText', 'expandedIcon', 'fill', 'helperText', 'interface', 'interfaceOptions', 'justify', 'label', 'labelPlacement', 'mode', 'multiple', 'name', 'okText', 'placeholder', 'selectedText', 'shape', 'toggleIcon', 'value'], methods: ['open'] }) @Component({ @@ -2068,7 +2068,7 @@ export declare interface IonSegmentView extends Components.IonSegmentView { changeDetection: ChangeDetectionStrategy.OnPush, template: '', // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property - inputs: ['cancelText', 'color', 'compareWith', 'disabled', 'expandedIcon', 'fill', 'interface', 'interfaceOptions', 'justify', 'label', 'labelPlacement', 'mode', 'multiple', 'name', 'okText', 'placeholder', 'selectedText', 'shape', 'toggleIcon', 'value'], + inputs: ['cancelText', 'color', 'compareWith', 'disabled', 'errorText', 'expandedIcon', 'fill', 'helperText', 'interface', 'interfaceOptions', 'justify', 'label', 'labelPlacement', 'mode', 'multiple', 'name', 'okText', 'placeholder', 'selectedText', 'shape', 'toggleIcon', 'value'], }) export class IonSelect { protected el: HTMLIonSelectElement; diff --git a/packages/vue/src/proxies.ts b/packages/vue/src/proxies.ts index d815762691a..1504ba2454d 100644 --- a/packages/vue/src/proxies.ts +++ b/packages/vue/src/proxies.ts @@ -869,6 +869,8 @@ export const IonSelect = /*@__PURE__*/ defineContainer