mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-17 18:54:11 +08:00
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`.
This commit is contained in:
William Martin
15
BREAKING.md
15
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`.
|
||||
|
||||
@ -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<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,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
|
||||
|
||||
12
core/src/components.d.ts
vendored
12
core/src/components.d.ts
vendored
@ -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.
|
||||
*/
|
||||
|
||||
@ -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,
|
||||
|
||||
@ -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` |
|
||||
|
||||
@ -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` |
|
||||
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
@ -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` |
|
||||
|
||||
@ -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
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user