chore(CounterLabel): Remove the CSS modules feature flag from the CounterLabel component (#5337)

* Remove the CSS modules feature flag

* Create large-grasshoppers-work.md

* Update snapshot

Author: jonrohan

.changeset/large-grasshoppers-work.md

@@ -0,0 +1,5 @@
+---
+"@primer/react": minor
+---
+
+Remove the CSS modules feature flag from Checkbox

packages/react/src/CounterLabel/CounterLabel.tsx

@@ -1,13 +1,9 @@
 import {clsx} from 'clsx'
 import type {HTMLAttributes} from 'react'
 import React, {forwardRef} from 'react'
-import styled from 'styled-components'
-import {get} from '../constants'
-import sx from '../sx'
 import type {SxProp} from '../sx'
 import {VisuallyHidden} from '../VisuallyHidden'
 import {defaultSxProp} from '../utils/defaultSxProp'
-import {useFeatureFlag} from '../FeatureFlags'
 import Box from '../Box'
 import classes from './CounterLabel.module.css'
 
@@ -20,7 +16,6 @@ export type CounterLabelProps = React.PropsWithChildren<
 
 const CounterLabel = forwardRef<HTMLSpanElement, CounterLabelProps>(
   ({scheme = 'secondary', sx = defaultSxProp, className, children, ...rest}, forwardedRef) => {
-    const enabled = useFeatureFlag('primer_react_css_modules_ga')
     const label = <VisuallyHidden>&nbsp;({children})</VisuallyHidden>
     const counterProps = {
       ref: forwardedRef,
@@ -29,67 +24,27 @@ const CounterLabel = forwardRef<HTMLSpanElement, CounterLabelProps>(
       ...rest,
     }
 
-    if (enabled) {
-      if (sx !== defaultSxProp) {
-        return (
-          <>
-            <Box as="span" {...counterProps} className={clsx(className, classes.CounterLabel)} sx={sx}>
-              {children}
-            </Box>
-            {label}
-          </>
-        )
-      }
+    if (sx !== defaultSxProp) {
       return (
         <>
-          <span {...counterProps} className={clsx(className, classes.CounterLabel)}>
+          <Box as="span" {...counterProps} className={clsx(className, classes.CounterLabel)} sx={sx}>
             {children}
-          </span>
+          </Box>
           {label}
         </>
       )
     }
-
     return (
       <>
-        <StyledCounterLabel {...counterProps} className={className} sx={sx}>
+        <span {...counterProps} className={clsx(className, classes.CounterLabel)}>
           {children}
-        </StyledCounterLabel>
+        </span>
         {label}
       </>
     )
   },
 )
 
-const StyledCounterLabel = styled.span`
-  display: inline-block;
-  padding: var(--base-size-2, 0.125rem) var(--base-size-6, 0.375rem);
-  font-size: 12px;
-  font-weight: var(--base-text-weight-semibold, bold);
-  line-height: 1;
-  border-radius: 20px;
-  border: var(--borderWidth-thin, max(1px, 0.0625rem)) solid var(--counter-borderColor, var(--color-counter-border));
-
-  &:where([data-scheme='primary']) {
-    background-color: ${get('colors.neutral.emphasis')};
-    color: ${get('colors.fg.onEmphasis')};
-  }
-
-  &:where([data-scheme='secondary']) {
-    background-color: ${get('colors.neutral.muted')};
-    color: ${get('colors.fg.default')};
-  }
-
-  &:where(:empty) {
-    display: none;
-  }
-
-  /* Place the sx prop styles after previously inserted styles so that it will win out in specificity */
-  & {
-    ${sx}
-  }
-`
-
 CounterLabel.displayName = 'CounterLabel'
 
 export default CounterLabel

packages/react/src/CounterLabel/__snapshots__/CounterLabel.test.tsx.snap

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`CounterLabel renders with secondary scheme when no "scheme" prop is provided 1`] = `
-.c1:not(:focus):not(:active):not(:focus-within) {
+.c0:not(:focus):not(:active):not(:focus-within) {
   -webkit-clip-path: inset(50%);
   clip-path: inset(50%);
   height: 1px;
@@ -11,30 +11,16 @@ exports[`CounterLabel renders with secondary scheme when no "scheme" prop is pro
   width: 1px;
 }
 
-.c0 {
-  display: inline-block;
-  padding: var(--base-size-2,0.125rem) var(--base-size-6,0.375rem);
-  font-size: 12px;
-  font-weight: var(--base-text-weight-semibold,bold);
-  line-height: 1;
-  border-radius: 20px;
-  border: var(--borderWidth-thin,max(1px,0.0625rem)) solid var(--counter-borderColor,var(--color-counter-border));
-}
-
-.c0:where(:empty) {
-  display: none;
-}
-
 <div>
   <span
     aria-hidden="true"
-    class="c0"
+    class="CounterLabel"
     data-scheme="secondary"
   >
     1234
   </span>
   <span
-    class="c1"
+    class="c0"
   >
      (
     1234
@@ -44,7 +30,7 @@ exports[`CounterLabel renders with secondary scheme when no "scheme" prop is pro
 `;
 
 exports[`CounterLabel respects the primary "scheme" prop 1`] = `
-.c1:not(:focus):not(:active):not(:focus-within) {
+.c0:not(:focus):not(:active):not(:focus-within) {
   -webkit-clip-path: inset(50%);
   clip-path: inset(50%);
   height: 1px;
@@ -54,30 +40,16 @@ exports[`CounterLabel respects the primary "scheme" prop 1`] = `
   width: 1px;
 }
 
-.c0 {
-  display: inline-block;
-  padding: var(--base-size-2,0.125rem) var(--base-size-6,0.375rem);
-  font-size: 12px;
-  font-weight: var(--base-text-weight-semibold,bold);
-  line-height: 1;
-  border-radius: 20px;
-  border: var(--borderWidth-thin,max(1px,0.0625rem)) solid var(--counter-borderColor,var(--color-counter-border));
-}
-
-.c0:where(:empty) {
-  display: none;
-}
-
 <div>
   <span
     aria-hidden="true"
-    class="c0"
+    class="CounterLabel"
     data-scheme="primary"
   >
     1234
   </span>
   <span
-    class="c1"
+    class="c0"
   >
      (
     1234