[EuiIcon] Fix two-tone icons to inherit parent color when nested in s…

…pecific components (#4760) * Making app icons to inherit parent color when nested in specific components * Improving example * CL * Improving comment msg * Adding color inherit * Checking if icon has color applied * Color inherit example * Addressing PR review * WIP * CL and list group icon props Co-authored-by: Caroline Horn <549577+cchaos@users.noreply.github.com>
elastic · May 4, 2021 · 2e721df · 2e721df
1 parent f559c9e
commit 2e721df
Show file tree

Hide file tree

Showing 55 changed files with 545 additions and 111 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,6 +1,9 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
 - Added `autoFocus` prop and functionality to `EuiComboBox` ([#4772](https://github.com/elastic/eui/pull/4772))
+- Added `inherit` color option to `EuiIcon` to force two-tone (app) icons to inherit their parent's color ([#4760](https://github.com/elastic/eui/pull/4760))
+- Updated `EuiBetaBadge, EuiBadge, EuiButtonIcon, EuiButtonContent, EuiCallOut, EuiContextMenuItem, EuiListGroupItem` icon usage to inherit their parent's color ([#4760](https://github.com/elastic/eui/pull/4760))
+- Added `iconProps` prop to `EuiListGroupItem` ([#4760](https://github.com/elastic/eui/pull/4760))
 
 **Bug fixes**
 
@@ -14,7 +17,7 @@
 **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)
 

diff --git a/src-docs/src/views/badge/badge_with_icon.js b/src-docs/src/views/badge/badge_with_icon.js
@@ -10,6 +10,10 @@ export default () => (
 
     <EuiBadge iconType="check">Default</EuiBadge>
 
+    <EuiBadge iconType="lensApp" color="primary">
+      Primary with an app icon
+    </EuiBadge>
+
     <EuiBadge iconType="returnKey" />
   </div>
 );
diff --git a/src-docs/src/views/badge/beta_badge.js b/src-docs/src/views/badge/beta_badge.js
@@ -16,6 +16,8 @@ export default () => (
     />
     &emsp;
     <EuiBetaBadge label="Lab" iconType="beaker" />
+    &emsp;
+    <EuiBetaBadge label="Lens" iconType="lensApp" />
     <EuiSpacer />
     <EuiTitle size="s">
       <h3>

diff --git a/src-docs/src/views/button/button_empty.js b/src-docs/src/views/button/button_empty.js
@@ -51,16 +51,36 @@ export default () => (
     <EuiFlexGroup gutterSize="s" alignItems="center">
       <EuiFlexItem grow={false}>
         <EuiButtonEmpty onClick={() => {}} iconType="arrowDown">
-          Icon left
+          Primary with icon left
         </EuiButtonEmpty>
       </EuiFlexItem>
 
       <EuiFlexItem grow={false}>
         <EuiButtonEmpty
           onClick={() => {}}
           iconType="arrowDown"
-          iconSide="right">
-          Icon right
+          iconSide="right"
+          size="xs">
+          Extra small with icon right
+        </EuiButtonEmpty>
+      </EuiFlexItem>
+    </EuiFlexGroup>
+
+    <EuiFlexGroup gutterSize="s" alignItems="center">
+      <EuiFlexItem grow={false}>
+        <EuiButtonEmpty color="text" onClick={() => {}} iconType="dashboardApp">
+          Text with app icon left
+        </EuiButtonEmpty>
+      </EuiFlexItem>
+
+      <EuiFlexItem grow={false}>
+        <EuiButtonEmpty
+          color="text"
+          onClick={() => {}}
+          iconType="dashboardApp"
+          iconSide="right"
+          size="xs">
+          Extra small with app icon right
         </EuiButtonEmpty>
       </EuiFlexItem>
     </EuiFlexGroup>

diff --git a/src-docs/src/views/button/button_icon.js b/src-docs/src/views/button/button_icon.js
@@ -88,5 +88,33 @@ export default () => (
         />
       </EuiFlexItem>
     </EuiFlexGroup>
+    <EuiSpacer size="m" />
+    <EuiTitle size="xxs">
+      <h3>Icons inherit by default the button color</h3>
+    </EuiTitle>
+    <EuiSpacer size="s" />
+    <EuiFlexGroup responsive={false} gutterSize="s" alignItems="center">
+      <EuiFlexItem grow={false}>
+        <EuiButtonIcon iconType="heart" aria-label="Heart" color="accent" />
+      </EuiFlexItem>
+      <EuiFlexItem grow={false}>
+        <EuiButtonIcon
+          iconType="dashboardApp"
+          aria-label="Dashboard"
+          color="success"
+        />
+      </EuiFlexItem>
+      <EuiFlexItem grow={false}>
+        <EuiButtonIcon
+          display="base"
+          iconType="trash"
+          aria-label="Delete"
+          color="danger"
+        />
+      </EuiFlexItem>
+      <EuiFlexItem grow={false}>
+        <EuiButtonIcon display="base" iconType="lensApp" aria-label="Lens" />
+      </EuiFlexItem>
+    </EuiFlexGroup>
   </>
 );
diff --git a/src-docs/src/views/button/button_with_icon.js b/src-docs/src/views/button/button_with_icon.js
@@ -10,51 +10,47 @@ export default () => (
   <div>
     <EuiFlexGroup gutterSize="s" alignItems="center">
       <EuiFlexItem grow={false}>
-        <EuiButton onClick={() => {}} iconType="arrowUp">
+        <EuiButton onClick={() => {}} iconType="heart">
           Primary
         </EuiButton>
       </EuiFlexItem>
 
       <EuiFlexItem grow={false}>
-        <EuiButton fill iconType="arrowDown" onClick={() => {}}>
+        <EuiButton fill iconType="lensApp" onClick={() => {}}>
           Filled
         </EuiButton>
       </EuiFlexItem>
 
       <EuiFlexItem grow={false}>
-        <EuiButton iconType="arrowLeft" size="s" onClick={() => {}}>
+        <EuiButton iconType="heart" size="s" onClick={() => {}}>
           small
         </EuiButton>
       </EuiFlexItem>
 
       <EuiFlexItem grow={false}>
-        <EuiButton iconType="arrowRight" size="s" fill onClick={() => {}}>
+        <EuiButton iconType="lensApp" size="s" fill onClick={() => {}}>
           small and filled
         </EuiButton>
       </EuiFlexItem>
     </EuiFlexGroup>
 
     <EuiFlexGroup gutterSize="s" alignItems="center">
       <EuiFlexItem grow={false}>
-        <EuiButton iconSide="right" onClick={() => {}} iconType="arrowUp">
+        <EuiButton iconSide="right" onClick={() => {}} iconType="heart">
           Primary
         </EuiButton>
       </EuiFlexItem>
 
       <EuiFlexItem grow={false}>
-        <EuiButton
-          iconSide="right"
-          fill
-          iconType="arrowDown"
-          onClick={() => {}}>
+        <EuiButton iconSide="right" fill iconType="lensApp" onClick={() => {}}>
           Filled
         </EuiButton>
       </EuiFlexItem>
 
       <EuiFlexItem grow={false}>
         <EuiButton
           iconSide="right"
-          iconType="arrowLeft"
+          iconType="heart"
           size="s"
           onClick={() => {}}>
           small
@@ -64,7 +60,7 @@ export default () => (
       <EuiFlexItem grow={false}>
         <EuiButton
           iconSide="right"
-          iconType="arrowRight"
+          iconType="lensApp"
           size="s"
           fill
           onClick={() => {}}>
@@ -78,7 +74,7 @@ export default () => (
         <EuiButton
           iconSide="right"
           onClick={() => {}}
-          iconType="arrowUp"
+          iconType="heart"
           isDisabled>
           Disabled
         </EuiButton>
@@ -88,7 +84,7 @@ export default () => (
         <EuiButton
           iconSide="right"
           fill
-          iconType="arrowDown"
+          iconType="lensApp"
           onClick={() => {}}
           isDisabled>
           Filled
@@ -98,7 +94,7 @@ export default () => (
       <EuiFlexItem grow={false}>
         <EuiButton
           iconSide="right"
-          iconType="arrowLeft"
+          iconType="heart"
           size="s"
           onClick={() => {}}
           isDisabled>
@@ -109,7 +105,7 @@ export default () => (
       <EuiFlexItem grow={false}>
         <EuiButton
           iconSide="right"
-          iconType="arrowRight"
+          iconType="lensApp"
           size="s"
           fill
           onClick={() => {}}

diff --git a/src-docs/src/views/call_out/info.js b/src-docs/src/views/call_out/info.js
@@ -22,7 +22,7 @@ export default () => (
 
     <EuiCallOut
       title="Callouts can exist as just a title. Simply omit the child content."
-      iconType="gear"
+      iconType="lensApp"
     />
 
     <EuiSpacer size="m" />

diff --git a/src-docs/src/views/context_menu/context_menu.js b/src-docs/src/views/context_menu/context_menu.js
@@ -28,7 +28,7 @@ export default () => {
       items: [
         {
           name: 'Handle an onClick',
-          icon: <EuiIcon type="search" size="m" />,
+          icon: 'search',
           onClick: () => {
             closePopover();
           },
@@ -41,19 +41,27 @@ export default () => {
         },
         {
           name: 'Nest panels',
-          icon: 'user',
+          icon: 'wrench',
           panel: 1,
         },
         {
-          name: 'You can add a tooltip',
-          icon: 'user',
+          name: 'Add a tooltip',
+          icon: 'document',
           toolTipTitle: 'Optional tooltip',
           toolTipContent: 'Optional content for a tooltip',
           toolTipPosition: 'right',
           onClick: () => {
             closePopover();
           },
         },
+        {
+          name: 'Use an app icon',
+          icon: 'visualizeApp',
+        },
+        {
+          name: 'Pass an icon as a component to customize it',
+          icon: <EuiIcon type="trash" size="m" color="danger" />,
+        },
         {
           name: 'Disabled option',
           icon: 'user',

diff --git a/src-docs/src/views/icon/icon_colors.js b/src-docs/src/views/icon/icon_colors.js
@@ -14,6 +14,7 @@ import {
 
 const iconColors = [
   'default',
+  'inherit',
   'primary',
   'success',
   'accent',
@@ -22,7 +23,6 @@ const iconColors = [
   'text',
   'subdued',
   'ghost',
-  '#490',
   '#DA8B45',
   '#DDDDDD',
 ];