[EuiFormControlLayout] Automatically handle icon affordance via CSS variables#7799
Merged
cee-chen merged 3 commits intoelastic:emotion/formsfrom May 30, 2024
Merged
Conversation
…S variables on wrapper - while accounting for EuiFormLayoutDelineated's static icons
cee-chen
changed the title
🤦 basically there's no reason for inputs to ever have to calculate their own icons now, just `EuiFormControlLayout`
|
Preview staging links for this PR:
|
Collaborator
💚 Build Succeeded
History
|
mgadewoll
approved these changes
May 30, 2024
Contributor
mgadewoll
left a comment
mgadewoll
left a comment
There was a problem hiding this comment.
🚢 🐈⬛ Awesome improvements and cleanup - The updates look and work great! It's super neat that the right paddings are added automagically now! 🪄 🎉
Contributor
Author
|
Thanks Lene!! 🎉 |
21 tasks
Ikuni17
pushed a commit
to elastic/kibana
that referenced
this pull request
Jun 21, 2024
`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 ([#7799](elastic/eui#7799)) **Bug fixes** - Fixed broken focus/invalid styling on compressed `EuiDatePickerRange`s ([#7770](elastic/eui#7770)) **CSS-in-JS conversions** - Converted `EuiFieldText` to Emotion ([#7770](elastic/eui#7770)) - Updated the autofill colors of Chrome (and other webkit browsers) to better match EUI's light and dark mode ([#7776](elastic/eui#7776)) - Converted `EuiFieldNumber` to Emotion ([#7802](elastic/eui#7802)) - Converted `EuiFieldSearch` to Emotion ([#7802](elastic/eui#7802)) - Converted `EuiFieldPassword` to Emotion ([#7802](elastic/eui#7802)) - Converted `EuiTextArea` to Emotion ([#7812](elastic/eui#7812)) - Converted `EuiSelect` to Emotion ([#7812](elastic/eui#7812)) - Converted `EuiSuperSelect` to Emotion ([#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 ([#7813](elastic/eui#7813)) - Updated `EuiStepsHorizontal` to support a new `size="xs"` style, which outputs smaller unnumbered step indicators ([#7813](elastic/eui#7813)) - Updated `EuiStepNumber` to support new `titleSize="none"` which omits rendering step numbers, and will only render icons ([#7813](elastic/eui#7813))
bhapas
pushed a commit
to bhapas/kibana
that referenced
this pull request
Jun 24, 2024
`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))
27 tasks
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
4 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Note
This PR is merging into a feature branch.
Follow up refactor from CSS variable architecture set up in 4ddc0ef, and addresses a quick TODO from e13aa41 (#7770 was already getting unwieldy, hence this separate PR).
This PR sets icon affordance variables on the
EuiFormControlLayoutwrapper, which cascades down to inner<input>s and child form controls. Once all form controls are on Emotion, they'll automatically inherit the right # of icons to account for in their inner padding.QA
General checklist
- [ ] Checked for accessibility including keyboard-only and screenreader modes- [ ] Checked in both light and dark modes[ ] Added or updated jest and cypress tests