EUI 5.8.1 comes with a brand color refresh. Also removes lots of KUI by snide · Pull Request #27009 · elastic/kibana

snide · 2018-12-12T01:54:11Z

Summary

For team review pings:

I changed the APM JS variables that mirrored EUI. It'd be nice if you all imported this from the JSON we dist, but it was simple enough.
Beats team - I changed some hardcoded hex values you had in styled components. Also prefer if you pulled this in from EUI's vars.
Security - Small template / sass changes to match colors.

Color refresh

EUI 5.7.0 had a color refresh which switched around our palette to better match branding guidelines. Hex colors are still hard coded in large parts of Kibana so most of the changes not in kbn/ui-framework are simple shifts to match that styling.

Styling of KUI

KUI now imports the EUI global scope. I went through and touched a lot of the global variables in KUI to better match EUI. Outside of the coloring, I did some very minor work around KUI form fields and the verticalRhythm component.

Removal of many KUI components

KUI remains deprecated since 6.2.0 but still exists. I went ahead and removed any components and styling that were no longer being used in Kibana and then removed several KUI components that were being minimally used by replacing them with EUI styling, using EUI components or selectors instead. This resulted in KUI being a little under half its original size and is the reason this PR has such a large negative number.

Global nav cleanup

With the color change the global nav icons in the K6 nav was really off. I went ahead reworked them to use EUI icons and cleanup them up stylistically. The static images are still available if no EUI icon is used so this is backwards compatible and should be fine for custom plugins outside of core Kibana.

Tests

The color changes required me to rebuild the baselines for the TSVB screenshot. We have a lot of hard coded hex values that in turn are converted back and forth between rgb and hex. In one case I chose not to not change an advanced setting default to match our new colors because the tests went a little nuts. It's the green color and is mostly close to what we're using in both palettes. I'd like to do a later sweep there and make these tests less reliant on copy / paste codes, but given FF timing, I'm just avoiding that value for now.

Updates EUI to 5.8.1 from 5.6.2

`5.8.1`

Note: this release is a backport containing fixes made in 6.0.0

Bug fixes

Fixed some EUI services' TS definitions (#1380)

`5.8.0`

Note: this release broke some of the exported TypeScript definitions.

Reinstate (#1353) onBlur action on EuiComboBox (#1364)
Convert roughly half of the services to TypeScript (#1360)

Bug fixes

Fixed onCreateOption callback of EuiComboBox so it isn't called when the input is empty (#1364)
Added anchorClassName prop to EuiPopover (#1367)
Added support for fullWidth on EuiSuperSelect (#1367)
Applied new scrollbar customization for Firefox (#1367)
Fixed EuiSuperSelect from accessing ref when unmounted (1369)
Allow any color value to be passed to EuiIcon (#1370)

`5.7.0`

Adjust EUI coloring to better match brand guidelines from Creative Services (#1356)

Checklist

Use ~~strikethroughs~~ to remove checklist items you don't feel are applicable to this PR.

This was checked for cross-browser compatibility, including a check against IE11
Any text added follows EUI's writing guidelines, uses sentence case text and includes i18n support
Documentation was added for features that require explanation or tutorials
Unit or functional tests were updated or added to match the most common scenarios
This was checked for keyboard-only and screenreader accessibility

For maintainers

This was checked for breaking API changes and was labeled appropriately
This includes a feature addition or change that requires a release note and was labeled appropriately

elasticmachine · 2018-12-12T01:54:20Z

Pinging @elastic/kibana-design

elasticmachine · 2018-12-12T02:41:36Z

💔 Build Failed

continuous-integration/kibana-ci/pull-request

elasticmachine · 2018-12-12T03:56:37Z

💔 Build Failed

continuous-integration/kibana-ci/pull-request

elasticmachine · 2018-12-12T05:12:41Z

💔 Build Failed

continuous-integration/kibana-ci/pull-request

snide · 2018-12-12T05:53:05Z

jenkins, test this

elasticmachine · 2018-12-12T06:30:51Z

💔 Build Failed

continuous-integration/kibana-ci/pull-request

cchaos

Most of it looks good, some better than others, but these are just a few that I find needs a quick fix:

Sidebar

Visualize top bar

For some reason the disabled buttons in Kibana look different from EUI

I found a page where the background colors don't line up

packages/kbn-ui-framework/src/components/vertical_rhythm/_index.scss

cchaos · 2018-12-12T19:52:26Z

packages/kbn-ui-framework/src/global_styling/variables/_colors.scss

+$kuiLinkColor: $euiColorPrimary;
 $kuiLinkColor-isHover: darken($kuiLinkColor, 10%);
 $kuiInputTextColor: $kuiTextColor;
 $kuiInputBackgroundColor: $kuiColorWhite;


I don't think this is going to work very well if it ever exists in dark theme as $kuiColorWhite is ghost

KUI has it's own variables for dark mode :/

That said, I need to check more into the dark theme coloring. I see some breaks this introduced.

elasticmachine · 2018-12-13T04:46:54Z

💔 Build Failed

continuous-integration/kibana-ci/pull-request

elasticmachine · 2018-12-13T07:12:50Z

💔 Build Failed

continuous-integration/kibana-ci/pull-request

snide · 2018-12-13T07:25:34Z

This is closer. I need to figure out the test failures happening in dashboards and do some IE11 / dark mode testing.

I think it's questionable whether we should do this for 6.6. It's a big PR that makes some aggressive changes and rips out tons of unused code. I was able to style the K6 global nav to use our icons, which looks cool, but will likely surprise a lot of people.

elasticmachine · 2018-12-18T04:45:34Z

💔 Build Failed

continuous-integration/kibana-ci/pull-request

snide · 2018-12-18T04:50:16Z

Ugh. I updated the baseline, but then changed the color back. I've now updated the baseline again now that it works. I think this should be the last one. Got the rest of the tests to pass now.

elasticmachine · 2018-12-18T05:30:20Z

💚 Build Succeeded

continuous-integration/kibana-ci/pull-request

snide · 2018-12-18T05:38:02Z

@cchaos This now passes and is merged up. If you can during your morning, feel free to do a more thorough check. You're welcome to commit directly or just give a PR if you notice anything sizable.

cchaos · 2018-12-18T15:47:35Z

I think we should be good to go. I thought about doing some more tweaks in the theming LESS styles, but I've already completely gotten rid of those in my next SASS conversion PR. So we can just wait for those final color conversions in that PR. But I'd really like to get this one in first.

snide · 2018-12-18T17:17:32Z

Merged back up to master. Once tests pass I'll be merging this one.

elasticmachine · 2018-12-18T17:54:56Z

💔 Build Failed

continuous-integration/kibana-ci/pull-request

elasticmachine · 2018-12-18T18:55:04Z

💚 Build Succeeded

continuous-integration/kibana-ci/pull-request

…lastic#27009) EUI 5.7.0 had a color refresh which switched around our palette to better match branding guidelines. Hex colors are still hard coded in large parts of Kibana so most of the changes not in kbn/ui-framework are simple shifts to match that styling.

…f KUI (#27009) (#27429) * EUI 5.8.1 comes with a brand color refresh. Also removes lots of KUI (#27009) EUI 5.7.0 had a color refresh which switched around our palette to better match branding guidelines. Hex colors are still hard coded in large parts of Kibana so most of the changes not in kbn/ui-framework are simple shifts to match that styling. * snapshots

snide added 5 commits November 14, 2018 12:12

kui eui start

9533086

Merge remote-tracking branch 'upstream/master' into kui/vars

f9cc0d4

eui 5.7.0, along with KUI theming

9b7a407

more cleanup coloring

c887bdb

remove kui bits no longer in use

02a22aa

snide added the Team:Platform-Design Team Label for Kibana Design Team. Support the Analyze group of plugins. label Dec 12, 2018

snide added 3 commits December 11, 2018 19:15

deleting more unused kui components

08c3a6a

more machete work in kui

670deb2

more machete work in kui

748573f

screen reader fixes

39de600

cchaos reviewed Dec 12, 2018

View reviewed changes

eui icons for kibana left nav

cc93d6a

snide added 4 commits December 12, 2018 22:11

some search and replace hex coloring, adjust apm to match EUI

13ab270

apm snapshot updates

3b9a669

minor cleanup

b68f195

Merge remote-tracking branch 'upstream/master' into kui/vars

aefac15

Merge remote-tracking branch 'upstream/master' into kui/vars

db8ba95

snide requested a review from a team December 13, 2018 19:04

snide requested review from a team as code owners December 13, 2018 19:04

think i found it

4c00a7a

snide changed the title ~~[WIP] EUI 5.8.0 and clean out KUI~~ EUI 5.8.1 and clean out KUI Dec 18, 2018

snide changed the title ~~EUI 5.8.1 and clean out KUI~~ EUI 5.8.1 with brand color refresh and clean out KUI Dec 18, 2018

snide changed the title ~~EUI 5.8.1 with brand color refresh and clean out KUI~~ EUI 5.8.1 with brand color refresh. Also removes lots of KUI Dec 18, 2018

update baseline now that color reverted

fa192fd

snide added release_note:enhancement release highlight labels Dec 18, 2018

snide changed the title ~~EUI 5.8.1 with brand color refresh. Also removes lots of KUI~~ EUI 5.8.1 comes with a brand color refresh. Also removes lots of KUI Dec 18, 2018

snide added v7.0.0 and removed release highlight labels Dec 18, 2018

cchaos approved these changes Dec 18, 2018

View reviewed changes

merge master, update snaps

214a9f3

snide mentioned this pull request Dec 18, 2018

[Code]improve file tree #27129

Closed

3 tasks

snapshots

13fa944

snide merged commit a94fd11 into elastic:master Dec 18, 2018

snide deleted the kui/vars branch December 18, 2018 18:59

snide mentioned this pull request Dec 18, 2018

[6.x] EUI 5.8.1 comes with a brand color refresh. Also removes lots of KUI (#27009) #27429

Merged

cqliu1 mentioned this pull request Dec 19, 2018

Revert "Updates Canvas Icon in Sidebar" #27516

Merged

bmcconaghy mentioned this pull request Jan 8, 2019

fixing watcher threshold alerts by reverting to kui styles #28266

Merged

cchaos mentioned this pull request Jan 16, 2019

Navigation icons do not match new iconography in 6.5, 6.x and master #24845

Closed

Conversation

snide commented Dec 12, 2018 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Color refresh

Styling of KUI

Removal of many KUI components

Global nav cleanup

Tests

Updates EUI to 5.8.1 from 5.6.2

5.8.1

5.8.0

5.7.0

Checklist

For maintainers

Uh oh!

elasticmachine commented Dec 12, 2018

Uh oh!

elasticmachine commented Dec 12, 2018

💔 Build Failed

Uh oh!

elasticmachine commented Dec 12, 2018

💔 Build Failed

Uh oh!

elasticmachine commented Dec 12, 2018

💔 Build Failed

Uh oh!

snide commented Dec 12, 2018

Uh oh!

elasticmachine commented Dec 12, 2018

💔 Build Failed

Uh oh!

cchaos left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

cchaos Dec 12, 2018

Choose a reason for hiding this comment

Uh oh!

snide Dec 13, 2018

Choose a reason for hiding this comment

Uh oh!

snide Dec 13, 2018

Choose a reason for hiding this comment

Uh oh!

elasticmachine commented Dec 13, 2018

💔 Build Failed

Uh oh!

elasticmachine commented Dec 13, 2018

💔 Build Failed

Uh oh!

snide commented Dec 13, 2018

Uh oh!

elasticmachine commented Dec 18, 2018

💔 Build Failed

Uh oh!

snide commented Dec 18, 2018

Uh oh!

elasticmachine commented Dec 18, 2018

💚 Build Succeeded

Uh oh!

snide commented Dec 18, 2018

Uh oh!

cchaos commented Dec 18, 2018

Uh oh!

snide commented Dec 18, 2018

Uh oh!

elasticmachine commented Dec 18, 2018

💔 Build Failed

Uh oh!

elasticmachine commented Dec 18, 2018

💚 Build Succeeded

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

snide commented Dec 12, 2018 •

edited

Loading

`5.8.1`

`5.8.0`

`5.7.0`