Prevent an empty badge color from blowing things up (#1741)

* Prevent an empty badge color from blowing things up

* changelog

* PR feedback

CHANGELOG.md

@@ -1,6 +1,9 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
-No public interface changes since `9.4.1`.
+**Bug fixes**
+
+- Fixed `hexToRgb` from erroring on an incorrect string input ([#1741](https://github.com/elastic/eui/pull/1741))
+- Fixed `EuiBadge` custom `color` prop type ([#1741](https://github.com/elastic/eui/pull/1741))
 
 ## [`9.4.1`](https://github.com/elastic/eui/tree/v9.4.1)
 

src/components/badge/badge.js

@@ -135,7 +135,7 @@ export const EuiBadge = ({
 
 function checkValidColor(props, propName, componentName) {
   const validHex = /(^#[0-9A-F]{6}$)|(^#[0-9A-F]{3}$)/i.test(props.color);
-  if (props.color && !validHex && !COLORS.includes(props.color)) {
+  if (props.color != null && !validHex && !COLORS.includes(props.color)) {
     throw new Error(
       `${componentName} needs to pass a valid color. This can either be a three ` +
       `or six character hex value or one of the following: ${COLORS}`

src/services/color/hex_to_rgb.ts

@@ -11,6 +11,13 @@ export function hexToRgb(hex: string): rgbDef {
     (m, r1, g1, b1) => r1 + r1 + g1 + g1 + b1 + b1
   );
 
-  const [, r, g, b] = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex)!;
-  return [parseInt(r, 16), parseInt(g, 16), parseInt(b, 16)];
+  const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex)!;
+
+  if (result) {
+    const [, r, g, b] = result;
+    return [parseInt(r, 16), parseInt(g, 16), parseInt(b, 16)];
+  }
+
+  // fallback to prevent errors
+  return [0, 0, 0];
 }