Adding a token component.

[daveyholler]

Currently used primarily for code-based search results.

Summary

Creating a Token component for search result icons.

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

[snide]

Visuals are all good and matches the aesthetic well.

Let's go over the code in a zoom session (maybe @cchaos can join too). Right now there's not much you can do with the props on EuiToken itself other than set a size, since the coloring is hard coded and doesn't change per theme. If that's a hard rule then these would likely be better off as pure SVGs, but likely there's some cooler stuff we can do to utilize the theming and make this stuff a bit more flexible.

Can also walk you through some general Sass stuff. All of it's pretty easy.

[cchaos]

I can certainly join in a code review sess.

At first glance, I agree that the visuals do align with the rest of EUI, though I wonder if the border is necessary? It takes my brain a while to discard the border and find the icon since the spacing between the border and icon is so condensed. However, it may come down to context. Could you add an example of usage?

Do we think we would also align the look of these with the query auto-completer (at some point)?

[snide]

We do! Which is why I think we can make um more flexible. We'll get together today and hash it out.

…

On Tue, Oct 30, 2018, 7:46 AM Caroline Horn ***@***.***> wrote: I can certainly join in a code review sess. At first glance, I agree that the visuals do align with the rest of EUI, though I wonder if the border is necessary? It takes my brain a while to discard the border and find the icon since the spacing between the border and icon is so condensed. However, it may come down to context. Could you add an example of usage? Do we think we would also align the look of these with the query auto-completer (at some point)? [image: screen shot 2018-10-30 at 10 41 06 am] <https://user-images.githubusercontent.com/549577/47726226-6b355b80-dc30-11e8-8fe3-bf0d110d0fa4.png> — You are receiving this because your review was requested. Reply to this email directly, view it on GitHub <#1270 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AATzpzGrYveeyUENycygC9H7ZvPjJ3ARks5uqGZJgaJpZM4YBDgl> .

[snide]

@daveyholler Here's a PR with some rearranging that should give you some more flexibility. daveyholler#1

[cchaos]

@daveyholler I was looking at the contrast levels for your deterministic ones and noticed some don't pass AA levels. We have a SASS function called highContrastTextColor that will shade or tint a foreground color based on a background color until it meets AA levels. I think this would help you a lot. For instance:

Light theme color adjustment:

Changing the code to read:

@each $tintName, $tintValue in $tokenTypes {
  .euiToken--#{$tintName} {
    box-shadow: 0 0 0 1px $tintValue;

    $backgroundColor: tintOrShade($tintValue, 70%, 70%);
    background-color: $backgroundColor;

    [...]

    svg {
      fill: makeHighContrastColor($tintValue, $backgroundColor);
    }
  }
}

Will adjust that svg fill just enough to pass AA contrast levels:

However

Right now the color function doesn't account for background colors that might stay light in dark mode. (I'll have a PR fix for that soon). So in the above code, I also altered the background to go dark instead of light in dark mode.

But I know you worked on creating a color theme that's light and works in both light and dark mode. So if you want to keep with that same color theme in dark mode, you'll just need to wait for my PR. And then you'll be able to change

$backgroundColor: tintOrShade($tintValue, 70%, 70%);

back to

$backgroundColor: tint($tintValue, 70%);

DO NOT try to use the color function without adjusting the background color to use tintOrShade, it will break the compiler.... That's how I found out we had an issue 👎

Here are the examples of the options above in dark mode:

[snide]

@cchaos That reversed dark theme looks rad.

[daveyholler]

@cchaos This is legitimately awesome. I'll throw the SASS function in. I actually dig the inverted theme in dark mode. You rock! Thanks!

[cchaos]

The final result looks good. I just have few suggestions/comments.

It would probably be nice to also go ahead and add a TS defs file. @chandlerprall could help with that.

[daveyholler]

@chandlerprall Would you mind taking a look at the definitions file for me? https://github.com/elastic/eui/blob/892949124b70a8e7685742512867491f129ba348/src/components/icon/index.d.ts

[cchaos]

Changes LGTM!