toolbar: Add Toolbar and ToolbarGroup components - #3128
Open
bipinnatus2k wants to merge 11 commits into
Open
bipinnatus2k wants to merge 11 commits into
bipinnatus2k wants to merge 11 commits into
Conversation
An unstyled container that groups controls and owns the roving-focus contract of an ARIA toolbar: `Role::Toolbar` with orientation, and arrow keys that move focus among focusable descendants, wrapping at the ends. Traversal walks the rendered tab stops constrained to the container subtree, the same approach `Root` uses for focus traps, so it works with any focusable children without their cooperation. The container itself is not a tab stop. A non-wrapping mode would need to tell a wrapped step from an ordinary one, which GPUI's public tab-stop API cannot do, so wrapping is always on. Co-authored-by: GLM (ZCode) <noreply@z.ai>
Follows the status_bar precedent: `toolbar.background` falls back to the title bar background and `toolbar.border` to the title bar border, so existing themes pick up sane values without per-theme edits. Co-authored-by: GLM (ZCode) <noreply@z.ai>
A themed command bar with left/right pinned regions and a middle region whose alignment follows the pinned ends, matching StatusBar's region contract. Sizes via `Sizable` scale bar height, spacing, and text together (28/32/40/48 px). Keyboard roving and toolbar semantics come from `gpui_base::Toolbar`; the styled layer only adds tokens, regions, and sizing. Each instance takes an explicit id, which keeps its focus state stable across frames. Co-authored-by: GLM (ZCode) <noreply@z.ai>
Documents three sections: a document command bar layout, the four sizes (with hosted buttons matching each bar size), and the region alignment cases for the dynamic middle. Co-authored-by: GLM (ZCode) <noreply@z.ai>
Bilingual component page covering regions, sizes, keyboard roving focus, theming, and the API reference, plus entries in both component indexes. Co-authored-by: GLM (ZCode) <noreply@z.ai>
An unstyled container that groups a run of related toolbar items and carries an accessible name, so assistive technology reads them as one unit. The surrounding toolbar's roving arrow-key focus traverses group items like direct children, since containment follows the element tree. Unlike Base UI's Toolbar.Group, the group cannot disable its children: that API propagates through React context into Base UI's own button primitives, which has no equivalent for arbitrary GPUI children, and the a11y layer exposes no disabled state for a container node. Co-authored-by: GLM (ZCode) <noreply@z.ai>
Surface the base group through the styled toolbar module so applications reach it next to Toolbar. Co-authored-by: GLM (ZCode) <noreply@z.ai>
Group the history buttons under an accessible "History" label in the document toolbar example. Co-authored-by: GLM (ZCode) <noreply@z.ai>
Covers grouping with an accessible name, the spacing note, and the boundary that groups cannot disable their children in GPUI. Co-authored-by: GLM (ZCode) <noreply@z.ai>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Description
Adds a
Toolbarcomponent: a themed bar that hosts a row of actions, usually placed at the top of a window or pane. It pairs withTitleBarabove it andStatusBarbelow, and follows the same left/center/right region contract asStatusBar.gpui-baseowns the behavior. AToolbarprimitive with roving arrow-key focus across its items, and aToolbarGroupsemantic subgroup so a toolbar can separate clusters of actions and give a cluster a label.gpui-componentowns the presentation. A themedToolbarwithleft/rightregions andSizablesupport (xs,sm,md,lg), plus the newtoolbar.background/toolbar.bordertheme tokens. The tokens follow thestatus_barprecedent: they fall back to the title bar background and border, so existing themes pick up sane values without per-theme edits.website/component/.Public API
gpui-base(gpui_base::toolbar, re-exported asgpui_base::Toolbarandgpui_base::ToolbarGroup)Toolbar::new(id: impl Into<ElementId>) -> Self— create an empty toolbar.Toolbar::axis(axis: Axis) -> Self— lay the bar out horizontally (default) or vertically.Toolbar::disabled(disabled: bool) -> Self— cascade the disabled state to the items.Styled,ParentElement,InteractiveElement,StatefulInteractiveElement,RenderOnce.ToolbarGroup::new(id: impl Into<ElementId>) -> Self— create an empty semantic subgroup.ToolbarGroup::label(label: impl Into<SharedString>) -> Self— optional group label.Styled,ParentElement,InteractiveElement,StatefulInteractiveElement,RenderOnce.gpui-component(gpui_component::toolbar)Toolbar::new(id: impl Into<ElementId>) -> Self— create a themed toolbar atSize::Medium.Toolbar::left(child: impl IntoElement) -> Self— append an element to the leading region.Toolbar::right(child: impl IntoElement) -> Self— append an element to the trailing region.ParentElement,Styled,Sizable,RenderOnce.ThemeColor::toolbar(toolbar.background) andThemeColor::toolbar_border(toolbar.border), with light and dark defaults indefault-theme.json.Breaking Changes
None; the change is additive.
How to Test
cargo check --workspacecargo fmt --all -- --checkcargo run, then open the Toolbar story to try the regions, group separators and sizesAI Assistance
The component was originally implemented with GLM (ZCode) assistance (see the
Co-authored-bytrailers in the commits). This submission was rebased onto the currentmainand verified with an agent.