From 33fbddea6cad1ac8598f04b6a8d1806f5e2477f4 Mon Sep 17 00:00:00 2001 From: Jordan Jones Date: Mon, 16 Dec 2024 14:19:41 -0800 Subject: [PATCH] fix: remove any instances of type=numeric #120 --- components/checkbox/demo/api.min.js | 2 +- components/checkbox/demo/index.min.js | 2 +- components/combobox/demo/api.min.js | 28 +++++++++---------- components/combobox/demo/index.min.js | 28 +++++++++---------- components/datepicker/demo/api.min.js | 28 +++++++++---------- components/datepicker/demo/index.min.js | 28 +++++++++---------- .../{maxNumeric.html => maxNumber.html} | 0 .../{minNumeric.html => minNumber.html} | 0 components/input/demo/api.md | 28 +++++++++---------- components/input/demo/api.min.js | 26 ++++++++--------- components/input/demo/index.min.js | 26 ++++++++--------- components/input/docs/api.md | 4 +-- components/input/docs/partials/api.md | 16 +++++------ components/input/src/base-input.js | 24 ++++++++-------- components/radio/demo/api.min.js | 2 +- components/radio/demo/index.min.js | 2 +- packages/form-validation/src/validation.js | 2 +- 17 files changed, 123 insertions(+), 123 deletions(-) rename components/input/apiExamples/{maxNumeric.html => maxNumber.html} (100%) rename components/input/apiExamples/{minNumeric.html => minNumber.html} (100%) diff --git a/components/checkbox/demo/api.min.js b/components/checkbox/demo/api.min.js index 0d321fc4..999c7968 100644 --- a/components/checkbox/demo/api.min.js +++ b/components/checkbox/demo/api.min.js @@ -349,7 +349,7 @@ class AuroFormValidation { elem.validity = 'tooShort'; elem.setCustomValidity = elem.setCustomValidityForType || ''; } - } else if (elem.type === 'number' || elem.type === 'numeric') { // 'numeric` is a deprecated alias for number' + } else if (elem.type === 'number') { if (elem.max !== undefined && Number(elem.max) < Number(elem.value)) { elem.validity = 'rangeOverflow'; elem.setCustomValidity = elem.getAttribute('setCustomValidityRangeOverflow') || ''; diff --git a/components/checkbox/demo/index.min.js b/components/checkbox/demo/index.min.js index 0d321fc4..999c7968 100644 --- a/components/checkbox/demo/index.min.js +++ b/components/checkbox/demo/index.min.js @@ -349,7 +349,7 @@ class AuroFormValidation { elem.validity = 'tooShort'; elem.setCustomValidity = elem.setCustomValidityForType || ''; } - } else if (elem.type === 'number' || elem.type === 'numeric') { // 'numeric` is a deprecated alias for number' + } else if (elem.type === 'number') { if (elem.max !== undefined && Number(elem.max) < Number(elem.value)) { elem.validity = 'rangeOverflow'; elem.setCustomValidity = elem.getAttribute('setCustomValidityRangeOverflow') || ''; diff --git a/components/combobox/demo/api.min.js b/components/combobox/demo/api.min.js index fba85bf0..ee85ed14 100644 --- a/components/combobox/demo/api.min.js +++ b/components/combobox/demo/api.min.js @@ -316,7 +316,7 @@ let AuroFormValidation$1 = class AuroFormValidation { elem.validity = 'tooShort'; elem.setCustomValidity = elem.setCustomValidityForType || ''; } - } else if (elem.type === 'number' || elem.type === 'numeric') { // 'numeric` is a deprecated alias for number' + } else if (elem.type === 'number') { if (elem.max !== undefined && Number(elem.max) < Number(elem.value)) { elem.validity = 'rangeOverflow'; elem.setCustomValidity = elem.getAttribute('setCustomValidityRangeOverflow') || ''; @@ -5186,7 +5186,7 @@ class AuroFormValidation { elem.validity = 'tooShort'; elem.setCustomValidity = elem.setCustomValidityForType || ''; } - } else if (elem.type === 'number' || elem.type === 'numeric') { // 'numeric` is a deprecated alias for number' + } else if (elem.type === 'number') { if (elem.max !== undefined && Number(elem.max) < Number(elem.value)) { elem.validity = 'rangeOverflow'; elem.setCustomValidity = elem.getAttribute('setCustomValidityRangeOverflow') || ''; @@ -5395,9 +5395,9 @@ class AuroFormValidation { * @attr {String} isValid - (DEPRECATED - Please use validity) Can be accessed to determine if the input validity. Returns true when validity has not yet been checked or validity = 'valid', all other cases return false. Not intended to be set by the consumer. * @attr {String} label - Deprecated, see `slot`. * @attr {String} lang - defines the language of an element. - * @attr {String} max - The maximum value allowed. This only applies for inputs with a type of `numeric` and all date formats. + * @attr {String} max - The maximum value allowed. This only applies for inputs with a type of `number` and all date formats. * @attr {Number} maxLength - The maximum number of characters the user can enter into the text input. This must be an integer value `0` or higher. - * @attr {String} min - The minimum value allowed. This only applies for inputs with a type of `numeric` and all date formats. + * @attr {String} min - The minimum value allowed. This only applies for inputs with a type of `number` and all date formats. * @attr {Number} minLength - The minimum number of characters the user can enter into the text input. This must be an non-negative integer value smaller than or equal to the value specified by `maxlength`. * @attr {String} name - Populates the `name` attribute on the input. * @attr {Boolean} noValidate - If set, disables auto-validation on blur. @@ -5606,7 +5606,7 @@ class BaseInput extends r { delimiter: '' }; - this.inputMode = 'numeric'; + this.inputMode = 'number'; break; @@ -5615,7 +5615,7 @@ class BaseInput extends r { creditCard: true }; - this.inputMode = 'numeric'; + this.inputMode = 'number'; break; @@ -5630,7 +5630,7 @@ class BaseInput extends r { ] }; - this.inputMode = 'numeric'; + this.inputMode = 'number'; break; @@ -5645,7 +5645,7 @@ class BaseInput extends r { ] }; - this.inputMode = 'numeric'; + this.inputMode = 'number'; break; @@ -5658,7 +5658,7 @@ class BaseInput extends r { ] }; - this.inputMode = 'numeric'; + this.inputMode = 'number'; break; @@ -5671,7 +5671,7 @@ class BaseInput extends r { ] }; - this.inputMode = 'numeric'; + this.inputMode = 'number'; break; @@ -5681,7 +5681,7 @@ class BaseInput extends r { datePattern: ['Y'] }; - this.inputMode = 'numeric'; + this.inputMode = 'number'; break; @@ -5691,7 +5691,7 @@ class BaseInput extends r { datePattern: ['y'] }; - this.inputMode = 'numeric'; + this.inputMode = 'number'; break; @@ -5701,7 +5701,7 @@ class BaseInput extends r { datePattern: ['m'] }; - this.inputMode = 'numeric'; + this.inputMode = 'number'; break; // Do nothing @@ -5965,7 +5965,7 @@ class BaseInput extends r { * @return {void} */ handleInput() { - // Prevent non-numeric characters from being entered on credit card fields. + // Prevent non-number characters from being entered on credit card fields. if (this.type === 'credit-card') { this.inputElement.value = this.inputElement.value.replace(/[\D]/gu, ''); } diff --git a/components/combobox/demo/index.min.js b/components/combobox/demo/index.min.js index 25da9342..395a77fa 100644 --- a/components/combobox/demo/index.min.js +++ b/components/combobox/demo/index.min.js @@ -220,7 +220,7 @@ let AuroFormValidation$1 = class AuroFormValidation { elem.validity = 'tooShort'; elem.setCustomValidity = elem.setCustomValidityForType || ''; } - } else if (elem.type === 'number' || elem.type === 'numeric') { // 'numeric` is a deprecated alias for number' + } else if (elem.type === 'number') { if (elem.max !== undefined && Number(elem.max) < Number(elem.value)) { elem.validity = 'rangeOverflow'; elem.setCustomValidity = elem.getAttribute('setCustomValidityRangeOverflow') || ''; @@ -5090,7 +5090,7 @@ class AuroFormValidation { elem.validity = 'tooShort'; elem.setCustomValidity = elem.setCustomValidityForType || ''; } - } else if (elem.type === 'number' || elem.type === 'numeric') { // 'numeric` is a deprecated alias for number' + } else if (elem.type === 'number') { if (elem.max !== undefined && Number(elem.max) < Number(elem.value)) { elem.validity = 'rangeOverflow'; elem.setCustomValidity = elem.getAttribute('setCustomValidityRangeOverflow') || ''; @@ -5299,9 +5299,9 @@ class AuroFormValidation { * @attr {String} isValid - (DEPRECATED - Please use validity) Can be accessed to determine if the input validity. Returns true when validity has not yet been checked or validity = 'valid', all other cases return false. Not intended to be set by the consumer. * @attr {String} label - Deprecated, see `slot`. * @attr {String} lang - defines the language of an element. - * @attr {String} max - The maximum value allowed. This only applies for inputs with a type of `numeric` and all date formats. + * @attr {String} max - The maximum value allowed. This only applies for inputs with a type of `number` and all date formats. * @attr {Number} maxLength - The maximum number of characters the user can enter into the text input. This must be an integer value `0` or higher. - * @attr {String} min - The minimum value allowed. This only applies for inputs with a type of `numeric` and all date formats. + * @attr {String} min - The minimum value allowed. This only applies for inputs with a type of `number` and all date formats. * @attr {Number} minLength - The minimum number of characters the user can enter into the text input. This must be an non-negative integer value smaller than or equal to the value specified by `maxlength`. * @attr {String} name - Populates the `name` attribute on the input. * @attr {Boolean} noValidate - If set, disables auto-validation on blur. @@ -5510,7 +5510,7 @@ class BaseInput extends r { delimiter: '' }; - this.inputMode = 'numeric'; + this.inputMode = 'number'; break; @@ -5519,7 +5519,7 @@ class BaseInput extends r { creditCard: true }; - this.inputMode = 'numeric'; + this.inputMode = 'number'; break; @@ -5534,7 +5534,7 @@ class BaseInput extends r { ] }; - this.inputMode = 'numeric'; + this.inputMode = 'number'; break; @@ -5549,7 +5549,7 @@ class BaseInput extends r { ] }; - this.inputMode = 'numeric'; + this.inputMode = 'number'; break; @@ -5562,7 +5562,7 @@ class BaseInput extends r { ] }; - this.inputMode = 'numeric'; + this.inputMode = 'number'; break; @@ -5575,7 +5575,7 @@ class BaseInput extends r { ] }; - this.inputMode = 'numeric'; + this.inputMode = 'number'; break; @@ -5585,7 +5585,7 @@ class BaseInput extends r { datePattern: ['Y'] }; - this.inputMode = 'numeric'; + this.inputMode = 'number'; break; @@ -5595,7 +5595,7 @@ class BaseInput extends r { datePattern: ['y'] }; - this.inputMode = 'numeric'; + this.inputMode = 'number'; break; @@ -5605,7 +5605,7 @@ class BaseInput extends r { datePattern: ['m'] }; - this.inputMode = 'numeric'; + this.inputMode = 'number'; break; // Do nothing @@ -5869,7 +5869,7 @@ class BaseInput extends r { * @return {void} */ handleInput() { - // Prevent non-numeric characters from being entered on credit card fields. + // Prevent non-number characters from being entered on credit card fields. if (this.type === 'credit-card') { this.inputElement.value = this.inputElement.value.replace(/[\D]/gu, ''); } diff --git a/components/datepicker/demo/api.min.js b/components/datepicker/demo/api.min.js index add5bf83..81173fe8 100644 --- a/components/datepicker/demo/api.min.js +++ b/components/datepicker/demo/api.min.js @@ -409,7 +409,7 @@ let AuroFormValidation$1 = class AuroFormValidation { elem.validity = 'tooShort'; elem.setCustomValidity = elem.setCustomValidityForType || ''; } - } else if (elem.type === 'number' || elem.type === 'numeric') { // 'numeric` is a deprecated alias for number' + } else if (elem.type === 'number') { if (elem.max !== undefined && Number(elem.max) < Number(elem.value)) { elem.validity = 'rangeOverflow'; elem.setCustomValidity = elem.getAttribute('setCustomValidityRangeOverflow') || ''; @@ -15365,7 +15365,7 @@ class AuroFormValidation { elem.validity = 'tooShort'; elem.setCustomValidity = elem.setCustomValidityForType || ''; } - } else if (elem.type === 'number' || elem.type === 'numeric') { // 'numeric` is a deprecated alias for number' + } else if (elem.type === 'number') { if (elem.max !== undefined && Number(elem.max) < Number(elem.value)) { elem.validity = 'rangeOverflow'; elem.setCustomValidity = elem.getAttribute('setCustomValidityRangeOverflow') || ''; @@ -15574,9 +15574,9 @@ class AuroFormValidation { * @attr {String} isValid - (DEPRECATED - Please use validity) Can be accessed to determine if the input validity. Returns true when validity has not yet been checked or validity = 'valid', all other cases return false. Not intended to be set by the consumer. * @attr {String} label - Deprecated, see `slot`. * @attr {String} lang - defines the language of an element. - * @attr {String} max - The maximum value allowed. This only applies for inputs with a type of `numeric` and all date formats. + * @attr {String} max - The maximum value allowed. This only applies for inputs with a type of `number` and all date formats. * @attr {Number} maxLength - The maximum number of characters the user can enter into the text input. This must be an integer value `0` or higher. - * @attr {String} min - The minimum value allowed. This only applies for inputs with a type of `numeric` and all date formats. + * @attr {String} min - The minimum value allowed. This only applies for inputs with a type of `number` and all date formats. * @attr {Number} minLength - The minimum number of characters the user can enter into the text input. This must be an non-negative integer value smaller than or equal to the value specified by `maxlength`. * @attr {String} name - Populates the `name` attribute on the input. * @attr {Boolean} noValidate - If set, disables auto-validation on blur. @@ -15785,7 +15785,7 @@ class BaseInput extends r { delimiter: '' }; - this.inputMode = 'numeric'; + this.inputMode = 'number'; break; @@ -15794,7 +15794,7 @@ class BaseInput extends r { creditCard: true }; - this.inputMode = 'numeric'; + this.inputMode = 'number'; break; @@ -15809,7 +15809,7 @@ class BaseInput extends r { ] }; - this.inputMode = 'numeric'; + this.inputMode = 'number'; break; @@ -15824,7 +15824,7 @@ class BaseInput extends r { ] }; - this.inputMode = 'numeric'; + this.inputMode = 'number'; break; @@ -15837,7 +15837,7 @@ class BaseInput extends r { ] }; - this.inputMode = 'numeric'; + this.inputMode = 'number'; break; @@ -15850,7 +15850,7 @@ class BaseInput extends r { ] }; - this.inputMode = 'numeric'; + this.inputMode = 'number'; break; @@ -15860,7 +15860,7 @@ class BaseInput extends r { datePattern: ['Y'] }; - this.inputMode = 'numeric'; + this.inputMode = 'number'; break; @@ -15870,7 +15870,7 @@ class BaseInput extends r { datePattern: ['y'] }; - this.inputMode = 'numeric'; + this.inputMode = 'number'; break; @@ -15880,7 +15880,7 @@ class BaseInput extends r { datePattern: ['m'] }; - this.inputMode = 'numeric'; + this.inputMode = 'number'; break; // Do nothing @@ -16144,7 +16144,7 @@ class BaseInput extends r { * @return {void} */ handleInput() { - // Prevent non-numeric characters from being entered on credit card fields. + // Prevent non-number characters from being entered on credit card fields. if (this.type === 'credit-card') { this.inputElement.value = this.inputElement.value.replace(/[\D]/gu, ''); } diff --git a/components/datepicker/demo/index.min.js b/components/datepicker/demo/index.min.js index 1d773abf..4b696e45 100644 --- a/components/datepicker/demo/index.min.js +++ b/components/datepicker/demo/index.min.js @@ -157,7 +157,7 @@ let AuroFormValidation$1 = class AuroFormValidation { elem.validity = 'tooShort'; elem.setCustomValidity = elem.setCustomValidityForType || ''; } - } else if (elem.type === 'number' || elem.type === 'numeric') { // 'numeric` is a deprecated alias for number' + } else if (elem.type === 'number') { if (elem.max !== undefined && Number(elem.max) < Number(elem.value)) { elem.validity = 'rangeOverflow'; elem.setCustomValidity = elem.getAttribute('setCustomValidityRangeOverflow') || ''; @@ -15113,7 +15113,7 @@ class AuroFormValidation { elem.validity = 'tooShort'; elem.setCustomValidity = elem.setCustomValidityForType || ''; } - } else if (elem.type === 'number' || elem.type === 'numeric') { // 'numeric` is a deprecated alias for number' + } else if (elem.type === 'number') { if (elem.max !== undefined && Number(elem.max) < Number(elem.value)) { elem.validity = 'rangeOverflow'; elem.setCustomValidity = elem.getAttribute('setCustomValidityRangeOverflow') || ''; @@ -15322,9 +15322,9 @@ class AuroFormValidation { * @attr {String} isValid - (DEPRECATED - Please use validity) Can be accessed to determine if the input validity. Returns true when validity has not yet been checked or validity = 'valid', all other cases return false. Not intended to be set by the consumer. * @attr {String} label - Deprecated, see `slot`. * @attr {String} lang - defines the language of an element. - * @attr {String} max - The maximum value allowed. This only applies for inputs with a type of `numeric` and all date formats. + * @attr {String} max - The maximum value allowed. This only applies for inputs with a type of `number` and all date formats. * @attr {Number} maxLength - The maximum number of characters the user can enter into the text input. This must be an integer value `0` or higher. - * @attr {String} min - The minimum value allowed. This only applies for inputs with a type of `numeric` and all date formats. + * @attr {String} min - The minimum value allowed. This only applies for inputs with a type of `number` and all date formats. * @attr {Number} minLength - The minimum number of characters the user can enter into the text input. This must be an non-negative integer value smaller than or equal to the value specified by `maxlength`. * @attr {String} name - Populates the `name` attribute on the input. * @attr {Boolean} noValidate - If set, disables auto-validation on blur. @@ -15533,7 +15533,7 @@ class BaseInput extends r { delimiter: '' }; - this.inputMode = 'numeric'; + this.inputMode = 'number'; break; @@ -15542,7 +15542,7 @@ class BaseInput extends r { creditCard: true }; - this.inputMode = 'numeric'; + this.inputMode = 'number'; break; @@ -15557,7 +15557,7 @@ class BaseInput extends r { ] }; - this.inputMode = 'numeric'; + this.inputMode = 'number'; break; @@ -15572,7 +15572,7 @@ class BaseInput extends r { ] }; - this.inputMode = 'numeric'; + this.inputMode = 'number'; break; @@ -15585,7 +15585,7 @@ class BaseInput extends r { ] }; - this.inputMode = 'numeric'; + this.inputMode = 'number'; break; @@ -15598,7 +15598,7 @@ class BaseInput extends r { ] }; - this.inputMode = 'numeric'; + this.inputMode = 'number'; break; @@ -15608,7 +15608,7 @@ class BaseInput extends r { datePattern: ['Y'] }; - this.inputMode = 'numeric'; + this.inputMode = 'number'; break; @@ -15618,7 +15618,7 @@ class BaseInput extends r { datePattern: ['y'] }; - this.inputMode = 'numeric'; + this.inputMode = 'number'; break; @@ -15628,7 +15628,7 @@ class BaseInput extends r { datePattern: ['m'] }; - this.inputMode = 'numeric'; + this.inputMode = 'number'; break; // Do nothing @@ -15892,7 +15892,7 @@ class BaseInput extends r { * @return {void} */ handleInput() { - // Prevent non-numeric characters from being entered on credit card fields. + // Prevent non-number characters from being entered on credit card fields. if (this.type === 'credit-card') { this.inputElement.value = this.inputElement.value.replace(/[\D]/gu, ''); } diff --git a/components/input/apiExamples/maxNumeric.html b/components/input/apiExamples/maxNumber.html similarity index 100% rename from components/input/apiExamples/maxNumeric.html rename to components/input/apiExamples/maxNumber.html diff --git a/components/input/apiExamples/minNumeric.html b/components/input/apiExamples/minNumber.html similarity index 100% rename from components/input/apiExamples/minNumeric.html rename to components/input/apiExamples/minNumber.html diff --git a/components/input/demo/api.md b/components/input/demo/api.md index dd3baa65..198a768c 100644 --- a/components/input/demo/api.md +++ b/components/input/demo/api.md @@ -47,9 +47,9 @@ Generate unique names for dependency components. | [isValid](#isValid) | `isValid` | `String` | false | (DEPRECATED - Please use validity) Can be accessed to determine if the input validity. Returns true when validity has not yet been checked or validity = 'valid', all other cases return false. Not intended to be set by the consumer. | | [label](#label) | `label` | `String` | "Input label is undefined" | Deprecated, see `slot`. | | [lang](#lang) | `lang` | `String` | | defines the language of an element. | -| [max](#max) | `max` | `String` | "undefined" | The maximum value allowed. This only applies for inputs with a type of `numeric` and all date formats. | +| [max](#max) | `max` | `String` | "undefined" | The maximum value allowed. This only applies for inputs with a type of `number` and all date formats. | | [maxLength](#maxLength) | `maxLength` | `Number` | "undefined" | The maximum number of characters the user can enter into the text input. This must be an integer value `0` or higher. | -| [min](#min) | `min` | `String` | "undefined" | The minimum value allowed. This only applies for inputs with a type of `numeric` and all date formats. | +| [min](#min) | `min` | `String` | "undefined" | The minimum value allowed. This only applies for inputs with a type of `number` and all date formats. | | [minLength](#minLength) | `minLength` | `Number` | "undefined" | The minimum number of characters the user can enter into the text input. This must be an non-negative integer value smaller than or equal to the value specified by `maxlength`. | | [name](#name) | `name` | `String` | | Populates the `name` attribute on the input. | | [noValidate](#noValidate) | `noValidate` | `Boolean` | false | If set, disables auto-validation on blur. | @@ -281,7 +281,7 @@ export function programmaticallySetValue() { ### Max -Use the `max` attribute to define a maximum value used during validation. The attribute will only apply when `` also has a `type` attribute for `numeric` or any date format. +Use the `max` attribute to define a maximum value used during validation. The attribute will only apply when `` also has a `type` attribute for `number` or any date format. The `max` attribute should be used in combination with the `setCustomValidityRangeOverflow` attribute to define help text used when the `max` attribute validation fails. @@ -308,11 +308,11 @@ The `max` attribute should be used in combination with the `setCustomValidityRan -#### Numeric Example +#### Number Example
- - + + Choose a number @@ -320,8 +320,8 @@ The `max` attribute should be used in combination with the `setCustomValidityRan
See code - - + + ```html @@ -332,7 +332,7 @@ The `max` attribute should be used in combination with the `setCustomValidityRan ### Min -Use the `min` attribute to define a minimum value used during validation. The attribute will only apply when `` also has a `type` attribute for numeric or any date format. +Use the `min` attribute to define a minimum value used during validation. The attribute will only apply when `` also has a `type` attribute for `number` or any date format. The `min` attribute should be used in combination with the `setCustomValidityRangeUnderflow` attribute to define help text used when the `min` attribute validation fails. @@ -359,11 +359,11 @@ The `min` attribute should be used in combination with the `setCustomValidityRan -#### Numeric Example +#### Number Example
- - + + Choose a number @@ -371,8 +371,8 @@ The `min` attribute should be used in combination with the `setCustomValidityRan
See code - - + + ```html diff --git a/components/input/demo/api.min.js b/components/input/demo/api.min.js index babcedf0..0d158cef 100644 --- a/components/input/demo/api.min.js +++ b/components/input/demo/api.min.js @@ -1926,7 +1926,7 @@ class AuroFormValidation { elem.validity = 'tooShort'; elem.setCustomValidity = elem.setCustomValidityForType || ''; } - } else if (elem.type === 'number' || elem.type === 'numeric') { // 'numeric` is a deprecated alias for number' + } else if (elem.type === 'number') { if (elem.max !== undefined && Number(elem.max) < Number(elem.value)) { elem.validity = 'rangeOverflow'; elem.setCustomValidity = elem.getAttribute('setCustomValidityRangeOverflow') || ''; @@ -2135,9 +2135,9 @@ class AuroFormValidation { * @attr {String} isValid - (DEPRECATED - Please use validity) Can be accessed to determine if the input validity. Returns true when validity has not yet been checked or validity = 'valid', all other cases return false. Not intended to be set by the consumer. * @attr {String} label - Deprecated, see `slot`. * @attr {String} lang - defines the language of an element. - * @attr {String} max - The maximum value allowed. This only applies for inputs with a type of `numeric` and all date formats. + * @attr {String} max - The maximum value allowed. This only applies for inputs with a type of `number` and all date formats. * @attr {Number} maxLength - The maximum number of characters the user can enter into the text input. This must be an integer value `0` or higher. - * @attr {String} min - The minimum value allowed. This only applies for inputs with a type of `numeric` and all date formats. + * @attr {String} min - The minimum value allowed. This only applies for inputs with a type of `number` and all date formats. * @attr {Number} minLength - The minimum number of characters the user can enter into the text input. This must be an non-negative integer value smaller than or equal to the value specified by `maxlength`. * @attr {String} name - Populates the `name` attribute on the input. * @attr {Boolean} noValidate - If set, disables auto-validation on blur. @@ -2346,7 +2346,7 @@ class BaseInput extends r { delimiter: '' }; - this.inputMode = 'numeric'; + this.inputMode = 'number'; break; @@ -2355,7 +2355,7 @@ class BaseInput extends r { creditCard: true }; - this.inputMode = 'numeric'; + this.inputMode = 'number'; break; @@ -2370,7 +2370,7 @@ class BaseInput extends r { ] }; - this.inputMode = 'numeric'; + this.inputMode = 'number'; break; @@ -2385,7 +2385,7 @@ class BaseInput extends r { ] }; - this.inputMode = 'numeric'; + this.inputMode = 'number'; break; @@ -2398,7 +2398,7 @@ class BaseInput extends r { ] }; - this.inputMode = 'numeric'; + this.inputMode = 'number'; break; @@ -2411,7 +2411,7 @@ class BaseInput extends r { ] }; - this.inputMode = 'numeric'; + this.inputMode = 'number'; break; @@ -2421,7 +2421,7 @@ class BaseInput extends r { datePattern: ['Y'] }; - this.inputMode = 'numeric'; + this.inputMode = 'number'; break; @@ -2431,7 +2431,7 @@ class BaseInput extends r { datePattern: ['y'] }; - this.inputMode = 'numeric'; + this.inputMode = 'number'; break; @@ -2441,7 +2441,7 @@ class BaseInput extends r { datePattern: ['m'] }; - this.inputMode = 'numeric'; + this.inputMode = 'number'; break; // Do nothing @@ -2705,7 +2705,7 @@ class BaseInput extends r { * @return {void} */ handleInput() { - // Prevent non-numeric characters from being entered on credit card fields. + // Prevent non-number characters from being entered on credit card fields. if (this.type === 'credit-card') { this.inputElement.value = this.inputElement.value.replace(/[\D]/gu, ''); } diff --git a/components/input/demo/index.min.js b/components/input/demo/index.min.js index cff3c794..b7fe0581 100644 --- a/components/input/demo/index.min.js +++ b/components/input/demo/index.min.js @@ -1872,7 +1872,7 @@ class AuroFormValidation { elem.validity = 'tooShort'; elem.setCustomValidity = elem.setCustomValidityForType || ''; } - } else if (elem.type === 'number' || elem.type === 'numeric') { // 'numeric` is a deprecated alias for number' + } else if (elem.type === 'number') { if (elem.max !== undefined && Number(elem.max) < Number(elem.value)) { elem.validity = 'rangeOverflow'; elem.setCustomValidity = elem.getAttribute('setCustomValidityRangeOverflow') || ''; @@ -2081,9 +2081,9 @@ class AuroFormValidation { * @attr {String} isValid - (DEPRECATED - Please use validity) Can be accessed to determine if the input validity. Returns true when validity has not yet been checked or validity = 'valid', all other cases return false. Not intended to be set by the consumer. * @attr {String} label - Deprecated, see `slot`. * @attr {String} lang - defines the language of an element. - * @attr {String} max - The maximum value allowed. This only applies for inputs with a type of `numeric` and all date formats. + * @attr {String} max - The maximum value allowed. This only applies for inputs with a type of `number` and all date formats. * @attr {Number} maxLength - The maximum number of characters the user can enter into the text input. This must be an integer value `0` or higher. - * @attr {String} min - The minimum value allowed. This only applies for inputs with a type of `numeric` and all date formats. + * @attr {String} min - The minimum value allowed. This only applies for inputs with a type of `number` and all date formats. * @attr {Number} minLength - The minimum number of characters the user can enter into the text input. This must be an non-negative integer value smaller than or equal to the value specified by `maxlength`. * @attr {String} name - Populates the `name` attribute on the input. * @attr {Boolean} noValidate - If set, disables auto-validation on blur. @@ -2292,7 +2292,7 @@ class BaseInput extends r { delimiter: '' }; - this.inputMode = 'numeric'; + this.inputMode = 'number'; break; @@ -2301,7 +2301,7 @@ class BaseInput extends r { creditCard: true }; - this.inputMode = 'numeric'; + this.inputMode = 'number'; break; @@ -2316,7 +2316,7 @@ class BaseInput extends r { ] }; - this.inputMode = 'numeric'; + this.inputMode = 'number'; break; @@ -2331,7 +2331,7 @@ class BaseInput extends r { ] }; - this.inputMode = 'numeric'; + this.inputMode = 'number'; break; @@ -2344,7 +2344,7 @@ class BaseInput extends r { ] }; - this.inputMode = 'numeric'; + this.inputMode = 'number'; break; @@ -2357,7 +2357,7 @@ class BaseInput extends r { ] }; - this.inputMode = 'numeric'; + this.inputMode = 'number'; break; @@ -2367,7 +2367,7 @@ class BaseInput extends r { datePattern: ['Y'] }; - this.inputMode = 'numeric'; + this.inputMode = 'number'; break; @@ -2377,7 +2377,7 @@ class BaseInput extends r { datePattern: ['y'] }; - this.inputMode = 'numeric'; + this.inputMode = 'number'; break; @@ -2387,7 +2387,7 @@ class BaseInput extends r { datePattern: ['m'] }; - this.inputMode = 'numeric'; + this.inputMode = 'number'; break; // Do nothing @@ -2651,7 +2651,7 @@ class BaseInput extends r { * @return {void} */ handleInput() { - // Prevent non-numeric characters from being entered on credit card fields. + // Prevent non-number characters from being entered on credit card fields. if (this.type === 'credit-card') { this.inputElement.value = this.inputElement.value.replace(/[\D]/gu, ''); } diff --git a/components/input/docs/api.md b/components/input/docs/api.md index 78e8d541..4802ab70 100644 --- a/components/input/docs/api.md +++ b/components/input/docs/api.md @@ -27,9 +27,9 @@ Generate unique names for dependency components. | `isValid` | `isValid` | `String` | false | (DEPRECATED - Please use validity) Can be accessed to determine if the input validity. Returns true when validity has not yet been checked or validity = 'valid', all other cases return false. Not intended to be set by the consumer. | | `label` | `label` | `String` | "Input label is undefined" | Deprecated, see `slot`. | | `lang` | `lang` | `String` | | defines the language of an element. | -| `max` | `max` | `String` | "undefined" | The maximum value allowed. This only applies for inputs with a type of `numeric` and all date formats. | +| `max` | `max` | `String` | "undefined" | The maximum value allowed. This only applies for inputs with a type of `number` and all date formats. | | `maxLength` | `maxLength` | `Number` | "undefined" | The maximum number of characters the user can enter into the text input. This must be an integer value `0` or higher. | -| `min` | `min` | `String` | "undefined" | The minimum value allowed. This only applies for inputs with a type of `numeric` and all date formats. | +| `min` | `min` | `String` | "undefined" | The minimum value allowed. This only applies for inputs with a type of `number` and all date formats. | | `minLength` | `minLength` | `Number` | "undefined" | The minimum number of characters the user can enter into the text input. This must be an non-negative integer value smaller than or equal to the value specified by `maxlength`. | | `name` | `name` | `String` | | Populates the `name` attribute on the input. | | `noValidate` | `noValidate` | `Boolean` | false | If set, disables auto-validation on blur. | diff --git a/components/input/docs/partials/api.md b/components/input/docs/partials/api.md index 62562943..392b016a 100644 --- a/components/input/docs/partials/api.md +++ b/components/input/docs/partials/api.md @@ -123,7 +123,7 @@ Note: Setting the `value` to `undefined` will also reset the element. ### Max -Use the `max` attribute to define a maximum value used during validation. The attribute will only apply when `` also has a `type` attribute for `numeric` or any date format. +Use the `max` attribute to define a maximum value used during validation. The attribute will only apply when `` also has a `type` attribute for `number` or any date format. The `max` attribute should be used in combination with the `setCustomValidityRangeOverflow` attribute to define help text used when the `max` attribute validation fails. @@ -142,24 +142,24 @@ The `max` attribute should be used in combination with the `setCustomValidityRan -#### Numeric Example +#### Number Example
- +
See code - + ### Min -Use the `min` attribute to define a minimum value used during validation. The attribute will only apply when `` also has a `type` attribute for numeric or any date format. +Use the `min` attribute to define a minimum value used during validation. The attribute will only apply when `` also has a `type` attribute for `number` or any date format. The `min` attribute should be used in combination with the `setCustomValidityRangeUnderflow` attribute to define help text used when the `min` attribute validation fails. @@ -178,17 +178,17 @@ The `min` attribute should be used in combination with the `setCustomValidityRan -#### Numeric Example +#### Number Example
- +
See code - + diff --git a/components/input/src/base-input.js b/components/input/src/base-input.js index 5fa74628..8d87cdbe 100644 --- a/components/input/src/base-input.js +++ b/components/input/src/base-input.js @@ -36,9 +36,9 @@ import AuroFormValidation from '@auro-formkit/form-validation'; * @attr {String} isValid - (DEPRECATED - Please use validity) Can be accessed to determine if the input validity. Returns true when validity has not yet been checked or validity = 'valid', all other cases return false. Not intended to be set by the consumer. * @attr {String} label - Deprecated, see `slot`. * @attr {String} lang - defines the language of an element. - * @attr {String} max - The maximum value allowed. This only applies for inputs with a type of `numeric` and all date formats. + * @attr {String} max - The maximum value allowed. This only applies for inputs with a type of `number` and all date formats. * @attr {Number} maxLength - The maximum number of characters the user can enter into the text input. This must be an integer value `0` or higher. - * @attr {String} min - The minimum value allowed. This only applies for inputs with a type of `numeric` and all date formats. + * @attr {String} min - The minimum value allowed. This only applies for inputs with a type of `number` and all date formats. * @attr {Number} minLength - The minimum number of characters the user can enter into the text input. This must be an non-negative integer value smaller than or equal to the value specified by `maxlength`. * @attr {String} name - Populates the `name` attribute on the input. * @attr {Boolean} noValidate - If set, disables auto-validation on blur. @@ -247,7 +247,7 @@ export default class BaseInput extends LitElement { delimiter: '' }; - this.inputMode = 'numeric'; + this.inputMode = 'number'; break; @@ -256,7 +256,7 @@ export default class BaseInput extends LitElement { creditCard: true }; - this.inputMode = 'numeric'; + this.inputMode = 'number'; break; @@ -271,7 +271,7 @@ export default class BaseInput extends LitElement { ] }; - this.inputMode = 'numeric'; + this.inputMode = 'number'; break; @@ -286,7 +286,7 @@ export default class BaseInput extends LitElement { ] }; - this.inputMode = 'numeric'; + this.inputMode = 'number'; break; @@ -299,7 +299,7 @@ export default class BaseInput extends LitElement { ] }; - this.inputMode = 'numeric'; + this.inputMode = 'number'; break; @@ -312,7 +312,7 @@ export default class BaseInput extends LitElement { ] }; - this.inputMode = 'numeric'; + this.inputMode = 'number'; break; @@ -322,7 +322,7 @@ export default class BaseInput extends LitElement { datePattern: ['Y'] }; - this.inputMode = 'numeric'; + this.inputMode = 'number'; break; @@ -332,7 +332,7 @@ export default class BaseInput extends LitElement { datePattern: ['y'] }; - this.inputMode = 'numeric'; + this.inputMode = 'number'; break; @@ -342,7 +342,7 @@ export default class BaseInput extends LitElement { datePattern: ['m'] }; - this.inputMode = 'numeric'; + this.inputMode = 'number'; break; @@ -608,7 +608,7 @@ export default class BaseInput extends LitElement { * @return {void} */ handleInput() { - // Prevent non-numeric characters from being entered on credit card fields. + // Prevent non-number characters from being entered on credit card fields. if (this.type === 'credit-card') { this.inputElement.value = this.inputElement.value.replace(/[\D]/gu, ''); } diff --git a/components/radio/demo/api.min.js b/components/radio/demo/api.min.js index eeef14d3..a42b05a1 100644 --- a/components/radio/demo/api.min.js +++ b/components/radio/demo/api.min.js @@ -431,7 +431,7 @@ class AuroFormValidation { elem.validity = 'tooShort'; elem.setCustomValidity = elem.setCustomValidityForType || ''; } - } else if (elem.type === 'number' || elem.type === 'numeric') { // 'numeric` is a deprecated alias for number' + } else if (elem.type === 'number') { if (elem.max !== undefined && Number(elem.max) < Number(elem.value)) { elem.validity = 'rangeOverflow'; elem.setCustomValidity = elem.getAttribute('setCustomValidityRangeOverflow') || ''; diff --git a/components/radio/demo/index.min.js b/components/radio/demo/index.min.js index 0626321b..701217b6 100644 --- a/components/radio/demo/index.min.js +++ b/components/radio/demo/index.min.js @@ -414,7 +414,7 @@ class AuroFormValidation { elem.validity = 'tooShort'; elem.setCustomValidity = elem.setCustomValidityForType || ''; } - } else if (elem.type === 'number' || elem.type === 'numeric') { // 'numeric` is a deprecated alias for number' + } else if (elem.type === 'number') { if (elem.max !== undefined && Number(elem.max) < Number(elem.value)) { elem.validity = 'rangeOverflow'; elem.setCustomValidity = elem.getAttribute('setCustomValidityRangeOverflow') || ''; diff --git a/packages/form-validation/src/validation.js b/packages/form-validation/src/validation.js index a75ab838..95815640 100644 --- a/packages/form-validation/src/validation.js +++ b/packages/form-validation/src/validation.js @@ -59,7 +59,7 @@ export default class AuroFormValidation { elem.validity = 'tooShort'; elem.setCustomValidity = elem.setCustomValidityForType || ''; } - } else if (elem.type === 'number' || elem.type === 'numeric') { // 'numeric` is a deprecated alias for number' + } else if (elem.type === 'number') { if (elem.max !== undefined && Number(elem.max) < Number(elem.value)) { elem.validity = 'rangeOverflow'; elem.setCustomValidity = elem.getAttribute('setCustomValidityRangeOverflow') || '';