[EuiBadge] : Handle invalid color entry

CHANGELOG.md

@@ -4,6 +4,7 @@
 
 **Bug fixes**
 
+- Fixed invalid color entry passed to `EuiBadge` color prop ([#4481](https://github.com/elastic/eui/pull/4481))
 - Fixed `id` usage throughout `EuiTreeView` to respect custom ids and stop conflicts in generated ids ([#4435](https://github.com/elastic/eui/pull/4435))
 - Fixed `EuiTabs` `role` if no tabs are passed in ([#4435](https://github.com/elastic/eui/pull/4435))
 

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',
     {
@@ -370,12 +371,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}. ` +