diff --git a/.changeset/itchy-paws-bake.md b/.changeset/itchy-paws-bake.md new file mode 100644 index 00000000000..532507c7a46 --- /dev/null +++ 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 index 58003d167f5..0474323ab43 100644 --- 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 const SegmentedControlButtonStyled = styled.button` + ${getGlobalFocusStyles()}; ${sx}; ` diff --git a/packages/react/src/SegmentedControl/SegmentedControlIconButton.tsx b/packages/react/src/SegmentedControl/SegmentedControlIconButton.tsx index 11970c0ab47..1986bf92a3f 100644 --- 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 const SegmentedControlIconButtonStyled = styled.button` + ${getGlobalFocusStyles()}; ${sx}; `