[Emotion] Convert EuiTextArea, EuiSelect, and EuiSuperSelect #7812

cee-chen · 2024-06-04T23:55:28Z

Summary

Note

This PR merges into a feature branch.

I strongly recommend following along by commit, especially for the select components which required more complex cleanup or changes.

QA

EuiTextArea - Docs and Storybook look the same as before with no obvious regressions
EuiSelect - Docs and Storybook look the same as before with no obvious regressions
EuiSuperSelect - Docs and Storybook look the same as before with no obvious regressions

General checklist

Browser QA
- Checked in both light and dark modes
- Checked in mobile
- Checked in Chrome, Safari, Edge, and Firefox
  ~~- [ ] Checked for accessibility including keyboard-only and screenreader modes~~
Docs site QA - N/A
Code quality checklist
- ~~Added or~~ updated jest ~~and cypress tests~~
Release checklist
- A changelog entry exists and is marked appropriately.
  ~~- [ ] If applicable, added the breaking change issue label (and filled out the breaking change checklist)~~
Designer checklist - N/A

+ remove className map + simplify `definedRows` variable

- no impact on modern/latest browsers of Edge or Firefox

- memoization - code order - reduce inline let's

- trying to avoid having to wrap a class component with a generic type in a theme HOC, so opting for static className util instead

+ create new subcomponent util to make it easier to use style hooks + move location of Option type outside of control (makes slightly more sense here, file-wise)

- our more granular/explicit architecture (vs an all in one mixin) pays off!! 🎉 - we now also get to remove a `ts-ignore` + invalid `readonly` attribute (doesn't apply to buttons) - also remove extra className modifier which isn't great BEM (no Kibana usages)

cee-chen · 2024-06-04T23:59:28Z

@mgadewoll I probably should have asked this before now, but should I be updating VRT screenshots at the same time as as I open these PRs? 😅

mgadewoll · 2024-06-05T06:46:11Z

@mgadewoll I probably should have asked this before now, but should I be updating VRT screenshots at the same time as as I open these PRs? 😅

Will there be another PR to merge the form branch into main? If so, I think it's fine to do the VRT there. The separate PRs might cause changes in the VRT images between separate PRs so doing it once all is done might be less cumbersome 🙂

cee-chen · 2024-06-05T15:19:55Z

Will there be another PR to merge the form branch into main? If so, I think it's fine to do the VRT there. The separate PRs might cause changes in the VRT images between separate PRs so doing it once all is done might be less cumbersome 🙂

I was thinking more if it made it easier to see the visual difference in CSS changes! I'm also fine doing one final VRT pass in the final feature branch merge.

mgadewoll · 2024-06-05T15:22:14Z

Will there be another PR to merge the form branch into main? If so, I think it's fine to do the VRT there. The separate PRs might cause changes in the VRT images between separate PRs so doing it once all is done might be less cumbersome 🙂

I was thinking more if it made it easier to see the visual difference in CSS changes! I'm also fine doing one final VRT pass in the final feature branch merge.

I don't mind either way as long as we run it at some point 🙂 In any case I think we need to always make sure to run VRT after additional changes (while we don't have a pipeline step yet)

cee-chen · 2024-06-05T15:35:24Z

Comparing the VRT screenshots for this PR actually just helped me catch a bug I missed so I'm definitely doing them from now on!!

packages/eui/src/components/form/select/_select.scss

packages/eui/src/components/form/select/select.tsx

packages/eui/src/components/form/select/select.stories.tsx

packages/eui/src/components/form/super_select/super_select.tsx

packages/eui/src/components/form/super_select/super_select_control.tsx

packages/eui/src/components/form/super_select/super_select_item.tsx

mgadewoll · 2024-06-06T13:00:25Z

packages/eui/src/components/form/super_select/_super_select.scss

@@ -1,9 +0,0 @@
-.euiSuperSelect__item {
-  @include euiFontSizeS;


Not sure if it's intended, but I think this mixin is missing in the emotion version?
I'm seeing differences due to that in the option content height (line-height specifically is different now)

super_select_emotion_conversion.mov

Shoot, I did totally miss this! 🤦 Thank you so much for catching it!

Actually, it looks like the new Emotion CSS-in-JS euiFontSize(euiThemeContext, 's') changes the line height to be smaller anyway (Caroline intentionally changed this as part of Emotion work) so I think the reduced height would have been an intentional change in any case. (and IMO, it looks pretty good!)

I'm going to go ahead and explicitly add it in any case because it's better to be clear than not clear 🤷 c2f14e3

Also just mentioning for my own memory - @include euiInteractiveStates didn't appear to do anything / was already handled by EuiContextMenuItem, and can be safely removed

kibanamachine · 2024-06-06T18:17:34Z

Preview staging links for this PR:

Docs site: https://eui.elastic.co/pr_7812/
Storybook: https://eui.elastic.co/pr_7812/storybook

elasticmachine · 2024-06-06T18:17:37Z

💚 Build Succeeded

Buildkite Build
Commit: c2f14e3

History

💚 Build #2108 succeeded 9b14b6e
💚 Build #2101 succeeded 88d025b

mgadewoll

🚢 🐈‍⬛ Thanks for the additional changes and contextual info! All looks good to me! 🚀

mgadewoll · 2024-06-06T20:28:33Z

~~Ah wait - I think you might need to rerun VRT? 😄~~

update: I correct myself, the visual changes are not visible in the VRT yet I think 😅

cee-chen · 2024-06-06T21:09:41Z

I'm not familiar enough with VRT to know if there's a way to get it into certain states before a snapshot is taken. Clicking the dropdown to toggle options would be great for example! There are multiple stories that would benefit from this!

mgadewoll · 2024-06-06T21:28:33Z

I'm not familiar enough with VRT to know if there's a way to get it into certain states before a snapshot is taken. Clicking the dropdown to toggle options would be great for example! There are multiple stories that would benefit from this!

That's also fine for now. There are a lot of components that don't have that enabled yet 😅
We can do simple interactions already with the loki interactions. We just currently have some issue that sometimes the loki selector for portals does not work. Here is an example (VRT image) for EuiComboBox that currently takes a screenshot of the entire body to side-step that issue for now.

cee-chen · 2024-06-06T22:20:58Z

Oooh gotcha, thanks for clarifying!

`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))

`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 added 12 commits June 4, 2024 14:49

Merge branch 'main' into emotion/forms

68262c1

Convert EuiTextArea to Emotion

e93f9c1

+ remove className map + simplify `definedRows` variable

[EuiSelect] Remove unnecessary vendor prefixes

75157f0

- no impact on modern/latest browsers of Edge or Firefox

Convert EuiSelect to Emotion

30609ff

[EuiSelect] Misc cleanup

e4bd38d

- memoization - code order - reduce inline let's

[EuiSelect] Misc Storybook cleanup

838e4ce

[EuiSuperSelect] Convert initial listbox CSS

e77c3df

- trying to avoid having to wrap a class component with a generic type in a theme HOC, so opting for static className util instead

[EuiSuperSelect] Convert individual item/option styles

4daa796

+ create new subcomponent util to make it easier to use style hooks + move location of Option type outside of control (makes slightly more sense here, file-wise)

[EuiSuperSelect] Delete Sass files

3f9c939

Update downstream snapshots

88d025b

changelog

b8201ba

cee-chen added the emotion label Jun 4, 2024

cee-chen marked this pull request as ready for review June 5, 2024 15:19

cee-chen requested a review from a team as a code owner June 5, 2024 15:19

cee-chen added 2 commits June 5, 2024 08:33

Update VRT screenshots

5a0ebfb

[EuiTextArea] Fix missed CSS conversion that VRT tests caught 🎉

9b14b6e

mgadewoll reviewed Jun 6, 2024

View reviewed changes

cee-chen added 2 commits June 6, 2024 10:42

[PR feedback] Typing

93393f8

[PR feedback] Explicitly call euiFontSize('s')

c2f14e3

cee-chen force-pushed the emotion/forms branch from 68262c1 to 5ee7347 Compare June 6, 2024 18:43

mgadewoll approved these changes Jun 6, 2024

View reviewed changes

cee-chen merged commit 5e06197 into elastic:emotion/forms Jun 6, 2024
4 checks passed

cee-chen deleted the emotion/textarea-selects branch June 6, 2024 21:10

cee-chen mentioned this pull request Jun 10, 2024

[Emotion] Convert basic form controls #7823

Merged

21 tasks

cee-chen mentioned this pull request Jun 17, 2024

Upgrade EUI to v95.1.0 elastic/kibana#186324

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Emotion] Convert EuiTextArea, EuiSelect, and EuiSuperSelect #7812

[Emotion] Convert EuiTextArea, EuiSelect, and EuiSuperSelect #7812

cee-chen commented Jun 4, 2024 •

edited by mgadewoll

Loading

cee-chen commented Jun 4, 2024

mgadewoll commented Jun 5, 2024

cee-chen commented Jun 5, 2024

mgadewoll commented Jun 5, 2024

cee-chen commented Jun 5, 2024

mgadewoll Jun 6, 2024

cee-chen Jun 6, 2024

cee-chen Jun 6, 2024 •

edited

Loading

cee-chen Jun 6, 2024

kibanamachine commented Jun 6, 2024

elasticmachine commented Jun 6, 2024

mgadewoll left a comment

mgadewoll commented Jun 6, 2024 •

edited

Loading

cee-chen commented Jun 6, 2024 •

edited

Loading

mgadewoll commented Jun 6, 2024

cee-chen commented Jun 6, 2024

		@@ -1,9 +0,0 @@
		.euiSuperSelect__item {
		@include euiFontSizeS;

[Emotion] Convert EuiTextArea, EuiSelect, and EuiSuperSelect #7812

[Emotion] Convert EuiTextArea, EuiSelect, and EuiSuperSelect #7812

Conversation

cee-chen commented Jun 4, 2024 • edited by mgadewoll Loading

Summary

QA

General checklist

cee-chen commented Jun 4, 2024

mgadewoll commented Jun 5, 2024

cee-chen commented Jun 5, 2024

mgadewoll commented Jun 5, 2024

cee-chen commented Jun 5, 2024

mgadewoll Jun 6, 2024

Choose a reason for hiding this comment

cee-chen Jun 6, 2024

Choose a reason for hiding this comment

cee-chen Jun 6, 2024 • edited Loading

Choose a reason for hiding this comment

cee-chen Jun 6, 2024

Choose a reason for hiding this comment

kibanamachine commented Jun 6, 2024

elasticmachine commented Jun 6, 2024

💚 Build Succeeded

History

mgadewoll left a comment

Choose a reason for hiding this comment

mgadewoll commented Jun 6, 2024 • edited Loading

cee-chen commented Jun 6, 2024 • edited Loading

mgadewoll commented Jun 6, 2024

cee-chen commented Jun 6, 2024

cee-chen commented Jun 4, 2024 •

edited by mgadewoll

Loading

cee-chen Jun 6, 2024 •

edited

Loading

mgadewoll commented Jun 6, 2024 •

edited

Loading

cee-chen commented Jun 6, 2024 •

edited

Loading