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

[EuiFormControlLayout] Automatically handle icon affordance via CSS variables #7799

Merged
merged 3 commits into from
May 30, 2024
Merged

[EuiFormControlLayout] Automatically handle icon affordance via CSS variables #7799

merged 3 commits into from
May 30, 2024

Conversation

cee-chen
Copy link
Contributor

@cee-chen cee-chen commented May 29, 2024 •
edited by mgadewoll
Loading

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 EuiFormControlLayout wrapper, 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.

Before After

QA

General checklist

  • Browser QA
    • Checked in mobile
    • Checked in Chrome, Safari, Edge, and Firefox
      - [ ] Checked for accessibility including keyboard-only and screenreader modes
      - [ ] Checked in both light and dark modes
  • Docs site QA
  • Code quality checklist
    • [ ] Added or updated jest and cypress tests
    • Unfortunately jsdom doesn't render CSS variables in inline styles so there isn't an easy way to test this, manual/Storybook QA will have to suffice for now
  • Release checklist - N/A
  • Designer checklist - N/A

@cee-chen
Address previous TODO / have EuiFormLayout set the icon affordance CS…
3faccaa 
…S variables on wrapper

- while accounting for EuiFormLayoutDelineated's static icons
@cee-chen cee-chen changed the title [EuiFormControlLayout] Set the icon affordance CSS variables on wrapper [EuiFormControlLayout] Automatically handle icon affordance via CSS variables May 29, 2024
@cee-chen cee-chen marked this pull request as ready for review May 29, 2024 19:33
@cee-chen cee-chen requested a review from a team as a code owner May 29, 2024 19:33
@cee-chen
DRY out duplicate CSS vars on EuiFieldText input as well
02a8a56 
🤦 basically there's no reason for inputs to ever have to calculate their own icons now, just `EuiFormControlLayout`
@kibanamachine
Copy link

Preview staging links for this PR:

@elasticmachine
Copy link
Collaborator

💚 Build Succeeded

History

mgadewoll
mgadewoll approved these changes May 30, 2024
View reviewed changes
Copy link
Contributor

@mgadewoll mgadewoll left a comment

Choose a reason for hiding this comment

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

🚢 🐈‍⬛ Awesome improvements and cleanup - The updates look and work great! It's super neat that the right paddings are added automagically now! 🪄 🎉

@cee-chen
Copy link
Contributor Author

Thanks Lene!! 🎉

@cee-chen cee-chen merged commit c4bfd44 into elastic:emotion/forms May 30, 2024
4 checks passed
@cee-chen cee-chen deleted the emotion/form-layout-icon-css-vars branch May 30, 2024 14:21
@cee-chen cee-chen mentioned this pull request Jun 10, 2024
Merged
21 tasks
@cee-chen cee-chen mentioned this pull request Jun 17, 2024
Merged
Ikuni17 pushed a commit to elastic/kibana that referenced this pull request Jun 21, 2024
@cee-chen
Upgrade EUI to v95.1.0 (#186324)
04d6c1d 
`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
@cee-chen @bhapas
Upgrade EUI to v95.1.0 (elastic#186324)
71a8617 
`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))
@cee-chen cee-chen mentioned this pull request Jun 26, 2024
Merged
27 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@mgadewoll mgadewoll mgadewoll 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
@cee-chen @kibanamachine @elasticmachine @mgadewoll