-
Notifications
You must be signed in to change notification settings - Fork 843
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Adds colorPalette service #1209
Adds colorPalette service #1209
Conversation
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Before a full code review, I just had a couple questions.
<p> | ||
Generate a custom palette of any length from two hexidecimal color | ||
codes such as | ||
<EuiCode>colorPalette('custom', 'FF0000', '#00FFFF', 25)</EuiCode>. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Does this service need the hash mark for hex colors? I see you have it both ways here, just wondering if that's a typo or if the service accepts both.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Also, instead of having to pass 'custom' as the first value, can we make the service smart enough to recognize if the first param is a named palette or a color?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
You can pass it with or without the # so I was just demonstrating that in the examples... then copy/paste happened and it's now in all three examples :D . I'll look into the latter suggestion, I set that aside initially and didn't return to it.
1c451da
to
f45931f
Compare
There is a known console warning (repeating 6x) that originates from the chart example. Several EUI chart components validate the color code against the viz color palette. @cchaos mentioned she removed this PropType, but I've rebased against master and still see the warning. I might have misunderstood, but either way, feedback on resolving that warning would be welcome as it might result in us removing that validation check (if it hasn't been already) or doing something else like validating based upon a provided palette ('path to file' feels kinda messy), or simply validating against the |
f45931f
to
b3783db
Compare
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Also needs unit tests for the service methods.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I gave comments during our weekly. They were mostly docs related.
- The docs should provide guidelines and palettes for what we consider good "qualitative" and "quantitative" palettes. The only palettes in the docs should be ones we're comfortable with devs using for visualizations. Any of the other examples should be removed so that people don't use them. We should describe the palettes by saying "This is a good qualitative palette for health measurement", "This is a good one for...", ...etc.
- The EUI palette needs to show "EUI Light" and "EUI Dark", which are just mirrors of our sass ones. Currently "EUI light" in this iterative is a slant of what we already provide and is safe to remove.
That's my bad, I didn't realize that the color props were also expecting only one of the Vis colors. What I was referring to was removing this warning: https://github.com/elastic/eui/pull/1198/files#diff-1107a4e514bdba21c291b3d986be0217 I think it's safe to change those prop types to string, unless there's a better way to restrict to a color of hex type. |
Updates:
|
f609e93
to
3748c9f
Compare
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
few more small changes
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Did a more thorough code review. Can't wait to use this stuff. My comments are pretty trivial and mostly deal with presentation.
Basically I'd think of this page less as "here's a way to build palettes" and more "this is what palettes design has said are good to use".
4e2fb2a
to
28bc100
Compare
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
changes LGTM, pulled and tested docs
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
All good! Yes. This crosses one off of our roadmap 🗡
Summary
Adds a service that accepts a palette name and returns an array of hexidecimal color codes for use in other EUI components such as charts.
You can either...
a) pull a palette by name from the eui_palettes file,
b) provide your own palettes file, or
c) use the "custom" palette name along with two hex color codes and a number of stops for a gradiated array of hex color codes.
Checklist
Any props added have proper autodocs- No props since it's a service, but documented codeThis was checked against keyboard-only and screenreader scenarios- There is no UI as this is a service/function.