chore(Select): Remove the CSS modules feature flag from the Select component (#6015)

Author: jonrohan

.changeset/loose-planes-mix.md

@@ -0,0 +1,5 @@
+---
+'@primer/react': minor
+---
+
+Remove the CSS modules feature flag from the Select component

packages/react/src/Select/Select.tsx

@@ -1,69 +1,18 @@
 import React from 'react'
-import styled from 'styled-components'
 import {clsx} from 'clsx'
 import type {StyledWrapperProps} from '../internal/components/TextInputWrapper'
 import TextInputWrapper from '../internal/components/TextInputWrapper'
-import {toggleStyledComponent} from '../internal/utils/toggleStyledComponent'
-import {useFeatureFlag} from '../FeatureFlags'
 import type {ForwardRefComponent as PolymorphicForwardRefComponent} from '../utils/polymorphic'
 
 import classes from './Select.module.css'
 
 export type SelectProps = Omit<
-  Omit<React.ComponentPropsWithoutRef<'select'>, 'size'> & Omit<StyledWrapperProps, 'variant'>,
+  Omit<React.ComponentProps<'select'>, 'size'> & Omit<StyledWrapperProps, 'variant'>,
   'multiple' | 'hasLeadingVisual' | 'hasTrailingVisual' | 'as'
 > & {
   placeholder?: string
 }
 
-const CSS_MODULES_FEATURE_FLAG = 'primer_react_css_modules_ga'
-
-const arrowRightOffset = '4px'
-
-const StyledSelect = toggleStyledComponent(
-  CSS_MODULES_FEATURE_FLAG,
-  'select',
-  styled.select`
-    appearance: none;
-    border-radius: inherit;
-    border: 0;
-    color: currentColor;
-    font-size: inherit;
-    outline: none;
-    width: 100%;
-
-    /* Firefox hacks: */
-    /* 1. Makes Firefox's native dropdown menu's background match the theme.
-
-        background-color should be 'transparent', but Firefox uses the background-color on
-        <select> to determine the background color used for the dropdown menu.
-
-     2. Adds 1px margins to the <select> 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.
-
-     'colors.input.disabledBg' happens to be partially transparent in light mode, so we use a
-     transparent background-color on a disabled <select>. */
-    &:disabled {
-      background-color: transparent;
-    }
-
-    /* 3. Maintain dark bg color in Firefox on Windows high-contrast mode
-
-     Firefox makes the <select>'s background color white when setting 'background-color: transparent;' */
-    @media screen and (forced-colors: active) {
-      &:disabled {
-        background-color: -moz-combobox;
-      }
-    }
-  `,
-)
-
 const ArrowIndicatorSVG: React.FC<React.PropsWithChildren<{className?: string}>> = ({className}) => {
   return (
     <svg
@@ -79,83 +28,33 @@ const ArrowIndicatorSVG: React.FC<React.PropsWithChildren<{className?: string}>>
   )
 }
 
-const StyledArrowIndicatorSVG = styled(ArrowIndicatorSVG)`
-  pointer-events: none;
-  position: absolute;
-  right: ${arrowRightOffset};
-  top: 50%;
-  transform: translateY(-50%);
-`
-
 const ArrowIndicator: React.FC<{className?: string}> = ({className}) => {
-  const enabled = useFeatureFlag(CSS_MODULES_FEATURE_FLAG)
-  if (enabled) {
-    return <ArrowIndicatorSVG className={clsx(classes.ArrowIndicator, className)} />
-  }
-
-  return <StyledArrowIndicatorSVG />
+  return <ArrowIndicatorSVG className={clsx(classes.ArrowIndicator, className)} />
 }
 
 const Select = React.forwardRef<HTMLSelectElement, SelectProps>(
-  ({block, children, contrast, disabled, placeholder, size, required, validationStatus, ...rest}: SelectProps, ref) => {
-    const enabled = useFeatureFlag(CSS_MODULES_FEATURE_FLAG)
-    if (enabled) {
-      return (
-        <TextInputWrapper
-          block={block}
-          contrast={contrast}
-          disabled={disabled}
-          size={size}
-          validationStatus={validationStatus}
-          className={classes.TextInputWrapper}
-          sx={rest.sx}
-        >
-          <StyledSelect
-            ref={ref}
-            required={required}
-            disabled={disabled}
-            aria-invalid={validationStatus === 'error' ? 'true' : 'false'}
-            data-hasplaceholder={Boolean(placeholder)}
-            defaultValue={placeholder ?? undefined}
-            className={clsx(classes.Select, disabled && classes.Disabled)}
-            {...rest}
-          >
-            {placeholder && (
-              <option value="" disabled={required} hidden={required}>
-                {placeholder}
-              </option>
-            )}
-            {children}
-          </StyledSelect>
-          <ArrowIndicator className={classes.ArrowIndicator} />
-        </TextInputWrapper>
-      )
-    }
-
+  (
+    {block, children, contrast, disabled, placeholder, size, required, validationStatus, sx, ...rest}: SelectProps,
+    ref,
+  ) => {
     return (
       <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}
+        className={classes.TextInputWrapper}
+        sx={sx}
       >
-        <StyledSelect
+        <select
           ref={ref}
           required={required}
           disabled={disabled}
           aria-invalid={validationStatus === 'error' ? 'true' : 'false'}
           data-hasplaceholder={Boolean(placeholder)}
           defaultValue={placeholder ?? undefined}
+          className={clsx(classes.Select, disabled && classes.Disabled)}
           {...rest}
         >
           {placeholder && (
@@ -164,8 +63,8 @@ const Select = React.forwardRef<HTMLSelectElement, SelectProps>(
             </option>
           )}
           {children}
-        </StyledSelect>
-        <ArrowIndicator />
+        </select>
+        <ArrowIndicator className={classes.ArrowIndicator} />
       </TextInputWrapper>
     )
   },

packages/react/src/__tests__/Select.test.tsx

@@ -1,7 +1,6 @@
 import React from 'react'
 import {Select} from '..'
 import {render} from '@testing-library/react'
-import {FeatureFlags} from '../FeatureFlags'
 import userEvent from '@testing-library/user-event'
 
 describe('Select', () => {
@@ -19,19 +18,7 @@ describe('Select', () => {
         </Select>
       </>
     )
-    const FeatureFlagElement = () => {
-      return (
-        <FeatureFlags
-          flags={{
-            primer_react_css_modules_ga: true,
-          }}
-        >
-          <Element />
-        </FeatureFlags>
-      )
-    }
     expect(render(<Element />).getAllByTestId('select-default')[0]).toHaveClass('test-class-name')
-    expect(render(<FeatureFlagElement />).getAllByTestId('select-default')[0]).toHaveClass('test-class-name')
   })
 
   it('renders a select input', () => {