diff --git a/CHANGELOG.md b/CHANGELOG.md index 4153db1f1b1..2bfe61e5e47 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,6 +1,6 @@ ## [`master`](https://github.com/elastic/eui/tree/master) -No public interface changes since `39.0.0`. +- Added support for `ghost` and `text` `EuiIcon` colors on Elastic logos ([#5245](https://github.com/elastic/eui/pull/5245)) ## [`39.0.0`](https://github.com/elastic/eui/tree/v39.0.0) diff --git a/src-docs/src/views/icon/icon_example.js b/src-docs/src/views/icon/icon_example.js index 664a4d74c0a..f675187841b 100644 --- a/src-docs/src/views/icon/icon_example.js +++ b/src-docs/src/views/icon/icon_example.js @@ -104,14 +104,23 @@ export const IconExample = { }, { title: 'Elastic logos', + wrapText: false, text: ( -

- Product logos follow similar rules as app logos. Note the use of{' '} - .euiIcon__fillNegative on portions of the SVGs to - handle flipping colors for dark mode. -

+ <> + +

+ These logos are restricted in use to Elastic products or when + referencing Elastic products. They are multi-color with some + internal paths having a class of{' '} + .euiIcon__fillNegative to handle flipping + colors for dark mode. The only other colors most of them support + are ghost and text which turn them into a solid shape. +

+
+ + + ), - demo: , }, { title: 'Apps', diff --git a/src-docs/src/views/icon/logos.js b/src-docs/src/views/icon/logos.js index 8d264e3948c..0399ccd0c4f 100644 --- a/src-docs/src/views/icon/logos.js +++ b/src-docs/src/views/icon/logos.js @@ -1,4 +1,5 @@ -import React from 'react'; +import React, { useState } from 'react'; +import classNames from 'classnames'; import { EuiFlexGrid, @@ -8,18 +9,19 @@ import { EuiCodeBlock, EuiSpacer, EuiCopy, + EuiSplitPanel, + EuiButtonGroup, } from '../../../../src/components'; export const iconTypes = [ + 'logoElastic', + 'logoElasticStack', + 'logoElasticsearch', 'logoAppSearch', 'logoBeats', 'logoBusinessAnalytics', - 'logoCode', 'logoCloud', 'logoCloudEnterprise', - 'logoElastic', - 'logoElasticStack', - 'logoElasticsearch', 'logoEnterpriseSearch', 'logoKibana', 'logoLogging', @@ -31,40 +33,73 @@ export const iconTypes = [ 'logoSiteSearch', 'logoUptime', 'logoWorkplaceSearch', -].sort(); +]; + +export const allowedColors = ['multi', 'ghost', 'text']; + +export default () => { + const [showGhost, setShowGhost] = useState(false); + const [iconColor, setIconColor] = useState(allowedColors[0]); + const panelClasses = classNames({ + guideDemo__ghostBackground: showGhost, + }); -export default () => ( - <> - - {''} - - - - {iconTypes.map((iconType) => ( - - - {(copy) => ( - + + { + setIconColor(optionId); + setShowGhost(optionId === 'ghost'); + }} + options={allowedColors.map((color) => { + return { + id: color, + label: color, + }; + })} + /> + + + + {iconColor === 'multi' + ? '' + : ``} + + + + {iconTypes.map((iconType) => ( + + - {' '} -   {iconType} - - )} - - - ))} - - -); + {(copy) => ( + + {' '} +   {iconType} + + )} + + + ))} + + + + ); +}; diff --git a/src/components/icon/__snapshots__/icon.test.tsx.snap b/src/components/icon/__snapshots__/icon.test.tsx.snap index 58b78c6e0ea..a61a5d4c86d 100644 --- a/src/components/icon/__snapshots__/icon.test.tsx.snap +++ b/src/components/icon/__snapshots__/icon.test.tsx.snap @@ -4330,6 +4330,7 @@ exports[`EuiIcon props type logoElastic is rendered 1`] = `