diff --git a/.changeset/six-colts-admire.md b/.changeset/six-colts-admire.md new file mode 100644 index 00000000000..91cdb94123e --- /dev/null +++ b/.changeset/six-colts-admire.md @@ -0,0 +1,5 @@ +--- +"@primer/react": minor +--- + +Remove CSS modules feature flag from Label component diff --git a/packages/react/src/Label/Label.tsx b/packages/react/src/Label/Label.tsx index 7c2f6db5960..095a70f06bc 100644 --- a/packages/react/src/Label/Label.tsx +++ b/packages/react/src/Label/Label.tsx @@ -1,13 +1,8 @@ import {clsx} from 'clsx' -import {useFeatureFlag} from '../FeatureFlags' import Box from '../Box' import classes from './Label.module.css' import React from 'react' -import styled from 'styled-components' -import {variant} from 'styled-system' -import {get} from '../constants' import type {BetterSystemStyleObject, SxProp} from '../sx' -import sx from '../sx' import type {ForwardRefComponent as PolymorphicForwardRefComponent} from '../utils/polymorphic' export type LabelProps = { @@ -72,52 +67,21 @@ export const variants: Record = { }, } -const sizes: Record = { - small: { - height: 'var(--base-size-20, 20px)', - padding: '0 var(--base-size-6, 6px)', - }, - large: { - height: 'var(--base-size-24, 24px)', - padding: '0 var(--base-size-8, 8px)', - }, -} - -const StyledLabel = styled.span` - align-items: center; - background-color: transparent; - border-width: 1px; - border-radius: 999px; - border-style: solid; - display: inline-flex; - font-weight: ${get('fontWeights.semibold')}; - font-size: ${get('fontSizes.0')}; - line-height: 1; - white-space: nowrap; - ${variant({variants})}; - ${variant({prop: 'size', variants: sizes})}; - ${sx}; -` - const Label = React.forwardRef(function Label({as, size = 'small', variant = 'default', className, ...rest}, ref) { - const enabled = useFeatureFlag('primer_react_css_modules_ga') - if (enabled) { - const Component = as || 'span' - if (rest.sx) { - return ( - - ) - } - return + const Component = as || 'span' + if (rest.sx) { + return ( + + ) } - return + return }) as PolymorphicForwardRefComponent<'span', LabelProps> export default Label diff --git a/packages/react/src/__tests__/Label.test.tsx b/packages/react/src/__tests__/Label.test.tsx index 61467d8a924..082067fa782 100644 --- a/packages/react/src/__tests__/Label.test.tsx +++ b/packages/react/src/__tests__/Label.test.tsx @@ -3,7 +3,6 @@ import {render} from '@testing-library/react' import axe from 'axe-core' import type {LabelColorOptions} from '../Label' import Label, {variants} from '../Label' -import {renderStyles} from '../utils/testing' import {FeatureFlags} from '../FeatureFlags' describe('Label', () => { @@ -31,21 +30,15 @@ describe('Label', () => { expect(label.textContent).toEqual('Default') }) it('default size is rendered as "small"', () => { - const expectedStyles = { - height: 'var(--base-size-20,20px)', - padding: '0 var(--base-size-6,6px)', - } - const defaultStyles = renderStyles(