List fix for double borders (#1984)

jpmorganchase · Jul 20, 2023 · 48b52a7 · 48b52a7 · vercel · Jul 20, 2023
1 parent 087496e
commit 48b52a7
Showing 1 changed file with 5 additions and 4 deletions.
diff --git a/packages/lab/src/list-next/ListItemNext.css b/packages/lab/src/list-next/ListItemNext.css
@@ -14,12 +14,13 @@
   position: relative;
   align-items: center;
   white-space: nowrap;
+  margin-block: var(--salt-size-border);
+  border: var(--salt-focused-outlineWidth) var(--salt-focused-outlineStyle) transparent;
 }
 
 /* Class applied to list item on focus using keyboard navigation only */
 .saltListItemNext-focused {
-  outline: var(--salt-focused-outline);
-  outline-offset: calc(var(--salt-focused-outlineWidth) * -1);
+  border: var(--salt-focused-outline);
 }
 
 /* Active list item on hover using mouse */
@@ -31,7 +32,7 @@
 }
 
 .saltListItemNext[aria-selected="true"] {
-  border-block: var(--salt-size-border) var(--salt-container-borderStyle) var(--salt-selectable-borderColor-selected);
+  outline: var(--salt-size-border) var(--salt-container-borderStyle) var(--salt-selectable-borderColor-selected);
   --listNext-item-background: var(--salt-selectable-background-selected);
   --saltIcon-color: var(--salt-selectable-foreground-selected);
 }
@@ -47,6 +48,6 @@
 
 /* disabled list item when selected */
 .saltListItemNext[aria-disabled="true"][aria-selected="true"] {
-  border-block: var(--salt-size-border) var(--salt-container-borderStyle) var(--salt-selectable-borderColor-selectedDisabled);
+  outline: var(--salt-size-border) var(--salt-container-borderStyle) var(--salt-selectable-borderColor-selectedDisabled);
   --listNext-item-background: var(--salt-selectable-background-selectedDisabled);
 }