Fix: correcting default validation state text color - fixes #751

WTW-IM · May 4, 2023 · 7242000 · 7242000
1 parent 978cc6d
commit 7242000
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 10 deletions.
diff --git a/packages/es-components-via-theme/index.js b/packages/es-components-via-theme/index.js
@@ -501,7 +501,7 @@ const theme = {
     success: success,
     warning: warning,
     danger: danger,
-    default: gray3,
+    default: gray9,
   },
   validationInputColor: {
     success: {

diff --git a/packages/es-components/src/components/controls/AdditionalHelp.js b/packages/es-components/src/components/controls/AdditionalHelp.js
@@ -27,20 +27,19 @@ function AdditionalHelp({ children, hasValidationIcon, ...props }) {
 
   return (
     <HelpText {...props}>
-      {hasValidationIcon &&
-        children &&
-        validationState !== 'default' && (
-          <ValidationIcon
-            aria-hidden="true"
-            name={theme.validationIconName[validationState]}
-          />
-        )}
+      {hasValidationIcon && children && validationState !== 'default' && (
+        <ValidationIcon
+          aria-hidden="true"
+          name={theme.validationIconName[validationState]}
+        />
+      )}
       {children}
     </HelpText>
   );
 }
 
 AdditionalHelp.propTypes = {
+  ...HelpText.propTypes,
   children: PropTypes.any,
   /** use to show or hide an associated validation icon */
   hasValidationIcon: PropTypes.bool

diff --git a/packages/es-components/src/components/controls/Control.js b/packages/es-components/src/components/controls/Control.js
@@ -53,7 +53,9 @@ function Control(props) {
   } = props;
   const theme = useTheme();
   const extraFormContext = isBool(flat) ? { flat } : {};
-  const textColor = theme.validationTextColor[validationState];
+  const textColor =
+    theme.validationTextColor[validationState] ||
+    theme.validationTextColor['default'];
 
   return (
     <OrientationContext.Provider value={orientation}>
@@ -77,6 +79,7 @@ function Control(props) {
 }
 
 Control.propTypes = {
+  ...FlexControl.propTypes,
   orientation: PropTypes.oneOf(['stacked', 'inline']),
   validationState: PropTypes.oneOf(['default', 'success', 'warning', 'danger']),
   /** Apply a top/bottom validation border to a control (usually checkbox/radios)  */