From f7f6f1d9f9ffd30afbdccfb558bd73f42b112715 Mon Sep 17 00:00:00 2001 From: Liam DeBeasi Date: Fri, 10 Feb 2023 11:53:47 -0500 Subject: [PATCH] feat(textarea): add legacy prop (#26783) --- angular/src/directives/proxies.ts | 4 ++-- core/api.txt | 1 + core/src/components.d.ts | 8 ++++++++ core/src/components/textarea/textarea.tsx | 11 +++++++++++ packages/vue/src/proxies.ts | 1 + 5 files changed, 23 insertions(+), 2 deletions(-) diff --git a/angular/src/directives/proxies.ts b/angular/src/directives/proxies.ts index ba8cad6b4c..59eed5f824 100644 --- a/angular/src/directives/proxies.ts +++ b/angular/src/directives/proxies.ts @@ -2159,7 +2159,7 @@ export declare interface IonText extends Components.IonText {} @ProxyCmp({ - inputs: ['autoGrow', 'autocapitalize', 'autofocus', 'clearOnEdit', 'color', 'cols', 'counter', 'counterFormatter', 'debounce', 'disabled', 'enterkeyhint', 'errorText', 'fill', 'helperText', 'inputmode', 'label', 'labelPlacement', 'maxlength', 'minlength', 'mode', 'name', 'placeholder', 'readonly', 'required', 'rows', 'shape', 'spellcheck', 'value', 'wrap'], + inputs: ['autoGrow', 'autocapitalize', 'autofocus', 'clearOnEdit', 'color', 'cols', 'counter', 'counterFormatter', 'debounce', 'disabled', 'enterkeyhint', 'errorText', 'fill', 'helperText', 'inputmode', 'label', 'labelPlacement', 'legacy', 'maxlength', 'minlength', 'mode', 'name', 'placeholder', 'readonly', 'required', 'rows', 'shape', 'spellcheck', 'value', 'wrap'], methods: ['setFocus', 'getInputElement'] }) @Component({ @@ -2167,7 +2167,7 @@ export declare interface IonText extends Components.IonText {} changeDetection: ChangeDetectionStrategy.OnPush, template: '', // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property - inputs: ['autoGrow', 'autocapitalize', 'autofocus', 'clearOnEdit', 'color', 'cols', 'counter', 'counterFormatter', 'debounce', 'disabled', 'enterkeyhint', 'errorText', 'fill', 'helperText', 'inputmode', 'label', 'labelPlacement', 'maxlength', 'minlength', 'mode', 'name', 'placeholder', 'readonly', 'required', 'rows', 'shape', 'spellcheck', 'value', 'wrap'], + inputs: ['autoGrow', 'autocapitalize', 'autofocus', 'clearOnEdit', 'color', 'cols', 'counter', 'counterFormatter', 'debounce', 'disabled', 'enterkeyhint', 'errorText', 'fill', 'helperText', 'inputmode', 'label', 'labelPlacement', 'legacy', 'maxlength', 'minlength', 'mode', 'name', 'placeholder', 'readonly', 'required', 'rows', 'shape', 'spellcheck', 'value', 'wrap'], }) export class IonTextarea { protected el: HTMLElement; diff --git a/core/api.txt b/core/api.txt index caeb8d2d93..b25334a075 100644 --- a/core/api.txt +++ b/core/api.txt @@ -1362,6 +1362,7 @@ ion-textarea,prop,helperText,string | undefined,undefined,false,false ion-textarea,prop,inputmode,"decimal" | "email" | "none" | "numeric" | "search" | "tel" | "text" | "url" | undefined,undefined,false,false ion-textarea,prop,label,string | undefined,undefined,false,false ion-textarea,prop,labelPlacement,"end" | "fixed" | "floating" | "stacked" | "start",'start',false,false +ion-textarea,prop,legacy,boolean | undefined,undefined,false,false ion-textarea,prop,maxlength,number | undefined,undefined,false,false ion-textarea,prop,minlength,number | undefined,undefined,false,false ion-textarea,prop,mode,"ios" | "md",undefined,false,false diff --git a/core/src/components.d.ts b/core/src/components.d.ts index f36d92330f..3bf00a8428 100644 --- a/core/src/components.d.ts +++ b/core/src/components.d.ts @@ -2983,6 +2983,10 @@ export namespace Components { * Where to place the label relative to the textarea. `'start'`: The label will appear to the left of the textarea in LTR and to the right in RTL. `'end'`: The label will appear to the right of the textarea in LTR and to the left in RTL. `'floating'`: The label will appear smaller and above the textarea when the textarea is focused or it has a value. Otherwise it will appear on top of the textarea. `'stacked'`: The label will appear smaller and above the textarea regardless even when the textarea is blurred or has no value. `'fixed'`: The label has the same behavior as `'start'` except it also has a fixed width. Long text will be truncated with ellipses ("..."). */ "labelPlacement": 'start' | 'end' | 'floating' | 'stacked' | 'fixed'; + /** + * Set the `legacy` property to `true` to forcibly use the legacy form control markup. Ionic will only opt components in to the modern form markup when they are using either the `aria-label` attribute or the default slot that contains the label text. As a result, the `legacy` property should only be used as an escape hatch when you want to avoid this automatic opt-in behavior. Note that this property will be removed in an upcoming major release of Ionic, and all form components will be opted-in to using the modern form markup. + */ + "legacy"?: boolean; /** * This attribute specifies the maximum number of characters that the user can enter. */ @@ -7053,6 +7057,10 @@ declare namespace LocalJSX { * Where to place the label relative to the textarea. `'start'`: The label will appear to the left of the textarea in LTR and to the right in RTL. `'end'`: The label will appear to the right of the textarea in LTR and to the left in RTL. `'floating'`: The label will appear smaller and above the textarea when the textarea is focused or it has a value. Otherwise it will appear on top of the textarea. `'stacked'`: The label will appear smaller and above the textarea regardless even when the textarea is blurred or has no value. `'fixed'`: The label has the same behavior as `'start'` except it also has a fixed width. Long text will be truncated with ellipses ("..."). */ "labelPlacement"?: 'start' | 'end' | 'floating' | 'stacked' | 'fixed'; + /** + * Set the `legacy` property to `true` to forcibly use the legacy form control markup. Ionic will only opt components in to the modern form markup when they are using either the `aria-label` attribute or the default slot that contains the label text. As a result, the `legacy` property should only be used as an escape hatch when you want to avoid this automatic opt-in behavior. Note that this property will be removed in an upcoming major release of Ionic, and all form components will be opted-in to using the modern form markup. + */ + "legacy"?: boolean; /** * This attribute specifies the maximum number of characters that the user can enter. */ diff --git a/core/src/components/textarea/textarea.tsx b/core/src/components/textarea/textarea.tsx index 408f589dd0..99c7bc6833 100644 --- a/core/src/components/textarea/textarea.tsx +++ b/core/src/components/textarea/textarea.tsx @@ -218,6 +218,17 @@ export class Textarea implements ComponentInterface { */ @Prop() labelPlacement: 'start' | 'end' | 'floating' | 'stacked' | 'fixed' = 'start'; + /** + * Set the `legacy` property to `true` to forcibly use the legacy form control markup. + * Ionic will only opt components in to the modern form markup when they are + * using either the `aria-label` attribute or the default slot that contains + * the label text. As a result, the `legacy` property should only be used as + * an escape hatch when you want to avoid this automatic opt-in behavior. + * Note that this property will be removed in an upcoming major release + * of Ionic, and all form components will be opted-in to using the modern form markup. + */ + @Prop() legacy?: boolean; + /** * The shape of the textarea. If "round" it will have an increased border radius. */ diff --git a/packages/vue/src/proxies.ts b/packages/vue/src/proxies.ts index 6e4ce470af..517aed3af7 100644 --- a/packages/vue/src/proxies.ts +++ b/packages/vue/src/proxies.ts @@ -809,6 +809,7 @@ export const IonTextarea = /*@__PURE__*/ defineContainer('ion-t 'helperText', 'label', 'labelPlacement', + 'legacy', 'shape', 'ionChange', 'ionInput',