Eui: Add keyboard shortcut icon

[ryankeairns]

I don't know exactly what it will look like, and an actual keyboard seems unlikely at small sizes, but we're displaying keyboard shortcuts in Canvas and Code, so something would be helpful.

cc: @daveyholler

[cchaos]

So there is a <kbd> html element that they should be wrapped in and I just recently converted a github style markdown file to SASS and EUI variables and it included a kbd element:

https://github.com/elastic/kibana/blob/63773f4bd8b3b83dc877d99f687dc56cf8bab268/src/legacy/ui/public/markdown/_github_markdown.scss#L287-L302

Not that is should be styled that way, but may give you a starting point.

[mdefazio]

I thought I'd throw some ideas into the ring on this one. Not sure I am in love with any of these, but perhaps 7 & 8 are heading in the right direction.

[cchaos]

My initial concern is just how small these are. Most use cases will be using them at the default 16x16 size. Which makes them look more like this:

The plus signs aren't very legible and the bottom line inside the square gets really close to the edge. Perhaps you can show some usages of these next to content like inside buttons or next to headers?

[ryankeairns]

Thanks for taking this one on! Perhaps a few more keys would help drive it home. The spacebar, for me, seems to be the most identifiable. Some of the examples in this link have too many keys, but others (using a portion of the keyboard) are pretty recognizable: https://thenounproject.com/thomasradwanski/collection/keyboard-and-keys/

Maybe something along these lines:

[mdefazio]

Here's another stab at these. I just dropped these into a popover, but if there are specific areas where we know this will be used, I can put it there.

I know some of these are still a bit muddy as they get smaller. But kept them in for reference anyway.

[ryankeairns]

Seeing them all, I like 03 best and it seems to fit with our existing set. The offset (non-contained) keys that I suggested end up looking kinda broken :D

The bottom left are kinda interesting. I wonder if they would benefit from being filled and less irregularly shaped.

[myasonik]

I thought 5 and 6 worked best if you made things harder to see (e.g., smaller size, further away, blurry, etc.).

• 1 I wasn't quite sure what it was (without this context) though I visually like it
• 2 and 3 I thought quickly become too busy to make out
• 4 and 7 looked too much like a grid so you could mistake what we're trying to say
• 8 was probably my 3rd place vote but I don't think worked quite as well and I didn't particularly like it

[mdefazio]

Take 3. I've taken 5 & 6 from the previous shot and tried simplifying a bit more. I think i'm leaning towards 2 or 4. I think 4 will work best as it gets smaller IMO.

[cchaos]

I personally really liked the simiplicity of your earlier icons. Just a couple of keys and the plus indicator. My comment was more that you should utilize more of the 16x16 artboard by making all the shapes larger so that when it sits at that size, next to text, it's clear what the icon is.

Here's an example. I really liked the long key with the plus and short key with the line inside the key, so on the left was your sized icon, then I basically re-created it to fill the space available in the artboard.

[mdefazio]

Adding in 2 more options based on Caroline's point.

[ryankeairns]

The plus in 03 seems to be most identifiable, at the smaller size.

[cchaos]

I agree with @ryankeairns and like 03 the best as well.

[mdefazio]

I've added this to the Figma glyphs set (with a WIP flag), and will add it to the sketch library this week. I'll probably reach out to one of you to create the SVG—but I'll take a stab at it first. Let me know if you think I should increase the height a bit so it fills the box more.

[cchaos]

This looks great. I don't think it's necessary to have it completely fill the artboard as you can see from the others. However, you could increase the height of the lower button to match the top button which would also center the plus sign to the bottom button.