Skip to content

Commit d6e5e75

Browse files
committed
fix(ui): keep the tree's focus outline when a row is hovered
The row hover rule set an outline shorthand at higher specificity than both focus outline rules, so hovering the focused row replaced its ring with 1px dashed transparent. Native's generated list styles skip hover on selected and focused rows, :hover:not(.selected):not(.focused), and re-assert state backgrounds on :hover, so hover never repaints or un-outlines them. There is also no list.selectionOutline or list.hoverOutline theme color, only toolbar.hoverOutline; native feeds both list style slots from activeContrastBorder. Both tokens resolved to transparent in every theme, high contrast included.
1 parent 53d6612 commit d6e5e75

2 files changed

Lines changed: 9 additions & 4 deletions

File tree

packages/ui/src/components/Tree/Tree.css

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -57,7 +57,10 @@
5757
display: none;
5858
}
5959

60-
.ui-tree-item:not([aria-disabled="true"]):not([aria-selected="true"])
60+
/* Native skips hover on selected and focused rows, keeping their outlines. */
61+
.ui-tree-item:not([aria-disabled="true"]):not([aria-selected="true"]):not(
62+
.ui-tree-item--focused
63+
)
6164
> .ui-tree-item__row:hover {
6265
color: var(--ui-list-hover-foreground);
6366
background: var(--ui-list-hover-background);

packages/ui/src/tokens.css

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -179,15 +179,17 @@
179179
--vscode-list-focusOutline,
180180
var(--ui-focus-border)
181181
);
182-
--ui-list-selection-outline: var(--vscode-list-selectionOutline, transparent);
182+
/* No list.selectionOutline or list.hoverOutline color exists; native feeds
183+
both from activeContrastBorder. */
184+
--ui-list-selection-outline: var(--vscode-contrastActiveBorder, transparent);
183185
--ui-list-inactive-focus-outline: var(
184186
--vscode-list-inactiveFocusOutline,
185187
transparent
186188
);
187-
--ui-list-hover-outline: var(--vscode-list-hoverOutline, transparent);
189+
--ui-list-hover-outline: var(--vscode-contrastActiveBorder, transparent);
188190
--ui-list-focus-and-selection-outline: var(
189191
--vscode-list-focusAndSelectionOutline,
190-
var(--vscode-list-selectionOutline, var(--ui-list-focus-outline))
192+
var(--vscode-contrastActiveBorder, var(--ui-list-focus-outline))
191193
);
192194
/* Outside a webview, approximate the native guides (inactive is the
193195
active stroke at 40%) instead of disappearing. */

0 commit comments

Comments
 (0)