chore(Label): Remove CSS modules feature flag from Label component (#…

…5060) * Remove css modules feature flag from Label * Remove feature flag from test * Remove export * Create six-colts-admire.md * Add variants export and update Label types * Fix tests for updated attributes * Remove unused import
primer · Oct 24, 2024 · 33396ea · 33396ea
1 parent 07b75e7
commit 33396ea
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 61 deletions.
diff --git a/.changeset/six-colts-admire.md 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
@@ -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<LabelColorOptions, BetterSystemStyleObject> = {
   },
 }
 
-const sizes: Record<LabelSizeKeys, BetterSystemStyleObject> = {
-  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<LabelProps>`
-  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 (
-        <Box
-          as={Component}
-          className={clsx(className, classes.Label)}
-          data-size={size}
-          data-variant={variant}
-          ref={ref}
-          {...rest}
-        />
-      )
-    }
-    return <Component className={clsx(className, classes.Label)} data-size={size} data-variant={variant} {...rest} />
+  const Component = as || 'span'
+  if (rest.sx) {
+    return (
+      <Box
+        as={Component}
+        className={clsx(className, classes.Label)}
+        data-size={size}
+        data-variant={variant}
+        ref={ref}
+        {...rest}
+      />
+    )
   }
-  return <StyledLabel as={as} className={className} size={size} variant={variant} ref={ref} {...rest} />
+  return <Component className={clsx(className, classes.Label)} data-size={size} data-variant={variant} {...rest} />
 }) 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
@@ -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(<Label />)
+    const {getByText} = render(<Label>Default</Label>)
 
-    expect(defaultStyles).toEqual(expect.objectContaining(expectedStyles))
+    // Expect the label to have the default size
+    expect(getByText('Default')).toHaveAttribute('data-size', 'small')
   })
   it('default variant is rendered as "default"', () => {
-    const expectedStyles = {
-      ['border-color']: 'var(--borderColor-default,var(--color-border-default,#d0d7de))',
-    }
-    const defaultStyles = renderStyles(<Label />)
+    const {getByText} = render(<Label>Default</Label>)
 
-    expect(defaultStyles).toEqual(expect.objectContaining(expectedStyles))
+    expect(getByText('Default')).toHaveAttribute('data-variant', 'default')
   })
   it('should have no axe violations', async () => {
     for (const variant in variants) {