fix(ui-side-nav-bar): show focus ring on selected item

ToMESSKa · ToMESSKa · commit 0dad569e2d8e · 2026-07-24T02:07:45.000-07:00
INSTUI-5078
diff --git a/packages/ui-side-nav-bar/src/SideNavBar/v2/SideNavBarItem/styles.ts b/packages/ui-side-nav-bar/src/SideNavBar/v2/SideNavBarItem/styles.ts
@@ -70,7 +70,7 @@ const generateStyle = (
             },
             '&:focus': {
               backgroundColor: componentTheme.selectedBackgroundColor,
-              boxShadow: `${componentTheme.selectedOuterFocusOutlineColor}, ${componentTheme.selectedInnerFocusOutlineColor}`,
+              boxShadow: `inset 0 0 0 0.125rem ${componentTheme.selectedOuterFocusOutlineColor}, inset 0 0 0 0.25rem ${componentTheme.selectedInnerFocusOutlineColor}`,
               outline: 'none'
             }
           }

Original file line number	Diff line number	Diff line change
`@@ -70,7 +70,7 @@ const generateStyle = (`
`70`	`70`	`},`
`71`	`71`	`'&:focus': {`
`72`	`72`	`backgroundColor: componentTheme.selectedBackgroundColor,`
`73`		- boxShadow: `${componentTheme.selectedOuterFocusOutlineColor}, ${componentTheme.selectedInnerFocusOutlineColor}`,
	`73`	+ boxShadow: `inset 0 0 0 0.125rem ${componentTheme.selectedOuterFocusOutlineColor}, inset 0 0 0 0.25rem ${componentTheme.selectedInnerFocusOutlineColor}`,
`74`	`74`	`outline: 'none'`
`75`	`75`	`}`
`76`	`76`	`}`