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 pivot icon #6605

Merged
merged 1 commit into from
Feb 22, 2023
Merged

[EuiIcon] Add pivot icon #6605

merged 1 commit into from
Feb 22, 2023

Conversation

opauloh
Copy link
Contributor

@opauloh opauloh commented Feb 16, 2023 •
edited
Loading

Summary

This PR introduces the pivot glyph to EuiIcon, an Icon that can be used to indicate internal navigation in places where the link glyph is not applicable. The icon was created by @r4zr32d3k1l

Screenshots

Grid

image

Use cases

Internal navigation for dashboard components as proposed in the Cloud Posture Dashboard.

image

QA

Remove or strikethrough items that do not apply to your PR.

General checklist

  • Checked in both light and dark modes
  • Checked in mobile
  • Checked in Chrome, Safari, Edge, and Firefox
  • Props have proper autodocs (using @default if default values are missing) and playground toggles
  • Added documentation
  • Checked Code Sandbox works for any docs examples
  • Added or updated jest and cypress tests
  • Checked for breaking changes and labeled appropriately
  • Checked for accessibility including keyboard-only and screenreader modes
  • Updated the Figma library counterpart
  • A changelog entry exists and is marked appropriately

@opauloh opauloh requested a review from elizabetdev February 16, 2023 06:45
@opauloh opauloh mentioned this pull request Feb 16, 2023
Merged
@kibanamachine
Copy link

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

@elizabetdev
Copy link
Contributor

@opauloh thanks for opening this PR.

Before I start reviewing it I just want to make sure we don't have a pattern in Kibana that can be reused in Cloud Posture to indicate that a metric card is clickable.

So I'm asking Kibana designers if we have this pattern or if they normally use another icon to indicate this. I let you know if there's is another pattern in place. If not, we can merge the PR.

elizabetdev
elizabetdev approved these changes Feb 22, 2023
View reviewed changes
Copy link
Contributor

@elizabetdev elizabetdev left a comment

Choose a reason for hiding this comment

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

Thanks, @opauloh.

I talked with different teams and we don't have an established pattern. So I don't want to impact your work.

The code looks good. I tested in light and dark themes, Chrome, Safari, and Firefox. 🎉

@r4zr32d3k1l do you mind adding the new icon to our Figma library?

@r4zr32d3k1l
Copy link

@miukimiu Sure, I'll do it.

@opauloh
Copy link
Contributor Author

opauloh commented Feb 22, 2023

Thanks, @opauloh.

I talked with different teams and we don't have an established pattern. So I don't want to impact your work.

The code looks good. I tested in light and dark themes, Chrome, Safari, and Firefox. 🎉

Thank you, @miukimiu 🙌

@opauloh opauloh merged commit fcdc48a into elastic:main Feb 22, 2023
@opauloh opauloh deleted the add-pivot-icon branch February 22, 2023 19:21
@JasonStoltz JasonStoltz mentioned this pull request Mar 1, 2023
Merged
jbudz added a commit to elastic/kibana that referenced this pull request Mar 14, 2023
@JasonStoltz @daveyholler
@cee-chen @kibanamachine @jbudz
Upgraded EUI to v76.0.0 (#152506)
c339ca8 
👋 Hi all - the biggest breaking change of this PR is around two icon
type changes/renames.

1. ⚠️ **The  `alert` icon is now named `warning`**
- <img width="103" alt=""
src="https://user-images.githubusercontent.com/549407/223561599-8913e88c-676f-47cd-aaed-81b64783bd81.png"
align="middle">
- This change should have been automatically converted on your behalf by
the EUI team, **but if for some reason** we missed making this
conversion in this PR and your icon(s) are now broken, please ping us or
let us know in this PR (or fix yourself after this PR merges).
- In some cases, teams were using this icon for error messages,
alongside the `danger` color. In those cases, we opinionatedly changed
those icon usages to the new `error` icon instead of using the old
alert/warning icon.

2. 🛑 **The `crossInACircleFilled` icon has been removed, and a new
`error` icon added**
- <img width="84" alt=""
src="https://user-images.githubusercontent.com/549407/223561892-4406bdf6-1a55-49ac-85ad-3a11eb7c090d.png"
align="middle">
- The conversion for this breaking change was not straightforward. This
was the path we used to determine what to change `crossInACircleFilled`
usages to:
- If the icon was associated with errors or error messages, we changed
it to the new `error` icon.
- If a "delete" action was associated with this icon, we changed it to
the `trash` icon instead.
- If a "clear" action was associated with this icon, we changed it to
just the `cross` icon, or in some cases `minusInCircleFilled` (if used
alongside `plusInCircleFilled`).
- Again, if we made a mistake during this conversion or missed your
plugin, please feel free to ping us.

## Summary

`[email protected]` ⏩ `[email protected]`

## [`76.0.2`](https://github.com/elastic/eui/tree/v76.0.2)

**Bug fixes**

- Added a legacy `alert` alias for the `warning` `EuiIcon` type
([#6640](elastic/eui#6640))

## [`76.0.1`](https://github.com/elastic/eui/tree/v76.0.1)

**Bug fixes**

- Fixed broken icons on all `isInvalid` form controls
([#6629](elastic/eui#6629))

## [`76.0.0`](https://github.com/elastic/eui/tree/v76.0.0)

- Added `pivot` glyph to `EuiIcon`
([#6605](elastic/eui#6605))
- Added the `displayHeaderCellProps` API to `EuiDataGrid`'s columns,
which allows passing custom props directly to column header cells
([#6609](elastic/eui#6609))
- Added the new `headerCellProps`/`footerCellProps` APIs to
`EuiDataGrid`'s control columns, which allows passing custom props
directly to control column header or footer cells
([#6609](elastic/eui#6609))
- Added a new `footerCellRender` API to `EuiDataGrid`'s control columns,
which allows completely customizing control column rendering (previously
rendered an empty cell)
([#6609](elastic/eui#6609))
- Updated the styling of nested ordered lists in `EuiText` to align with
GitHub's list style, which is a popular format used in Markdown or MDX
formatting ([#6615](elastic/eui#6615))
- Added a margin-bottom property exclusively to the direct child `ul`
and `ol` elements of the `EuiText` component
([#6615](elastic/eui#6615))
- Fix issue with badges appearing within an `EuiBadgeGroup`, where the
CSS rule to override the `margin-inline-start` was not being applied
correctly due to the order of appearance in the CSS rules
([#6618](elastic/eui#6618))

**Bug fixes**

- Fixed `EuiDataGrid` footer control columns rendering with cell
expansion popovers when they should not have been
([#6609](elastic/eui#6609))
- Fixed an `EuiSkipLink` bug where main content loading in
progressively/dynamically after the skip link rendered was not being
correctly focused ([#6613](elastic/eui#6613))

**Breaking changes**

- Renamed `EuiIcon`'s `alert` to `warning`
([#6608](elastic/eui#6608))
- Removed `EuiIcon`'s `crossInACircleFilled` in favor of `error`
([#6608](elastic/eui#6608))

---------

Co-authored-by: Davey Holler <[email protected]>
Co-authored-by: Constance Chen <[email protected]>
Co-authored-by: Kibana Machine <[email protected]>
Co-authored-by: Jon <[email protected]>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@elizabetdev elizabetdev elizabetdev 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.
4 participants
@opauloh @kibanamachine @elizabetdev @r4zr32d3k1l