From 5acf8ab60de4db1f2c9f27728c79f9c47c2969b3 Mon Sep 17 00:00:00 2001
From: Brandy Smith <6577830+brandyscarney@users.noreply.github.com>
Date: Tue, 21 Jan 2025 17:53:34 -0500
Subject: [PATCH 01/13] feat(select): add helperText and errorText properties
---
core/src/components.d.ts | 16 +++++
core/src/components/select/select.ios.scss | 2 +
.../components/select/select.md.solid.scss | 4 ++
core/src/components/select/select.scss | 67 +++++++++++++++++++
core/src/components/select/select.tsx | 67 +++++++++++++++++++
packages/angular/src/directives/proxies.ts | 4 +-
packages/vue/src/proxies.ts | 2 +
7 files changed, 160 insertions(+), 2 deletions(-)
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..48578689c22 100644
--- a/core/src/components/select/select.scss
+++ b/core/src/components/select/select.scss
@@ -25,6 +25,8 @@
* @prop --border-width: Width of the select border
*
* @prop --ripple-color: The color of the ripple effect on MD mode.
+ *
+ * TODO: add supporting text css vars
*/
--padding-top: 0px;
--padding-end: 0px;
@@ -275,6 +277,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