From d27ecaaa776374e9fb3ee5e552e9bc7187aa826c Mon Sep 17 00:00:00 2001
From: Kshitij Kotasthane <kshitij.kotasthane@gmail.com>
Date: Tue, 13 Oct 2020 23:00:45 +0300
Subject: [PATCH] [EuiIcon] Fix color prop for custom colors (#4104)

* Add fully mono support for EuiIcon custom color, change css property from fill to color
---
 CHANGELOG.md                                    |  8 ++++++--
 src-docs/src/views/icon/icon_colors.js          | 17 ++++++++++++++---
 .../icon/__snapshots__/icon.test.tsx.snap       | 16 ++++++++--------
 src/components/icon/_icon.scss                  |  3 ++-
 src/components/icon/icon.tsx                    |  3 ++-
 5 files changed, 32 insertions(+), 15 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index ad264bae2a4..a134fb3f4ac 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,6 +2,11 @@
 
 - Added `plus` and `minus` glyphs to `EuiIcon` ([#4111](https://github.com/elastic/eui/pull/4111))
 
+**Bug fixes**
+
+- Fixed custom color render of `EuiIcon` app (two-tone) icons ([#4104](https://github.com/elastic/eui/pull/4104))
+
+
 ## [`29.4.0`](https://github.com/elastic/eui/tree/v29.4.0)
 
 - Added `childrenBetween` prop to `EuiInMemoryTable` to add content between search bar and table ([#4103](https://github.com/elastic/eui/pull/4103))
@@ -14,7 +19,6 @@
 
 - Fixed `EuiFieldSearch` padding when `isClearable` but has no `value` ([#4089](https://github.com/elastic/eui/pull/4089))
 
-
 ## [`29.3.0`](https://github.com/elastic/eui/tree/v29.3.0)
 
 - Added `both` option to `flush` prop of `EuiButtonEmpty` ([#4084](https://github.com/elastic/eui/pull/4084))
@@ -255,7 +259,7 @@
   - Added `listId` to `EuiSelectableSearch`
   - `options` passed into `EuiSelectable` cannot have an `id`
   - Requires an `onChange` to be passed into `EuiSelectableSearch`
-  
+
 ## [`26.3.4`](https://github.com/elastic/eui/tree/v26.3.4)
 
 **Note: this release is a backport containing changes originally made in `27.2.0`**
diff --git a/src-docs/src/views/icon/icon_colors.js b/src-docs/src/views/icon/icon_colors.js
index d1ab6faac30..cdca18c7af8 100644
--- a/src-docs/src/views/icon/icon_colors.js
+++ b/src-docs/src/views/icon/icon_colors.js
@@ -72,7 +72,7 @@ export default () => (
     <EuiSpacer />
 
     <EuiFlexGrid columns={4}>
-      <EuiFlexItem className="guideDemo__icon" style={{ width: '340px' }}>
+      <EuiFlexItem className="guideDemo__icon" style={{ width: '255px' }}>
         <EuiPanel>
           <EuiIcon type="gisApp" size="xl" />
           <EuiText size="s">
@@ -82,7 +82,7 @@ export default () => (
           </EuiText>
         </EuiPanel>
       </EuiFlexItem>
-      <EuiFlexItem className="guideDemo__icon" style={{ width: '340px' }}>
+      <EuiFlexItem className="guideDemo__icon" style={{ width: '255px' }}>
         <EuiPanel>
           <EuiIcon type="gisApp" color="text" size="xl" />
           <EuiText size="s">
@@ -93,7 +93,7 @@ export default () => (
           </EuiText>
         </EuiPanel>
       </EuiFlexItem>
-      <EuiFlexItem className="guideDemo__icon" style={{ width: '340px' }}>
+      <EuiFlexItem className="guideDemo__icon" style={{ width: '255px' }}>
         <EuiPanel>
           <EuiIcon type="createAdvancedJob" color="primary" size="xl" />
           <EuiText size="s">
@@ -104,6 +104,17 @@ export default () => (
           </EuiText>
         </EuiPanel>
       </EuiFlexItem>
+      <EuiFlexItem className="guideDemo__icon" style={{ width: '255px' }}>
+        <EuiPanel>
+          <EuiIcon type="createAdvancedJob" color="#DA8B45" size="xl" />
+          <EuiText size="s">
+            <p>
+              <strong>Special:</strong> a custom color makes{' '}
+              <strong>App</strong> icons fully that color
+            </p>
+          </EuiText>
+        </EuiPanel>
+      </EuiFlexItem>
     </EuiFlexGrid>
   </div>
 );
diff --git a/src/components/icon/__snapshots__/icon.test.tsx.snap b/src/components/icon/__snapshots__/icon.test.tsx.snap
index 8493e158e60..9cf1ffe3993 100644
--- a/src/components/icon/__snapshots__/icon.test.tsx.snap
+++ b/src/components/icon/__snapshots__/icon.test.tsx.snap
@@ -21,11 +21,11 @@ exports[`EuiIcon is rendered 1`] = `
 exports[`EuiIcon props color #885522 is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon euiIcon--medium euiIcon--customColor euiIcon-isLoaded"
   focusable="false"
   height="16"
   role="img"
-  style="fill: #885522;"
+  style="color: rgb(136, 85, 34);"
   viewBox="0 0 16 16"
   width="16"
   xmlns="http://www.w3.org/2000/svg"
@@ -39,11 +39,11 @@ exports[`EuiIcon props color #885522 is rendered 1`] = `
 exports[`EuiIcon props color #fde is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon euiIcon--medium euiIcon--customColor euiIcon-isLoaded"
   focusable="false"
   height="16"
   role="img"
-  style="fill: #fde;"
+  style="color: rgb(255, 221, 238);"
   viewBox="0 0 16 16"
   width="16"
   xmlns="http://www.w3.org/2000/svg"
@@ -125,11 +125,11 @@ 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--medium euiIcon-isLoaded"
+  class="euiIcon euiIcon--medium euiIcon--customColor euiIcon-isLoaded"
   focusable="false"
   height="16"
   role="img"
-  style="fill: hsla(270, 60%, 70%, 0.9);"
+  style="color: hsla(270, 60%, 70%, 0.9);"
   viewBox="0 0 16 16"
   width="16"
   xmlns="http://www.w3.org/2000/svg"
@@ -160,11 +160,11 @@ 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--medium euiIcon-isLoaded"
+  class="euiIcon euiIcon--medium euiIcon--customColor euiIcon-isLoaded"
   focusable="false"
   height="16"
   role="img"
-  style="fill: rgb(100, 150, 200);"
+  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.scss b/src/components/icon/_icon.scss
index 28c9044de10..e307308ef44 100644
--- a/src/components/icon/_icon.scss
+++ b/src/components/icon/_icon.scss
@@ -43,7 +43,8 @@
 // App icon special cases for fully mono
 .euiIcon--text,
 .euiIcon--subdued,
-.euiIcon--primary {
+.euiIcon--primary,
+.euiIcon--customColor {
   &,
   .euiIcon__fillSecondary {
     fill: currentColor;
diff --git a/src/components/icon/icon.tsx b/src/components/icon/icon.tsx
index 5a28ba7069b..840329af291 100644
--- a/src/components/icon/icon.tsx
+++ b/src/components/icon/icon.tsx
@@ -677,7 +677,8 @@ export class EuiIcon extends PureComponent<EuiIconProps, State> {
       if (isNamedColor(color)) {
         optionalColorClass = colorToClassMap[color];
       } else {
-        optionalCustomStyles = { fill: color };
+        optionalCustomStyles = { color: color };
+        optionalColorClass = 'euiIcon--customColor';
       }
     }