Replace app icons with new, lighter set #1225

snide · 2018-10-02T03:18:27Z

cc to @gjones, @ryankeairns, @formgeist, @cchaos, @JessSmithSup, @Michalwo, @Adrian-J that this is incoming. I believe we'll have a solutions / product set following up in a bit as well.

Summary

Switcheroo of EUI's app icon set based on @JessSmithSup's work. Process was the following.

Committed the new icons into Abstract, replacing our current set.
Used SVGO to compress them.
Removes the dark fill on the individual paths and removed fill="none" on the svg itself. This allows them to inherit the text color and make them "white" for dark mode.
Updated TS and usual odds and ends.
Applied a transform hack on the svg (figured this was better than .euiIcon itself, which could have its own animations applied) to fix some blurriness on Firefox. Hat tip to @cchaos for saving me a couple hours on that one 🎩

Issues

Icons are missing for grok debugger and multi-metric job. I think what is the population job now is likely supposed to be multi metric and possibly we're missing the population one?
Softness on infra app because of the source file. I think I can fix this.

Questions

@cchaos brought up some points about possibly reversing the colorscheme for visualize and watcher, but looking at them larger I think they make sense as they are? It seems like we use the darker color for the outer elements. Dunno. could go either way.
Should the various beats be named something unique? Possibly a beats prefix?

Checklist

This was checked in mobile
This was checked in IE11
This was checked in dark mode
~~Any props added have proper autodocs~~
Documentation examples were added
A changelog entry exists and is marked appropriately
This was checked for breaking changes and labeled appropriately
Jest tests were updated or added to match the most common scenarios
~~This was checked against keyboard-only and screenreader scenarios~~

formgeist · 2018-10-02T11:05:41Z

@JessSmithSup New icons look spiffy 👍

cchaos

This one seems to be missing the accent color:

Reversing colors

As I look more at it, the main one that I'm concerned with is the visualizeApp. I'd really like to see the bars as the dark color because that's the main objective of the app, not the axes. I see the point about the dark color being on the outside, but I'd rather make sure the icon is clear and readable.

I'd love to see the icon be a little more dynamic than just three bars too, to try to express that it's more than just a bar chart. I keep coming back to this one that I created a while back to try to represent "x/y" charts, but it won't be used for that and so it might be nice to use it for the whole app.

cchaos · 2018-10-02T13:48:57Z

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

+  'notebookApp',
+  'packetbeatApp',
+  'securityAnalyticsApp',
+  'sqlApp',


Can you alphabetize this list so it's easier to scan in the docs page?
Could put the the beats ones together though at the bottom.

I would still love to these alphabetized. VSCode has a really easy way to do it: command + shift + p -> sort lines

cchaos · 2018-10-02T13:53:31Z

src/components/icon/assets/app_canvas.svg

@@ -0,0 +1,11 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+  <g>
+    <rect width="2" height="7" x="7" y="17" fill="#00BFB2"/>


Are we worried about this color not having a high contrast (2.308) with a white background? We could bump it to #00A69B which would at least get us to 3.031 (AA 18+)

JessSmithSup · 2018-10-02T15:27:41Z

Teal color change - If we use these on the marketing site we aren’t going to change the color as we already have icons in this style and they could possibly live together. I prefer no shift, or if we are worried about it I’d rather just use a one color icon

Reversing colors - I’m totally ok with reversing the colors.

Visualize icon - If we feel strongly we can go back, my opinion is keeping these icons simple is best. We don’t have to make each icon a checklist of every functionality of the feature. The fact that this icon is distinct and also simple is good with me, adding more elements will make the level of detail inconsistent.

cchaos · 2018-10-02T20:06:33Z

Teal color change - Yeah I'm not sure if it matters much, but thought I'd at least make people aware.

Visualize icon - I agree that keeping the icons simple is a good thing but I don't think my suggestion was any more complicated or noisy than most of the other icons (like index management). I do feel kind of strongly mainly because the vis app is such a main app and the icon is just kind of meh. (And no, it's not just because I had thought up the icon 6 months ago, I promise ;). I really do think it's a better representative of the entire vis app.

JessSmithSup · 2018-10-02T21:07:31Z

@cchaos lmk if you're down with this

cchaos · 2018-10-02T21:15:05Z

I'm digging it. Would it be simpler if the dots weren't hollow?

JessSmithSup · 2018-10-02T21:16:47Z

@cchaos that's how this set is treating circles so I'd like to keep that part consistent

cchaos · 2018-10-02T21:27:39Z

@JessSmithSup Thoughts then on changing the hollow bars to lines like the ones representing lines on paper and the canvas app?

JessSmithSup · 2018-10-02T22:50:12Z

@cchaos I think I'm into it...

snide · 2018-10-02T22:50:19Z

OK. Latest update made the following changes.

Added new grok and multi-metric icons.
Adjust teal fills to use the EUI palette (the brand teal is too hot against our blue).
Use classes to define the teal coloring on the individual SVG paths. This lets us overwrite the coloring by applying the "text" color to make them mono in the few cases it makes sense to use them that way.

Ignore timelion icon being old. It's a Kibana thing

After

Before

Color overwrite documentation

cchaos · 2018-10-02T22:54:31Z

@JessSmithSup Too many lines?

snide · 2018-10-02T23:17:05Z

jenkins, test this

JessSmithSup · 2018-10-03T03:14:29Z

@cchaos yeah, I think maybe keeping it at 3 is nice.

@snide breaking my heart with that color change lol. Are you saying the teal is too hot next to the blue labels? Shifting this goes away from the consistency of branding. Any reason those labels aren't bold black like the ones on top? I guess because they are links? Not sure I'm anymore into that dark teal next to the dark blue. I think a lighter teal is a nicer contrast. I would lobby against a dark shift.

snide · 2018-10-03T03:49:52Z

Lemme spin up some tests. I'll get you some screens so you can see it a couple different ways.

Any reason those labels aren't bold black like the ones on top? I guess because they are links?

Yep. That's the reason.

snide · 2018-10-03T04:24:33Z

Pick your poison. This is a one-line change for us to flip the colors at this point so don't assume it takes us any time to change things if we decide we don't like things one way or the other.

EUI high contrast green

Brand green

Brand green with bold titling

Mono icons

ryankeairns · 2018-10-03T14:10:25Z

My personal opinion is that the EUI primary blue and teal in the icons clash - they simply don't work well together. Short term, I favor the mono icon; longer term, a page redesign should be considered as there is a lot going on here with the number, size, and proximity of icons to one another.

cchaos · 2018-10-03T14:28:17Z

As Ryan said, the main issue is that the new teal clashes with our primary blue which is different from the marketing primary blue which is much lighter.

We can't lighten our primary blue to match because our buttons and text must be AA contrast level compliant. That makes the teal clash really with our whole color scheme because of we've got such darker muted colors for accessibility. I don't think it's a big deal to darken the teal for use in Kibana as we don't (and can't) match the marketing site anyway.

We might be able to get away with something in between our secondary color and this teal. I mentioned that #00A69B darkened the teal just enough so that it was AA 18+ compliant. Or try desaturating the teal by 50%.

The other option is just to swap the teal for primary blue?

JessSmithSup · 2018-10-03T15:12:50Z

I think I'm maybe not feeling any of the teal/blue mixes, compliancy aside. Also are icons required to be compliant? Marketing site side we are going to keep these the original teal/cool gray because that is the "elastic brand teal" and we have icons that look great in this style and fit with our brand. While I would love to uphold brand in the UI, I get there are more requirements and limitations. So, I think monochromatic would be cleaner. That dark teal/primary EUI blue is straying too far. Controversial thought for this page.... what if they were monochromatic EUI primary blue? Either that or keep it all monochromatic dark cool gray. Basically, anything to not have that dark teal/dark blue combo. LMK thoughts

JessSmithSup · 2018-10-03T15:45:20Z

Also we're shifting our brand main blue #0080d5 and the darker swatches are #006cb8 and #00629e. And on the brand side we haven't explored how to handle these icons next to a blue link, so, maybe it is something that shifts to blue when it is associated with a link on the brand side? Sorry for all of these long-winded responses :)

Michalwo · 2018-10-03T15:52:36Z

Also we're shifting our brand main blue #0080d5 and the darker swatches are #006cb8 and #00629e. And on the brand side we haven't explored how to handle these icons next to a blue link, so, maybe it is something that shifts to blue when it is associated with a link on the brand side? Sorry for all of these long-winded responses :)

@JessSmithSup ^^ good point and worth exploring.

cchaos · 2018-10-03T16:07:14Z

@snide Can you try a sample where the default is the original teal, but in the bottom half of the homepage where they're inside a link they're monochromatic blue?

snide · 2018-10-03T17:21:29Z

Talked this over with @ryankeairns and @cchaos this morning. We came up with the following:

Brand colors and product palette will always be similar, but different. Product has hard requirements on both maintainability (many dozens of engineers who want to be butterflies) and accessibility. Providing simple defaults that work most of the time is our primary concern.
That said, some flexibility is important. We're going to make the icons available in mono, two-toned teal and two-toned blue. This still works most of the time and is hard to mess up. We're going to match against EUI's published (admittedly muddled) color scheme to make sure it always matches without a designer needing to get involved.

Now, with that said I also want to say we're SUPER OPEN to Jess telling us what EUI's overall palette should be, what is our blue, what is our teal...etc. As long as it passes our accessibility needs then we're happy to hand that stuff over.

I think that's a discussion we can do at EAH, and as you've seen, is trivial for us to change. Let's figure it all out in person.

In the meantime, I'm going to merge this PR because overall it is a MEGA-IMPROVEMENT over what we have now, and it gives us the flexibility to make the Kibana side whatever we want it to be. I agree with @ryankeairns that the Kibana home page needs a rethink, and that (more than the color of the icons) is our biggest problem.

@cchaos can you do a final code / visual scan when you have a moment.

cchaos · 2018-10-03T17:25:00Z

Sure thing but did you mean: "two-toned teal, mono text and mono blue" not a two-toned blue version?

snide · 2018-10-03T17:28:27Z

@cchaos correct.

Mono

Secondary (which will be the default)

Primary

cchaos

Just a couple doc suggestions. But, LGTM

cchaos · 2018-10-03T17:39:59Z

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

+  'notebookApp',
+  'packetbeatApp',
+  'securityAnalyticsApp',
+  'sqlApp',


I would still love to these alphabetized. VSCode has a really easy way to do it: command + shift + p -> sort lines

cchaos · 2018-10-03T17:41:03Z

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

@@ -43,5 +43,20 @@ export default () => (
        </EuiFlexItem>
      ))
    }
+    <EuiFlexItem
+      className="guideDemo__icon"


I know this was a quick add but the layout of this one bugs me, I'd really rather just see it in it's own row/grid.

cchaos · 2018-10-03T17:52:13Z

CHANGELOG.md

@@ -1,12 +1,13 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)

 - Added TypeScript typings for `EuiKeyPadMenu` ([#1229](https://github.com/elastic/eui/pull/1229))
- Force `EuiPopover` contents to stick to its initial position when the content changes ([#1199](https://github.com/elastic/eui/pull/1199))
+- Forced `EuiPopover` contents to stick to its initial position when the content changes ([#1199](https://github.com/elastic/eui/pull/1199))
+- Updated `EuiIcon` app icon set and allow them to adjust two-toned colorschemes ([#1225](https://github.com/elastic/eui/pull/1225))


No longer adjusting the "two-toned" color [ ] schemes.

snide · 2018-10-03T18:18:49Z

For those playing at home, here's how things finally landed with the coloring of the icons. @cchaos this also addresses your feedback on docs.

JessSmithSup · 2018-10-04T03:38:58Z

Apologies for the latest response ever. It was more difficult than I thought to get stable internet in an airport. This all looks/sounds good. Thanks for putting so much thought into it!

snide changed the title ~~New icons~~ Replace app icons with new, lighter set Oct 2, 2018

snide added the icons label Oct 2, 2018

snide requested review from cchaos and JessSmithSup October 2, 2018 03:22

cchaos reviewed Oct 2, 2018

View reviewed changes

snide force-pushed the icons/hot_new_jam branch from a76328b to b02d1af Compare October 3, 2018 17:07

snide added 4 commits October 3, 2018 10:11

New icons

ff37a94

nuanced icon coloring

b3f9b69

fix tests, update viz icon

b8ff75a

blargh, svg fill

111f5e3

snide added 2 commits October 3, 2018 10:11

primary color for app icons as well

309d039

cl

1d81c77

snide force-pushed the icons/hot_new_jam branch from b02d1af to 1d81c77 Compare October 3, 2018 17:12

snide added 2 commits October 3, 2018 10:44

primary is now a mono blue

3c25794

fix regex

731cd28

cchaos approved these changes Oct 3, 2018

View reviewed changes

feedback

3982426

snide added 2 commits October 3, 2018 11:19

typo

46137bd

docs

12b2779

snide merged commit ac06488 into elastic:master Oct 3, 2018

snide deleted the icons/hot_new_jam branch October 3, 2018 18:27

snide mentioned this pull request Oct 3, 2018

Eui 4.4.1 elastic/kibana#23790

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Replace app icons with new, lighter set #1225

Replace app icons with new, lighter set #1225

snide commented Oct 2, 2018 •

edited

Loading

formgeist commented Oct 2, 2018

cchaos left a comment

cchaos Oct 2, 2018

cchaos Oct 3, 2018

cchaos Oct 2, 2018

JessSmithSup commented Oct 2, 2018

cchaos commented Oct 2, 2018

JessSmithSup commented Oct 2, 2018

cchaos commented Oct 2, 2018

JessSmithSup commented Oct 2, 2018

cchaos commented Oct 2, 2018

JessSmithSup commented Oct 2, 2018

snide commented Oct 2, 2018

cchaos commented Oct 2, 2018

snide commented Oct 2, 2018

JessSmithSup commented Oct 3, 2018

snide commented Oct 3, 2018 •

edited

Loading

snide commented Oct 3, 2018

ryankeairns commented Oct 3, 2018

cchaos commented Oct 3, 2018 •

edited

Loading

JessSmithSup commented Oct 3, 2018 •

edited

Loading

JessSmithSup commented Oct 3, 2018 •

edited by cchaos

Loading

Michalwo commented Oct 3, 2018

cchaos commented Oct 3, 2018

snide commented Oct 3, 2018

cchaos commented Oct 3, 2018

snide commented Oct 3, 2018 •

edited

Loading

cchaos left a comment

cchaos Oct 3, 2018

cchaos Oct 3, 2018

cchaos Oct 3, 2018

snide commented Oct 3, 2018

JessSmithSup commented Oct 4, 2018

Replace app icons with new, lighter set #1225

Replace app icons with new, lighter set #1225

Conversation

snide commented Oct 2, 2018 • edited Loading

Summary

Issues

Questions

Checklist

formgeist commented Oct 2, 2018

cchaos left a comment

Choose a reason for hiding this comment

Reversing colors

cchaos Oct 2, 2018

Choose a reason for hiding this comment

cchaos Oct 3, 2018

Choose a reason for hiding this comment

cchaos Oct 2, 2018

Choose a reason for hiding this comment

JessSmithSup commented Oct 2, 2018

cchaos commented Oct 2, 2018

JessSmithSup commented Oct 2, 2018

cchaos commented Oct 2, 2018

JessSmithSup commented Oct 2, 2018

cchaos commented Oct 2, 2018

JessSmithSup commented Oct 2, 2018

snide commented Oct 2, 2018

After

Before

Color overwrite documentation

cchaos commented Oct 2, 2018

snide commented Oct 2, 2018

JessSmithSup commented Oct 3, 2018

snide commented Oct 3, 2018 • edited Loading

snide commented Oct 3, 2018

EUI high contrast green

Brand green

Brand green with bold titling

Mono icons

ryankeairns commented Oct 3, 2018

cchaos commented Oct 3, 2018 • edited Loading

JessSmithSup commented Oct 3, 2018 • edited Loading

JessSmithSup commented Oct 3, 2018 • edited by cchaos Loading

Michalwo commented Oct 3, 2018

cchaos commented Oct 3, 2018

snide commented Oct 3, 2018

cchaos commented Oct 3, 2018

snide commented Oct 3, 2018 • edited Loading

Mono

Secondary (which will be the default)

Primary

cchaos left a comment

Choose a reason for hiding this comment

cchaos Oct 3, 2018

Choose a reason for hiding this comment

cchaos Oct 3, 2018

Choose a reason for hiding this comment

cchaos Oct 3, 2018

Choose a reason for hiding this comment

snide commented Oct 3, 2018

JessSmithSup commented Oct 4, 2018

snide commented Oct 2, 2018 •

edited

Loading

snide commented Oct 3, 2018 •

edited

Loading

cchaos commented Oct 3, 2018 •

edited

Loading

JessSmithSup commented Oct 3, 2018 •

edited

Loading

JessSmithSup commented Oct 3, 2018 •

edited by cchaos

Loading

snide commented Oct 3, 2018 •

edited

Loading