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/docs/api.md b/components/input/docs/api.md index 78e8d541..bc676b99 100644 --- a/components/input/docs/api.md +++ b/components/input/docs/api.md @@ -24,12 +24,11 @@ Generate unique names for dependency components. | `helpText` | `helpText` | `String` | | Deprecated, see `slot`. | | `icon` | `icon` | `Boolean` | false | If set, will render an icon inside the input to the left of the value. Support is limited to auro-input instances with credit card format. | | `id` | `id` | `String` | | Sets the unique ID of the element. | -| `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..a91e9cf9 100644 --- a/components/input/src/base-input.js +++ b/components/input/src/base-input.js @@ -33,12 +33,11 @@ import AuroFormValidation from '@auro-formkit/form-validation'; * @attr {String} helpText - Deprecated, see `slot`. * @attr {Boolean} icon - If set, will render an icon inside the input to the left of the value. Support is limited to auro-input instances with credit card format. * @attr {String} id - Sets the unique ID of the element. - * @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. @@ -78,8 +77,6 @@ export default class BaseInput extends LitElement { constructor() { super(); - this.isValid = false; - this.icon = false; this.disabled = false; this.required = false; @@ -200,10 +197,6 @@ export default class BaseInput extends LitElement { reflect: true }, errorMessage: { type: String }, - isValid: { - type: String, - reflect: true - }, validity: { type: String, reflect: true @@ -247,7 +240,7 @@ export default class BaseInput extends LitElement { delimiter: '' }; - this.inputMode = 'numeric'; + this.inputMode = 'number'; break; @@ -256,7 +249,7 @@ export default class BaseInput extends LitElement { creditCard: true }; - this.inputMode = 'numeric'; + this.inputMode = 'number'; break; @@ -271,7 +264,7 @@ export default class BaseInput extends LitElement { ] }; - this.inputMode = 'numeric'; + this.inputMode = 'number'; break; @@ -286,7 +279,7 @@ export default class BaseInput extends LitElement { ] }; - this.inputMode = 'numeric'; + this.inputMode = 'number'; break; @@ -299,7 +292,7 @@ export default class BaseInput extends LitElement { ] }; - this.inputMode = 'numeric'; + this.inputMode = 'number'; break; @@ -312,7 +305,7 @@ export default class BaseInput extends LitElement { ] }; - this.inputMode = 'numeric'; + this.inputMode = 'number'; break; @@ -322,7 +315,7 @@ export default class BaseInput extends LitElement { datePattern: ['Y'] }; - this.inputMode = 'numeric'; + this.inputMode = 'number'; break; @@ -332,7 +325,7 @@ export default class BaseInput extends LitElement { datePattern: ['y'] }; - this.inputMode = 'numeric'; + this.inputMode = 'number'; break; @@ -342,7 +335,7 @@ export default class BaseInput extends LitElement { datePattern: ['m'] }; - this.inputMode = 'numeric'; + this.inputMode = 'number'; break; @@ -608,7 +601,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/input/src/styles/input.scss b/components/input/src/styles/input.scss index 9e5fa024..a1ce7ced 100644 --- a/components/input/src/styles/input.scss +++ b/components/input/src/styles/input.scss @@ -27,3 +27,9 @@ input { pointer-events: none; } } + +:host([bordered]) { + input { + padding: var(--ds-size-400, $ds-size-400) 0 var(--ds-size-100, $ds-size-100); + } +} diff --git a/components/input/src/styles/label.scss b/components/input/src/styles/label.scss index 77554465..27d0448e 100644 --- a/components/input/src/styles/label.scss +++ b/components/input/src/styles/label.scss @@ -43,9 +43,8 @@ label { } } -// active label for non-bordered inputs @mixin active-label { - top: var(--ds-size-25, $ds-size-25); + top: var(--ds-size-100, $ds-size-100); font-size: var(--ds-text-body-size-xs, $ds-text-body-size-xs); transform: unset; } diff --git a/components/input/test/auro-input.test.js b/components/input/test/auro-input.test.js index e0991fe4..f9803392 100644 --- a/components/input/test/auro-input.test.js +++ b/components/input/test/auro-input.test.js @@ -49,7 +49,6 @@ describe('auro-input', () => { await elementUpdated(el); - expect(el.isValid).to.not.be.true; expect(text).to.contain(`that is not a valid entry`); input.focus(); @@ -58,7 +57,7 @@ describe('auro-input', () => { await elementUpdated(el); - expect(el.isValid).to.be.true; + expect(el.getAttribute('validity')).to.equal('valid'); }); it('clears the value when clicked', async () => { diff --git a/packages/form-validation/src/validation.js b/packages/form-validation/src/validation.js index 50215b92..4f75f281 100644 --- a/packages/form-validation/src/validation.js +++ b/packages/form-validation/src/validation.js @@ -26,10 +26,15 @@ export default class AuroFormValidation { elem.validity = 'badInput'; elem.setCustomValidity = elem.setCustomValidityBadInput || ''; } - } else if (elem.value && elem.value.length > 0 && elem.value.length < elem.minLength) { + } + + // Length > 0 is required to prevent the error message from showing when the input is empty + if (elem.value?.length > 0 && elem.value?.length < elem.minLength) { elem.validity = 'tooShort'; elem.setCustomValidity = elem.setCustomValidityTooShort || ''; - } else if (elem.value && elem.value.length > elem.maxLength) { + } + + if (elem.value?.length > elem.maxLength) { elem.validity = 'tooLong'; elem.setCustomValidity = elem.setCustomValidityTooLong || ''; } @@ -55,7 +60,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') || ''; @@ -144,6 +149,9 @@ export default class AuroFormValidation { this.validateType(elem); this.validateAttributes(elem); } + } else if (elem.value === undefined) { + // Reset the validity state if input is programmatically reset + elem.validity = undefined; } if (this.auroInputElements && this.auroInputElements.length > 0) { @@ -160,14 +168,10 @@ export default class AuroFormValidation { if (validationShouldRun || elem.hasAttribute('error')) { if (elem.validity && elem.validity !== 'valid') { - elem.isValid = false; - // Use the validity message override if it is declared if (elem.ValidityMessageOverride) { elem.setCustomValidity = elem.ValidityMessageOverride; } - } else { - elem.isValid = true; } this.getErrorMessage(elem);