Skip to content

[Color Palettes] Updated the status color palette sequence#4508

Merged
formgeist merged 5 commits intoelastic:masterfrom
formgeist:updated-status-palette-colors
Feb 11, 2021
Merged

[Color Palettes] Updated the status color palette sequence#4508
formgeist merged 5 commits intoelastic:masterfrom
formgeist:updated-status-palette-colors

Conversation

@formgeist
Copy link
Copy Markdown
Contributor

@formgeist formgeist commented Feb 10, 2021 •
edited by cchaos
Loading

Summary

Currently, the steps in the euiPaletteForStatus are using the regular euiColorBlindSafe steps to indicate green or red status. Updating the status color palette sequence to use the more appropriate positive and negative colors for success and failure indication.

Observability will be aligning the HTTP status color codes to use the euiPaletteForStatus colors to indicate the various steps, and typically those colors have higher contrast than the existing euiColorBlindSafe palette. Essentially, we'll define the HTTP status color based on the palette and the positiveColor and negativeColor variables.

After

Screenshot 2021-02-10 at 14 41 58

Screenshot 2021-02-10 at 14 43 05

APM examples

Screenshot 2021-02-10 at 14 59 43

Screenshot 2021-02-10 at 15 04 08

Metrics examples

Screenshot 2021-02-10 at 15 11 22

Checklist

@formgeist
Updated the status color palette sequence
c944928 
Updating the status color palette sequence to use the more appropiate positive and negative colors for success and failure indication.
@formgeist formgeist added the design decision Use this to flag an item that needs input from the design team label Feb 10, 2021
@formgeist formgeist self-assigned this Feb 10, 2021
@formgeist
Copy link
Copy Markdown
Contributor Author

formgeist commented Feb 10, 2021

I would definitely need to update https://elastic.github.io/eui/#/display/badge#badge-for-health-status to use the new palette as well for consistency, but maybe in another PR?

@formgeist formgeist marked this pull request as draft February 10, 2021 14:20
@kibanamachine
Copy link
Copy Markdown

kibanamachine commented Feb 10, 2021

Preview documentation changes for this PR: https://eui.elastic.co/pr_4508/

@cchaos
Copy link
Copy Markdown
Contributor

cchaos commented Feb 10, 2021

Yeah my original intent with it being slightly different at the few number of steps was to make it not be so harsh/dark. But I didn't take into account the possible inconsistencies.

Screen Shot 2021-02-10 at 11 20 00 AM

I double checked that this 3 color combo still passes the a11y checks, and it does. 👍

Screen Shot 2021-02-10 at 11 27 54 AM

So all that's needed is a Changelog entry.

I would definitely need to update https://elastic.github.io/eui/#/display/badge#badge-for-health-status to use the new palette as well for consistency, but maybe in another PR?

You could open a separate PR, but since this one is actually so small of a change, you could also add it to this one then take it out of draft mode to signal ready for review.

@formgeist formgeist marked this pull request as ready for review February 11, 2021 10:31
@formgeist formgeist mentioned this pull request Feb 11, 2021
Closed
@formgeist
Copy link
Copy Markdown
Contributor Author

formgeist commented Feb 11, 2021 •
edited
Loading

Yeah my original intent with it being slightly different at the few number of steps was to make it not be so harsh/dark. But I didn't take into account the possible inconsistencies.
I double checked that this 3 color combo still passes the a11y checks, and it does. 👍

Sweet 👍

So all that's needed is a Changelog entry.

Done ✅

I would definitely need to update https://elastic.github.io/eui/#/display/badge#badge-for-health-status to use the new palette as well for consistency, but maybe in another PR?

You could open a separate PR, but since this one is actually so small of a change, you could also add it to this one then take it out of draft mode to signal ready for review.

I think I'd want to clarify the other use case of displaying HTTP status codes using the euiPaletteForStatus which is not currently being used. I'd like to handle that separately (due to time constraints) and avoid this PR going stale over time. I also need to brush up my React skills a bit to handle the colors appropriately 😊 I've opened an issue to track this #4512

@formgeist formgeist removed the design decision Use this to flag an item that needs input from the design team label Feb 11, 2021
@kibanamachine
Copy link
Copy Markdown

kibanamachine commented Feb 11, 2021

Preview documentation changes for this PR: https://eui.elastic.co/pr_4508/

cchaos
cchaos approved these changes Feb 11, 2021
View reviewed changes
Copy link
Copy Markdown
Contributor

@cchaos cchaos left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👍 LGTM. Though we also did just have a release, so you'll need to update from master and move you CL entry to the top.

@kibanamachine
Copy link
Copy Markdown

kibanamachine commented Feb 11, 2021

Preview documentation changes for this PR: https://eui.elastic.co/pr_4508/

@formgeist formgeist merged commit f3814ab into elastic:master Feb 11, 2021
@formgeist formgeist deleted the updated-status-palette-colors branch February 11, 2021 21:38
@thompsongl thompsongl mentioned this pull request Feb 12, 2021
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

1 more reviewer

@cchaos cchaos cchaos approved these changes

Reviewers whose approvals may not affect merge requirements

Assignees

@formgeist formgeist

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

3 participants

@formgeist @kibanamachine @cchaos