diff --git a/.changeset/violet-tables-eat.md b/.changeset/violet-tables-eat.md new file mode 100644 index 00000000000..ac644ed6b67 --- /dev/null +++ b/.changeset/violet-tables-eat.md @@ -0,0 +1,5 @@ +--- +"@primer/react": minor +--- + +Remove CSS modules feature flag from Select diff --git a/packages/react/src/Select/Select.tsx b/packages/react/src/Select/Select.tsx index 98faa357844..75d49c79be2 100644 --- a/packages/react/src/Select/Select.tsx +++ b/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, 'size'> & Omit, + Omit, 'size'> & Omit, '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 - 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 's background color white when setting 'background-color: transparent;' */ - @media screen and (forced-colors: active) { - &:disabled { - background-color: -moz-combobox; - } - } - `, -) - const ArrowIndicatorSVG: React.FC> = ({className}) => { return ( > ) } -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 - } - - return + return } const Select = React.forwardRef( - ({block, children, contrast, disabled, placeholder, size, required, validationStatus, ...rest}: SelectProps, ref) => { - const enabled = useFeatureFlag(CSS_MODULES_FEATURE_FLAG) - if (enabled) { - return ( - - - {placeholder && ( - - )} - {children} - - - - ) - } - + ( + {block, children, contrast, disabled, placeholder, size, required, validationStatus, sx, ...rest}: SelectProps, + ref, + ) => { return ( - {placeholder && ( @@ -164,8 +63,8 @@ const Select = React.forwardRef( )} {children} - - + + ) },