Add new icons

[claracruz]

Summary

This PR adds new icons provided @ here

Name	Icon
cloudDrizzle
cloudStormy
cloudSunny
documents
documentEdit
training
videoPlayer

Checklist

• Documentation examples were added
• A changelog entry exists and is marked appropriately
• Jest tests were updated or added to match the most common scenarios

[ryankeairns]

@claracruz we have existing/similar icons for a couple of these (document and edit) and I'm not certain the others ought to be added to the EUI icon set since they don't strike me as generally re-usable (is this for Kibana?).

My recommendation is that these icons be stored elsewhere and referenced via a path or URL as described in the 'Custom SVGs' section at the bottom of this docs page: https://elastic.github.io/eui/#/display/icons

[claracruz]

@claracruz we have existing/similar icons for a couple of these (document and edit) and I'm not certain the others ought to be added to the EUI icon set since they don't strike me as generally re-usable (is this for Kibana?).

My recommendation is that these icons be stored elsewhere and referenced via a path or URL as described in the 'Custom SVGs' section at the bottom of this docs page: https://elastic.github.io/eui/#/display/icons

@ryankeairns It's for the new cloud portal we're building. I assume it may become relevant eventually. There are slight difference in the documents and edit icons from the existing document and indexEdit icons. Are there any downsides to adding these? If anything, wouldn't it provide more icon options with EUIIcon.

[cchaos]

Are there any downsides to adding these? If anything, wouldn't it provide more icon options with EUIIcon.

There are downsides with providing too many icon options. Mostly you'll see people use different icons to mean the same thing and you can lose consistency and recognition for the user. However, I think the documents isn't duplicative (since it's representing multiple) and we can probably just rename this edit one to documentEdit so it's more specific.

The main thing that needs to happen here, though, is that we'll need a designer to pull these svg's into our Sketch library to:

A. Make them consistent with the rest of the glyph set.

Example:

B. Ensure there are no strokes or direct hex values inside the export. This file has both which will cause our theming to not work with these icons.

[claracruz]

The main thing that needs to happen here, though, is that we'll need a designer to pull these svg's into our Sketch library to:

A. Make them consistent with the rest of the glyph set.

Example:

B. Ensure there are no strokes or direct hex values inside the export. This file has both which will cause our theming to not work with these icons.

Currently looking into this...

[ryankeairns]

@claracruz The design team is going to discuss our general approach to managing the growing EUI icon library, tomorrow, at our regular design meeting. We'll provide you clearer feedback afterwards, thanks for your patience as we sort out this process.

[claracruz]

@claracruz The design team is going to discuss our general approach to managing the growing EUI icon library, tomorrow, at our regular design meeting. We'll provide you clearer feedback afterwards, thanks for your patience as we sort out this process.

ok, no worries

[snide]

Summary from the meeting

Follow @cchaos' review above

• Match the current EUI styles for glyphs. That means round the corners and add the small files
• Get the SVG files updated to remove fills so they work in dark mode.

I'll add a last one

• Make sure they are not blurry on non-retina screens. Currently a lot of detail is lost, specifically on the cloud icons there.

[claracruz]

Summary from the meeting

Follow @cchaos' review above

• Match the current EUI styles for glyphs. That means round the corners and add the small files
• Get the SVG files updated to remove fills so they work in dark mode.

I'll add a last one

• Make sure they are not blurry on non-retina screens. Currently a lot of detail is lost, specifically on the cloud icons there.

@cristina-eleonora Are we able to do this pls?

[claracruz]

Summary from the meeting
Follow @cchaos' review above

• Match the current EUI styles for glyphs. That means round the corners and add the small files
• Get the SVG files updated to remove fills so they work in dark mode.

I'll add a last one

• Make sure they are not blurry on non-retina screens. Currently a lot of detail is lost, specifically on the cloud icons there.

@cristina-eleonora Are we able to do this pls?

Updated PR with new icon designs provided by @cristina-eleonora

[ryankeairns]

I'm in the process of reviewing the SVGs and adding them to our Sketch library. Will report back soon!

[ryankeairns]

@cristina-eleonora There is some potential duplication within the new icons and we're wondering if the existing document and copy icons can be used (A). If not, then we could add both your new document icons (B), but it may lead to a mixed use of the similar document icons. A third alternative would be to add lines to our existing document icon and add your new documents icon (C).

[claracruz]

A third alternative would be to add lines to our existing document icon and add your new documents icon (C).

I second that emotion 👍

[ryankeairns]

I've also touched up the other icons in this PR as well to fit more closely to the EUI style and with non-retina simplifications. Once we settle on the document icon set, I'll either update this PR or open a new one (for simplicity's sake) as I'd also like to change some of the names, etc.

[cristina-eleonora]

Thank you for your work on this, @ryankeairns

A third alternative would be to add lines to our existing document icon and add your new documents icon (C).

I second that emotion 👍

I third that idea 🙂 I think it can work great with what we need.

[claracruz]

I've also touched up the other icons in this PR as well to fit more closely to the EUI style and with non-retina simplifications. Once we settle on the document icon set, I'll either update this PR or open a new one (for simplicity's sake) as I'd also like to change some of the names, etc.

👍

[ryankeairns]

@claracruz @cristina-eleonora I've opened a PR against this one. Presuming everything looks good, you can simply merge the PR: claracruz#1

[ryankeairns]

Here are the pixel-level details. After checking these on a non-retina macbook, I've opted to simplify things a bit here and there, most notably removing the raindrops from the cloudStormy glyph as things got a bit blurred and jumbled at 16x16.

UPDATE: fixed stormy cloud shape

[cristina-eleonora]

LGTM 🙂