[Emotion] Convert EuiComboBox #7950

cee-chen · 2024-08-07T20:36:31Z

Summary

Converts EuiComboBox to Emotion (+ several cleanups along the way). As always, I recommend following along by commit. I also strongly recommend hiding whitespace diffs as a lot of the changes come from extra indentation from RenderWithEuiStylesMemoizer usage.

This PR also deletes an entirely unused EuiComboBoxOption component. This appears to have been replaced by EuiFilterSelectItem which will in turn be replaced by EuiSelectable down the road.

QA

Docs and stories should look the same as production, particularly the following permutations/UX actions:
- disabled, invalid, loading states
- compressed
- plain text single select vs pills
- append/prepend on plain text selection
- icons on pills and append/prepend examples
- for multiple section combo boxes, the height of the form control should expand automatically with each row of pills

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
- Updated visual regression 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

Emotion checklist

General

Output CSS matches the previous CSS (works as expected in all browsers)
Rendered className(s) read as expected in snapshots and browsers
~[ ] Checked component playground ~

Unit tests

~~[ ] shouldRenderCustomStyles() test was added and passes with parent component and any nested childProps (e.g. tooltipProps)~~ - already handled
~~[ ] Converted Enzyme to RTL~~ no Enzyme usages

Sass/Emotion conversion process

Removed component from src/components/index.scss
Deleted any src/amsterdam/overrides/{component}.scss files (styles within should have been converted to the baseline Emotion styles)
Converted all global Sass vars/mixins to JS (e.g. $euiSize to euiTheme.size.base)
~~[ ] Listed var/mixin removals in changelog~~ No vars or mixins
~~[ ] Added an @warn deprecation message within the global_styling/mixins/{component}.scss file~~
~~[ ] Removed or converted component-specific Sass vars/mixins to exported JS versions~~
~~[ ] Ran yarn compile-scss to update var/mixin JSON files~~
~~[ ] Simplified calc() to mathWithUnits if possible (if mixing different unit types, this may not be possible)~~ - Not possible

CSS tech debt

~~[ ] Wrapped all animations or transitions in euiCanAnimate~~ No animations
Used gap property to add margin between items if using flex
Converted side specific padding, margin, and position to -inline and -block logical properties (check inline styles as well as CSS)

DOM Cleanup

Did NOT remove any block/element classNames (e.g. euiComponent, euiComponent__child)
SEARCH KIBANA FIRST: Deleted any modifier classNames or maps if not being used in Kibana.

Kibana due diligence

Search Kibana's codebase for {euiComponent}- (case sensitive) to check for usage of modifier classes
- ~~[ ] If usage exists, consider converting to a data attribute so that consumers still have something to hook into~~
Pre-emptively check how your conversion will impact the next Kibana upgrade. This entails searching/grepping through Kibana (excluding **/target, **/*.snap, **/*.storyshot for less noise) for eui{Component} (case sensitive) to find:
Any test/query selectors that will need to be updated
Any Sass or CSS that will need to be updated, particularly if a component Sass var was deleted
Any direct className usages that will need to be refactored (e.g. someone calling the euiBadge class on a div instead of simply using the EuiBadge component)

Extras/nice-to-have

Reduced specificity where possible (usually by reducing nesting and class name chaining)
~~[ ] Optional component/code cleanup: consider splitting up the component into multiple children if it's overly verbose or difficult to reason about~~
~~[ ] Documentation pass~~
~~[ ] Check for issues in the backlog that could be a quick fix for that component~~

Modifier classes removed:

euiComboBox--fullWidth (1 test selector in Kibana to update)
euiComboBox--compressed
euiComboBox--prepended
euiComboBox--appended
euiComboBox__inputWrap--compressed
euiComboBox__inputWrap--fullWidth
euiComboBox__inputWrap--noWrap
euiComboBox__inputWrap--inGroup

- class component with generic, so it's easier to use a render prop - we can avoid having to memoizing styles however by using `logicalStyle()` and `euiFormMaxWidth()` separate from combobox's styles + remove fullWidth modifier class

- DRY it out to a prop and the internal `EuiComboBoxOptionAppendPrepend` util - remove applicable Sass

- requires render prop due to class component with generic :T + `removeOptionMessage` requires some extra typing now due to that - remove unnecessary icon className/CSS - now handled by EuiFormControlLayout + remove unnecessary `__inputWrap--fullWidth` - it's already full width by default, width is set by the combobox wrapper

- use `inherit` property to handle both compressed and uncompressed styles - clean up form control styles into a nested obj - remove more modifiers from EuiCombBox (no Kibana usages)

+ convert margins to flex gap instead + move max-width CSS - no longer needs specificty override + convert EuiComboBoxPill from a class component to a function component

- move JSX consts to inline JSX instead so we don't need multiple `RenderWithEuiStylesMemoizer` + DRY out new constant for `200` max height + import reorder

- EuiFilterSelectItem is being used instead - no top level export, so no deprecation/breaking change needed

(lazily - see comment rationale)

(also lazily, since EuiSelectable has its own group labels)

cee-chen · 2024-08-07T20:59:51Z

packages/eui/.loki/reference/chrome_mobile_Forms_EuiComboBox_Playground.png

Quick note that the pill being lower than before is intentional. It's more visually centered now (hooray!)

cee-chen · 2024-08-07T21:00:49Z

packages/eui/.loki/reference/chrome_mobile_Forms_EuiComboBox_Nested_Options_Groups.png

Group titles/labels shifting slightly vertically is, if not intentional, then expected due to line height changes from using euiTitle() directly. It's likely also not an issue long term as we'll be switching to EuiSelectable's group labels in the future

- tl;dr it shouldn't wrap

mgadewoll

🚢 🐈‍⬛ I didn't see any unwanted regression. There is a tiny change to truncated pills, that I think is an improvement, other than that awesome conversion! 👏

Screen.Recording.2024-08-08.at.13.32.02.mov

mgadewoll · 2024-08-08T11:37:18Z

packages/eui/src/components/combo_box/combo_box_options_list/combo_box_options_list.styles.ts

@@ -32,6 +33,39 @@ export const euiComboBoxOptionListStyles = (euiThemeContext: UseEuiTheme) => {
      .euiTextTruncate {
        pointer-events: none;
      }
+
+      /* We're being lazy here about child selectors/specificity, because EuiComboBox


Does it make sense to link the update issue as TODO? 🤔

This entire style file will be likely be ripped out/removed by me in a few weeks here so I don't think I need a TODO! I'm usually pretty good about spotting unused components/files!

packages/eui/.loki/reference/chrome_desktop_Forms_EuiComboBox_With_Tooltip.png

+ move tooltip props to where it's being used in the story instead of a const

elasticmachine · 2024-08-08T19:53:12Z

💚 Build Succeeded

Buildkite Build
Commit: c6daf78

History

💚 Build #2529 succeeded 2d0b7a0
💔 Build #2528 failed b0ed250

`v95.6.0` ⏩ `v95.7.0` _[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.7.0`](https://github.com/elastic/eui/releases/v95.7.0) **CSS-in-JS conversions** - Converted `EuiSelectable` to Emotion ([#7940](elastic/eui#7940)) - Removed `$euiSelectableListItemBorder` - Removed `$euiSelectableListItemPadding` - Converted `EuiSelectableTemplateSitewide` to Emotion ([#7944](elastic/eui#7944)) - Removed `$euiSelectableTemplateFocusBackgroundLight` - Removed `$euiSelectableTemplateFocusBackgroundDark` - Removed `$euiSelectableTemplateSitewideTypes` - Converted `EuiComboBox` to Emotion ([#7950](elastic/eui#7950))

cee-chen added 11 commits August 7, 2024 09:14

Convert base EuiComboBox styles

036f334

- class component with generic, so it's easier to use a render prop - we can avoid having to memoizing styles however by using `logicalStyle()` and `euiFormMaxWidth()` separate from combobox's styles + remove fullWidth modifier class

Convert append/prepend margin styles to Emotion

5f334c6

- DRY it out to a prop and the internal `EuiComboBoxOptionAppendPrepend` util - remove applicable Sass

Convert input amsterdam overrides to Emotion

32144e9

- use `inherit` property to handle both compressed and uncompressed styles - clean up form control styles into a nested obj - remove more modifiers from EuiCombBox (no Kibana usages)

Convert pill styles to Emotion

4f3fccd

+ convert margins to flex gap instead + move max-width CSS - no longer needs specificty override + convert EuiComboBoxPill from a class component to a function component

Convert options list styles to Emotion

8e84be5

- move JSX consts to inline JSX instead so we don't need multiple `RenderWithEuiStylesMemoizer` + DRY out new constant for `200` max height + import reorder

🔥 Remove unused EuiComboBoxOption component/CSS

37b9d15

- EuiFilterSelectItem is being used instead - no top level export, so no deprecation/breaking change needed

Convert remaining option styles

5bfac1b

(lazily - see comment rationale)

Convert option title styles

98490bc

(also lazily, since EuiSelectable has its own group labels)

Delete Sass files

b8ceba2

VRT updates

7f0f3f3

cee-chen added the emotion label Aug 7, 2024

changelog

701d4d1

cee-chen commented Aug 7, 2024

View reviewed changes

cee-chen added 2 commits August 7, 2024 14:36

Fix plaintext prepend/append mobile wrapping

d8b173e

- tl;dr it shouldn't wrap

Fix/DRY out EuiIcon vertical alignment in all prepend/append nodes

b0ed250

cee-chen marked this pull request as ready for review August 7, 2024 21:41

cee-chen requested a review from a team as a code owner August 7, 2024 21:41

Update Cypress test

2d0b7a0

mgadewoll approved these changes Aug 8, 2024

View reviewed changes

Skip tooltip VRT

c6daf78

+ move tooltip props to where it's being used in the story instead of a const

cee-chen force-pushed the emotion/combobox branch from 1f584ad to c6daf78 Compare August 8, 2024 19:26

cee-chen enabled auto-merge (squash) August 8, 2024 19:27

cee-chen merged commit 956ec04 into elastic:main Aug 8, 2024
5 checks passed

cee-chen deleted the emotion/combobox branch August 8, 2024 19:53

This was referenced Aug 12, 2024

Upgrade EUI to v95.7.0 elastic/kibana#190346

Merged

[Emotion] EuiComboBox #6391

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Emotion] Convert EuiComboBox #7950

[Emotion] Convert EuiComboBox #7950

cee-chen commented Aug 7, 2024 •

edited by mgadewoll

Loading

cee-chen Aug 7, 2024

cee-chen Aug 7, 2024

mgadewoll left a comment

mgadewoll Aug 8, 2024

cee-chen Aug 8, 2024

elasticmachine commented Aug 8, 2024

[Emotion] Convert EuiComboBox #7950

[Emotion] Convert EuiComboBox #7950

Conversation

cee-chen commented Aug 7, 2024 • edited by mgadewoll Loading

Summary

QA

General checklist

cee-chen Aug 7, 2024

Choose a reason for hiding this comment

cee-chen Aug 7, 2024

Choose a reason for hiding this comment

mgadewoll left a comment

Choose a reason for hiding this comment

mgadewoll Aug 8, 2024

Choose a reason for hiding this comment

cee-chen Aug 8, 2024

Choose a reason for hiding this comment

elasticmachine commented Aug 8, 2024

💚 Build Succeeded

History

cee-chen commented Aug 7, 2024 •

edited by mgadewoll

Loading