javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-17 18:54:11 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(input, select, textarea): change type of placeholder prop to string only (#23500)

Browse Source 
resolves #22976

BREAKING CHANGE: Updated the `placeholder` property on `ion-input`, `ion-textarea`, and `ion-select` to have a type of `string | undefined`.
This commit is contained in:
William Martin
2021-06-24 10:23:19 -04:00
committed by GitHub
parent ceabba154c
commit f3ae4319bb
9 changed files with 34 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
BREAKING.md
View File

@ -15,10 +15,13 @@ This is a comprehensive list of the breaking changes introduced in the major ver
- [Components](#components) - [Components](#components)
* [Datetime](#datetime) * [Datetime](#datetime)
* [Header](#header) * [Header](#header)
* [Input](#input)
* [Modal](#modal) * [Modal](#modal)
* [Popover](#popover) * [Popover](#popover)
* [Searchbar](#searchbar) * [Searchbar](#searchbar)
* [Select](#select)
* [Tab Bar](#tab-bar) * [Tab Bar](#tab-bar)
* [Textarea](#textarea)
* [Toast](#toast) * [Toast](#toast)
* [Toolbar](#toolbar) * [Toolbar](#toolbar)
- [Config](#config) - [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 #### Modal
Converted `ion-modal` to use [Shadow DOM](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM). 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'`. 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 #### Tab Bar
The default iOS tab bar background color has been updated to better reflect the latest iOS styles. The new default value is: 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)); 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 #### Toast
The `--white-space` CSS variable now defaults to `normal` instead of `pre-wrap`. The `--white-space` CSS variable now defaults to `normal` instead of `pre-wrap`.

6
core/api.txt
View File

@ -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,multiple,boolean | undefined,undefined,false,false
ion-input,prop,name,string,this.inputId,false,false ion-input,prop,name,string,this.inputId,false,false
ion-input,prop,pattern,string | undefined,undefined,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,readonly,boolean,false,false,false
ion-input,prop,required,boolean,false,false,false ion-input,prop,required,boolean,false,false,false
ion-input,prop,size,number | undefined,undefined,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,multiple,boolean,false,false,false
ion-select,prop,name,string,this.inputId,false,false ion-select,prop,name,string,this.inputId,false,false
ion-select,prop,okText,string,'OK',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,selectedText,null | string | undefined,undefined,false,false
ion-select,prop,value,any,undefined,false,false ion-select,prop,value,any,undefined,false,false
ion-select,method,open,open(event?: UIEvent | undefined) => Promise<any> ion-select,method,open,open(event?: UIEvent | undefined) => Promise<any>
@ -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,minlength,number | undefined,undefined,false,false
ion-textarea,prop,mode,"ios" | "md",undefined,false,false ion-textarea,prop,mode,"ios" | "md",undefined,false,false
ion-textarea,prop,name,string,this.inputId,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,readonly,boolean,false,false,false
ion-textarea,prop,required,boolean,false,false,false ion-textarea,prop,required,boolean,false,false,false
ion-textarea,prop,rows,number | undefined,undefined,false,false ion-textarea,prop,rows,number | undefined,undefined,false,false

12
core/src/components.d.ts vendored
View File

@ -1037,7 +1037,7 @@ export namespace Components {
/** /**
* Instructional text that shows before the input has a value. * Instructional text that shows before the input has a value.
*/ */
"placeholder"?: string | null; "placeholder"?: string;
/** /**
* If `true`, the user cannot modify the value. * If `true`, the user cannot modify the value.
*/ */
@ -2323,7 +2323,7 @@ export namespace Components {
/** /**
* The text to display when the select is empty. * 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. * 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. * Instructional text that shows before the input has a value.
*/ */
"placeholder"?: string | null; "placeholder"?: string;
/** /**
* If `true`, the user cannot modify the value. * 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. * Instructional text that shows before the input has a value.
*/ */
"placeholder"?: string | null; "placeholder"?: string;
/** /**
* If `true`, the user cannot modify the value. * If `true`, the user cannot modify the value.
*/ */
@ -5899,7 +5899,7 @@ declare namespace LocalJSX {
/** /**
* The text to display when the select is empty. * 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. * 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. * Instructional text that shows before the input has a value.
*/ */
"placeholder"?: string | null; "placeholder"?: string;
/** /**
* If `true`, the user cannot modify the value. * If `true`, the user cannot modify the value.
*/ */

4
core/src/components/input/input.tsx
View File

@ -152,7 +152,7 @@ export class Input implements ComponentInterface {
/** /**
* Instructional text that shows before the input has a value. * 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. * If `true`, the user cannot modify the value.
@ -302,7 +302,7 @@ export class Input implements ComponentInterface {
this.ionStyle.emit({ this.ionStyle.emit({
'interactive': true, 'interactive': true,
'input': true, 'input': true,
'has-placeholder': this.placeholder != null, 'has-placeholder': this.placeholder !== undefined,
'has-value': this.hasValue(), 'has-value': this.hasValue(),
'has-focus': this.hasFocus, 'has-focus': this.hasFocus,
'interactive-disabled': this.disabled, 'interactive-disabled': this.disabled,

2
core/src/components/input/readme.md
View File

@ -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` | | `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` | | `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` | | `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` | | `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` | | `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` | | `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` |

2
core/src/components/select/readme.md
View File

@ -1357,7 +1357,7 @@ export default defineComponent({
| `multiple` | `multiple` | If `true`, the select can accept multiple values. | `boolean` | `false` | | `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` | | `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'` | | `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` | | `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` | | `value` | `value` | the value of the select. | `any` | `undefined` |

6
core/src/components/select/select.tsx
View File

@ -54,7 +54,7 @@ export class Select implements ComponentInterface {
/** /**
* The text to display when the select is empty. * 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. * The name of the control, which is submitted with the form data.
@ -412,7 +412,7 @@ export class Select implements ComponentInterface {
this.ionStyle.emit({ this.ionStyle.emit({
'interactive': true, 'interactive': true,
'select': true, 'select': true,
'has-placeholder': this.placeholder != null, 'has-placeholder': this.placeholder !== undefined,
'has-value': this.hasValue(), 'has-value': this.hasValue(),
'interactive-disabled': this.disabled, 'interactive-disabled': this.disabled,
'select-disabled': this.disabled 'select-disabled': this.disabled
@ -442,7 +442,7 @@ export class Select implements ComponentInterface {
let addPlaceholderClass = false; let addPlaceholderClass = false;
let selectText = displayValue; let selectText = displayValue;
if (selectText === '' && placeholder != null) { if (selectText === '' && placeholder !== undefined) {
selectText = placeholder; selectText = placeholder;
addPlaceholderClass = true; addPlaceholderClass = true;
} }

2
core/src/components/textarea/readme.md
View File

@ -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` | | `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` | | `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` | | `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` | | `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` | | `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` | | `rows` | `rows` | The number of visible text lines for the control. | `number \| undefined` | `undefined` |

4
core/src/components/textarea/textarea.tsx
View File

@ -112,7 +112,7 @@ export class Textarea implements ComponentInterface {
/** /**
* Instructional text that shows before the input has a value. * 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. * If `true`, the user cannot modify the value.
@ -271,7 +271,7 @@ export class Textarea implements ComponentInterface {
'textarea': true, 'textarea': true,
'input': true, 'input': true,
'interactive-disabled': this.disabled, 'interactive-disabled': this.disabled,
'has-placeholder': this.placeholder != null, 'has-placeholder': this.placeholder !== undefined,
'has-value': this.hasValue(), 'has-value': this.hasValue(),
'has-focus': this.hasFocus 'has-focus': this.hasFocus
}); });