Revert "chore(CounterLabel): Remove the CSS modules feature flag from…

… the CounterLabel component (#5337)" This reverts commit 7d9bb0c.
primer · Dec 5, 2024 · 4026a6d · 4026a6d
1 parent 976c84c
commit 4026a6d
Show file tree

Hide file tree

Showing 3 changed files with 84 additions and 16 deletions.
diff --git a/.changeset/large-grasshoppers-work.md b/.changeset/large-grasshoppers-work.md
diff --git a/packages/react/src/CounterLabel/CounterLabel.tsx b/packages/react/src/CounterLabel/CounterLabel.tsx
@@ -1,9 +1,13 @@
 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'
 
@@ -16,6 +20,7 @@ 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,
@@ -24,27 +29,67 @@ const CounterLabel = forwardRef<HTMLSpanElement, CounterLabelProps>(
       ...rest,
     }
 
-    if (sx !== defaultSxProp) {
+    if (enabled) {
+      if (sx !== defaultSxProp) {
+        return (
+          <>
+            <Box as="span" {...counterProps} className={clsx(className, classes.CounterLabel)} sx={sx}>
+              {children}
+            </Box>
+            {label}
+          </>
+        )
+      }
       return (
         <>
-          <Box as="span" {...counterProps} className={clsx(className, classes.CounterLabel)} sx={sx}>
+          <span {...counterProps} className={clsx(className, classes.CounterLabel)}>
             {children}
-          </Box>
+          </span>
           {label}
         </>
       )
     }
+
     return (
       <>
-        <span {...counterProps} className={clsx(className, classes.CounterLabel)}>
+        <StyledCounterLabel {...counterProps} className={className} sx={sx}>
           {children}
-        </span>
+        </StyledCounterLabel>
         {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
diff --git a/packages/react/src/CounterLabel/__snapshots__/CounterLabel.test.tsx.snap b/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`] = `
-.c0:not(:focus):not(:active):not(:focus-within) {
+.c1:not(:focus):not(:active):not(:focus-within) {
   -webkit-clip-path: inset(50%);
   clip-path: inset(50%);
   height: 1px;
@@ -11,16 +11,30 @@ 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="CounterLabel"
+    class="c0"
     data-scheme="secondary"
   >
     1234
   </span>
   <span
-    class="c0"
+    class="c1"
   >
      (
     1234
@@ -30,7 +44,7 @@ exports[`CounterLabel renders with secondary scheme when no "scheme" prop is pro
 `;
 
 exports[`CounterLabel respects the primary "scheme" prop 1`] = `
-.c0:not(:focus):not(:active):not(:focus-within) {
+.c1:not(:focus):not(:active):not(:focus-within) {
   -webkit-clip-path: inset(50%);
   clip-path: inset(50%);
   height: 1px;
@@ -40,16 +54,30 @@ 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="CounterLabel"
+    class="c0"
     data-scheme="primary"
   >
     1234
   </span>
   <span
-    class="c0"
+    class="c1"
   >
      (
     1234