Skip to content

UI: Add Autocomplete.Row primitive - #80490

Merged
mirka merged 8 commits into
trunkfrom
add-autocomplete-row
Jul 23, 2026
Merged

UI: Add Autocomplete.Row primitive#80490
mirka merged 8 commits into
trunkfrom
add-autocomplete-row

Conversation

@mirka

@mirka mirka commented Jul 20, 2026

Copy link
Copy Markdown
Member

What?

Adds the missing Autocomplete.Row primitive to @wordpress/ui and documents it with an inline grid Storybook example.

Why?

Base UI's Autocomplete supports grid layouts via Autocomplete.Row, but the WordPress UI wrapper did not expose this part yet. Exporting it unlocks multi-cell rows in grid-mode autocomplete lists, such as emoji pickers.

How?

Add a thin Row wrapper around Base UI's Autocomplete.Row.

Testing Instructions

  1. Run Storybook for @wordpress/ui.
  2. Open Design System / Components / Form / Primitives / Autocomplete.
  3. See the Grid story.

Screenshots

Emoji picker example story

@mirka mirka self-assigned this Jul 20, 2026
@github-actions github-actions Bot added the [Package] UI /packages/ui label Jul 20, 2026
@mirka mirka added the [Type] Enhancement A suggestion for improvement. label Jul 20, 2026
@mirka mirka changed the title @wordpress/ui: Add Autocomplete.Row primitive UI: Add Autocomplete.Row primitive Jul 20, 2026
@github-actions

github-actions Bot commented Jul 20, 2026

Copy link
Copy Markdown

Size Change: 0 B

Total Size: 7.75 MB

compressed-size-action

@mirka
mirka marked this pull request as ready for review July 20, 2026 19:50
@mirka
mirka requested a review from a team as a code owner July 20, 2026 19:50
@github-actions

github-actions Bot commented Jul 20, 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

github-actions Bot commented Jul 20, 2026

Copy link
Copy Markdown

Flaky tests detected in 96b5d9e.
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/30016830061
📝 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.

LGTM 👍

import { forwardRef } from '@wordpress/element';
import type { AutocompleteRowProps } from './types';

export const Row = forwardRef< HTMLDivElement, AutocompleteRowProps >(

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.

The BaseUI documentation mentions "Enable grid on the root component to turn the listbox into a grid". Do we need that?

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

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

Good call 🙏

@mirka
mirka enabled auto-merge (squash) July 23, 2026 14:39
@mirka
mirka merged commit ca0f125 into trunk Jul 23, 2026
58 checks passed
@mirka
mirka deleted the add-autocomplete-row branch July 23, 2026 15:12
@github-actions github-actions Bot added this to the Gutenberg 23.7 milestone Jul 23, 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