From 1e2eb9de2451e1ced9f04c75edc205c73be04c9f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?C=C3=A9dric=20L=27homme?= Date: Tue, 9 Jun 2020 14:19:32 +0200 Subject: [PATCH] Create type for autocapitalize propertie of input and textarea Fix #21463. Change none to off in textarea for coherence. Didn't use parenthese like in AutocompleteTypes. --- core/api.txt | 4 ++-- core/src/components.d.ts | 10 +++++----- core/src/components/input/input.tsx | 4 ++-- core/src/components/input/readme.md | 2 +- core/src/components/textarea/readme.md | 2 +- core/src/components/textarea/textarea.tsx | 4 ++-- core/src/interface.d.ts | 2 ++ 7 files changed, 15 insertions(+), 13 deletions(-) diff --git a/core/api.txt b/core/api.txt index 9d4ad6a236c..77bc57865bd 100644 --- a/core/api.txt +++ b/core/api.txt @@ -442,7 +442,7 @@ ion-infinite-scroll-content,prop,loadingText,IonicSafeString | string | undefine ion-input,scoped ion-input,prop,accept,string | undefined,undefined,false,false -ion-input,prop,autocapitalize,string,'off',false,false +ion-input,prop,autocapitalize,"characters" | "none" | "off" | "on" | "sentences" | "words",'off',false,false ion-input,prop,autocomplete,"on" | "off" | "name" | "honorific-prefix" | "given-name" | "additional-name" | "family-name" | "honorific-suffix" | "nickname" | "email" | "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" | "tel-country-code" | "tel-national" | "tel-area-code" | "tel-local" | "tel-extension" | "impp" | "url" | "photo",'off',false,false ion-input,prop,autocorrect,"off" | "on",'off',false,false ion-input,prop,autofocus,boolean,false,false,false @@ -1188,7 +1188,7 @@ ion-text,prop,mode,"ios" | "md",undefined,false,false ion-textarea,scoped ion-textarea,prop,autoGrow,boolean,false,false,false -ion-textarea,prop,autocapitalize,string,'none',false,false +ion-textarea,prop,autocapitalize,"characters" | "none" | "off" | "on" | "sentences" | "words",'off',false,false ion-textarea,prop,autofocus,boolean,false,false,false ion-textarea,prop,clearOnEdit,boolean,false,false,false ion-textarea,prop,color,string | undefined,undefined,false,false diff --git a/core/src/components.d.ts b/core/src/components.d.ts index 27e506e1892..cb637c9e88f 100644 --- a/core/src/components.d.ts +++ b/core/src/components.d.ts @@ -5,7 +5,7 @@ * It contains typing information for all components that exist in this project. */ import { HTMLStencilElement, JSXBase } from "@stencil/core/internal"; -import { ActionSheetButton, AlertButton, AlertInput, AnimationBuilder, AutocompleteTypes, CheckboxChangeEventDetail, Color, ComponentProps, ComponentRef, DatetimeChangeEventDetail, DatetimeOptions, DomRenderFn, FooterHeightFn, FrameworkDelegate, HeaderFn, HeaderHeightFn, InputChangeEventDetail, ItemHeightFn, ItemRenderFn, ItemReorderEventDetail, MenuChangeEventDetail, NavComponent, NavOptions, OverlayEventDetail, PickerButton, PickerColumn, RadioGroupChangeEventDetail, RangeChangeEventDetail, RangeValue, RefresherEventDetail, RouteID, RouterDirection, RouterEventDetail, RouterOutletOptions, RouteWrite, ScrollBaseDetail, ScrollDetail, SearchbarChangeEventDetail, SegmentButtonLayout, SegmentChangeEventDetail, SelectChangeEventDetail, SelectInterface, SelectPopoverOption, Side, SpinnerTypes, StyleEventDetail, SwipeGestureHandler, TabBarChangedEventDetail, TabButtonClickEventDetail, TabButtonLayout, TextareaChangeEventDetail, TextFieldTypes, ToastButton, ToggleChangeEventDetail, TransitionDoneFn, TransitionInstruction, ViewController, } from "./interface"; +import { ActionSheetButton, AlertButton, AlertInput, AnimationBuilder, AutocapitalizeTypes, AutocompleteTypes, CheckboxChangeEventDetail, Color, ComponentProps, ComponentRef, DatetimeChangeEventDetail, DatetimeOptions, DomRenderFn, FooterHeightFn, FrameworkDelegate, HeaderFn, HeaderHeightFn, InputChangeEventDetail, ItemHeightFn, ItemRenderFn, ItemReorderEventDetail, MenuChangeEventDetail, NavComponent, NavOptions, OverlayEventDetail, PickerButton, PickerColumn, RadioGroupChangeEventDetail, RangeChangeEventDetail, RangeValue, RefresherEventDetail, RouteID, RouterDirection, RouterEventDetail, RouterOutletOptions, RouteWrite, ScrollBaseDetail, ScrollDetail, SearchbarChangeEventDetail, SegmentButtonLayout, SegmentChangeEventDetail, SelectChangeEventDetail, SelectInterface, SelectPopoverOption, Side, SpinnerTypes, StyleEventDetail, SwipeGestureHandler, TabBarChangedEventDetail, TabButtonClickEventDetail, TabButtonLayout, TextareaChangeEventDetail, TextFieldTypes, ToastButton, ToggleChangeEventDetail, TransitionDoneFn, TransitionInstruction, ViewController, } from "./interface"; import { IonicSafeString, } from "./utils/sanitization"; import { SelectCompareFn, } from "./components/select/select-interface"; export namespace Components { @@ -831,7 +831,7 @@ export namespace Components { /** * Indicates whether and how the text value should be automatically capitalized as it is entered/edited by the user. */ - "autocapitalize": string; + "autocapitalize": AutocapitalizeTypes; /** * Indicates whether the value of the control can be automatically completed by the browser. */ @@ -2390,7 +2390,7 @@ export namespace Components { /** * Indicates whether and how the text value should be automatically capitalized as it is entered/edited by the user. */ - "autocapitalize": string; + "autocapitalize": AutocapitalizeTypes; /** * This Boolean attribute lets you specify that a form control should have input focus when the page loads. */ @@ -4131,7 +4131,7 @@ declare namespace LocalJSX { /** * Indicates whether and how the text value should be automatically capitalized as it is entered/edited by the user. */ - "autocapitalize"?: string; + "autocapitalize"?: AutocapitalizeTypes; /** * Indicates whether the value of the control can be automatically completed by the browser. */ @@ -5603,7 +5603,7 @@ declare namespace LocalJSX { /** * Indicates whether and how the text value should be automatically capitalized as it is entered/edited by the user. */ - "autocapitalize"?: string; + "autocapitalize"?: AutocapitalizeTypes; /** * This Boolean attribute lets you specify that a form control should have input focus when the page loads. */ diff --git a/core/src/components/input/input.tsx b/core/src/components/input/input.tsx index 5575f1c586d..bfa9a70f216 100644 --- a/core/src/components/input/input.tsx +++ b/core/src/components/input/input.tsx @@ -1,7 +1,7 @@ import { Build, Component, ComponentInterface, Element, Event, EventEmitter, Host, Method, Prop, State, Watch, h } from '@stencil/core'; import { getIonMode } from '../../global/ionic-global'; -import { AutocompleteTypes, Color, InputChangeEventDetail, StyleEventDetail, TextFieldTypes } from '../../interface'; +import { AutocapitalizeTypes, AutocompleteTypes, Color, InputChangeEventDetail, StyleEventDetail, TextFieldTypes } from '../../interface'; import { debounceEvent, findItemLabel } from '../../utils/helpers'; import { createColorClasses } from '../../utils/theme'; @@ -42,7 +42,7 @@ export class Input implements ComponentInterface { /** * Indicates whether and how the text value should be automatically capitalized as it is entered/edited by the user. */ - @Prop() autocapitalize = 'off'; + @Prop() autocapitalize: AutocapitalizeTypes = 'off'; /** * Indicates whether the value of the control can be automatically completed by the browser. diff --git a/core/src/components/input/readme.md b/core/src/components/input/readme.md index ff5254d592c..7f26ce4f176 100644 --- a/core/src/components/input/readme.md +++ b/core/src/components/input/readme.md @@ -292,7 +292,7 @@ export class InputExample { | Property | Attribute | Description | Type | Default | | ---------------- | ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------- | | `accept` | `accept` | If the value of the type attribute is `"file"`, then this attribute will indicate the types of files that the server accepts, otherwise it will be ignored. The value must be a comma-separated list of unique content type specifiers. | `string \| undefined` | `undefined` | -| `autocapitalize` | `autocapitalize` | Indicates whether and how the text value should be automatically capitalized as it is entered/edited by the user. | `string` | `'off'` | +| `autocapitalize` | `autocapitalize` | Indicates whether and how the text value should be automatically capitalized as it is entered/edited by the user. | `"characters" \| "none" \| "off" \| "on" \| "sentences" \| "words"` | `'off'` | | `autocomplete` | `autocomplete` | Indicates whether the value of the control can be automatically completed by the browser. | `"on" \| "off" \| "name" \| "honorific-prefix" \| "given-name" \| "additional-name" \| "family-name" \| "honorific-suffix" \| "nickname" \| "email" \| "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" \| "tel-country-code" \| "tel-national" \| "tel-area-code" \| "tel-local" \| "tel-extension" \| "impp" \| "url" \| "photo"` | `'off'` | | `autocorrect` | `autocorrect` | Whether auto correction should be enabled when the user is entering/editing the text value. | `"off" \| "on"` | `'off'` | | `autofocus` | `autofocus` | This Boolean attribute lets you specify that a form control should have input focus when the page loads. | `boolean` | `false` | diff --git a/core/src/components/textarea/readme.md b/core/src/components/textarea/readme.md index 391f3ff7730..df71dace50a 100644 --- a/core/src/components/textarea/readme.md +++ b/core/src/components/textarea/readme.md @@ -260,7 +260,7 @@ export class TextareaExample { | Property | Attribute | Description | Type | Default | | ---------------- | ---------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------- | -------------- | | `autoGrow` | `auto-grow` | If `true`, the element height will increase based on the value. | `boolean` | `false` | -| `autocapitalize` | `autocapitalize` | Indicates whether and how the text value should be automatically capitalized as it is entered/edited by the user. | `string` | `'none'` | +| `autocapitalize` | `autocapitalize` | Indicates whether and how the text value should be automatically capitalized as it is entered/edited by the user. | `"characters" \| "none" \| "off" \| "on" \| "sentences" \| "words"` | `'off'` | | `autofocus` | `autofocus` | This Boolean attribute lets you specify that a form control should have input focus when the page loads. | `boolean` | `false` | | `clearOnEdit` | `clear-on-edit` | If `true`, the value will be cleared after focus upon edit. Defaults to `true` when `type` is `"password"`, `false` for all other types. | `boolean` | `false` | | `color` | `color` | The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics). | `string \| undefined` | `undefined` | diff --git a/core/src/components/textarea/textarea.tsx b/core/src/components/textarea/textarea.tsx index 2c579bea11e..fddb0edda9a 100644 --- a/core/src/components/textarea/textarea.tsx +++ b/core/src/components/textarea/textarea.tsx @@ -1,7 +1,7 @@ import { Build, Component, ComponentInterface, Element, Event, EventEmitter, Host, Method, Prop, State, Watch, h, readTask } from '@stencil/core'; import { getIonMode } from '../../global/ionic-global'; -import { Color, StyleEventDetail, TextareaChangeEventDetail } from '../../interface'; +import { AutocapitalizeTypes, Color, StyleEventDetail, TextareaChangeEventDetail } from '../../interface'; import { debounceEvent, findItemLabel, raf } from '../../utils/helpers'; import { createColorClasses } from '../../utils/theme'; @@ -37,7 +37,7 @@ export class Textarea implements ComponentInterface { /** * Indicates whether and how the text value should be automatically capitalized as it is entered/edited by the user. */ - @Prop() autocapitalize = 'none'; + @Prop() autocapitalize: AutocapitalizeTypes = 'off'; /** * This Boolean attribute lets you specify that a form control should have input focus when the page loads. diff --git a/core/src/interface.d.ts b/core/src/interface.d.ts index 0c58775b9d6..c223205c1a7 100644 --- a/core/src/interface.d.ts +++ b/core/src/interface.d.ts @@ -36,6 +36,8 @@ export * from './utils/overlays-interface'; export * from './global/config'; export { Gesture, GestureConfig, GestureDetail } from './utils/gesture'; +// From https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autocapitalize +export type AutocapitalizeTypes = 'off' | 'none' | 'on' | 'sentences' | 'words' | 'characters'; // From: https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete export type AutocompleteTypes = ( | 'on' | 'off' | 'name' | 'honorific-prefix' | 'given-name' | 'additional-name' | 'family-name' | 'honorific-suffix'