[EuiComboBox] Added `option.prepend` and `option.append` support #6953

shahzad31 · 2023-07-17T12:00:17Z

Summary

closes #2358 (see linked issue comments for more context as to why this particular API was chosen above others)

This PR adds the ability for consumers to pass in prepend and append nodes to EuiComboBox's options, e.g.

<EuiComboBox
  options={[
    {
      label: 'Hello',
      prepend: <EuiIcon type="faceHappy" size="s" />,
    },
    {
      label: 'World',
      append: <EuiIcon type="faceSad" size="s" />,
    },
  ]}
/>

These nodes are rendered for both in the dropdown options as well as in the selected pill display:

Screenshots

Multi selection:

Single selection:

QA

https://eui.elastic.co/pr_6953/#/forms/combo-box#option-rendering

General checklist

Checked in both light and dark modes
Checked in mobile
Checked in Chrome, Safari, Edge, and Firefox
Props have proper autodocs (using @default if default values are missing) and playground toggles
Added documentation
~~- [ ] Checked Code Sandbox works for any docs examples~~
Added or updated jest ~~and cypress tests~~
~~- [ ] Checked for breaking changes and labeled appropriately~~
Checked for accessibility including keyboard-only and screenreader modes
- Note that screen reader UX isn't great on EuiComboBox, but we already knew this / were going to switch to dogfooding EuiSelectable
A changelog entry exists and is marked appropriately
~~- [ ] Updated the Figma library counterpart~~

kibanamachine · 2023-07-17T12:25:02Z

Preview documentation changes for this PR: https://eui.elastic.co/pr_6953/

kibanamachine · 2023-07-17T15:41:02Z

Preview documentation changes for this PR: https://eui.elastic.co/pr_6953/

kibanamachine · 2023-07-17T21:58:06Z

Preview documentation changes for this PR: https://eui.elastic.co/pr_6953/

cee-chen · 2023-07-19T01:53:38Z

Hey Shahzad! Super apologies it's taken me so long to get around to reviewing this PR - I plan on taking some time to look at it first thing tomorrow.

Any objections if I push up any changes/cleanup/feedback directly to your branch? If you'd prefer that I leave code comments in GitHub instead, no worries, just let me know.

shahzad31 · 2023-07-19T05:35:21Z

@cee-chen for sure feel free to push updates.

+ cleanup - flatten more `euiComboBoxOption` selectors

+ other misc cleanup - remove unnecessary eslint disable (accounts for rest spread), add some newlines

- Use just one demo that switches between single selection and multi selection - Reuse as much copy from `EuiSelectable` as possible - misc cleanup - remove `Fragment`s

kibanamachine · 2023-07-19T22:25:48Z

Preview documentation changes for this PR: https://eui.elastic.co/pr_6953/

cee-chen · 2023-07-19T22:27:29Z

@ryankeairns Do you mind taking a designer pass on https://eui.elastic.co/pr_6953/#/forms/combo-box#option-rendering and letting me know if the UI (spacing, etc.) looks good to you or if you have any changes you'd like to see? Worth mentioning, the pill display and dropdown option display can be styled separately.

ryankeairns · 2023-07-20T20:43:58Z

It appears the content is overflowing the pill, see below:

With only a quick look, the culprit seems to be the line-height on .euiComboBoxPill. Decreasing it from 22 to 20 looks like the desired end result.

cee-chen · 2023-07-20T20:50:52Z

Great eye Ryan!! I was wondering why the vertical alignment was slightly bugging me, I just thought I was going crazy. Out of curiosity, is this already an issue on main/prod?

kibanamachine · 2023-07-20T21:24:21Z

Preview documentation changes for this PR: https://eui.elastic.co/pr_6953/

ryankeairns · 2023-07-20T21:45:17Z

Great eye Ryan!! I was wondering why the vertical alignment was slightly bugging me, I just thought I was going crazy. Out of curiosity, is this already an issue on main/prod?

I don't believe so. It looked to come directly from this new option.append text... the (5)

`85.0.0` ➡️ `85.1.0` ⚠️ The biggest change in this PR by far is the **removal** of several `EuiFilterSelectItem` CSS classes and styles associated with those classes. EUI has previously exported component-specific CSS classes for usage such as `.euiFilterSelect__items`, `.euiFilterGroup__popoverPanel`, or `.euiAccordionForm`. ❌ **As of our move to CSS-in-JS, we are actively moving away from this architecture**. The goal is to either provide either a component or prop directly to you instead of a CSS class. As a reminder, our classNames are not guaranteed APIs and are subject to change without warning - should you need to tweak or customize EUI's styling, we strongly recommend passing in your own `className`. 💬 Moving forward, EUI will attempted to convert any usages of removed CSS classes and their direct usages in Kibana for you. In most cases, we'll hopefully be able to take the correct path of using a component or prop instead. In cases where we cannot or significant/complex changes are required, we may temporarily convert the CSS to a static CSS-in-JS usage instead and add a TODO asking the relevant team to address this in their own time (for example, the deprecation of `EuiFilterSelectItem` and its conversion to `EuiSelectable`). ## [`85.1.0`](https://github.com/elastic/eui/tree/v85.1.0) - Updated `EuiComboBox`'s `options` to accept `option.append` and `option.prepend` props ([#6953](elastic/eui#6953)) - Updated deprecated `.substr()` usages to `.substring()` ([#6954](elastic/eui#6954)) - Updated `EuiInlineEdit`'s read mode button to include a title tooltip, increasing readability of truncated text ([#6966](elastic/eui#6966)) **Bug fixes** - Fixed `EuiFilterGroup`'s responsive styles ([#6983](elastic/eui#6983)) **Deprecations** - Deprecated `EuiFilterSelectItem`; Use `EuiSelectable` instead ([#6982](elastic/eui#6982)) **CSS-in-JS conversions** - Converted `EuiFilterSelectItem` to Emotion ([#6982](elastic/eui#6982)) - Removed `.euiFilterSelect__items` CSS; Use `EuiSelectable` instead ([#6982](elastic/eui#6982)) - Removed `.euiFilterSelect__note` and `.euiFilterSelect__noteContent` CSS; Use `EuiSelectableMessage` instead ([#6982](elastic/eui#6982)) - Added `focus.transparency` and `focus.backgroundColor` theme tokens ([#6984](elastic/eui#6984)) --------- Co-authored-by: Cee Chen <constance.chen@elastic.co> Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>

added icon as an option

9d4b127

shahzad31 requested a review from cee-chen July 17, 2023 12:00

add changelog

319e6d0

shahzad31 requested a review from a team July 17, 2023 15:20

cee-chen self-assigned this Jul 17, 2023

fix

e5e539e

cee-chen added 2 commits July 19, 2023 12:03

Remove renderPill types

6a29199

Change option.icon prop to option.prepend and option.append

1ec39ed

cee-chen changed the title ~~[ComboBox] Added icon option~~ [EuiComboBox] Added option.prepend and option.icon support Jul 19, 2023

cee-chen added 5 commits July 19, 2023 15:00

Add styles for margins + vertical alignment

41f6477

+ cleanup - flatten more `euiComboBoxOption` selectors

Fix new option keys being spread to pill DOM

581768a

+ other misc cleanup - remove unnecessary eslint disable (accounts for rest spread), add some newlines

Revert EuiBadge changes

2bf15b3

Documentation

b083820

- Use just one demo that switches between single selection and multi selection - Reuse as much copy from `EuiSelectable` as possible - misc cleanup - remove `Fragment`s

changelog

7f965f8

cee-chen force-pushed the pills branch from e9a096b to 7f965f8 Compare July 19, 2023 22:00

cee-chen changed the title ~~[EuiComboBox] Added option.prepend and option.icon support~~ [EuiComboBox] Added option.prepend and option.append support Jul 19, 2023

[PR feedback] Pill line height

e284baa

ryankeairns approved these changes Jul 20, 2023

View reviewed changes

cee-chen merged commit 0fc3700 into elastic:main Jul 21, 2023

shahzad31 deleted the pills branch July 27, 2023 18:41

breehall mentioned this pull request Jul 27, 2023

Upgrade EUI to v85.1.0 elastic/kibana#162660

Merged

shahzad31 mentioned this pull request Aug 7, 2023

[Synthetics] Update use of combobox icons elastic/kibana#163118

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[EuiComboBox] Added `option.prepend` and `option.append` support #6953

[EuiComboBox] Added `option.prepend` and `option.append` support #6953

shahzad31 commented Jul 17, 2023 •

edited by cee-chen

Loading

kibanamachine commented Jul 17, 2023

kibanamachine commented Jul 17, 2023

kibanamachine commented Jul 17, 2023

cee-chen commented Jul 19, 2023

shahzad31 commented Jul 19, 2023

kibanamachine commented Jul 19, 2023

cee-chen commented Jul 19, 2023

ryankeairns commented Jul 20, 2023

cee-chen commented Jul 20, 2023

kibanamachine commented Jul 20, 2023

ryankeairns commented Jul 20, 2023

[EuiComboBox] Added option.prepend and option.append support #6953

[EuiComboBox] Added option.prepend and option.append support #6953

Conversation

shahzad31 commented Jul 17, 2023 • edited by cee-chen Loading

Summary

Screenshots

QA

General checklist

kibanamachine commented Jul 17, 2023

kibanamachine commented Jul 17, 2023

kibanamachine commented Jul 17, 2023

cee-chen commented Jul 19, 2023

shahzad31 commented Jul 19, 2023

kibanamachine commented Jul 19, 2023

cee-chen commented Jul 19, 2023

ryankeairns commented Jul 20, 2023

cee-chen commented Jul 20, 2023

kibanamachine commented Jul 20, 2023

ryankeairns commented Jul 20, 2023

[EuiComboBox] Added `option.prepend` and `option.append` support #6953

[EuiComboBox] Added `option.prepend` and `option.append` support #6953

shahzad31 commented Jul 17, 2023 •

edited by cee-chen

Loading