[IconColor] Distinguish between named and arbitrary colors (#1842)

* distinguish between named colors and arbitrary strings * clean up * CL
elastic · Apr 16, 2019 · 8360f4a · 8360f4a
1 parent 2b71d39
commit 8360f4a
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 8 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,6 +1,7 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
-No public interface changes since `10.0.0`.
+- Convert `EuiText`, `EuiTextColor` and `EuiTextAlign` to TS ([#1791](https://github.com/elastic/eui/pull/1791))
+- Updated `IconColor` type to better distinguish between accepted types ([#1842](https://github.com/elastic/eui/pull/1842))
 
 ## [`10.0.0`](https://github.com/elastic/eui/tree/v10.0.0)
 
@@ -9,7 +10,6 @@ No public interface changes since `10.0.0`.
 - Updated the overflow shadows for `EuiModal` and `EuiFlyout` ([#1829](https://github.com/elastic/eui/pull/1829))
 - Added `confirmButtonDisabled` prop to `EuiConfirmModal` ([#1829](https://github.com/elastic/eui/pull/1829))
 - Fixed `EuiNavDrawer` overflow scroll behavior on Firefox ([#1837](https://github.com/elastic/eui/pull/1837))
-- Convert `EuiText`, `EuiTextColor` and `EuiTextAlign` to TS ([#1791](https://github.com/elastic/eui/pull/1791))
 
 **Bug fixes**
 

diff --git a/src/components/icon/icon.test.tsx b/src/components/icon/icon.test.tsx
@@ -43,12 +43,13 @@ describe('EuiIcon', () => {
     });
 
     describe('color', () => {
-      COLORS.concat([
+      [
+        ...COLORS,
         '#fde',
         '#885522',
         'rgb(100, 150, 200)',
         'hsla(270, 60%, 70%, 0.9)',
-      ]).forEach(color => {
+      ].forEach(color => {
         test(`${color} is rendered`, () => {
           const component = render(<EuiIcon color={color} />);
 

diff --git a/src/components/icon/icon.tsx b/src/components/icon/icon.tsx
@@ -603,7 +603,7 @@ export const TYPES: IconType[] = keysOf(typeToIconMap);
 
 export type IconType = keyof typeof typeToIconMap;
 
-const colorToClassMap: { [color: string]: string | null } = {
+const colorToClassMap = {
   default: null,
   primary: 'euiIcon--primary',
   secondary: 'euiIcon--secondary',
@@ -616,10 +616,16 @@ const colorToClassMap: { [color: string]: string | null } = {
   ghost: 'euiIcon--ghost',
 };
 
-export const COLORS: IconColor[] = keysOf(colorToClassMap);
+export const COLORS: NamedColor[] = keysOf(colorToClassMap);
+
+type NamedColor = keyof typeof colorToClassMap;
+
+function isNamedColor(name: string): name is NamedColor {
+  return colorToClassMap.hasOwnProperty(name);
+}
 
 // We accept arbitrary color strings, which are impossible to type.
-export type IconColor = string | keyof typeof colorToClassMap;
+export type IconColor = string | NamedColor;
 
 const sizeToClassNameMap = {
   original: null,
@@ -659,7 +665,7 @@ export const EuiIcon: FunctionComponent<Props> = ({
   let optionalCustomStyles = null;
 
   if (color) {
-    if (COLORS.indexOf(color) > -1) {
+    if (isNamedColor(color)) {
       optionalColorClass = colorToClassMap[color];
     } else {
       optionalCustomStyles = { fill: color };