Skip to content

Combobox, Select, SelectControl: Add Group and GroupLabel - #80574

Merged
mirka merged 3 commits into
trunkfrom
add-combobox-select-group-subcomponents
Jul 22, 2026
Merged

Combobox, Select, SelectControl: Add Group and GroupLabel#80574
mirka merged 3 commits into
trunkfrom
add-combobox-select-group-subcomponents

Conversation

@mirka

@mirka mirka commented Jul 22, 2026

Copy link
Copy Markdown
Member

What?

Adds Group and GroupLabel subcomponents to the Combobox and Select item-popup primitive families, and re-exports them from SelectControl.

Why?

Autocomplete already supports labeled item groups. Combobox and Select share the same item-popup styling but were missing equivalent subcomponents, so grouped options could not be composed consistently across these families.

How?

  • Add group.tsx and group-label.tsx wrappers for Combobox and Select, following the existing Autocomplete implementation.
  • Apply shared item-popup styles for group spacing and label typography.
  • Re-export SelectControl.Group and SelectControl.GroupLabel.
  • Add Storybook grouped examples and ref-forwarding unit tests.

Testing Instructions

  1. Start Storybook and open:
    • Design System / Components / Form / Primitives / Combobox → Grouped
    • Design System / Components / Form / Primitives / Select → Grouped
    • Design System / Components / Form / SelectControl → Grouped
  2. Confirm group labels render with heading-sm styling and items remain selectable.

Screenshots or screencast

grouped combobox  grouped select

@mirka mirka self-assigned this Jul 22, 2026
@github-actions github-actions Bot added the [Package] UI /packages/ui label Jul 22, 2026
@github-actions

Copy link
Copy Markdown

Size Change: +594 B (+0.01%)

Total Size: 7.75 MB

📦 View Changed
Filename Size Change
build/scripts/block-editor/index.min.js 428 kB +594 B (+0.14%)

compressed-size-action

@mirka mirka added the [Type] Enhancement A suggestion for improvement. label Jul 22, 2026
@mirka mirka changed the title Add Group and GroupLabel to Combobox, Select, and SelectControl Combobox, Select, SelectControl: Add Group and GroupLabel Jul 22, 2026
@mirka
mirka marked this pull request as ready for review July 22, 2026 14:51
@mirka
mirka requested a review from a team as a code owner July 22, 2026 14:51
@github-actions

github-actions Bot commented Jul 22, 2026

Copy link
Copy Markdown

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: mirka <0mirka00@git.wordpress.org>
Co-authored-by: aduth <aduth@git.wordpress.org>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

@github-actions

Copy link
Copy Markdown

Flaky tests detected in 6ec5cb7.
Some tests passed with failed attempts. The failures may not be related to this commit but are still reported for visibility. See the documentation for more information.

🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/29930298706
📝 Reported issues:

@aduth aduth left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

Confirmed that this functions as expected, follows pattern from Autocomplete Group & GroupLabel, and that the rationale for doing so is logical. 👍

@mirka
mirka merged commit b4874cd into trunk Jul 22, 2026
63 checks passed
@mirka
mirka deleted the add-combobox-select-group-subcomponents branch July 22, 2026 18:44
@github-actions github-actions Bot added this to the Gutenberg 23.7 milestone Jul 22, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

[Package] UI /packages/ui [Type] Enhancement A suggestion for improvement.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants