[EuiIcon] Add magnifyWithExclamation icon#5455
Conversation
|
Preview documentation changes for this PR: https://eui.elastic.co/pr_5455/ |
|
Is there any way to align that exclamation portion a bit better to the pixel grid? It's quite blurry on non-retina: Maybe use the same one from |
|
I'm actually using the same exclamation portion from
Maybe it looks better in the alert icon because of the position. Let's see what I can do to make it less blurry on non-retina. 🤔 |
|
Preview documentation changes for this PR: https://eui.elastic.co/pr_5455/ |
|
Preview documentation changes for this PR: https://eui.elastic.co/pr_5455/ |
|
@cchaos I improved the design and the exclamation mark is no longer 100% similar to the one in Non-retina displaysI tested in Safari and Firefox (low resolution) and these are the results comparing with the previous version:
Retina displaysOn retina displays I think the exclamation mark now looks better:
|
cchaos
left a comment
There was a problem hiding this comment.
💯 Looks much crisper!
Looks like you need to update the snapshot again.
|
Preview documentation changes for this PR: https://eui.elastic.co/pr_5455/ |
Summary
This PR adds a
magnifyWithExclamationglyph to EuiIcon and closes #5274.Design
alerticon. Initially, it was using the same, but it was not looking good on non-retina displays and for this reason, it was enhanced.alerticon the exclamation mark is centered in the circle.Dark and light themes
Checklist
[ ] Checked in mobile[ ] Props have proper autodocs and **[playground toggles](https://github.com/elastic/eui/blob/main/wiki/documentation-guidelines.md#adding-playground-toggles)**[ ] Added documentation[ ] Checked Code Sandbox works for any docs examples[ ] Checked for breaking changes and labeled appropriately[ ] Checked for accessibility including keyboard-only and screenreader modes