[EuiComboBox] support append and prepend for group labels #7800

mgadewoll · 2024-05-30T10:31:18Z

Summary

This PR updates EuiComboBox to support the options props append and prepend to be output for group label options with isGroupLabel=true. This aligns the behavior with EuiSelectable.

example usage

Changes

ensures append and prepend are output for group labels
updates group label styles to ensure proper layouts (support flex layout to allow for positioning appened content to be placed on the right of the panel)
adds group stories for EuiComboBox and EuiSelectable
adds/updates VRT reference images

QA

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
- Added documentation
- Props have proper autodocs (using @default if default values are missing) and playground toggles
- ~~Checked Code Sandbox works for any docs examples~~
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~~
- ~~Updated the Figma library counterpart~~

- updates loki selector to body to prevent crashing VRT tests

…repend content

packages/eui/changelogs/upcoming/7800.md

packages/eui/src/components/selectable/selectable_list/selectable_list.stories.tsx

cee-chen · 2024-05-30T14:35:46Z

packages/eui/src/components/selectable/selectable_list/selectable_list.stories.tsx

+        append: (
+          <EuiFlexItem css={{ alignItems: 'flex-end' }}>(append)</EuiFlexItem>


Hmmm that's odd, the append nodes shouldn't need extra CSS from consumers to get them to align to the right 🤔 Is this only happening for group labels? We may need to add some extra CSS in EUI if so

Yes, currently this is "needed". The passed append/prepend is output as is. There is no further styling or layout handling added. (code here)

If we only pass the flex item it'll grow but it's left aligned

Ahhh gotcha. I wonder if we should add more OOTB styling for this? Probably an out of scope question for this PR, I'll ponder it more later / during either the Emotion conversion for this component or the EuiComboBox<>Selectable work!

packages/eui/src/components/combo_box/combo_box_options_list/_combo_box_title.scss

packages/eui/src/components/selectable/selectable_list/selectable_list.stories.tsx

cee-chen

✨ Thanks for the fast turnaround on this! We'll definitely need to figure out a way for keyboard users to reach interactive buttons inside group labels for ComboBoxes particularly, since tabbing won't work. We may have to talk to Trevor about that once he gets back!

mgadewoll · 2024-06-01T08:52:34Z

✨ Thanks for the fast turnaround on this! We'll definitely need to figure out a way for keyboard users to reach interactive buttons inside group labels for ComboBoxes particularly, since tabbing won't work. We may have to talk to Trevor about that once he gets back!

Indeed, adding anything interactive on prepend/append breaks the accessibility of those added elements as they won't be reachable via keyboard (and only partially via manual screen reader navigation (but users won't know and expect anything to be there so they wouldn't navigate to it in any case).

kibanamachine · 2024-06-01T09:21:29Z

Preview staging links for this PR:

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

elasticmachine · 2024-06-01T09:21:32Z

💚 Build Succeeded

Buildkite Build
Commit: e6f9356

History

💚 Build #2062 succeeded d0949dc
💚 Build #2061 succeeded c430c83
💚 Build #2058 succeeded 3ef63b8
💚 Build #2057 succeeded fdd46c8

`v94.5.2` ⏩ `v94.6.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) --- ## [`v94.6.0`](https://github.com/elastic/eui/releases/v94.6.0) - Updated `EuiComboBox` to support rendering `option.append` and `option.prepend` in group labels ([#7800](elastic/eui#7800)) **Accessibility** - Improved the accessibility experience of `EuiBetaBadge` ([#7805](elastic/eui#7805))

`v94.5.2` ⏩ `v94.6.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) --- ## [`v94.6.0`](https://github.com/elastic/eui/releases/v94.6.0) - Updated `EuiComboBox` to support rendering `option.append` and `option.prepend` in group labels ([elastic#7800](elastic/eui#7800)) **Accessibility** - Improved the accessibility experience of `EuiBetaBadge` ([elastic#7805](elastic/eui#7805))

mgadewoll added 8 commits May 30, 2024 12:07

feat(EuiComboBox):support append/prepend on group labels

3a16ea1

docs(storybook): add group story

2f418f6

- updates loki selector to body to prevent crashing VRT tests

test(VRT): add/update combobox reference images

83b5a5a

docs(storybook) add groups story for EuiSelectableList

ebc2af3

test(VRT): add selectable list reference images

fdd46c8

feat(EuiComboBox): ensure nested group labels also apply append and p…

a100c8c

…repend content

test(VRT): add reference images

f5d49b7

chore: add changelog

3ef63b8

mgadewoll marked this pull request as ready for review May 30, 2024 12:17

mgadewoll requested a review from a team as a code owner May 30, 2024 12:17

cee-chen reviewed May 30, 2024

View reviewed changes

packages/eui/changelogs/upcoming/7800.md Outdated Show resolved Hide resolved

cee-chen reviewed May 30, 2024

View reviewed changes

packages/eui/src/components/selectable/selectable_list/selectable_list.stories.tsx Outdated Show resolved Hide resolved

cee-chen reviewed May 30, 2024

View reviewed changes

packages/eui/src/components/combo_box/combo_box_options_list/_combo_box_title.scss Show resolved Hide resolved

mgadewoll added 3 commits May 30, 2024 17:18

docs(storybook): use icon as prepend

84f9327

chore: update changelog

c430c83

test(VRT): update selectable list reference images

d0949dc

cee-chen reviewed May 31, 2024

View reviewed changes

packages/eui/src/components/selectable/selectable_list/selectable_list.stories.tsx Outdated Show resolved Hide resolved

cee-chen approved these changes May 31, 2024

View reviewed changes

mgadewoll added 2 commits June 1, 2024 10:53

docs(storybook): add spacing between prepend and label

b852f70

test(VRT): update selectable list reference images

e6f9356

mgadewoll enabled auto-merge (squash) June 1, 2024 08:55

mgadewoll merged commit e92e996 into elastic:main Jun 1, 2024
5 checks passed

cee-chen mentioned this pull request Jun 3, 2024

Upgrade EUI to v94.6.0 elastic/kibana#184672

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[EuiComboBox] support append and prepend for group labels #7800

[EuiComboBox] support append and prepend for group labels #7800

mgadewoll commented May 30, 2024 •

edited

Loading

cee-chen May 30, 2024 •

edited

Loading

mgadewoll May 30, 2024 •

edited

Loading

cee-chen May 31, 2024

cee-chen left a comment

mgadewoll commented Jun 1, 2024 •

edited

Loading

kibanamachine commented Jun 1, 2024

elasticmachine commented Jun 1, 2024

		append: (
		<EuiFlexItem css={{ alignItems: 'flex-end' }}>(append)</EuiFlexItem>

[EuiComboBox] support append and prepend for group labels #7800

[EuiComboBox] support append and prepend for group labels #7800

Conversation

mgadewoll commented May 30, 2024 • edited Loading

Summary

Changes

QA

General checklist

cee-chen May 30, 2024 • edited Loading

Choose a reason for hiding this comment

mgadewoll May 30, 2024 • edited Loading

Choose a reason for hiding this comment

cee-chen May 31, 2024

Choose a reason for hiding this comment

cee-chen left a comment

Choose a reason for hiding this comment

mgadewoll commented Jun 1, 2024 • edited Loading

kibanamachine commented Jun 1, 2024

elasticmachine commented Jun 1, 2024

💚 Build Succeeded

History

mgadewoll commented May 30, 2024 •

edited

Loading

cee-chen May 30, 2024 •

edited

Loading

mgadewoll May 30, 2024 •

edited

Loading

mgadewoll commented Jun 1, 2024 •

edited

Loading