From c07a8d34d5eee4c58a21c6b422ab5bc0089437c9 Mon Sep 17 00:00:00 2001 From: Jon Rohan Date: Wed, 27 Nov 2024 21:54:36 +0000 Subject: [PATCH 1/3] Remove the CSS modules feature flag --- .../react/src/CounterLabel/CounterLabel.tsx | 55 ++----------------- 1 file changed, 5 insertions(+), 50 deletions(-) diff --git a/packages/react/src/CounterLabel/CounterLabel.tsx b/packages/react/src/CounterLabel/CounterLabel.tsx index 707007cc9df..08105b8701d 100644 --- a/packages/react/src/CounterLabel/CounterLabel.tsx +++ b/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( ({scheme = 'secondary', sx = defaultSxProp, className, children, ...rest}, forwardedRef) => { - const enabled = useFeatureFlag('primer_react_css_modules_ga') const label =  ({children}) const counterProps = { ref: forwardedRef, @@ -29,67 +24,27 @@ const CounterLabel = forwardRef( ...rest, } - if (enabled) { - if (sx !== defaultSxProp) { - return ( - <> - - {children} - - {label} - - ) - } + if (sx !== defaultSxProp) { return ( <> - + {children} - + {label} ) } - return ( <> - + {children} - + {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 From fc9c5823dfdbf6cdf82979e1aea377a8c583b775 Mon Sep 17 00:00:00 2001 From: Jon Rohan Date: Wed, 27 Nov 2024 14:25:37 -0800 Subject: [PATCH 2/3] Create large-grasshoppers-work.md --- .changeset/large-grasshoppers-work.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/large-grasshoppers-work.md diff --git a/.changeset/large-grasshoppers-work.md b/.changeset/large-grasshoppers-work.md new file mode 100644 index 00000000000..38180fdb670 --- /dev/null +++ b/.changeset/large-grasshoppers-work.md @@ -0,0 +1,5 @@ +--- +"@primer/react": minor +--- + +Remove the CSS modules feature flag from Checkbox From a78b9754d18a830804e0cf9aa2f0356e6016e380 Mon Sep 17 00:00:00 2001 From: Jon Rohan Date: Wed, 27 Nov 2024 22:33:35 +0000 Subject: [PATCH 3/3] Update snapshot --- .../__snapshots__/CounterLabel.test.tsx.snap | 40 +++---------------- 1 file changed, 6 insertions(+), 34 deletions(-) diff --git a/packages/react/src/CounterLabel/__snapshots__/CounterLabel.test.tsx.snap b/packages/react/src/CounterLabel/__snapshots__/CounterLabel.test.tsx.snap index 1d08b1f9ece..77ff00aad26 100644 --- 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`] = ` -.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; -} -
 ( 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; -} -
 ( 1234