Skip to content

[EuiIcon] Added support for ghost and text colors on logos #5245

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
cchaos merged 5 commits into from
Oct 6, 2021
Merged

[EuiIcon] Added support for ghost and text colors on logos #5245

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
f463296
[EuiIcon] Supporting `ghost` and `text` colors on logos
Oct 5, 2021
c489be1
Consolidate
Oct 5, 2021
5c9c87a
cl
Oct 5, 2021
90dea02
Target only paths with `[fill]` and show outline for Elastic logo
Oct 6, 2021
ffb25a8
Apply suggestions from code review
cchaos Oct 6, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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)

Expand Down
21 changes: 15 additions & 6 deletions src-docs/src/views/icon/icon_example.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -104,14 +104,23 @@ export const IconExample = {
},
{
title: 'Elastic logos',
wrapText: false,
text: (
<p>
Product logos follow similar rules as app logos. Note the use of{' '}
<EuiCode>.euiIcon__fillNegative</EuiCode> on portions of the SVGs to
handle flipping colors for dark mode.
</p>
<>
<EuiText>
<p>
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{' '}
<EuiCode>.euiIcon__fillNegative</EuiCode> 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.
</p>
</EuiText>
<EuiSpacer />
<Logos />
</>
),
demo: <Logos />,
},
{
title: 'Apps',
Expand Down
115 changes: 75 additions & 40 deletions src-docs/src/views/icon/logos.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import React from 'react';
import React, { useState } from 'react';
import classNames from 'classnames';

import {
EuiFlexGrid,
Expand All @@ -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',
Expand All @@ -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 () => (
<>
<EuiCodeBlock language="html" isCopyable paddingSize="m">
{'<EuiIcon type="logoElasticsearch" size="xl" />'}
</EuiCodeBlock>
<EuiSpacer />
<EuiFlexGrid direction="column" columns={3}>
{iconTypes.map((iconType) => (
<EuiFlexItem key={iconType}>
<EuiCopy
display="block"
textToCopy={iconType}
afterMessage={`${iconType} copied`}
>
{(copy) => (
<EuiPanel
hasShadow={false}
hasBorder={false}
onClick={copy}
paddingSize="s"
return (
<EuiSplitPanel.Outer hasBorder>
<EuiSplitPanel.Inner color="subdued">
<EuiButtonGroup
legend={'Logo color'}
name={'logoColor'}
Comment thread
cchaos marked this conversation as resolved.
Outdated
idSelected={iconColor}
onChange={(optionId) => {
setIconColor(optionId);
setShowGhost(optionId === 'ghost');
}}
options={allowedColors.map((color) => {
return {
id: color,
label: color,
};
})}
/>
</EuiSplitPanel.Inner>
<EuiSplitPanel.Inner color="transparent" className={panelClasses}>
<EuiCodeBlock language="html" isCopyable paddingSize="m">
{iconColor === 'multi'
? '<EuiIcon type="logoElasticsearch" size="xl" />'
: `<EuiIcon type="logoElasticsearch" size="xl" color="${iconColor}" />`}
</EuiCodeBlock>
<EuiSpacer />
<EuiFlexGrid direction="column" columns={3}>
{iconTypes.map((iconType) => (
<EuiFlexItem key={iconType}>
<EuiCopy
display="block"
textToCopy={iconType}
afterMessage={`${iconType} copied`}
>
<EuiIcon
className="eui-alignMiddle"
type={iconType}
size="xl"
/>{' '}
&emsp; <small>{iconType}</small>
</EuiPanel>
)}
</EuiCopy>
</EuiFlexItem>
))}
</EuiFlexGrid>
</>
);
{(copy) => (
<EuiPanel
hasShadow={false}
hasBorder={false}
onClick={copy}
paddingSize="s"
className={panelClasses}
>
<EuiIcon
className="eui-alignMiddle"
type={iconType}
size="xl"
color={iconColor === 'multi' ? undefined : iconColor}
/>{' '}
&emsp; <small>{iconType}</small>
</EuiPanel>
)}
</EuiCopy>
</EuiFlexItem>
))}
</EuiFlexGrid>
</EuiSplitPanel.Inner>
</EuiSplitPanel.Outer>
);
};
16 changes: 10 additions & 6 deletions src/components/icon/__snapshots__/icon.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4330,6 +4330,7 @@ exports[`EuiIcon props type logoElastic is rendered 1`] = `
<svg
aria-hidden="true"
class="euiIcon euiIcon--medium euiIcon-isLoaded"
data-type="logoElastic"
fill="none"
focusable="false"
height="32"
Expand All @@ -4339,27 +4340,30 @@ exports[`EuiIcon props type logoElastic is rendered 1`] = `
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M32 16.77a6.334 6.334 0 00-1.14-3.641 6.298 6.298 0 00-3.02-2.32 9.098 9.098 0 00-.873-5.965A9.05 9.05 0 0022.56.746a9.007 9.007 0 00-5.994-.419 9.037 9.037 0 00-4.93 3.446 4.789 4.789 0 00-5.78-.07A4.833 4.833 0 004.198 9.26a6.384 6.384 0 00-3.035 2.33A6.42 6.42 0 000 15.242 6.341 6.341 0 001.145 18.9a6.305 6.305 0 003.039 2.321 9.334 9.334 0 00-.16 1.725 9.067 9.067 0 001.727 5.333 9.014 9.014 0 004.526 3.287 8.982 8.982 0 005.587-.023 9.016 9.016 0 004.5-3.322 4.789 4.789 0 005.77.074 4.833 4.833 0 001.672-5.542 6.383 6.383 0 003.032-2.331A6.419 6.419 0 0032 16.77z"
fill="#FFF"
class="outline"
clip-rule="evenodd"
d="M30.86 13.129A6.333 6.333 0 0132 16.77a6.419 6.419 0 01-1.162 3.652 6.382 6.382 0 01-3.032 2.331 4.833 4.833 0 01-1.672 5.542 4.789 4.789 0 01-5.77-.074 9.016 9.016 0 01-4.5 3.322 8.982 8.982 0 01-5.587.023 9.014 9.014 0 01-4.526-3.287 9.067 9.067 0 01-1.727-5.333c0-.579.053-1.156.16-1.725A6.305 6.305 0 011.145 18.9 6.341 6.341 0 010 15.242a6.42 6.42 0 011.163-3.652 6.384 6.384 0 013.035-2.33 4.833 4.833 0 011.658-5.557 4.789 4.789 0 015.78.07 9.037 9.037 0 014.93-3.446 9.007 9.007 0 015.994.419 9.05 9.05 0 014.407 4.098 9.097 9.097 0 01.873 5.965 6.298 6.298 0 013.02 2.32zm-18.28.658l7.002 3.211 7.066-6.213a7.85 7.85 0 00.152-1.557c0-1.692-.539-3.34-1.54-4.704a7.897 7.897 0 00-4.02-2.869 7.87 7.87 0 00-4.932.086 7.9 7.9 0 00-3.92 3.007l-1.174 6.118 1.367 2.92-.001.001zm-7.247 7.441A7.964 7.964 0 006.72 27.53a7.918 7.918 0 004.04 2.874 7.89 7.89 0 004.95-.097 7.92 7.92 0 003.926-3.03l1.166-6.102-1.555-2.985-7.03-3.211-6.885 6.248.001.001zm4.755-11.024l-4.8-1.137.002-.002a3.82 3.82 0 011.312-4.358 3.785 3.785 0 014.538.023l-1.052 5.474zm-5.216.01a5.294 5.294 0 00-2.595 1.882 5.324 5.324 0 00-.142 6.124 5.287 5.287 0 002.505 2l6.733-6.101-1.235-2.65-5.266-1.255zm18.286 17.848a3.737 3.737 0 01-2.285-.785l1.037-5.454 4.8 1.125a3.812 3.812 0 01-1.801 4.68c-.54.283-1.14.432-1.751.434zm-1.31-7.499l5.28 1.238a5.34 5.34 0 002.622-1.938 5.37 5.37 0 001.013-3.106 5.311 5.311 0 00-.936-3.01 5.282 5.282 0 00-2.475-1.944l-6.904 6.07 1.4 2.69z"
fill="#fff"
fill-rule="evenodd"
/>
<path
d="M12.58 13.787l7.002 3.211 7.066-6.213a7.854 7.854 0 00.152-1.557 7.944 7.944 0 00-1.54-4.704 7.897 7.897 0 00-4.02-2.869 7.87 7.87 0 00-4.932.086 7.9 7.9 0 00-3.92 3.007l-1.174 6.118 1.367 2.92z"
d="M12.58 13.787l7.002 3.211 7.066-6.213a7.849 7.849 0 00.152-1.557c0-1.692-.539-3.34-1.54-4.704a7.897 7.897 0 00-4.02-2.869 7.87 7.87 0 00-4.932.086 7.9 7.9 0 00-3.92 3.007l-1.174 6.118 1.367 2.92-.001.001z"
fill="#FEC514"
/>
<path
d="M5.333 21.228A7.964 7.964 0 006.72 27.53a7.918 7.918 0 004.04 2.874 7.89 7.89 0 004.95-.097 7.921 7.921 0 003.926-3.03l1.166-6.102-1.555-2.985-7.03-3.211-6.885 6.248z"
d="M5.333 21.228A7.964 7.964 0 006.72 27.53a7.918 7.918 0 004.04 2.874 7.89 7.89 0 004.95-.097 7.92 7.92 0 003.926-3.03l1.166-6.102-1.555-2.985-7.03-3.211-6.885 6.248.001.001z"
fill="#00BFB3"
/>
<path
d="M5.288 9.067l4.8 1.137L11.14 4.73a3.785 3.785 0 00-4.538-.023A3.82 3.82 0 005.29 9.065"
d="M5.288 9.067l4.8 1.137L11.14 4.73a3.785 3.785 0 00-5.914 1.94 3.82 3.82 0 00.064 2.395"
fill="#F04E98"
/>
<path
d="M4.872 10.214a5.294 5.294 0 00-2.595 1.882 5.324 5.324 0 00-.142 6.124 5.287 5.287 0 002.505 2l6.733-6.101-1.235-2.65-5.266-1.255z"
fill="#1BA9F5"
/>
<path
d="M20.873 27.277a3.737 3.737 0 002.285.785 3.783 3.783 0 003.101-1.63 3.813 3.813 0 00.451-3.484l-4.8-1.125-1.037 5.454z"
d="M20.873 27.277a3.736 3.736 0 002.285.785 3.783 3.783 0 003.101-1.63 3.812 3.812 0 00.451-3.484l-4.8-1.125-1.037 5.454z"
fill="#93C90E"
/>
<path
Expand Down
26 changes: 18 additions & 8 deletions src/components/icon/_icon.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,14 +40,24 @@
}
}

// App icon special cases for fully mono
.euiIcon--text,
.euiIcon--subdued,
.euiIcon--primary,
.euiIcon--customColor {
&,
.euiIcon__fillSecondary {
fill: currentColor;
// Really force all paths to inherit when the color is ghost/text (specifically for logos)
.euiIcon--ghost:not([data-type='logoElastic']),
.euiIcon--text:not([data-type='logoElastic']) {
*[fill],
.euiIcon__fillNegative {
fill: currentColor !important; // sass-lint:disable-line no-important
}
}

// Elastic logo specific colors
.euiIcon--ghost[data-type='logoElastic'],
.euiIcon--text[data-type='logoElastic'] {
*[fill] {
fill: none !important; // sass-lint:disable-line no-important
}

.outline {
fill: currentColor !important; // sass-lint:disable-line no-important
}
}

Expand Down
20 changes: 12 additions & 8 deletions src/components/icon/assets/logo_elastic.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@ const EuiIconLogoElastic = ({
...props
}: React.SVGProps<SVGSVGElement> & SVGRProps) => (
<svg
data-type="logoElastic"
xmlns="http://www.w3.org/2000/svg"
width={32}
height={32}
Expand All @@ -30,32 +31,35 @@ const EuiIconLogoElastic = ({
>
{title ? <title id={titleId}>{title}</title> : null}
<path
fill="#FFF"
d="M32 16.77a6.334 6.334 0 00-1.14-3.641 6.298 6.298 0 00-3.02-2.32 9.098 9.098 0 00-.873-5.965A9.05 9.05 0 0022.56.746a9.007 9.007 0 00-5.994-.419 9.037 9.037 0 00-4.93 3.446 4.789 4.789 0 00-5.78-.07A4.833 4.833 0 004.198 9.26a6.384 6.384 0 00-3.035 2.33A6.42 6.42 0 000 15.242 6.341 6.341 0 001.145 18.9a6.305 6.305 0 003.039 2.321 9.334 9.334 0 00-.16 1.725 9.067 9.067 0 001.727 5.333 9.014 9.014 0 004.526 3.287 8.982 8.982 0 005.587-.023 9.016 9.016 0 004.5-3.322 4.789 4.789 0 005.77.074 4.833 4.833 0 001.672-5.542 6.383 6.383 0 003.032-2.331A6.419 6.419 0 0032 16.77z"
className="outline"
fillRule="evenodd"
clipRule="evenodd"
d="M30.86 13.129A6.333 6.333 0 0132 16.77a6.419 6.419 0 01-1.162 3.652 6.382 6.382 0 01-3.032 2.331 4.833 4.833 0 01-1.672 5.542 4.789 4.789 0 01-5.77-.074 9.016 9.016 0 01-4.5 3.322 8.982 8.982 0 01-5.587.023 9.014 9.014 0 01-4.526-3.287 9.067 9.067 0 01-1.727-5.333c0-.579.053-1.156.16-1.725A6.305 6.305 0 011.145 18.9 6.341 6.341 0 010 15.242a6.42 6.42 0 011.163-3.652 6.384 6.384 0 013.035-2.33 4.833 4.833 0 011.658-5.557 4.789 4.789 0 015.78.07 9.037 9.037 0 014.93-3.446 9.007 9.007 0 015.994.419 9.05 9.05 0 014.407 4.098 9.097 9.097 0 01.873 5.965 6.298 6.298 0 013.02 2.32zm-18.28.658l7.002 3.211 7.066-6.213a7.85 7.85 0 00.152-1.557c0-1.692-.539-3.34-1.54-4.704a7.897 7.897 0 00-4.02-2.869 7.87 7.87 0 00-4.932.086 7.9 7.9 0 00-3.92 3.007l-1.174 6.118 1.367 2.92-.001.001zm-7.247 7.441A7.964 7.964 0 006.72 27.53a7.918 7.918 0 004.04 2.874 7.89 7.89 0 004.95-.097 7.92 7.92 0 003.926-3.03l1.166-6.102-1.555-2.985-7.03-3.211-6.885 6.248.001.001zm4.755-11.024l-4.8-1.137.002-.002a3.82 3.82 0 011.312-4.358 3.785 3.785 0 014.538.023l-1.052 5.474zm-5.216.01a5.294 5.294 0 00-2.595 1.882 5.324 5.324 0 00-.142 6.124 5.287 5.287 0 002.505 2l6.733-6.101-1.235-2.65-5.266-1.255zm18.286 17.848a3.737 3.737 0 01-2.285-.785l1.037-5.454 4.8 1.125a3.812 3.812 0 01-1.801 4.68c-.54.283-1.14.432-1.751.434zm-1.31-7.499l5.28 1.238a5.34 5.34 0 002.622-1.938 5.37 5.37 0 001.013-3.106 5.311 5.311 0 00-.936-3.01 5.282 5.282 0 00-2.475-1.944l-6.904 6.07 1.4 2.69z"
fill="#fff"
/>
<path
d="M12.58 13.787l7.002 3.211 7.066-6.213a7.849 7.849 0 00.152-1.557c0-1.692-.539-3.34-1.54-4.704a7.897 7.897 0 00-4.02-2.869 7.87 7.87 0 00-4.932.086 7.9 7.9 0 00-3.92 3.007l-1.174 6.118 1.367 2.92-.001.001z"
fill="#FEC514"
d="M12.58 13.787l7.002 3.211 7.066-6.213a7.854 7.854 0 00.152-1.557 7.944 7.944 0 00-1.54-4.704 7.897 7.897 0 00-4.02-2.869 7.87 7.87 0 00-4.932.086 7.9 7.9 0 00-3.92 3.007l-1.174 6.118 1.367 2.92z"
/>
<path
d="M5.333 21.228A7.964 7.964 0 006.72 27.53a7.918 7.918 0 004.04 2.874 7.89 7.89 0 004.95-.097 7.92 7.92 0 003.926-3.03l1.166-6.102-1.555-2.985-7.03-3.211-6.885 6.248.001.001z"
fill="#00BFB3"
d="M5.333 21.228A7.964 7.964 0 006.72 27.53a7.918 7.918 0 004.04 2.874 7.89 7.89 0 004.95-.097 7.921 7.921 0 003.926-3.03l1.166-6.102-1.555-2.985-7.03-3.211-6.885 6.248z"
/>
<path
d="M5.288 9.067l4.8 1.137L11.14 4.73a3.785 3.785 0 00-5.914 1.94 3.82 3.82 0 00.064 2.395"
fill="#F04E98"
d="M5.288 9.067l4.8 1.137L11.14 4.73a3.785 3.785 0 00-4.538-.023A3.82 3.82 0 005.29 9.065"
/>
<path
fill="#1BA9F5"
d="M4.872 10.214a5.294 5.294 0 00-2.595 1.882 5.324 5.324 0 00-.142 6.124 5.287 5.287 0 002.505 2l6.733-6.101-1.235-2.65-5.266-1.255z"
fill="#1BA9F5"
/>
<path
d="M20.873 27.277a3.736 3.736 0 002.285.785 3.783 3.783 0 003.101-1.63 3.812 3.812 0 00.451-3.484l-4.8-1.125-1.037 5.454z"
fill="#93C90E"
d="M20.873 27.277a3.737 3.737 0 002.285.785 3.783 3.783 0 003.101-1.63 3.813 3.813 0 00.451-3.484l-4.8-1.125-1.037 5.454z"
/>
<path
fill="#07C"
d="M21.848 20.563l5.28 1.238a5.34 5.34 0 002.622-1.938 5.37 5.37 0 001.013-3.106 5.312 5.312 0 00-.936-3.01 5.283 5.283 0 00-2.475-1.944l-6.904 6.07 1.4 2.69z"
fill="#07C"
/>
</svg>
);
Expand Down
Loading