Skip to content
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

[EuiIcon] Add magnifyWithExclamation icon #5455

Merged

Conversation

elizabetdev
Copy link
Contributor

@elizabetdev elizabetdev commented Dec 7, 2021

Summary

This PR adds a magnifyWithExclamation glyph to EuiIcon and closes #5274.

Design

  • The icon uses an exclamation mark similar to the alert icon. Initially, it was using the same, but it was not looking good on non-retina displays and for this reason, it was enhanced.
  • Following the alert icon the exclamation mark is centered in the circle.

Screenshot 2021-12-08 at 17 49 36

Dark and light themes

preview-light-dark@2x

Checklist

@kibanamachine
Copy link

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

@elizabetdev elizabetdev marked this pull request as ready for review December 7, 2021 19:06
@cchaos
Copy link
Contributor

cchaos commented Dec 7, 2021

Is there any way to align that exclamation portion a bit better to the pixel grid? It's quite blurry on non-retina:
Screen Shot 2021-12-07 at 15 08 37 PM

Maybe use the same one from alert?
Screen Shot 2021-12-07 at 15 09 34 PM

@elizabetdev
Copy link
Contributor Author

I'm actually using the same exclamation portion from alert as mentioned in the description:

It's using the same exclamation mark as the alert icon.

Screenshot 2021-12-07 at 20 20 26

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. 🤔

@kibanamachine
Copy link

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

@kibanamachine
Copy link

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

@elizabetdev
Copy link
Contributor Author

@cchaos I improved the design and the exclamation mark is no longer 100% similar to the one in alert. I had to do small changes to make it look better on non-retina displays.

Non-retina displays

I tested in Safari and Firefox (low resolution) and these are the results comparing with the previous version:

non-retina@2x

Retina displays

On retina displays I think the exclamation mark now looks better:

Chrome@2x

Copy link
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.

💯 Looks much crisper!

Looks like you need to update the snapshot again.

@kibanamachine
Copy link

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

@elizabetdev elizabetdev merged commit e09e9c4 into elastic:main Dec 9, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[Icon Request] Non searchable field icon
3 participants