button: Show keyboard focus on borderless variants when focus_ring is off - #3299
Merged
Merged
Conversation
…is off With `Theme::focus_ring` off, `focus_ring_style` only tinted the border, so Ghost / Text / Link and filled buttons without `.outline()` showed no focus at all. Elements without a border now get a 1px ring inside their edge instead: no layout change, and nothing an ancestor can clip. Closes #3298 Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
madcodelife
added a commit
that referenced
this pull request
Sep 28, 2026
Follow-up to #3299 (#3298). When `Theme::focus_ring` is off, #3299 draws a 1px `ring` line on a borderless button's edge. That has two visual problems: - **Text / Link**: these variants have no padding, so the line sits on the label and its underline. - **Filled variants** (Primary, Secondary, Danger, …): a `ring`-coloured line on the edge barely shows against dark fills. In the default light theme it is neutral-400 on neutral-900. ## Change Each borderless button now picks where its focus line goes, through a crate-private `FocusLine` passed to `styled::focus_style`: | Variant | Line | Colour | | --- | --- | --- | | Ghost | on the edge (unchanged) | `ring` | | Text, Link | 2px (0.125rem) **outside** the edge, radius = element radius + 2px | `ring` | | Primary / Secondary / Danger / Info / Success / Warning / Custom | 2px **inside** the fill, radius = max(element radius − 2px, 0) | the variant's own foreground at 60% | | Default, any `.outline()` | tinted border (unchanged) | `ring` | - **Filled variants use their own foreground.** The theme already keeps a button's foreground legible against its fill, in every variant and in both modes. The `ring` token is tuned for the page background, not for a primary fill. - **Why not a 2px `ring` line?** It is still low-contrast on fills. - **Why not an outside offset ring (background-coloured gap plus a ring line)?** It is exactly what `focus_ring = false` exists to avoid: containers clip it. - **Text/Link outside is safe in practice.** The outset is only 3px including antialiasing. Callers place these buttons with padding around them; the ai-chat HITL card's "other option" text button renders unclipped. A clipping ancestor flush with such a button would cut the line. - **Layout is unchanged in every case.** The line is an absolutely positioned child and no border width is added. - **Nothing else changes.** `focus_ring = true`, bordered variants, and other callers of `focus_ring_style` behave as before. ## Tests `crates/kit/tests/rendering.rs`. These run on the main thread (`harness = false`, Metal), with Ghost / Text / Link / Primary buttons and `focus_ring = false`. `focus_lines_stay_off_content_and_contrast_with_fills` runs in **light and dark**. Focus moves with Tab through Root. For each button: - **Every button:** no pixel changes outside the button (outside the button plus 3px for Text/Link). - **Ghost:** `ring`-coloured pixels on the top edge. - **Text / Link:** no pixel changes inside the button's bounds, which is where the label is (the four corner squares crossed by the line's arc are excluded). There are `ring`-coloured pixels 2px above the edge. - **Primary:** the line row 2px inside differs from the fill by ≥ 96/255 in some channel. `clicking_a_button_draws_no_focus_line`: clicking a hovered button leaves focus empty and the capture identical to the hovered one. These tests fail on `origin/main` before #3299 at `ghost`, and on #3299 alone at `text` (288 device pixels over the label). ``` cargo test -p gpui-kit --features test-support,component,assets --test rendering cargo test -p gpui-component cargo clippy -p gpui-component -p gpui-kit --features gpui-kit/test-support,gpui-kit/component,gpui-kit/assets --all-targets -- -D warnings ``` Co-authored-by: Claude Opus 5.5 <noreply@anthropic.com>
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
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.
Closes #3298
Problem
With
Theme::focus_ring = false,focus_ring_styleonly tinted the element's border withtheme.ring.Buttononly has a border width on theDefaultvariant and with.outline(), so Ghost / Text / Link and the filled variants (Primary,Secondary,Danger, …) showed no keyboard focus at all, even though they are Tab stops.Fix
focus_ring_style, when the outer ring is off:inset 0draws a 1pxring-coloured border, with the element's own corner radii.Buttonstill callsprevent_defaulton mouse down, so a click never focuses it and never shows the ring.1px matches the width of the tinted border the bordered variants already get, so every variant reads the same. Bordered elements keep the tinted border rather than switching to the inner ring: the tinted border already sits at the edge, and an extra inner line would double it.
focus_ring = trueis unchanged (outer 3px ring).The helper change also covers the other borderless callers of
focus_ring_style(questionnaire options, carousel, time field). They now show the inner ring too whenfocus_ringis off.Refactor: the border-width / corner-radius reads in
focus_ringwere moved into small private helpers so the inner ring reuses them. No behaviour change there.Tests
Two new Metal pixel tests in
crates/kit/tests/rendering.rs(main thread,harness = false). They render Ghost (icon), Text, Link and Primary buttons withfocus_ring = false:borderless_buttons_show_keyboard_focus_inside_when_focus_ring_is_off: moves focus with Tab through Root (focus_nextfor the first stop, since Root's binding needs something inside it focused). For each button it asserts: no ring pixels while unfocused, ring pixels along the top edge inside its bounds when focused, and zero changed pixels outside its bounds.clicking_a_button_draws_no_focus_ring: clicking each button leaves focus empty and draws no ring pixels.Without the fix, the first test fails on
ghost("a keyboard-focusedghostbutton must draw a ring inside its bounds").