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

[EuiFormControlLayout] Fix isInvalid icon #6629

Merged
merged 4 commits into from
Mar 2, 2023

Conversation

cee-chen
Copy link
Contributor

@cee-chen cee-chen commented Mar 2, 2023

Summary

This conversion was missed in #6608. I did a grep for the old alert type and did not see any other missed conversions.

This fix needs to be merged in and a patch release done ASAP / before the next Kibana upgrade, as form controls are some of our most used/common components.

QA

General checklist

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.

Tested locally and LGTM! 🎉

I tried to switch the icon with the new error icon and it seemed too much.

Screenshot 2023-03-02 at 18 28 08

So I think the warning icon works better for this scenario.

Screenshot 2023-03-02 at 18 23 55

Thank you @cee-chen for fixing this issue so quickly.

@cee-chen
Copy link
Contributor Author

cee-chen commented Mar 2, 2023

Totally agreed on the visual choice between error and warning! Thanks Elizabet!

@cee-chen cee-chen enabled auto-merge (squash) March 2, 2023 18:48
@kibanamachine
Copy link

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

@cee-chen cee-chen merged commit 344fd45 into elastic:main Mar 2, 2023
@cee-chen cee-chen deleted the fix-form-invalid-icon branch March 2, 2023 19:01
jbudz added a commit to elastic/kibana that referenced this pull request Mar 14, 2023
👋 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

`eui@75.1.2` ⏩ `eui@76.0.2`

## [`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 <daveyholler@hey.com>
Co-authored-by: Constance Chen <constance.chen@elastic.co>
Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
Co-authored-by: Jon <jon@elastic.co>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants