-
Notifications
You must be signed in to change notification settings - Fork 842
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
Allow any <color> value in EuiIcon #1370
Allow any <color> value in EuiIcon #1370
Conversation
@@ -1,14 +1,15 @@ | |||
## [`master`](https://github.com/elastic/eui/tree/master) | |||
|
|||
- Reinstate ([#1353](https://github.com/elastic/eui/pull/1353)) `onBlur` action on `EuiComboBox` ([#1364](https://github.com/elastic/eui/pull/1364)) | |||
- Convert roughly half of the services to TypeScript ([#1400](https://github.com/elastic/eui/pull/1400)) | |||
- Convert roughly half of the services to TypeScript ([#1360](https://github.com/elastic/eui/pull/1360)) |
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.
This pointed at the wrong place
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.
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.
Prolly need a docs example.
can accept named colors from our palette, a three or six color hex code, | ||
and rgb(r, g, b) or rgba(r, g, b, a) formats. The default behavior is to | ||
inherit the text color as the SVG color <EuiCode>fill</EuiCode> property | ||
via <EuiCode>currentColor</EuiCode> in CSS. |
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.
Can we add an example of the rgba/hsla to the docs icon_colors.js
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, the autodoc could use a note now. Right now it just says string or enum.
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.
@chandlerprall You can pull from one of my examples in the screenshot I pasted.
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.
Although, I pasted in a link in my docs suggestion re-write that points to all the valid color types. Maybe we should just reference that and not put more examples of things we don't want people to do in our 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.
It also has way more examples of what is/isn't a valid color type.
@@ -649,16 +645,6 @@ export const EuiIcon: SFC<Props> = ({ | |||
); | |||
}; | |||
|
|||
function checkValidColor(color: string, type: string) { |
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.
With this gone it will just take any string now right? Basicly a silent fail if it's malformed? Is everyone OK with that?
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.
Yep! It will just fail on the CSS side as it would if you just normally passed it via style="fill: [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.
Until the recent TSXification of the component this was a proptype warning, which apparently was ignored by TSVB previously anyway :)
Summary
Allows any color value to be passed to
EuiIcon
Checklist
- [ ] This was checked in mobile- [ ] This was checked in IE11- [ ] This was checked in dark mode- [ ] Any props added have proper autodocs- [ ] This was checked against keyboard-only and screenreader scenarios- [ ] This required updates to Framer X components