diff --git a/CHANGELOG.md b/CHANGELOG.md index 96996f6d..f1d427c6 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.5] - 2024-10-09 ### Fixed diff --git a/react/inputs/StyleguideInput/index.js b/react/inputs/StyleguideInput/index.js index 6fc919f3..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 @@ -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 (