From f3ae4319bb64debab304973856a33e422ac910a1 Mon Sep 17 00:00:00 2001 From: William Martin Date: Thu, 24 Jun 2021 10:23:19 -0400 Subject: [PATCH] fix(input, select, textarea): change type of placeholder prop to string only (#23500) resolves #22976 BREAKING CHANGE: Updated the `placeholder` property on `ion-input`, `ion-textarea`, and `ion-select` to have a type of `string | undefined`. --- BREAKING.md | 15 +++++++++++++++ core/api.txt | 6 +++--- core/src/components.d.ts | 12 ++++++------ core/src/components/input/input.tsx | 4 ++-- core/src/components/input/readme.md | 2 +- core/src/components/select/readme.md | 2 +- core/src/components/select/select.tsx | 6 +++--- core/src/components/textarea/readme.md | 2 +- core/src/components/textarea/textarea.tsx | 4 ++-- 9 files changed, 34 insertions(+), 19 deletions(-) diff --git a/BREAKING.md b/BREAKING.md index 2840971444..3fd13eaab5 100644 --- a/BREAKING.md +++ b/BREAKING.md @@ -15,10 +15,13 @@ This is a comprehensive list of the breaking changes introduced in the major ver - [Components](#components) * [Datetime](#datetime) * [Header](#header) + * [Input](#input) * [Modal](#modal) * [Popover](#popover) * [Searchbar](#searchbar) + * [Select](#select) * [Tab Bar](#tab-bar) + * [Textarea](#textarea) * [Toast](#toast) * [Toolbar](#toolbar) - [Config](#config) @@ -86,6 +89,10 @@ ion-header.header-collapse-condense ion-toolbar:last-of-type { } ``` +#### Input + +The `placeholder` property now has a type of `string | undefined` rather than `null | string | undefined`. + #### Modal Converted `ion-modal` to use [Shadow DOM](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM). @@ -104,6 +111,10 @@ The `showClearButton` property now defaults to `'always'` for improved usability To get the old behavior, set `showClearButton` to `'focus'`. +#### Select + +The `placeholder` property now has a type of `string | undefined` rather than `null | string | undefined`. + #### Tab Bar The default iOS tab bar background color has been updated to better reflect the latest iOS styles. The new default value is: @@ -112,6 +123,10 @@ The default iOS tab bar background color has been updated to better reflect the var(--ion-tab-bar-background, var(--ion-color-step-50, #f7f7f7)); ``` +#### Textarea + +The `placeholder` property now has a type of `string | undefined` rather than `null | string | undefined`. + #### Toast The `--white-space` CSS variable now defaults to `normal` instead of `pre-wrap`. diff --git a/core/api.txt b/core/api.txt index 48416dd175..2abcb240de 100644 --- a/core/api.txt +++ b/core/api.txt @@ -517,7 +517,7 @@ ion-input,prop,mode,"ios" | "md",undefined,false,false ion-input,prop,multiple,boolean | undefined,undefined,false,false ion-input,prop,name,string,this.inputId,false,false ion-input,prop,pattern,string | undefined,undefined,false,false -ion-input,prop,placeholder,null | string | undefined,undefined,false,false +ion-input,prop,placeholder,string | undefined,undefined,false,false ion-input,prop,readonly,boolean,false,false,false ion-input,prop,required,boolean,false,false,false ion-input,prop,size,number | undefined,undefined,false,false @@ -1144,7 +1144,7 @@ ion-select,prop,mode,"ios" | "md",undefined,false,false ion-select,prop,multiple,boolean,false,false,false ion-select,prop,name,string,this.inputId,false,false ion-select,prop,okText,string,'OK',false,false -ion-select,prop,placeholder,null | string | undefined,undefined,false,false +ion-select,prop,placeholder,string | undefined,undefined,false,false ion-select,prop,selectedText,null | string | undefined,undefined,false,false ion-select,prop,value,any,undefined,false,false ion-select,method,open,open(event?: UIEvent | undefined) => Promise @@ -1298,7 +1298,7 @@ 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 ion-textarea,prop,name,string,this.inputId,false,false -ion-textarea,prop,placeholder,null | string | undefined,undefined,false,false +ion-textarea,prop,placeholder,string | undefined,undefined,false,false ion-textarea,prop,readonly,boolean,false,false,false ion-textarea,prop,required,boolean,false,false,false ion-textarea,prop,rows,number | undefined,undefined,false,false diff --git a/core/src/components.d.ts b/core/src/components.d.ts index 7da4372e7a..1aa688d110 100644 --- a/core/src/components.d.ts +++ b/core/src/components.d.ts @@ -1037,7 +1037,7 @@ export namespace Components { /** * Instructional text that shows before the input has a value. */ - "placeholder"?: string | null; + "placeholder"?: string; /** * If `true`, the user cannot modify the value. */ @@ -2323,7 +2323,7 @@ export namespace Components { /** * The text to display when the select is empty. */ - "placeholder"?: string | null; + "placeholder"?: string; /** * The text to display instead of the selected option's value. */ @@ -2663,7 +2663,7 @@ export namespace Components { /** * Instructional text that shows before the input has a value. */ - "placeholder"?: string | null; + "placeholder"?: string; /** * If `true`, the user cannot modify the value. */ @@ -4621,7 +4621,7 @@ declare namespace LocalJSX { /** * Instructional text that shows before the input has a value. */ - "placeholder"?: string | null; + "placeholder"?: string; /** * If `true`, the user cannot modify the value. */ @@ -5899,7 +5899,7 @@ declare namespace LocalJSX { /** * The text to display when the select is empty. */ - "placeholder"?: string | null; + "placeholder"?: string; /** * The text to display instead of the selected option's value. */ @@ -6245,7 +6245,7 @@ declare namespace LocalJSX { /** * Instructional text that shows before the input has a value. */ - "placeholder"?: string | null; + "placeholder"?: string; /** * If `true`, the user cannot modify the value. */ diff --git a/core/src/components/input/input.tsx b/core/src/components/input/input.tsx index 14868cb81b..9b7a21737e 100644 --- a/core/src/components/input/input.tsx +++ b/core/src/components/input/input.tsx @@ -152,7 +152,7 @@ export class Input implements ComponentInterface { /** * Instructional text that shows before the input has a value. */ - @Prop() placeholder?: string | null; + @Prop() placeholder?: string; /** * If `true`, the user cannot modify the value. @@ -302,7 +302,7 @@ export class Input implements ComponentInterface { this.ionStyle.emit({ 'interactive': true, 'input': true, - 'has-placeholder': this.placeholder != null, + 'has-placeholder': this.placeholder !== undefined, 'has-value': this.hasValue(), 'has-focus': this.hasFocus, 'interactive-disabled': this.disabled, diff --git a/core/src/components/input/readme.md b/core/src/components/input/readme.md index f9fcc7a937..e6bbf15d58 100644 --- a/core/src/components/input/readme.md +++ b/core/src/components/input/readme.md @@ -320,7 +320,7 @@ export default defineComponent({ | `multiple` | `multiple` | If `true`, the user can enter more than one value. This attribute applies when the type attribute is set to `"email"` or `"file"`, otherwise it is ignored. | `boolean \| undefined` | `undefined` | | `name` | `name` | The name of the control, which is submitted with the form data. | `string` | `this.inputId` | | `pattern` | `pattern` | A regular expression that the value is checked against. The pattern must match the entire value, not just some subset. Use the title attribute to describe the pattern to help the user. This attribute applies when the value of the type attribute is `"text"`, `"search"`, `"tel"`, `"url"`, `"email"`, `"date"`, or `"password"`, otherwise it is ignored. When the type attribute is `"date"`, `pattern` will only be used in browsers that do not support the `"date"` input type natively. See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date for more information. | `string \| undefined` | `undefined` | -| `placeholder` | `placeholder` | Instructional text that shows before the input has a value. | `null \| string \| undefined` | `undefined` | +| `placeholder` | `placeholder` | Instructional text that shows before the input has a value. | `string \| undefined` | `undefined` | | `readonly` | `readonly` | If `true`, the user cannot modify the value. | `boolean` | `false` | | `required` | `required` | If `true`, the user must fill in a value before submitting a form. | `boolean` | `false` | | `size` | `size` | The initial size of the control. This value is in pixels unless the value of the type attribute is `"text"` or `"password"`, in which case it is an integer number of characters. This attribute applies only when the `type` attribute is set to `"text"`, `"search"`, `"tel"`, `"url"`, `"email"`, or `"password"`, otherwise it is ignored. | `number \| undefined` | `undefined` | diff --git a/core/src/components/select/readme.md b/core/src/components/select/readme.md index 43e951e859..7561dc03eb 100644 --- a/core/src/components/select/readme.md +++ b/core/src/components/select/readme.md @@ -1357,7 +1357,7 @@ export default defineComponent({ | `multiple` | `multiple` | If `true`, the select can accept multiple values. | `boolean` | `false` | | `name` | `name` | The name of the control, which is submitted with the form data. | `string` | `this.inputId` | | `okText` | `ok-text` | The text to display on the ok button. | `string` | `'OK'` | -| `placeholder` | `placeholder` | The text to display when the select is empty. | `null \| string \| undefined` | `undefined` | +| `placeholder` | `placeholder` | The text to display when the select is empty. | `string \| undefined` | `undefined` | | `selectedText` | `selected-text` | The text to display instead of the selected option's value. | `null \| string \| undefined` | `undefined` | | `value` | `value` | the value of the select. | `any` | `undefined` | diff --git a/core/src/components/select/select.tsx b/core/src/components/select/select.tsx index 8ff4dde569..7cc725a7a1 100644 --- a/core/src/components/select/select.tsx +++ b/core/src/components/select/select.tsx @@ -54,7 +54,7 @@ export class Select implements ComponentInterface { /** * The text to display when the select is empty. */ - @Prop() placeholder?: string | null; + @Prop() placeholder?: string; /** * The name of the control, which is submitted with the form data. @@ -412,7 +412,7 @@ export class Select implements ComponentInterface { this.ionStyle.emit({ 'interactive': true, 'select': true, - 'has-placeholder': this.placeholder != null, + 'has-placeholder': this.placeholder !== undefined, 'has-value': this.hasValue(), 'interactive-disabled': this.disabled, 'select-disabled': this.disabled @@ -442,7 +442,7 @@ export class Select implements ComponentInterface { let addPlaceholderClass = false; let selectText = displayValue; - if (selectText === '' && placeholder != null) { + if (selectText === '' && placeholder !== undefined) { selectText = placeholder; addPlaceholderClass = true; } diff --git a/core/src/components/textarea/readme.md b/core/src/components/textarea/readme.md index fc90e1bab0..e099852969 100644 --- a/core/src/components/textarea/readme.md +++ b/core/src/components/textarea/readme.md @@ -282,7 +282,7 @@ export default defineComponent({ | `minlength` | `minlength` | If the value of the type attribute is `text`, `email`, `search`, `password`, `tel`, or `url`, this attribute specifies the minimum number of characters that the user can enter. | `number \| undefined` | `undefined` | | `mode` | `mode` | The mode determines which platform styles to use. | `"ios" \| "md"` | `undefined` | | `name` | `name` | The name of the control, which is submitted with the form data. | `string` | `this.inputId` | -| `placeholder` | `placeholder` | Instructional text that shows before the input has a value. | `null \| string \| undefined` | `undefined` | +| `placeholder` | `placeholder` | Instructional text that shows before the input has a value. | `string \| undefined` | `undefined` | | `readonly` | `readonly` | If `true`, the user cannot modify the value. | `boolean` | `false` | | `required` | `required` | If `true`, the user must fill in a value before submitting a form. | `boolean` | `false` | | `rows` | `rows` | The number of visible text lines for the control. | `number \| undefined` | `undefined` | diff --git a/core/src/components/textarea/textarea.tsx b/core/src/components/textarea/textarea.tsx index 25f3f16453..55b0bcb18b 100644 --- a/core/src/components/textarea/textarea.tsx +++ b/core/src/components/textarea/textarea.tsx @@ -112,7 +112,7 @@ export class Textarea implements ComponentInterface { /** * Instructional text that shows before the input has a value. */ - @Prop() placeholder?: string | null; + @Prop() placeholder?: string; /** * If `true`, the user cannot modify the value. @@ -271,7 +271,7 @@ export class Textarea implements ComponentInterface { 'textarea': true, 'input': true, 'interactive-disabled': this.disabled, - 'has-placeholder': this.placeholder != null, + 'has-placeholder': this.placeholder !== undefined, 'has-value': this.hasValue(), 'has-focus': this.hasFocus });