From 2e721dfdab9ff5ee7192e04dec4f872824b5e2a4 Mon Sep 17 00:00:00 2001 From: Elizabet Oliveira Date: Fri, 30 Apr 2021 21:56:04 +0100 Subject: [PATCH] [EuiIcon] Fix two-tone icons to inherit parent color when nested in specific 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> --- CHANGELOG.md | 5 +- src-docs/src/views/badge/badge_with_icon.js | 4 + src-docs/src/views/badge/beta_badge.js | 2 + src-docs/src/views/button/button_empty.js | 26 +++- src-docs/src/views/button/button_icon.js | 28 +++++ src-docs/src/views/button/button_with_icon.js | 28 ++--- src-docs/src/views/call_out/info.js | 2 +- .../src/views/context_menu/context_menu.js | 16 ++- src-docs/src/views/icon/icon_colors.js | 2 +- src-docs/src/views/icon/icon_colors_apps.js | 116 +++++++----------- src-docs/src/views/icon/icon_example.js | 11 +- .../list_group/list_group_link_actions.js | 30 ++++- .../badge/__snapshots__/badge.test.tsx.snap | 3 + src/components/badge/badge.tsx | 2 + .../badge/beta_badge/beta_badge.tsx | 1 + .../collapsed_item_actions.test.tsx.snap | 1 + .../in_memory_table.test.tsx.snap | 6 + .../button/__snapshots__/button.test.tsx.snap | 3 + .../button_content.test.tsx.snap | 2 + src/components/button/button_content.tsx | 1 + .../__snapshots__/button_empty.test.tsx.snap | 3 + .../__snapshots__/button_group.test.tsx.snap | 84 +++++++++++++ .../__snapshots__/button_icon.test.tsx.snap | 21 ++++ .../button/button_icon/button_icon.tsx | 1 + src/components/call_out/call_out.tsx | 1 + .../__snapshots__/card_select.test.tsx.snap | 1 + .../__snapshots__/code_block.test.tsx.snap | 2 + .../collapsible_nav.test.tsx.snap | 8 ++ .../context_menu/context_menu_item.tsx | 7 +- .../__snapshots__/data_grid.test.tsx.snap | 39 ++++++ .../__snapshots__/filter_button.test.tsx.snap | 1 + .../flyout/__snapshots__/flyout.test.tsx.snap | 14 +++ .../field_password.test.tsx.snap | 3 + .../__snapshots__/super_select.test.tsx.snap | 6 + .../health/__snapshots__/health.test.tsx.snap | 22 ++++ .../icon/__snapshots__/icon.test.tsx.snap | 17 +++ src/components/icon/_variables.scss | 1 + src/components/icon/icon.tsx | 7 +- .../__snapshots__/list_group.test.tsx.snap | 4 + .../list_group_item.test.tsx.snap | 4 + src/components/list_group/list_group_item.tsx | 19 ++- .../pinnable_list_group.test.tsx.snap | 12 ++ .../markdown_editor.test.tsx.snap | 55 +++++++++ .../__snapshots__/confirm_modal.test.tsx.snap | 2 + .../modal/__snapshots__/modal.test.tsx.snap | 1 + .../notification_event.test.tsx.snap | 2 + ...tification_event_read_button.test.tsx.snap | 2 + .../__snapshots__/pagination.test.tsx.snap | 2 + .../selectable_list_item.test.tsx.snap | 1 + .../__snapshots__/side_nav.test.tsx.snap | 8 ++ .../__snapshots__/suggest_item.test.tsx.snap | 5 + src/components/suggest/suggest_item.tsx | 5 +- .../table_sort_mobile.test.tsx.snap | 1 + .../table_sort_mobile_item.test.tsx.snap | 1 + .../table_pagination.test.tsx.snap | 5 + 55 files changed, 545 insertions(+), 111 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index d5eec08604d..31aec2fa70f 100644 --- 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 index 32605f416fb..ebad29e2b76 100644 --- 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 () => ( Default + + Primary with an app icon + + ); diff --git a/src-docs/src/views/badge/beta_badge.js b/src-docs/src/views/badge/beta_badge.js index f956c8e8765..b5a66e96d75 100644 --- a/src-docs/src/views/badge/beta_badge.js +++ b/src-docs/src/views/badge/beta_badge.js @@ -16,6 +16,8 @@ export default () => ( />   +   +

diff --git a/src-docs/src/views/button/button_empty.js b/src-docs/src/views/button/button_empty.js index 01c0fbe4fd7..c0d860b759e 100644 --- a/src-docs/src/views/button/button_empty.js +++ b/src-docs/src/views/button/button_empty.js @@ -51,7 +51,7 @@ export default () => ( {}} iconType="arrowDown"> - Icon left + Primary with icon left @@ -59,8 +59,28 @@ export default () => ( {}} iconType="arrowDown" - iconSide="right"> - Icon right + iconSide="right" + size="xs"> + Extra small with icon right + + + + + + + {}} iconType="dashboardApp"> + Text with app icon left + + + + + {}} + iconType="dashboardApp" + iconSide="right" + size="xs"> + Extra small with app icon right diff --git a/src-docs/src/views/button/button_icon.js b/src-docs/src/views/button/button_icon.js index 6dd0be767b1..2ea144b06b2 100644 --- a/src-docs/src/views/button/button_icon.js +++ b/src-docs/src/views/button/button_icon.js @@ -88,5 +88,33 @@ export default () => ( /> + + +

Icons inherit by default the button color

+ + + + + + + + + + + + + + + + ); diff --git a/src-docs/src/views/button/button_with_icon.js b/src-docs/src/views/button/button_with_icon.js index c11c1381350..c37f314d94f 100644 --- a/src-docs/src/views/button/button_with_icon.js +++ b/src-docs/src/views/button/button_with_icon.js @@ -10,25 +10,25 @@ export default () => (
- {}} iconType="arrowUp"> + {}} iconType="heart"> Primary - {}}> + {}}> Filled - {}}> + {}}> small - {}}> + {}}> small and filled @@ -36,17 +36,13 @@ export default () => ( - {}} iconType="arrowUp"> + {}} iconType="heart"> Primary - {}}> + {}}> Filled @@ -54,7 +50,7 @@ export default () => ( {}}> small @@ -64,7 +60,7 @@ export default () => ( {}}> @@ -78,7 +74,7 @@ export default () => ( {}} - iconType="arrowUp" + iconType="heart" isDisabled> Disabled @@ -88,7 +84,7 @@ export default () => ( {}} isDisabled> Filled @@ -98,7 +94,7 @@ export default () => ( {}} isDisabled> @@ -109,7 +105,7 @@ export default () => ( {}} diff --git a/src-docs/src/views/call_out/info.js b/src-docs/src/views/call_out/info.js index c16d671d272..4ca71ab210d 100644 --- a/src-docs/src/views/call_out/info.js +++ b/src-docs/src/views/call_out/info.js @@ -22,7 +22,7 @@ export default () => ( diff --git a/src-docs/src/views/context_menu/context_menu.js b/src-docs/src/views/context_menu/context_menu.js index 90973c95a23..90ce0f2f9f9 100644 --- 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: , + icon: 'search', onClick: () => { closePopover(); }, @@ -41,12 +41,12 @@ 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', @@ -54,6 +54,14 @@ export default () => { closePopover(); }, }, + { + name: 'Use an app icon', + icon: 'visualizeApp', + }, + { + name: 'Pass an icon as a component to customize it', + icon: , + }, { 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 index 09dce2b5b08..33dd70f6dab 100644 --- 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', ]; diff --git a/src-docs/src/views/icon/icon_colors_apps.js b/src-docs/src/views/icon/icon_colors_apps.js index 173dc34f9c4..07d1600631f 100644 --- a/src-docs/src/views/icon/icon_colors_apps.js +++ b/src-docs/src/views/icon/icon_colors_apps.js @@ -1,84 +1,58 @@ import React from 'react'; +import classNames from 'classnames'; + import { + EuiFlexGrid, + EuiFlexItem, EuiIcon, + EuiPanel, EuiSpacer, EuiCodeBlock, - EuiSplitPanel, + EuiCopy, } from '../../../../src/components'; +const iconColors = [ + 'default', + 'inherit', + 'primary', + 'success', + 'accent', + 'warning', + 'danger', + 'text', + 'subdued', + 'ghost', + '#DA8B45', + '#DDDDDD', +]; + export default () => ( <> - - - - - - - {''} - - - - - - - - - - - {''} - - - - - - - - - - - {''} - - - + + {''} + - - - - - - - {''} - - - + + {iconColors.map((iconColor) => ( + + + {(copy) => ( + + +   {iconColor} + + )} + + + ))} + ); diff --git a/src-docs/src/views/icon/icon_example.js b/src-docs/src/views/icon/icon_example.js index 7304a732430..ba12d9b6d91 100644 --- a/src-docs/src/views/icon/icon_example.js +++ b/src-docs/src/views/icon/icon_example.js @@ -203,13 +203,14 @@ export const IconExample = {

Two-tone icons, like our app style icons, will behave similarly to normal glyphs when provided a specific color by applying the color - to all the shapes within. + to all the shapes within. You can force the icon + to match the parent's text color by passing{' '} + color="inherit" to the icon.

- - ), + demo: , }, { title: 'Custom SVGs', @@ -218,8 +219,8 @@ export const IconExample = {

The type 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's sizes - (16x16 or 32x32). + on a square canvas and preferably utilizes one of EUI's sizes ( + 16x16 or 32x32).

When using custom SVGs for simple glyphs,{' '} diff --git a/src-docs/src/views/list_group/list_group_link_actions.js b/src-docs/src/views/list_group/list_group_link_actions.js index 56f41d90960..6cbdd4518a5 100644 --- a/src-docs/src/views/list_group/list_group_link_actions.js +++ b/src-docs/src/views/list_group/list_group_link_actions.js @@ -6,6 +6,7 @@ export default () => { const [favorite1, setFavorite1] = useState(undefined); const [favorite2, setFavorite2] = useState('link2'); const [favorite3, setFavorite3] = useState(undefined); + const [favorite4, setFavorite4] = useState(undefined); const link1Clicked = () => { setFavorite1(favorite1 === 'link1' ? undefined : 'link1'); @@ -28,6 +29,13 @@ export default () => { } }; + const link4Clicked = () => { + setFavorite4(favorite4 === 'link4' ? undefined : 'link4'); + if (favorite3 === undefined) { + document.activeElement.blur(); + } + }; + return ( { {}} label="EUI button link" extraAction={{ @@ -63,8 +71,9 @@ export default () => { {}} - iconType="broom" label="EUI button link" extraAction={{ color: 'subdued', @@ -73,12 +82,27 @@ export default () => { iconSize: 's', 'aria-label': 'Favorite link3', alwaysShow: favorite3 === 'link3', - isDisabled: true, }} /> {}} + iconType="broom" + label="EUI button link" + extraAction={{ + color: 'subdued', + onClick: link4Clicked, + iconType: favorite4 === 'link4' ? 'starFilled' : 'starEmpty', + iconSize: 's', + 'aria-label': 'Favorite link4', + alwaysShow: favorite3 === 'link4', + isDisabled: true, + }} + /> + + @@ -330,6 +331,7 @@ exports[`EuiBadge props iconSide right is rendered 1`] = ` @@ -351,6 +353,7 @@ exports[`EuiBadge props iconType is rendered 1`] = ` diff --git a/src/components/badge/badge.tsx b/src/components/badge/badge.tsx index 424777cb8f0..7f7d50eb4f9 100644 --- a/src/components/badge/badge.tsx +++ b/src/components/badge/badge.tsx @@ -259,6 +259,7 @@ export const EuiBadge: FunctionComponent = ({ @@ -270,6 +271,7 @@ export const EuiBadge: FunctionComponent = ({ type={iconType} size={children ? 's' : 'm'} className="euiBadge__icon" + color="inherit" // forces the icon to inherit its parent color /> ); } diff --git a/src/components/badge/beta_badge/beta_badge.tsx b/src/components/badge/beta_badge/beta_badge.tsx index 295efb4baaf..76026d9b9f3 100644 --- a/src/components/badge/beta_badge/beta_badge.tsx +++ b/src/components/badge/beta_badge/beta_badge.tsx @@ -103,6 +103,7 @@ export const EuiBetaBadge: FunctionComponent = ({ type={iconType} size="m" aria-hidden="true" + color="inherit" // forces the icon to inherit its parent color /> ); } diff --git a/src/components/basic_table/__snapshots__/collapsed_item_actions.test.tsx.snap b/src/components/basic_table/__snapshots__/collapsed_item_actions.test.tsx.snap index 40a0fae8a90..4a2fae3ea4b 100644 --- a/src/components/basic_table/__snapshots__/collapsed_item_actions.test.tsx.snap +++ b/src/components/basic_table/__snapshots__/collapsed_item_actions.test.tsx.snap @@ -20,6 +20,7 @@ exports[`CollapsedItemActions render 1`] = `

+
+
+ +
+
+
+
+`; + exports[`EuiHealth props color primary is rendered 1`] = `
`; +exports[`EuiIcon props color inherit is rendered 1`] = ` + +`; + exports[`EuiIcon props color primary is rendered 1`] = `