From c268402399d263372bafc2e8ab49b1add742554d Mon Sep 17 00:00:00 2001 From: beatrizmaselli Date: Thu, 19 Sep 2024 13:01:43 +0200 Subject: [PATCH 1/3] update StyleguideInput --- CHANGELOG.md | 3 +++ react/inputs/StyleguideInput/index.js | 12 ++++-------- 2 files changed, 7 insertions(+), 8 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 7b0b5bc1..2948498a 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -7,6 +7,9 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0. ## [Unreleased] +### Added +- "...-required" classNames for the StyleguideInput component. + ## [4.25.2] - 2024-09-18 ### Added diff --git a/react/inputs/StyleguideInput/index.js b/react/inputs/StyleguideInput/index.js index 6fc919f3..1efec62b 100644 --- a/react/inputs/StyleguideInput/index.js +++ b/react/inputs/StyleguideInput/index.js @@ -83,7 +83,7 @@ class StyleguideInput extends Component { const disabled = !!address[field.name].disabled - const valid = address[field.name].valid === false ? false : true + const valid = address[field.name].valid !== false const loading = loadingProp != null ? loadingProp : address[field.name].loading @@ -140,15 +140,11 @@ class StyleguideInput extends Component { field.name } vtex-address-form__field--${field.size || 'xlarge'} ${ field.hidden ? 'dn' : '' - } ${ - disabled ? 'vtex-address-form__field-disabled' : '' - } ${ + } ${disabled ? 'vtex-address-form__field-disabled' : ''} ${ !valid ? 'vtex-address-form__field-invalid' : '' - } ${ - !address[field.name].value ? 'vtex-address-form__field-empty' : '' - } ${ + } ${!address[field.name].value ? 'vtex-address-form__field-empty' : ''} ${ this.state.isFocused ? 'vtex-address-form__field-focused' : '' - }` + }${field.required ? 'vtex-address-form__field-required' : ''}` if (field.name === 'postalCode') { return ( From 6f8e7514f27ba861c62c47587bcb6862f89f6291 Mon Sep 17 00:00:00 2001 From: beatrizmaselli Date: Mon, 23 Sep 2024 15:03:41 +0200 Subject: [PATCH 2/3] update valid const --- react/inputs/StyleguideInput/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/react/inputs/StyleguideInput/index.js b/react/inputs/StyleguideInput/index.js index 1efec62b..cced242f 100644 --- a/react/inputs/StyleguideInput/index.js +++ b/react/inputs/StyleguideInput/index.js @@ -83,7 +83,7 @@ class StyleguideInput extends Component { const disabled = !!address[field.name].disabled - const valid = address[field.name].valid !== false + const valid = address[field.name].valid === false ? false : true const loading = loadingProp != null ? loadingProp : address[field.name].loading From d6af858c9c70a9793d24081c93f94319735ae943 Mon Sep 17 00:00:00 2001 From: beatrizmaselli Date: Mon, 23 Sep 2024 17:50:37 +0200 Subject: [PATCH 3/3] add space to required field --- react/inputs/StyleguideInput/index.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/react/inputs/StyleguideInput/index.js b/react/inputs/StyleguideInput/index.js index cced242f..01553844 100644 --- a/react/inputs/StyleguideInput/index.js +++ b/react/inputs/StyleguideInput/index.js @@ -83,7 +83,7 @@ class StyleguideInput extends Component { const disabled = !!address[field.name].disabled - const valid = address[field.name].valid === false ? false : true + const valid = address[field.name].valid !== false const loading = loadingProp != null ? loadingProp : address[field.name].loading @@ -144,7 +144,7 @@ class StyleguideInput extends Component { !valid ? 'vtex-address-form__field-invalid' : '' } ${!address[field.name].value ? 'vtex-address-form__field-empty' : ''} ${ this.state.isFocused ? 'vtex-address-form__field-focused' : '' - }${field.required ? 'vtex-address-form__field-required' : ''}` + } ${field.required ? 'vtex-address-form__field-required' : ''}` if (field.name === 'postalCode') { return (