From 9bcf6b423256fd44b6bf97793a6f88f4bbb9b6d5 Mon Sep 17 00:00:00 2001
From: Akash Gupta <akashgp9@gmail.com>
Date: Sat, 6 Feb 2021 02:09:07 +0530
Subject: [PATCH] [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>
---
 CHANGELOG.md                   |  4 +-
 src/components/badge/badge.tsx | 91 +++++++++++++++++-----------------
 2 files changed, 48 insertions(+), 47 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index e1ea3f15bb3..d8e7c6914a7 100644
--- 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
index 3e74bfb1b6b..424777cb8f0 100644
--- 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}. ` +