input_group: Add InputGroup

[suxiaoshao]

Closes #2863

Description

Add composable input groups for multiple inline addons, block toolbars, and textareas that share one frame. Existing Input::prefix and Input::suffix remain available for simple standalone adornments.

Composition and reuse boundary

The caller keeps the retained InputState / TextareaState; the group owns no editing state. The control placed in the frame is the ordinary styled Input (or Textarea, which renders one), drawn without its own border, background and focus ring — the group draws those around the whole frame. So InputGroupInput and InputGroupTextarea are Input and Textarea under the group's names, and every builder those controls have (aria_label, content_type, on_paste, cleanable, mask_toggle, Styled) works inside a group without being mirrored. There are no gpui-base changes, and Input itself is untouched beyond two crate-private accessors.

The public parts follow shadcn/ui and live in gpui_component::input next to the controls they frame: InputGroup, InputGroupInput, InputGroupTextarea, InputGroupAddon, InputGroupButton, and InputGroupText. Rust uses a typed .input(...) slot for one control and ordered .addon(...) / .child(...) composition:

InputGroup::new("message")
    .input(InputGroupTextarea::new(&self.message).aria_label("Message"))
    .addon(InputGroupAddon::new("message-header")
        .align(InputGroupAddonAlignment::BlockStart)
        .child(InputGroupText::new().child("New message")))
    .addon(InputGroupAddon::new("message-actions")
        .align(InputGroupAddonAlignment::BlockEnd)
        .child(InputGroupButton::new("send").label("Send")
            .on_click(cx.listener(|this, _, window, cx| this.send(window, cx)))))

InputGroupButton wraps a Button with compact presentation and sizes through Sizable: xsmall (default) and small are the compact sizes, and a button with only an icon is square at either. Focus and invalid appearance come from the theme — the focus ring keeps the theme's ring color and the invalid ring the danger color — and the border and background colors transition with motion_tokens(). Block addons share the control's horizontal inset so a leading icon or a trailing button lines up with the text; an inline addon keeps a compact button the same clearance from the frame that it has from the top and bottom. The group coordinates disabled/read-only behavior and addon click-to-focus while preserving native button actions.

The same six parts are registered in the JavaScript shell with retained state bindings. Native and JavaScript Stories cover the compositions and working actions; English and Chinese documentation explain ownership, usage, and styling.

Breaking Changes

None; existing input APIs are unchanged. Textarea gains accessibility_id. The following is an optional change when a simple prefix grows into a shared-frame composition:

- Input::new(&query).prefix(Icon::new(IconName::Search))
+ InputGroup::new("search")
+     .input(InputGroupInput::new(&query))
+     .addon(InputGroupAddon::new("search-icon")
+         .child(Icon::new(IconName::Search)))

How to Test

Validated on macOS on top of the latest main:

cargo fmt --check
cargo clippy --workspace --all-targets -- --deny warnings
cargo test -p gpui-component --lib --features test-support
cargo test -p gpui-component-shell
npm --prefix crates/component-shell/tests/types test
cargo run -- "Input Group"

The input_group tests cover the builder, appearance precedence, focus routing, embedded button actions, disabled/read-only behavior, textarea growth and scrolling between block addons, popup composition, the paste hook, and the long-press edit menu — the last two exercising capabilities the group inherits from Input rather than implements. The shell host tests cover state callbacks, addon actions and the rejected TypeScript contracts.

In the native Story, check the phone and search-scope triggers (+1 ⌄, Documentation ⌄) sit clear of the frame, the script.js and comment toolbars line up with the editor text, and a focused group shows the theme's soft ring.

The original implementation was developed with Codex assistance; the rework onto Input and Sizable was written with Claude Code and reviewed by hand.

[huacnlee]

Code review

Found 1 issue:

1. The InputControl extraction has no place for two features main added to input.rs after this branch forked, and input.rs is the file that conflicts: Input::on_paste / paste_handler / the Paste capture_action from input: Add on_paste to handle images from clipboard instead of silently dropping them #3087 (3f4fc75), and render_touch_selection() appended to overlays.floating from mobile: Add touch selection handles and an edit menu to Input and TextView #3073 (9031c5e). On main, Textarea::render and Editor::render both delegate to Input::from_state(...).on_paste(...), so resolving the conflict by keeping this PR's structure either fails to compile textarea.rs / editor.rs or, if those calls are dropped, silently loses image paste and touch selection for all three controls. Both need a home in the new render path — prepare ends at render_overlays with nothing appended, and Input has no paste_handler.

gpui-kit/crates/component/src/input/control.rs

Lines 146 to 151 in 4877110

	menu.show(position, window, cx);
	}),
	cx,
	);
	state.render_overlays(window, cx)
	}

🤖 Generated with Claude Code

_{- If this code review was useful, please react with 👍. Otherwise, react with 👎.}

[suxiaoshao]

@huacnlee Addressed in 3791c0d after merging main in ca1b3ce. Both features landed on main after this branch diverged, so this was an integration change needed when resolving the merge conflict.

Paste handling and touch-selection overlays now use the shared InputControl, and both InputGroup input parts expose on_paste. Existing Input, Textarea, and Editor behavior is preserved. All 51 focused tests, Clippy, formatting, and spelling checks passed locally.

[huacnlee]

Thank you.