diff --git a/core/src/components.d.ts b/core/src/components.d.ts index aaf7b9108e5..1f5c8c7c35a 100644 --- a/core/src/components.d.ts +++ b/core/src/components.d.ts @@ -2783,6 +2783,10 @@ declare global { * If true, the value will be cleared after focus upon edit. Defaults to `true` when `type` is `"password"`, `false` for all other types. */ 'clearOnEdit': boolean; + /** + * 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). + */ + 'color': Color; /** * Set the amount of time, in milliseconds, to wait to trigger the `ionChange` event after each keystroke. Default `0`. */ @@ -2811,6 +2815,10 @@ declare global { * 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. */ 'minlength': number; + /** + * The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. + */ + 'mode': Mode; /** * 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. */ @@ -2909,6 +2917,10 @@ declare global { * If true, the value will be cleared after focus upon edit. Defaults to `true` when `type` is `"password"`, `false` for all other types. */ 'clearOnEdit'?: boolean; + /** + * 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). + */ + 'color'?: Color; /** * Set the amount of time, in milliseconds, to wait to trigger the `ionChange` event after each keystroke. Default `0`. */ @@ -2937,6 +2949,10 @@ declare global { * 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. */ 'minlength'?: number; + /** + * The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. + */ + 'mode'?: Mode; /** * 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. */ @@ -7524,6 +7540,10 @@ declare global { * If true, the value will be cleared after focus upon edit. Defaults to `true` when `type` is `"password"`, `false` for all other types. */ 'clearOnEdit': boolean; + /** + * 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). + */ + 'color': Color; /** * The visible width of the text control, in average character widths. If it is specified, it must be a positive integer. */ @@ -7544,6 +7564,10 @@ declare global { * 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. */ 'minlength': number; + /** + * The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. + */ + 'mode': Mode; /** * The name of the control, which is submitted with the form data. */ @@ -7614,6 +7638,10 @@ declare global { * If true, the value will be cleared after focus upon edit. Defaults to `true` when `type` is `"password"`, `false` for all other types. */ 'clearOnEdit'?: boolean; + /** + * 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). + */ + 'color'?: Color; /** * The visible width of the text control, in average character widths. If it is specified, it must be a positive integer. */ @@ -7634,6 +7662,10 @@ declare global { * 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. */ 'minlength'?: number; + /** + * The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. + */ + 'mode'?: Mode; /** * The name of the control, which is submitted with the form data. */ diff --git a/core/src/components/infinite-scroll/readme.md b/core/src/components/infinite-scroll/readme.md index 6ea5bf2a9a8..03edac084ae 100644 --- a/core/src/components/infinite-scroll/readme.md +++ b/core/src/components/infinite-scroll/readme.md @@ -24,8 +24,8 @@ boolean If true, the infinite scroll will be hidden and scroll event listeners will be removed. -Call `enable(false)` to disable the infinite scroll from actively -trying to receive new data while scrolling. This method is useful +Set this to true to disable the infinite scroll from actively +trying to receive new data while scrolling. This is useful when it is known that there is no more data that can be added, and the infinite scroll is no longer needed. @@ -62,8 +62,8 @@ boolean If true, the infinite scroll will be hidden and scroll event listeners will be removed. -Call `enable(false)` to disable the infinite scroll from actively -trying to receive new data while scrolling. This method is useful +Set this to true to disable the infinite scroll from actively +trying to receive new data while scrolling. This is useful when it is known that there is no more data that can be added, and the infinite scroll is no longer needed. diff --git a/core/src/components/input/input.scss b/core/src/components/input/input.scss index 78197b8a386..f881e605d65 100644 --- a/core/src/components/input/input.scss +++ b/core/src/components/input/input.scss @@ -25,6 +25,9 @@ /* stylelint-enable */ } +:host(.ion-color) { + color: #{current-color(base)}; +} // Native Text Input // -------------------------------------------------- @@ -32,6 +35,7 @@ .native-input { @include border-radius(var(--border-radius)); @include padding(var(--padding-top), var(--padding-end), var(--padding-bottom), var(--padding-start)); + @include text-inherit(); display: inline-block; @@ -45,13 +49,7 @@ background: transparent; - font-family: inherit; - font-size: inherit; - font-weight: inherit; - - letter-spacing: inherit; box-sizing: border-box; - font-kerning: inherit; appearance: none; &::placeholder { diff --git a/core/src/components/input/input.tsx b/core/src/components/input/input.tsx index 15b0f991919..e9dad754cff 100644 --- a/core/src/components/input/input.tsx +++ b/core/src/components/input/input.tsx @@ -1,7 +1,7 @@ import { Component, Element, Event, EventEmitter, Prop, State, Watch } from '@stencil/core'; import { Color, InputChangeEvent, Mode, StyleEvent } from '../../interface'; import { debounceEvent, deferEvent, renderHiddenInput } from '../../utils/helpers'; -import { hostContext } from '../../utils/theme'; +import { createColorClasses, hostContext } from '../../utils/theme'; import { InputComponent } from './input-base'; @@ -19,8 +19,6 @@ export class Input implements InputComponent { private inputId = `ion-input-${inputIds++}`; didBlurAfterEdit = false; - mode!: Mode; - color?: Color; @State() hasFocus = false; @@ -61,6 +59,19 @@ export class Input implements InputComponent { */ @Event() ionInputDidUnload!: EventEmitter; + /** + * 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). + */ + @Prop() color?: Color; + + /** + * The mode determines which platform styles to use. + * Possible values are: `"ios"` or `"md"`. + */ + @Prop() mode!: Mode; + /** * 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. */ @@ -306,6 +317,8 @@ export class Input implements InputComponent { hostData() { return { class: { + ...createColorClasses(this.color), + 'in-item': hostContext('.item', this.el), 'has-value': this.hasValue(), 'has-focus': this.hasFocus diff --git a/core/src/components/input/readme.md b/core/src/components/input/readme.md index 2386e7d072d..ca874fd9927 100644 --- a/core/src/components/input/readme.md +++ b/core/src/components/input/readme.md @@ -59,6 +59,15 @@ boolean If true, the value will be cleared after focus upon edit. Defaults to `true` when `type` is `"password"`, `false` for all other types. +#### color + +string + +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). + + #### debounce number @@ -108,6 +117,14 @@ number 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. +#### mode + +string + +The mode determines which platform styles to use. +Possible values are: `"ios"` or `"md"`. + + #### multiple boolean @@ -243,6 +260,15 @@ boolean If true, the value will be cleared after focus upon edit. Defaults to `true` when `type` is `"password"`, `false` for all other types. +#### color + +string + +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). + + #### debounce number @@ -292,6 +318,14 @@ number 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. +#### mode + +string + +The mode determines which platform styles to use. +Possible values are: `"ios"` or `"md"`. + + #### multiple boolean diff --git a/core/src/components/refresher/readme.md b/core/src/components/refresher/readme.md index 26ce10f33c2..2001fb16c9f 100644 --- a/core/src/components/refresher/readme.md +++ b/core/src/components/refresher/readme.md @@ -26,7 +26,7 @@ Time it takes to close the refresher. Defaults to `280ms`. boolean -If true, the refresher will be hidden. Defaults to `true`. +If true, the refresher will be hidden. Defaults to `false`. #### pullMax @@ -66,7 +66,7 @@ Time it takes to close the refresher. Defaults to `280ms`. boolean -If true, the refresher will be hidden. Defaults to `true`. +If true, the refresher will be hidden. Defaults to `false`. #### pull-max diff --git a/core/src/components/textarea/readme.md b/core/src/components/textarea/readme.md index 939362b9706..9f948d68c8e 100644 --- a/core/src/components/textarea/readme.md +++ b/core/src/components/textarea/readme.md @@ -41,6 +41,15 @@ boolean If true, the value will be cleared after focus upon edit. Defaults to `true` when `type` is `"password"`, `false` for all other types. +#### color + +string + +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). + + #### cols number @@ -76,6 +85,14 @@ number 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. +#### mode + +string + +The mode determines which platform styles to use. +Possible values are: `"ios"` or `"md"`. + + #### name string @@ -162,6 +179,15 @@ boolean If true, the value will be cleared after focus upon edit. Defaults to `true` when `type` is `"password"`, `false` for all other types. +#### color + +string + +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). + + #### cols number @@ -197,6 +223,14 @@ number 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. +#### mode + +string + +The mode determines which platform styles to use. +Possible values are: `"ios"` or `"md"`. + + #### name string diff --git a/core/src/components/textarea/textarea.scss b/core/src/components/textarea/textarea.scss index 53ff4c0bb5d..2c83e49061a 100644 --- a/core/src/components/textarea/textarea.scss +++ b/core/src/components/textarea/textarea.scss @@ -19,6 +19,10 @@ box-sizing: border-box; } +:host(.ion-color) { + color: #{current-color(base)}; +} + // Textarea Within An Item // -------------------------------------------------- @@ -31,6 +35,7 @@ // -------------------------------------------------- .native-textarea { + @include text-inherit(); @include border-radius(var(--border-radius)); @include placeholder(var(--placeholder-color)); @include margin(0); @@ -47,11 +52,6 @@ background: transparent; - font-family: inherit; - font-size: inherit; - font-weight: inherit; - - letter-spacing: inherit; box-sizing: border-box; resize: none; appearance: none; diff --git a/core/src/components/textarea/textarea.tsx b/core/src/components/textarea/textarea.tsx index 18495cf81f8..aba7d40443f 100644 --- a/core/src/components/textarea/textarea.tsx +++ b/core/src/components/textarea/textarea.tsx @@ -17,9 +17,6 @@ export class Textarea implements TextareaComponent { private inputEl?: HTMLTextAreaElement; private inputId = `ion-input-${textareaIds++}`; - mode!: Mode; - color?: Color; - didBlurAfterEdit = false; @Element() el!: HTMLElement; @@ -51,6 +48,19 @@ export class Textarea implements TextareaComponent { */ @Event() ionFocus!: EventEmitter; + /** + * 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). + */ + @Prop() color?: Color; + + /** + * The mode determines which platform styles to use. + * Possible values are: `"ios"` or `"md"`. + */ + @Prop() mode!: Mode; + /** * Indicates whether and how the text value should be automatically capitalized as it is entered/edited by the user. Defaults to `"none"`. */