Re-adding custom colors as style

elastic · Jun 28, 2022 · 3b57233 · cee-chen · Jun 28, 2022 · 3b57233
1 parent c4861d0
commit 3b57233
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 14 deletions.
diff --git a/src/components/icon/__snapshots__/icon.test.tsx.snap b/src/components/icon/__snapshots__/icon.test.tsx.snap
@@ -22,11 +22,12 @@ exports[`EuiIcon is rendered 1`] = `
 exports[`EuiIcon props color #885522 is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon-isLoaded emotion-euiIcon-m-customColor-isLoaded"
+  class="euiIcon euiIcon-isLoaded emotion-euiIcon-m-isLoaded"
   data-icon-type="search"
   focusable="false"
   height="16"
   role="img"
+  style="color: rgb(136, 85, 34);"
   viewBox="0 0 16 16"
   width="16"
   xmlns="http://www.w3.org/2000/svg"
@@ -40,11 +41,12 @@ exports[`EuiIcon props color #885522 is rendered 1`] = `
 exports[`EuiIcon props color #fde is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon-isLoaded emotion-euiIcon-m-customColor-isLoaded"
+  class="euiIcon euiIcon-isLoaded emotion-euiIcon-m-isLoaded"
   data-icon-type="search"
   focusable="false"
   height="16"
   role="img"
+  style="color: rgb(255, 221, 238);"
   viewBox="0 0 16 16"
   width="16"
   xmlns="http://www.w3.org/2000/svg"
@@ -130,11 +132,12 @@ exports[`EuiIcon props color ghost is rendered 1`] = `
 exports[`EuiIcon props color hsla(270, 60%, 70%, 0.9) is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon-isLoaded emotion-euiIcon-m-customColor-isLoaded"
+  class="euiIcon euiIcon-isLoaded emotion-euiIcon-m-isLoaded"
   data-icon-type="search"
   focusable="false"
   height="16"
   role="img"
+  style="color: hsla(270, 60%, 70%, 0.9);"
   viewBox="0 0 16 16"
   width="16"
   xmlns="http://www.w3.org/2000/svg"
@@ -184,11 +187,12 @@ exports[`EuiIcon props color primary is rendered 1`] = `
 exports[`EuiIcon props color rgb(100, 150, 200) is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon-isLoaded emotion-euiIcon-m-customColor-isLoaded"
+  class="euiIcon euiIcon-isLoaded emotion-euiIcon-m-isLoaded"
   data-icon-type="search"
   focusable="false"
   height="16"
   role="img"
+  style="color: rgb(100, 150, 200);"
   viewBox="0 0 16 16"
   width="16"
   xmlns="http://www.w3.org/2000/svg"

diff --git a/src/components/icon/icon.styles.ts b/src/components/icon/icon.styles.ts
@@ -9,7 +9,6 @@
 import { css, keyframes } from '@emotion/react';
 import { logicalCSS, euiCanAnimate } from '../../global_styling';
 import { UseEuiTheme } from '../../services';
-import { EuiIconProps } from './icon';
 
 const _iconSize = (size: string) => {
   return `
@@ -30,10 +29,7 @@ const _iconLoading = keyframes`
   }
 `;
 
-export const euiIconStyles = (
-  { euiTheme }: UseEuiTheme,
-  color: EuiIconProps['color']
-) => ({
+export const euiIconStyles = ({ euiTheme }: UseEuiTheme) => ({
   // Base
   euiIcon: css`
     flex-shrink: 0; // Ensures it never scales down below its intended size
@@ -94,9 +90,6 @@ export const euiIconStyles = (
     color: inherit;
   `,
   default: css``,
-  customColor: css`
-    color: ${color};
-  `,
   logoElasticOutline: css`
     // Elastic logo specific colors
     *[fill] {

diff --git a/src/components/icon/icon.tsx b/src/components/icon/icon.tsx
@@ -11,6 +11,7 @@ import React, {
   ImgHTMLAttributes,
   ComponentType,
   SVGAttributes,
+  CSSProperties,
 } from 'react';
 import classNames from 'classnames';
 
@@ -240,13 +241,21 @@ export class EuiIconClass extends PureComponent<
       title,
       onIconLoad,
       theme,
+      style,
       ...rest
     } = this.props;
 
     const { isLoading, neededLoading } = this.state;
 
     const isCustomColor = color && !isNamedColor(color);
 
+    const optionalCustomStyles: CSSProperties | undefined = isCustomColor
+      ? {
+          color: color,
+          ...style,
+        }
+      : style;
+
     // These icons are a little special and get some extra CSS flexibility
     const isAppIcon = getIsAppIcon(type);
     // App color styles are only applied if no color is passed or if color="default" is passed
@@ -264,12 +273,12 @@ export class EuiIconClass extends PureComponent<
       className
     );
 
-    const styles = euiIconStyles(theme, color);
+    // Emotion styles
+    const styles = euiIconStyles(theme);
     const cssStyles = [
       styles.euiIcon,
       styles[size],
       color && isNamedColor(color) && styles[color as NamedColor],
-      isCustomColor && styles.customColor,
       isElasticLogoOutline && styles.logoElasticOutline,
       isAppIcon && !appIconHasColor && styles.app,
       isLoading && styles.isLoading,
@@ -326,6 +335,7 @@ export class EuiIconClass extends PureComponent<
       return (
         <Svg
           className={classes}
+          style={optionalCustomStyles}
           css={cssStyles}
           tabIndex={tabIndex}
           focusable={focusable}