fix(SegmentedControl): set global focus styles (#5029)

* fix(SegmentedControl): set global focus styles * Create itchy-paws-bake.md
primer · Oct 9, 2024 · 0d444d7 · 0d444d7
1 parent 00ff2f8
commit 0d444d7
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 0 deletions.
diff --git a/.changeset/itchy-paws-bake.md b/.changeset/itchy-paws-bake.md
@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+fix(SegmentedControl): set global focus styles
diff --git a/packages/react/src/SegmentedControl/SegmentedControlButton.tsx b/packages/react/src/SegmentedControl/SegmentedControlButton.tsx
@@ -7,6 +7,7 @@ import type {SxProp} from '../sx'
 import sx, {merge} from '../sx'
 import {getSegmentedControlButtonStyles, getSegmentedControlListItemStyles} from './getSegmentedControlStyles'
 import {defaultSxProp} from '../utils/defaultSxProp'
+import getGlobalFocusStyles from '../internal/utils/getGlobalFocusStyles'
 
 export type SegmentedControlButtonProps = {
   /** The visible label rendered in the button */
@@ -21,6 +22,7 @@ export type SegmentedControlButtonProps = {
   ButtonHTMLAttributes<HTMLButtonElement | HTMLLIElement>
 
 const SegmentedControlButtonStyled = styled.button`
+  ${getGlobalFocusStyles()};
   ${sx};
 `
 

diff --git a/packages/react/src/SegmentedControl/SegmentedControlIconButton.tsx b/packages/react/src/SegmentedControl/SegmentedControlIconButton.tsx
@@ -7,6 +7,7 @@ import sx, {merge} from '../sx'
 import {getSegmentedControlButtonStyles, getSegmentedControlListItemStyles} from './getSegmentedControlStyles'
 import Box from '../Box'
 import {defaultSxProp} from '../utils/defaultSxProp'
+import getGlobalFocusStyles from '../internal/utils/getGlobalFocusStyles'
 
 export type SegmentedControlIconButtonProps = {
   'aria-label': string
@@ -20,6 +21,7 @@ export type SegmentedControlIconButtonProps = {
   ButtonHTMLAttributes<HTMLButtonElement | HTMLLIElement>
 
 const SegmentedControlIconButtonStyled = styled.button`
+  ${getGlobalFocusStyles()};
   ${sx};
 `