Merge pull request #612 from vtex/Add/required-className

Add: Required className
vtex · Oct 22, 2024 · e418f13 · e418f13
2 parents 1db4252 + e034d37
commit e418f13
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 8 deletions.
diff --git 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
@@ -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 (