[EuiIcon] Fix color prop for custom colors (elastic#4104)

* Add fully mono support for EuiIcon custom color, change css property from fill to color
kshitij86 · Nov 29, 2020 · d27ecaa · d27ecaa
1 parent ae3eed3
commit d27ecaa
Show file tree

Hide file tree

Showing 5 changed files with 32 additions and 15 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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';
       }
     }