Conversation
- in favor of icon configuration which sets the icon on the desired side (right) and automatically accounts for other icons/padding - remove `[readonly]` CSS, as the component isn't even setting a readonly prop so I'm not sure what that CSS is doing??
- no longer has any styles attached as of Emotion conversion, so manually apply styles instead
- should be using the top level import, not reaching directly into the file
- prefer `.render()`ed snapshot instead Enzyme wrapper snapshot
|
/ci |
|
Pinging @elastic/eui-team (EUI) |
dhurley14
left a comment
There was a problem hiding this comment.
detection engine team changes LGTM. Thanks. Just snapshot updates.
jennypavlova
left a comment
There was a problem hiding this comment.
The code changes look good! 💯
I am not 100% sure if it's related to the PR but I saw this while testing:
-
The left paddings of the control drop-downs are missing (Infra -> Hosts)
-
Some search bars have borders on click some do not (APM & Infra -> Alerts)
Screen.Recording.2024-06-20.at.17.06.04.mov
Screen.Recording.2024-06-20.at.16.58.42.mov
@jennypavlova FYI - I looked into this, and this is most likely a result of #184533 + how the Hosts page modifies the |
@Heenawter Thanks for pointing that out! Looks like it's a recent bug as I couldn't see it on an earlier main version. Do we have an open issue for fixing that? @cee-chen Sorry for that, I wasn't sure where this bug came from and I saw it on the branch, I will approve 👍 |
From a scan of this theme, this likely shouldn't be affecting _all_ `input` elements wholesale in any case
|
@jennypavlova Thanks so much for the thorough QA Jenny and Hannah, y'all rock! The missing border on focus issue should be fixed now with the latest commit, and I appreciate you flagging that so much 🙇 Feel free to ping us if we can help out with the odd padding behavior of form prepend/append nodes. As Hannah noted, those should not have been affected by this PR (not yet migrated to Emotion), although that will be happening soon. |
|
@cee-chen Thank you for fixing the borders, they look fine now! 💯 |
💛 Build succeeded, but was flaky
Failed CI StepsMetrics [docs]Async chunks
Page load bundle
History
To update your PR or re-run it, just comment with: |
saarikabhasi
left a comment
There was a problem hiding this comment.
Search changes LGTM. Tested locally.
`v95.0.0-backport.0` ⏩ `v95.1.0-backport.0` This PR primarily concerns converting multiple common/building block form control components to Emotion (text, number, and search fields). This means that custom CSS or direct `className` usage of these form controls **should be manually QA'd** to ensure they still look the same before visually, with no regressions. _[Questions? Please see our Kibana upgrade FAQ.](https://github.com/elastic/eui/blob/main/wiki/eui-team-processes/upgrading-kibana.md#faq-for-kibana-teams)_ --- ## [`v95.1.0`](https://github.com/elastic/eui/releases/v95.1.0) - Updated `EuiFormControlLayout` to automatically pass icon padding affordance down to child `input`s ([elastic#7799](elastic/eui#7799)) **Bug fixes** - Fixed broken focus/invalid styling on compressed `EuiDatePickerRange`s ([elastic#7770](elastic/eui#7770)) **CSS-in-JS conversions** - Converted `EuiFieldText` to Emotion ([elastic#7770](elastic/eui#7770)) - Updated the autofill colors of Chrome (and other webkit browsers) to better match EUI's light and dark mode ([elastic#7776](elastic/eui#7776)) - Converted `EuiFieldNumber` to Emotion ([elastic#7802](elastic/eui#7802)) - Converted `EuiFieldSearch` to Emotion ([elastic#7802](elastic/eui#7802)) - Converted `EuiFieldPassword` to Emotion ([elastic#7802](elastic/eui#7802)) - Converted `EuiTextArea` to Emotion ([elastic#7812](elastic/eui#7812)) - Converted `EuiSelect` to Emotion ([elastic#7812](elastic/eui#7812)) - Converted `EuiSuperSelect` to Emotion ([elastic#7812](elastic/eui#7812)) ## [`v95.1.0-backport.0`](https://github.com/elastic/eui/releases/v95.1.0-backport.0) **This is a backport release only intended for use by Kibana.** - Updated `EuiSteps` to support a new `titleSize="xxs"` style, which outputs the same title font size but smaller unnumbered step indicators ([elastic#7813](elastic/eui#7813)) - Updated `EuiStepsHorizontal` to support a new `size="xs"` style, which outputs smaller unnumbered step indicators ([elastic#7813](elastic/eui#7813)) - Updated `EuiStepNumber` to support new `titleSize="none"` which omits rendering step numbers, and will only render icons ([elastic#7813](elastic/eui#7813))
v95.0.0-backport.0⏩v95.1.0-backport.0This PR primarily concerns converting multiple common/building block form control components to Emotion (text, number, and search fields). This means that custom CSS or direct
classNameusage of these form controls should be manually QA'd to ensure they still look the same before visually, with no regressions.Questions? Please see our Kibana upgrade FAQ.
v95.1.0EuiFormControlLayoutto automatically pass icon padding affordance down to childinputs (#7799)Bug fixes
EuiDatePickerRanges (#7770)CSS-in-JS conversions
EuiFieldTextto Emotion (#7770)EuiFieldNumberto Emotion (#7802)EuiFieldSearchto Emotion (#7802)EuiFieldPasswordto Emotion (#7802)EuiTextAreato Emotion (#7812)EuiSelectto Emotion (#7812)EuiSuperSelectto Emotion (#7812)v95.1.0-backport.0This is a backport release only intended for use by Kibana.
EuiStepsto support a newtitleSize="xxs"style, which outputs the same title font size but smaller unnumbered step indicators (#7813)EuiStepsHorizontalto support a newsize="xs"style, which outputs smaller unnumbered step indicators (#7813)EuiStepNumberto support newtitleSize="none"which omits rendering step numbers, and will only render icons (#7813)