Apply sx prop to Select's parent for custom styles

.changeset/five-crews-arrive.md

@@ -0,0 +1,7 @@
+---
+'@primer/react': patch
+---
+
+Select: Add support for `sx` prop
+
+<!-- Changed components: Select -->

src/Select.tsx

@@ -1,6 +1,7 @@
 import React from 'react'
 import styled from 'styled-components'
 import TextInputWrapper, {StyledWrapperProps} from './internal/components/TextInputWrapper'
+import {SxProp, merge, BetterSystemStyleObject} from './sx'
 
 export type SelectProps = Omit<
   Omit<React.ComponentPropsWithoutRef<'select'>, 'size'> & Omit<StyledWrapperProps, 'variant'>,
@@ -71,22 +72,30 @@ const ArrowIndicator = styled(ArrowIndicatorSVG)`
 `
 
 const Select = React.forwardRef<HTMLSelectElement, SelectProps>(
-  ({block, children, contrast, disabled, placeholder, size, required, validationStatus, ...rest}: SelectProps, ref) => (
+  (
+    {block, children, contrast, disabled, placeholder, size, required, validationStatus, sx = {}, ...rest}: SelectProps,
+    ref,
+  ) => (
     <TextInputWrapper
-      sx={{
-        overflow: 'hidden',
-        position: 'relative',
-        '@media screen and (forced-colors: active)': {
-          svg: {
-            fill: disabled ? 'GrayText' : 'FieldText',
-          },
-        },
-      }}
       block={block}
       contrast={contrast}
       disabled={disabled}
       size={size}
       validationStatus={validationStatus}
+      sx={
+        merge(
+          {
+            overflow: 'hidden',
+            position: 'relative',
+            '@media screen and (forced-colors: active)': {
+              svg: {
+                fill: disabled ? 'GrayText' : 'FieldText',
+              },
+            },
+          },
+          sx as SxProp,
+        ) as BetterSystemStyleObject
+      }
     >
       <StyledSelect
         ref={ref}

src/Select/Select.features.stories.tsx

@@ -155,3 +155,19 @@ export const Large = () => (
     </FormControl>
   </Box>
 )
+
+export const WithCustomStyling = () => (
+  <Box as="form">
+    <FormControl>
+      <FormControl.Label>Default label</FormControl.Label>
+      <Select sx={{borderRadius: '12px', border: '1px dashed #000000'}}>
+        <Select.Option value="one">Choice one</Select.Option>
+        <Select.Option value="two">Choice two</Select.Option>
+        <Select.Option value="three">Choice three</Select.Option>
+        <Select.Option value="four">Choice four</Select.Option>
+        <Select.Option value="five">Choice five</Select.Option>
+        <Select.Option value="six">Choice six</Select.Option>
+      </Select>
+    </FormControl>
+  </Box>
+)