From 3ceff8b9d680f5aab6c53164759db403162f295e Mon Sep 17 00:00:00 2001 From: Jordan Jones Date: Mon, 16 Dec 2024 13:31:32 -0800 Subject: [PATCH 1/5] fix: reset validity when setting value to undefined #118 --- packages/form-validation/src/validation.js | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/packages/form-validation/src/validation.js b/packages/form-validation/src/validation.js index 50215b9..b838dfc 100644 --- a/packages/form-validation/src/validation.js +++ b/packages/form-validation/src/validation.js @@ -144,6 +144,10 @@ 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; + elem.isValid = false; } if (this.auroInputElements && this.auroInputElements.length > 0) { From e2a72dc82daf47369359e00f2d4515ddf701500e Mon Sep 17 00:00:00 2001 From: Jordan Jones Date: Mon, 16 Dec 2024 14:07:10 -0800 Subject: [PATCH 2/5] fix: validate each individual attribute #119 --- packages/form-validation/src/validation.js | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/packages/form-validation/src/validation.js b/packages/form-validation/src/validation.js index b838dfc..ea571cc 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 || ''; } From 73eebeae464e6fc56f95303caa246fb6e50066e1 Mon Sep 17 00:00:00 2001 From: Jordan Jones Date: Mon, 16 Dec 2024 14:19:41 -0800 Subject: [PATCH 3/5] fix: remove any instances of type=numeric #120 --- .../{maxNumeric.html => maxNumber.html} | 0 .../{minNumeric.html => minNumber.html} | 0 components/input/docs/api.md | 4 ++-- components/input/docs/partials/api.md | 16 ++++++------- components/input/src/base-input.js | 24 +++++++++---------- packages/form-validation/src/validation.js | 2 +- 6 files changed, 23 insertions(+), 23 deletions(-) rename components/input/apiExamples/{maxNumeric.html => maxNumber.html} (100%) rename components/input/apiExamples/{minNumeric.html => minNumber.html} (100%) 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 78e8d54..4802ab7 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 6256294..392b016 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 5fa7462..8d87cdb 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/packages/form-validation/src/validation.js b/packages/form-validation/src/validation.js index ea571cc..76cd936 100644 --- a/packages/form-validation/src/validation.js +++ b/packages/form-validation/src/validation.js @@ -60,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') || ''; From 87a6f6075735f47714e72d2c748bf75030985722 Mon Sep 17 00:00:00 2001 From: Jordan Jones Date: Tue, 17 Dec 2024 12:15:31 -0800 Subject: [PATCH 4/5] fix: update layout to match figma #79 --- components/input/src/styles/input.scss | 6 ++++++ components/input/src/styles/label.scss | 3 +-- 2 files changed, 7 insertions(+), 2 deletions(-) diff --git a/components/input/src/styles/input.scss b/components/input/src/styles/input.scss index 9e5fa02..a1ce7ce 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 7755446..27d0448 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; } From 8845302edba68262b32b929b32f29b6acc816645 Mon Sep 17 00:00:00 2001 From: Jordan Jones Date: Tue, 17 Dec 2024 12:55:00 -0800 Subject: [PATCH 5/5] perf: remove all references of isValid attribute --- components/input/docs/api.md | 1 - components/input/src/base-input.js | 7 ------- components/input/test/auro-input.test.js | 3 +-- packages/form-validation/src/validation.js | 5 ----- 4 files changed, 1 insertion(+), 15 deletions(-) diff --git a/components/input/docs/api.md b/components/input/docs/api.md index 4802ab7..bc676b9 100644 --- a/components/input/docs/api.md +++ b/components/input/docs/api.md @@ -24,7 +24,6 @@ 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 `number` and all date formats. | diff --git a/components/input/src/base-input.js b/components/input/src/base-input.js index 8d87cdb..a91e9cf 100644 --- a/components/input/src/base-input.js +++ b/components/input/src/base-input.js @@ -33,7 +33,6 @@ 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 `number` and all date formats. @@ -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 diff --git a/components/input/test/auro-input.test.js b/components/input/test/auro-input.test.js index e0991fe..f980339 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 76cd936..4f75f28 100644 --- a/packages/form-validation/src/validation.js +++ b/packages/form-validation/src/validation.js @@ -152,7 +152,6 @@ export default class AuroFormValidation { } else if (elem.value === undefined) { // Reset the validity state if input is programmatically reset elem.validity = undefined; - elem.isValid = false; } if (this.auroInputElements && this.auroInputElements.length > 0) { @@ -169,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);