[EuiBadge] : Handle invalid color entry (#4481)

* EuiBadge: Handle invalid entry Signed-off-by: Akash Gupta <akashgp9@gmail.com> * Cl Signed-off-by: Akash Gupta <akashgp9@gmail.com> * accept rgb color Co-authored-by: Greg Thompson <thompson.glowe@gmail.com>
elastic · Feb 5, 2021 · 9bcf6b4 · 9bcf6b4
1 parent fc04735
commit 9bcf6b4
Show file tree

Hide file tree

Showing 2 changed files with 48 additions and 47 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,6 +1,8 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
-No public interface changes since `31.5.0`.
+**Bug fixes**
+
+- Fixed invalid color entry passed to `EuiBadge` color prop ([#4481](https://github.com/elastic/eui/pull/4481))
 
 ## [`31.5.0`](https://github.com/elastic/eui/tree/v31.5.0)
 

diff --git a/src/components/badge/badge.tsx b/src/components/badge/badge.tsx
@@ -149,8 +149,6 @@ export const EuiBadge: FunctionComponent<EuiBadgeProps> = ({
   style,
   ...rest
 }) => {
-  checkValidColor(color);
-
   const isHrefValid = !href || validateHref(href);
   const isDisabled = _isDisabled || !isHrefValid;
 
@@ -162,48 +160,51 @@ export const EuiBadge: FunctionComponent<EuiBadgeProps> = ({
   let colorHex = null;
 
   // Check if a valid color name was provided
-  if (COLORS.indexOf(color) > -1) {
-    // Get the hex equivalent for the provided color name
-    colorHex = colorToHexMap[color];
-
-    // Set dark or light text color based upon best contrast
-    textColor = setTextColor(colorHex);
-
-    optionalCustomStyles = {
-      backgroundColor: colorHex,
-      color: textColor,
-      ...optionalCustomStyles,
-    };
-  } else if (color !== 'hollow') {
-    // This is a custom color that is neither from the base palette nor hollow
-    // Let's do our best to ensure that it provides sufficient contrast
-
-    // Set dark or light text color based upon best contrast
-    textColor = setTextColor(color);
-
-    // Check the contrast
-    wcagContrast = getColorContrast(textColor, color);
-
-    if (wcagContrast < wcagContrastBase) {
-      // It's low contrast, so lets show a warning in the console
-      console.warn(
-        'Warning: ',
-        color,
-        ' badge has low contrast of ',
-        wcagContrast.toFixed(2),
-        '. Should be above ',
-        wcagContrastBase,
-        '.'
-      );
-    }
+  try {
+    if (COLORS.indexOf(color) > -1) {
+      // Get the hex equivalent for the provided color name
+      colorHex = colorToHexMap[color];
+
+      // Set dark or light text color based upon best contrast
+      textColor = setTextColor(colorHex);
+
+      optionalCustomStyles = {
+        backgroundColor: colorHex,
+        color: textColor,
+        ...optionalCustomStyles,
+      };
+    } else if (color !== 'hollow') {
+      // This is a custom color that is neither from the base palette nor hollow
+      // Let's do our best to ensure that it provides sufficient contrast
+
+      // Set dark or light text color based upon best contrast
+      textColor = setTextColor(color);
+
+      // Check the contrast
+      wcagContrast = getColorContrast(textColor, color);
+
+      if (wcagContrast < wcagContrastBase) {
+        // It's low contrast, so lets show a warning in the console
+        console.warn(
+          'Warning: ',
+          color,
+          ' badge has low contrast of ',
+          wcagContrast.toFixed(2),
+          '. Should be above ',
+          wcagContrastBase,
+          '.'
+        );
+      }
 
-    optionalCustomStyles = {
-      backgroundColor: color,
-      color: textColor,
-      ...optionalCustomStyles,
-    };
+      optionalCustomStyles = {
+        backgroundColor: color,
+        color: textColor,
+        ...optionalCustomStyles,
+      };
+    }
+  } catch (err) {
+    handleInvalidColor(color);
   }
-
   const classes = classNames(
     'euiBadge',
     {
@@ -371,12 +372,10 @@ function setTextColor(bgColor: string) {
   return textColor;
 }
 
-function checkValidColor(color: null | IconColor | string) {
-  const colorExists = !!color;
+function handleInvalidColor(color: null | IconColor | string) {
   const isNamedColor = (color && COLORS.includes(color)) || color === 'hollow';
   const isValidColorString = color && chromaValid(parseColor(color) || '');
-
-  if (!colorExists && !isNamedColor && !isValidColorString) {
+  if (!isNamedColor && !isValidColorString) {
     console.warn(
       'EuiBadge expects a valid color. This can either be a three or six ' +
         `character hex value, rgb(a) value, hsv value, hollow, or one of the following: ${COLORS}. ` +