diff --git a/BREAKING.md b/BREAKING.md index 2840971444a..3fd13eaab5c 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 48416dd1750..2abcb240de6 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 7da4372e7a0..1aa688d110a 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 14868cb81b1..9b7a21737ef 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 f9fcc7a937d..e6bbf15d582 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 43e951e8596..7561dc03eba 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 8ff4dde5692..7cc725a7a15 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 fc90e1bab0a..e099852969d 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 25f3f164531..55b0bcb18bc 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 });