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.

Sign up for GitHub

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

Jump to bottom

[EuiIcon] Add diff glyph #7520

Merged
merged 3 commits into from
Feb 14, 2024
Merged

[EuiIcon] Add diff glyph #7520

merged 3 commits into from
Feb 14, 2024

Conversation

andreadelrio
Copy link
Contributor

@andreadelrio andreadelrio commented Feb 9, 2024 •
edited
Loading

Summary

Adds a diff icon for use in the upcoming document diffing feature in Discover.

image
image

General checklist

  • Browser QA
    • Checked in both light and dark modes
  • Code quality checklist
  • Release checklist
  • Designer checklist

@andreadelrio andreadelrio marked this pull request as ready for review February 9, 2024 00:39
@andreadelrio andreadelrio requested a review from a team as a code owner February 9, 2024 00:39
MichaelMarcialis
MichaelMarcialis reviewed Feb 12, 2024
View reviewed changes
Copy link
Contributor

@MichaelMarcialis MichaelMarcialis left a comment

Choose a reason for hiding this comment

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

Looks nice. My only comment would be to consider adjusting the "plus" part of the icon so that it sits on the pixel grid. That will help avoid making it look blurry on non-high-pixel-density displays.

@andreadelrio
Copy link
Contributor Author

Looks nice. My only comment would be to consider adjusting the "plus" part of the icon so that it sits on the pixel grid. That will help avoid making it look blurry on non-high-pixel-density displays.

@MichaelMarcialis would this work?

image

@MichaelMarcialis
Copy link
Contributor

That's a bit better. The vertical line in the plus is on the grid, but the horizontal line still isn't. Would it be possible to have that align to the grid as well? I realize that will require an odd line length for the plus icon (5 or 7px instead of the currently even 6px), but I think that's OK.

CleanShot 2024-02-13 at 10 41 08

@andreadelrio
Copy link
Contributor Author

Updated icon based on feedback from @MichaelMarcialis

@kibanamachine
Copy link

Preview staging links for this PR:

@elasticmachine
Copy link
Collaborator

💚 Build Succeeded

History

MichaelMarcialis
MichaelMarcialis approved these changes Feb 14, 2024
View reviewed changes
Copy link
Contributor

@MichaelMarcialis MichaelMarcialis left a comment

Choose a reason for hiding this comment

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

LGTM. Thanks, @andreadelrio!

@cee-chen cee-chen merged commit 1a42196 into elastic:main Feb 14, 2024
7 checks passed
@cee-chen cee-chen mentioned this pull request Feb 20, 2024
Merged
jbudz pushed a commit to elastic/kibana that referenced this pull request Feb 23, 2024
@cee-chen
Upgrade EUI to v93.2.0 (#177361)
7481923 
`v93.1.1`⏩ `v93.2.0`

---

- Updated `EuiPageSidebar` and `EuiPageTemplate.Sidebar` with a new
`hasEmbellish` prop (defaults to false)
([#7521](elastic/eui#7521))
- Added `diff` glyph to `EuiIcon`
([#7520](elastic/eui#7520))
- Added `newChat` glyph to `EuiIcon`
([#7524](elastic/eui#7524))

**Bug fixes**

- Fixed `EuiSideNav` not correctly typing the `items` prop as required
([#7521](elastic/eui#7521))
- Fixed the `CSS is not defined` bug in `EuiPageTemplate` when rendering
in some SSR environments, particularly Next.js v13 and up
([#7525](elastic/eui#7525))
- Fixed `EuiDataGrid` component to clean up timer from side effect on
unmount ([#7534](elastic/eui#7534))

**Accessibility**

- Fixed `EuiSideNav` to render a fallback aria-label on mobile toggles
if no heading or mobile title exists
([#7521](elastic/eui#7521))

**CSS-in-JS conversions**

- Converted `EuiSideNav` to Emotion; Removed the following Sass
variables: ([#7521](elastic/eui#7521))
  - `$euiSideNavEmphasizedBackgroundColor`
  - `$euiSideNavRootTextcolor`
  - `$euiSideNavBranchTextcolor`
  - `$euiSideNavSelectedTextcolor`
  - `$euiSideNavDisabledTextcolor`
- Removed the `euiSideNavEmbellish` Sass mixin. Use the new
`EuiPageSidebar` `hasEmbellish` prop instead
([#7521](elastic/eui#7521))
- Added a new memoization/performance optimization utility for CSS-in-JS
styles ([#7529](elastic/eui#7529))
semd pushed a commit to semd/kibana that referenced this pull request Mar 4, 2024
@cee-chen @semd
Upgrade EUI to v93.2.0 (elastic#177361)
192c681 
`v93.1.1`⏩ `v93.2.0`

---

- Updated `EuiPageSidebar` and `EuiPageTemplate.Sidebar` with a new
`hasEmbellish` prop (defaults to false)
([elastic#7521](elastic/eui#7521))
- Added `diff` glyph to `EuiIcon`
([elastic#7520](elastic/eui#7520))
- Added `newChat` glyph to `EuiIcon`
([elastic#7524](elastic/eui#7524))

**Bug fixes**

- Fixed `EuiSideNav` not correctly typing the `items` prop as required
([elastic#7521](elastic/eui#7521))
- Fixed the `CSS is not defined` bug in `EuiPageTemplate` when rendering
in some SSR environments, particularly Next.js v13 and up
([elastic#7525](elastic/eui#7525))
- Fixed `EuiDataGrid` component to clean up timer from side effect on
unmount ([elastic#7534](elastic/eui#7534))

**Accessibility**

- Fixed `EuiSideNav` to render a fallback aria-label on mobile toggles
if no heading or mobile title exists
([elastic#7521](elastic/eui#7521))

**CSS-in-JS conversions**

- Converted `EuiSideNav` to Emotion; Removed the following Sass
variables: ([elastic#7521](elastic/eui#7521))
  - `$euiSideNavEmphasizedBackgroundColor`
  - `$euiSideNavRootTextcolor`
  - `$euiSideNavBranchTextcolor`
  - `$euiSideNavSelectedTextcolor`
  - `$euiSideNavDisabledTextcolor`
- Removed the `euiSideNavEmbellish` Sass mixin. Use the new
`EuiPageSidebar` `hasEmbellish` prop instead
([elastic#7521](elastic/eui#7521))
- Added a new memoization/performance optimization utility for CSS-in-JS
styles ([elastic#7529](elastic/eui#7529))
fkanout pushed a commit to fkanout/kibana that referenced this pull request Mar 4, 2024
@cee-chen @fkanout
Upgrade EUI to v93.2.0 (elastic#177361)
b761b46 
`v93.1.1`⏩ `v93.2.0`

---

- Updated `EuiPageSidebar` and `EuiPageTemplate.Sidebar` with a new
`hasEmbellish` prop (defaults to false)
([elastic#7521](elastic/eui#7521))
- Added `diff` glyph to `EuiIcon`
([elastic#7520](elastic/eui#7520))
- Added `newChat` glyph to `EuiIcon`
([elastic#7524](elastic/eui#7524))

**Bug fixes**

- Fixed `EuiSideNav` not correctly typing the `items` prop as required
([elastic#7521](elastic/eui#7521))
- Fixed the `CSS is not defined` bug in `EuiPageTemplate` when rendering
in some SSR environments, particularly Next.js v13 and up
([elastic#7525](elastic/eui#7525))
- Fixed `EuiDataGrid` component to clean up timer from side effect on
unmount ([elastic#7534](elastic/eui#7534))

**Accessibility**

- Fixed `EuiSideNav` to render a fallback aria-label on mobile toggles
if no heading or mobile title exists
([elastic#7521](elastic/eui#7521))

**CSS-in-JS conversions**

- Converted `EuiSideNav` to Emotion; Removed the following Sass
variables: ([elastic#7521](elastic/eui#7521))
  - `$euiSideNavEmphasizedBackgroundColor`
  - `$euiSideNavRootTextcolor`
  - `$euiSideNavBranchTextcolor`
  - `$euiSideNavSelectedTextcolor`
  - `$euiSideNavDisabledTextcolor`
- Removed the `euiSideNavEmbellish` Sass mixin. Use the new
`EuiPageSidebar` `hasEmbellish` prop instead
([elastic#7521](elastic/eui#7521))
- Added a new memoization/performance optimization utility for CSS-in-JS
styles ([elastic#7529](elastic/eui#7529))
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@MichaelMarcialis MichaelMarcialis MichaelMarcialis approved these changes

@cee-chen cee-chen cee-chen approved these changes

Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
5 participants
@andreadelrio @MichaelMarcialis @kibanamachine @elasticmachine @cee-chen