diff --git a/.changeset/grumpy-rings-sit.md b/.changeset/grumpy-rings-sit.md new file mode 100644 index 00000000000..7e287caea5f --- /dev/null +++ b/.changeset/grumpy-rings-sit.md @@ -0,0 +1,5 @@ +--- +'@primer/react': patch +--- + +Updates styles for the Select component so that the focus outline is even all the way around. diff --git a/src/Select.tsx b/src/Select.tsx index 8d7bed2a852..9e579f553d1 100644 --- a/src/Select.tsx +++ b/src/Select.tsx @@ -7,8 +7,11 @@ export type SelectProps = Omit< 'multiple' | 'hasLeadingVisual' | 'hasTrailingVisual' | 'as' > +const arrowRightOffset = '4px' + const StyledSelect = styled.select` appearance: none; + border-radius: inherit; border: 0; color: currentColor; font-size: inherit; @@ -20,8 +23,13 @@ const StyledSelect = styled.select` background-color should be 'transparent', but Firefox uses the background-color on so the background color doesn't hide the focus outline created with an inset box-shadow. */ background-color: inherit; + margin-top: 1px; + margin-left: 1px; + margin-bottom: 1px; /* 2. Prevents visible overlap of partially transparent background colors. @@ -50,7 +58,7 @@ const ArrowIndicatorSVG: React.FC<{className?: string}> = ({className}) => ( const ArrowIndicator = styled(ArrowIndicatorSVG)` pointer-events: none; position: absolute; - right: 4px; + right: ${arrowRightOffset}; top: 50%; transform: translateY(-50%); `