From ca97f055a56f7fd3edd776cd9f4e07a780ad0b42 Mon Sep 17 00:00:00 2001 From: Maria Hutt Date: Wed, 31 Jan 2024 11:28:00 -0800 Subject: [PATCH 1/2] feat(input): remove accept property --- BREAKING.md | 1 + core/api.txt | 1 - core/src/components.d.ts | 10 ---------- core/src/components/input/input.tsx | 8 -------- packages/angular/src/directives/proxies.ts | 4 ++-- packages/vue/src/proxies.ts | 1 - 6 files changed, 3 insertions(+), 22 deletions(-) diff --git a/BREAKING.md b/BREAKING.md index b1cc8f671d6..23f74f3a86d 100644 --- a/BREAKING.md +++ b/BREAKING.md @@ -138,6 +138,7 @@ This allows components to inherit the color properly when used outside of Ionic

Input

- `size` has been removed from the `ion-input` component. Developers should use CSS to specify the visible width of the input. +- `accept` has been removed from the `ion-input` component.

Nav

diff --git a/core/api.txt b/core/api.txt index 70cf16b46de..f60bb9774c9 100644 --- a/core/api.txt +++ b/core/api.txt @@ -547,7 +547,6 @@ ion-infinite-scroll-content,prop,loadingSpinner,"bubbles" | "circles" | "circula ion-infinite-scroll-content,prop,loadingText,IonicSafeString | string | undefined,undefined,false,false ion-input,scoped -ion-input,prop,accept,string | undefined,undefined,false,false ion-input,prop,autocapitalize,string,'off',false,false ion-input,prop,autocomplete,"name" | "email" | "tel" | "url" | "on" | "off" | "honorific-prefix" | "given-name" | "additional-name" | "family-name" | "honorific-suffix" | "nickname" | "username" | "new-password" | "current-password" | "one-time-code" | "organization-title" | "organization" | "street-address" | "address-line1" | "address-line2" | "address-line3" | "address-level4" | "address-level3" | "address-level2" | "address-level1" | "country" | "country-name" | "postal-code" | "cc-name" | "cc-given-name" | "cc-additional-name" | "cc-family-name" | "cc-number" | "cc-exp" | "cc-exp-month" | "cc-exp-year" | "cc-csc" | "cc-type" | "transaction-currency" | "transaction-amount" | "language" | "bday" | "bday-day" | "bday-month" | "bday-year" | "sex" | "tel-country-code" | "tel-national" | "tel-area-code" | "tel-local" | "tel-extension" | "impp" | "photo",'off',false,false ion-input,prop,autocorrect,"off" | "on",'off',false,false diff --git a/core/src/components.d.ts b/core/src/components.d.ts index 7472111222d..e4d9bef8702 100644 --- a/core/src/components.d.ts +++ b/core/src/components.d.ts @@ -1144,11 +1144,6 @@ export namespace Components { "loadingText"?: string | IonicSafeString; } interface IonInput { - /** - * This attribute is ignored. - * @deprecated - */ - "accept"?: string; /** * Indicates whether and how the text value should be automatically capitalized as it is entered/edited by the user. Available options: `"off"`, `"none"`, `"on"`, `"sentences"`, `"words"`, `"characters"`. */ @@ -5888,11 +5883,6 @@ declare namespace LocalJSX { "loadingText"?: string | IonicSafeString; } interface IonInput { - /** - * This attribute is ignored. - * @deprecated - */ - "accept"?: string; /** * Indicates whether and how the text value should be automatically capitalized as it is entered/edited by the user. Available options: `"off"`, `"none"`, `"on"`, `"sentences"`, `"words"`, `"characters"`. */ diff --git a/core/src/components/input/input.tsx b/core/src/components/input/input.tsx index ce8da2288bc..20f0719e0a3 100644 --- a/core/src/components/input/input.tsx +++ b/core/src/components/input/input.tsx @@ -74,12 +74,6 @@ export class Input implements ComponentInterface { */ @Prop({ reflect: true }) color?: Color; - /** - * This attribute is ignored. - * @deprecated - */ - @Prop() accept?: string; - /** * Indicates whether and how the text value should be automatically capitalized as it is entered/edited by the user. * Available options: `"off"`, `"none"`, `"on"`, `"sentences"`, `"words"`, `"characters"`. @@ -784,7 +778,6 @@ export class Input implements ComponentInterface { ref={(input) => (this.nativeInput = input)} id={inputId} disabled={disabled} - accept={this.accept} autoCapitalize={this.autocapitalize} autoComplete={this.autocomplete} autoCorrect={this.autocorrect} @@ -892,7 +885,6 @@ Developers can dismiss this warning by removing their usage of the "legacy" prop ref={(input) => (this.nativeInput = input)} aria-labelledby={label ? label.id : null} disabled={this.disabled} - accept={this.accept} autoCapitalize={this.autocapitalize} autoComplete={this.autocomplete} autoCorrect={this.autocorrect} diff --git a/packages/angular/src/directives/proxies.ts b/packages/angular/src/directives/proxies.ts index 66237da06fb..cb76952cf39 100644 --- a/packages/angular/src/directives/proxies.ts +++ b/packages/angular/src/directives/proxies.ts @@ -955,7 +955,7 @@ export declare interface IonInfiniteScrollContent extends Components.IonInfinite @ProxyCmp({ - inputs: ['accept', 'autocapitalize', 'autocomplete', 'autocorrect', 'autofocus', 'clearInput', 'clearOnEdit', 'color', 'counter', 'counterFormatter', 'debounce', 'disabled', 'enterkeyhint', 'errorText', 'fill', 'helperText', 'inputmode', 'label', 'labelPlacement', 'legacy', 'max', 'maxlength', 'min', 'minlength', 'mode', 'multiple', 'name', 'pattern', 'placeholder', 'readonly', 'required', 'shape', 'spellcheck', 'step', 'type', 'value'], + inputs: ['autocapitalize', 'autocomplete', 'autocorrect', 'autofocus', 'clearInput', 'clearOnEdit', 'color', 'counter', 'counterFormatter', 'debounce', 'disabled', 'enterkeyhint', 'errorText', 'fill', 'helperText', 'inputmode', 'label', 'labelPlacement', 'legacy', 'max', 'maxlength', 'min', 'minlength', 'mode', 'multiple', 'name', 'pattern', 'placeholder', 'readonly', 'required', 'shape', 'spellcheck', 'step', 'type', 'value'], methods: ['setFocus', 'getInputElement'] }) @Component({ @@ -963,7 +963,7 @@ export declare interface IonInfiniteScrollContent extends Components.IonInfinite changeDetection: ChangeDetectionStrategy.OnPush, template: '', // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property - inputs: ['accept', 'autocapitalize', 'autocomplete', 'autocorrect', 'autofocus', 'clearInput', 'clearOnEdit', 'color', 'counter', 'counterFormatter', 'debounce', 'disabled', 'enterkeyhint', 'errorText', 'fill', 'helperText', 'inputmode', 'label', 'labelPlacement', 'legacy', 'max', 'maxlength', 'min', 'minlength', 'mode', 'multiple', 'name', 'pattern', 'placeholder', 'readonly', 'required', 'shape', 'spellcheck', 'step', 'type', 'value'], + inputs: ['autocapitalize', 'autocomplete', 'autocorrect', 'autofocus', 'clearInput', 'clearOnEdit', 'color', 'counter', 'counterFormatter', 'debounce', 'disabled', 'enterkeyhint', 'errorText', 'fill', 'helperText', 'inputmode', 'label', 'labelPlacement', 'legacy', 'max', 'maxlength', 'min', 'minlength', 'mode', 'multiple', 'name', 'pattern', 'placeholder', 'readonly', 'required', 'shape', 'spellcheck', 'step', 'type', 'value'], }) export class IonInput { protected el: HTMLElement; diff --git a/packages/vue/src/proxies.ts b/packages/vue/src/proxies.ts index 37a2a8400c3..fe1ec92ed52 100644 --- a/packages/vue/src/proxies.ts +++ b/packages/vue/src/proxies.ts @@ -397,7 +397,6 @@ export const IonInfiniteScrollContent = /*@__PURE__*/ defineContainer('ion-input', defineIonInput, [ 'color', - 'accept', 'autocapitalize', 'autocomplete', 'autocorrect', From 9d016cd782c46417d3457bd584d85f1d5d8d1828 Mon Sep 17 00:00:00 2001 From: Maria Hutt Date: Wed, 31 Jan 2024 11:41:38 -0800 Subject: [PATCH 2/2] docs(input): add note to breaking change --- BREAKING.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/BREAKING.md b/BREAKING.md index 23f74f3a86d..7669b8840e1 100644 --- a/BREAKING.md +++ b/BREAKING.md @@ -138,7 +138,7 @@ This allows components to inherit the color properly when used outside of Ionic

Input

- `size` has been removed from the `ion-input` component. Developers should use CSS to specify the visible width of the input. -- `accept` has been removed from the `ion-input` component. +- `accept` has been removed from the `ion-input` component. This was previously used in conjunction with the `type="file"`. However, the `file` value for `type` is not a valid value in Ionic Framework.

Nav