[EuiIcon] Fix two-tone icons to inherit parent color when nested in specific components

CHANGELOG.md

@@ -1,6 +1,8 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
-No public interface changes since `32.3.0`.
+**Bug fixes**
+
+- Fixed a bug in `EuiIcon` where two-tone icons were not inheriting their parent color when nested in specific components ([#4760](https://github.com/elastic/eui/pull/4760))
 
 ## [`32.3.0`](https://github.com/elastic/eui/tree/v32.3.0)
 
@@ -9,7 +11,7 @@ No public interface changes since `32.3.0`.
 **Bug fixes**
 
 - Fixed missing i18n tokens for `EuiFilePicker` ([#4750](https://github.com/elastic/eui/pull/4750))
-- Fixed `EuiComoboBox` to use correct placeholder text color ([#4744](https://github.com/elastic/eui/pull/4744))
+- Fixed `EuiComboBox` to use correct placeholder text color ([#4744](https://github.com/elastic/eui/pull/4744))
 
 ## [`32.2.0`](https://github.com/elastic/eui/tree/v32.2.0)
 

src-docs/src/views/icon/icon_colors_apps.js

@@ -32,15 +32,33 @@ export default () => (
         className="eui-textCenter"
         grow={false}
         style={{ minWidth: 96 }}>
-        <EuiIcon type="gisApp" color="text" size="xl" />
+        <EuiIcon type="gisApp" color="inherit" size="xl" />
       </EuiSplitPanel.Inner>
       <EuiSplitPanel.Inner paddingSize="s" color="subdued">
         <EuiCodeBlock
           language="html"
           isCopyable
           transparentBackground
           paddingSize="m">
-          {'<EuiIcon type="gisApp" color="text" size="xl" />'}
+          {'<EuiIcon type="gisApp" color="inherit" size="xl" />'}
+        </EuiCodeBlock>
+      </EuiSplitPanel.Inner>
+    </EuiSplitPanel.Outer>
+    <EuiSpacer />
+    <EuiSplitPanel.Outer hasShadow={false} hasBorder={true} direction="row">
+      <EuiSplitPanel.Inner
+        className="eui-textCenter"
+        grow={false}
+        style={{ minWidth: 96 }}>
+        <EuiIcon type="gisApp" color="default" size="xl" />
+      </EuiSplitPanel.Inner>
+      <EuiSplitPanel.Inner paddingSize="s" color="subdued">
+        <EuiCodeBlock
+          language="html"
+          isCopyable
+          transparentBackground
+          paddingSize="m">
+          {'<EuiIcon type="gisApp" color="default" size="xl" />'}
         </EuiCodeBlock>
       </EuiSplitPanel.Inner>
     </EuiSplitPanel.Outer>
@@ -63,6 +81,24 @@ export default () => (
       </EuiSplitPanel.Inner>
     </EuiSplitPanel.Outer>
     <EuiSpacer />
+    <EuiSplitPanel.Outer hasShadow={false} hasBorder={true} direction="row">
+      <EuiSplitPanel.Inner
+        className="eui-textCenter"
+        grow={false}
+        style={{ minWidth: 96 }}>
+        <EuiIcon type="gisApp" color="text" size="xl" />
+      </EuiSplitPanel.Inner>
+      <EuiSplitPanel.Inner paddingSize="s" color="subdued">
+        <EuiCodeBlock
+          language="html"
+          isCopyable
+          transparentBackground
+          paddingSize="m">
+          {'<EuiIcon type="gisApp" color="text" size="xl" />'}
+        </EuiCodeBlock>
+      </EuiSplitPanel.Inner>
+    </EuiSplitPanel.Outer>
+    <EuiSpacer />
     <EuiSplitPanel.Outer hasShadow={false} hasBorder={true} direction="row">
       <EuiSplitPanel.Inner
         className="eui-textCenter"

src-docs/src/views/icon/icon_example.js

@@ -203,7 +203,9 @@ export const IconExample = {
             <p>
               Two-tone icons, like our app style icons, will behave similarly to
               normal glyphs when provided a specific color by applying the color
-              to <strong>all</strong> the shapes within.
+              to <strong>all</strong> the shapes within. Most of the time, you
+              just need to pass <EuiCode>color="default"</EuiCode> to force the
+              icon to inherit its color from its parent.
             </p>
           </EuiText>
           <EuiSpacer />
@@ -218,8 +220,8 @@ export const IconExample = {
           <p>
             The <EuiCode>type</EuiCode> prop can accept a valid enum, string or
             React SVG Element. When using a custom SVG, please make sure it sits
-            on a square canvas and preferably utilizes one of EUI&apos;s sizes
-            (<EuiCode>16x16</EuiCode> or <EuiCode>32x32</EuiCode>).
+            on a square canvas and preferably utilizes one of EUI&apos;s sizes (
+            <EuiCode>16x16</EuiCode> or <EuiCode>32x32</EuiCode>).
           </p>
           <p>
             When using custom SVGs for simple glyphs,{' '}

src/components/badge/__snapshots__/badge.test.tsx.snap

@@ -309,6 +309,7 @@ exports[`EuiBadge props iconSide left is rendered 1`] = `
     </span>
     <span
       class="euiBadge__icon"
+      color="inherit"
       data-euiicon-type="user"
     />
   </span>
@@ -330,6 +331,7 @@ exports[`EuiBadge props iconSide right is rendered 1`] = `
     </span>
     <span
       class="euiBadge__icon"
+      color="inherit"
       data-euiicon-type="user"
     />
   </span>
@@ -351,6 +353,7 @@ exports[`EuiBadge props iconType is rendered 1`] = `
     </span>
     <span
       class="euiBadge__icon"
+      color="inherit"
       data-euiicon-type="user"
     />
   </span>

src/components/badge/badge.tsx

@@ -259,6 +259,7 @@ export const EuiBadge: FunctionComponent<EuiBadgeProps> = ({
           <EuiIcon
             type={iconType}
             size="s"
+            color="inherit" // forces the icon to inherit its parent color
             {...closeButtonProps}
             className={closeClassNames}
           />
@@ -270,6 +271,7 @@ export const EuiBadge: FunctionComponent<EuiBadgeProps> = ({
           type={iconType}
           size={children ? 's' : 'm'}
           className="euiBadge__icon"
+          color="inherit" // forces the icon to inherit its parent color
         />
       );
     }

src/components/badge/beta_badge/beta_badge.tsx

@@ -103,6 +103,7 @@ export const EuiBetaBadge: FunctionComponent<EuiBetaBadgeProps> = ({
         type={iconType}
         size="m"
         aria-hidden="true"
+        color="inherit" // forces the icon to inherit its parent color
       />
     );
   }

src/components/basic_table/__snapshots__/collapsed_item_actions.test.tsx.snap

@@ -20,6 +20,7 @@ exports[`CollapsedItemActions render 1`] = `
         <span
           aria-hidden="true"
           class="euiButtonIcon__icon"
+          color="inherit"
           data-euiicon-type="boxesHorizontal"
         />
       </button>

src/components/basic_table/__snapshots__/in_memory_table.test.tsx.snap

@@ -395,11 +395,13 @@ exports[`EuiInMemoryTable behavior pagination 1`] = `
                                 >
                                   <EuiIcon
                                     className="euiButtonContent__icon"
+                                    color="inherit"
                                     size="s"
                                     type="arrowDown"
                                   >
                                     <span
                                       className="euiButtonContent__icon"
+                                      color="inherit"
                                       data-euiicon-type="arrowDown"
                                       size="s"
                                     />
@@ -474,12 +476,14 @@ exports[`EuiInMemoryTable behavior pagination 1`] = `
                                 <EuiIcon
                                   aria-hidden="true"
                                   className="euiButtonIcon__icon"
+                                  color="inherit"
                                   size="m"
                                   type="arrowLeft"
                                 >
                                   <span
                                     aria-hidden="true"
                                     className="euiButtonIcon__icon"
+                                    color="inherit"
                                     data-euiicon-type="arrowLeft"
                                     size="m"
                                   />
@@ -688,12 +692,14 @@ exports[`EuiInMemoryTable behavior pagination 1`] = `
                                 <EuiIcon
                                   aria-hidden="true"
                                   className="euiButtonIcon__icon"
+                                  color="inherit"
                                   size="m"
                                   type="arrowRight"
                                 >
                                   <span
                                     aria-hidden="true"
                                     className="euiButtonIcon__icon"
+                                    color="inherit"
                                     data-euiicon-type="arrowRight"
                                     size="m"
                                   />

src/components/button/__snapshots__/button.test.tsx.snap

@@ -185,6 +185,7 @@ exports[`EuiButton props iconSide left is rendered 1`] = `
   >
     <span
       class="euiButtonContent__icon"
+      color="inherit"
       data-euiicon-type="user"
     />
     <span
@@ -206,6 +207,7 @@ exports[`EuiButton props iconSide right is rendered 1`] = `
   >
     <span
       class="euiButtonContent__icon"
+      color="inherit"
       data-euiicon-type="user"
     />
     <span
@@ -227,6 +229,7 @@ exports[`EuiButton props iconType is rendered 1`] = `
   >
     <span
       class="euiButtonContent__icon"
+      color="inherit"
       data-euiicon-type="user"
     />
     <span

src/components/button/__snapshots__/button_content.test.tsx.snap

@@ -26,6 +26,7 @@ exports[`EuiButtonContent props iconSide is rendered 1`] = `
 >
   <span
     class="euiButtonContent__icon"
+    color="inherit"
     data-euiicon-type="bolt"
   />
   <span />
@@ -38,6 +39,7 @@ exports[`EuiButtonContent props iconType is rendered 1`] = `
 >
   <span
     class="euiButtonContent__icon"
+    color="inherit"
     data-euiicon-type="bolt"
   />
   <span />

src/components/button/button_content.tsx

@@ -85,6 +85,7 @@ export const EuiButtonContent: FunctionComponent<
         className="euiButtonContent__icon"
         type={iconType}
         size={iconSize}
+        color="inherit" // forces the icon to inherit its parent color
       />
     );
   }

src/components/button/button_empty/__snapshots__/button_empty.test.tsx.snap

@@ -200,6 +200,7 @@ exports[`EuiButtonEmpty props iconSide left is rendered 1`] = `
   >
     <span
       class="euiButtonContent__icon"
+      color="inherit"
       data-euiicon-type="user"
     />
     <span
@@ -221,6 +222,7 @@ exports[`EuiButtonEmpty props iconSide right is rendered 1`] = `
   >
     <span
       class="euiButtonContent__icon"
+      color="inherit"
       data-euiicon-type="user"
     />
     <span
@@ -242,6 +244,7 @@ exports[`EuiButtonEmpty props iconType is rendered 1`] = `
   >
     <span
       class="euiButtonContent__icon"
+      color="inherit"
       data-euiicon-type="user"
     />
     <span