chore(Checkbox): Remove the CSS modules feature flag from Checkbox (#5338)

jonrohan · web-flow · commit 4c7056bd979b · 2024-12-05T00:17:30.000Z
* Remove CSS modules feature flag from Checkbox

* Create stupid-elephants-work.md
diff --git a/.changeset/stupid-elephants-work.md b/.changeset/stupid-elephants-work.md
@@ -0,0 +1,5 @@
+---
+"@primer/react": minor
+---
+
+Remove the CSS modules feature flag from Checkbox
diff --git a/packages/react/src/Checkbox/Checkbox.test.tsx b/packages/react/src/Checkbox/Checkbox.test.tsx
@@ -9,7 +9,7 @@ describe('Checkbox', () => {
   beforeEach(() => {
     jest.resetAllMocks()
   })
-  behavesAsComponent({Component: Checkbox})
+  behavesAsComponent({Component: Checkbox, options: {skipAs: true}})
 
   checkExports('Checkbox', {
     default: Checkbox,
diff --git a/packages/react/src/Checkbox/Checkbox.tsx b/packages/react/src/Checkbox/Checkbox.tsx
@@ -1,17 +1,12 @@
 import {clsx} from 'clsx'
-import styled from 'styled-components'
 import {useProvidedRefOrCreate} from '../hooks'
 import React, {useContext, useEffect, type ChangeEventHandler, type InputHTMLAttributes, type ReactElement} from 'react'
-import sx, {type SxProp} from '../sx'
+import {type SxProp} from '../sx'
 import useLayoutEffect from '../utils/useIsomorphicLayoutEffect'
 import type {FormValidationStatus} from '../utils/types/FormValidationStatus'
 import {CheckboxGroupContext} from '../CheckboxGroup/CheckboxGroupContext'
-import getGlobalFocusStyles from '../internal/utils/getGlobalFocusStyles'
-import {get} from '../constants'
-import {sharedCheckboxAndRadioStyles} from '../internal/utils/sharedCheckboxAndRadioStyles'
 import classes from './Checkbox.module.css'
 import sharedClasses from './shared.module.css'
-import {useFeatureFlag} from '../FeatureFlags'
 import Box from '../Box'
 
 export type CheckboxProps = {
@@ -43,106 +38,6 @@ export type CheckboxProps = {
 } & Exclude<InputHTMLAttributes<HTMLInputElement>, 'value'> &
   SxProp
 
-const StyledCheckbox = styled.input`
-  ${sharedCheckboxAndRadioStyles};
-  border-radius: ${get('radii.1')};
-  transition:
-    background-color,
-    border-color 80ms cubic-bezier(0.33, 1, 0.68, 1); /* checked -> unchecked - add 120ms delay to fully see animation-out */
-
-  &::before {
-    width: var(--base-size-16, 16px);
-    height: var(--base-size-16, 16px);
-    visibility: hidden;
-    content: '';
-    background-color: ${get('colors.fg.onEmphasis')};
-    transition: visibility 0s linear 230ms;
-    clip-path: inset(var(--base-size-16, 16px) 0 0 0);
-    mask-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iOSIgdmlld0JveD0iMCAwIDEyIDkiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMTEuNzgwMyAwLjIxOTYyNUMxMS45MjEgMC4zNjA0MjcgMTIgMC41NTEzMDUgMTIgMC43NTAzMTNDMTIgMC45NDkzMjEgMTEuOTIxIDEuMTQwMTkgMTEuNzgwMyAxLjI4MUw0LjUxODYgOC41NDA0MkM0LjM3Nzc1IDguNjgxIDQuMTg2ODIgOC43NiAzLjk4Nzc0IDguNzZDMy43ODg2NyA4Ljc2IDMuNTk3NzMgOC42ODEgMy40NTY4OSA4LjU0MDQyTDAuMjAxNjIyIDUuMjg2MkMwLjA2ODkyNzcgNS4xNDM4MyAtMC4wMDMzMDkwNSA0Ljk1NTU1IDAuMDAwMTE2NDkzIDQuNzYwOThDMC4wMDM1NTIwNSA0LjU2NjQzIDAuMDgyMzg5NCA0LjM4MDgxIDAuMjIwMDMyIDQuMjQzMjFDMC4zNTc2NjUgNC4xMDU2MiAwLjU0MzM1NSA0LjAyNjgxIDAuNzM3OTcgNC4wMjMzOEMwLjkzMjU4NCA0LjAxOTk0IDEuMTIwOTMgNC4wOTIxNyAxLjI2MzM0IDQuMjI0ODJMMy45ODc3NCA2Ljk0ODM1TDEwLjcxODYgMC4yMTk2MjVDMTAuODU5NSAwLjA3ODk5MjMgMTEuMDUwNCAwIDExLjI0OTUgMEMxMS40NDg1IDAgMTEuNjM5NSAwLjA3ODk5MjMgMTEuNzgwMyAwLjIxOTYyNVoiIGZpbGw9IndoaXRlIi8+Cjwvc3ZnPgo=');
-    mask-size: 75%;
-    mask-repeat: no-repeat;
-    mask-position: center;
-
-    animation: checkmarkOut 80ms cubic-bezier(0.65, 0, 0.35, 1) forwards;
-  }
-
-  &:checked,
-  &:indeterminate {
-    background: var(--control-checked-bgColor-rest, ${get('colors.accent.fg')});
-    border-color: var(
-      --control-checked-bgColor-rest,
-      ${get('colors.accent.fg')}
-    ); /* using bgColor here to avoid a border change in dark high contrast */
-
-    &::before {
-      animation: checkmarkIn 80ms cubic-bezier(0.65, 0, 0.35, 1) forwards 80ms;
-    }
-  }
-
-  &:disabled {
-    cursor: not-allowed;
-  }
-
-  &:checked {
-    transition:
-      background-color,
-      border-color 80ms cubic-bezier(0.32, 0, 0.67, 0) 0ms;
-
-    &::before {
-      visibility: visible;
-      transition: visibility 0s linear 0s;
-    }
-
-    &:disabled {
-      background-color: var(--control-checked-bgColor-disabled, ${get('colors.fg.muted')});
-      border-color: var(--control-checked-borderColor-disabled, ${get('colors.fg.muted')});
-      opacity: 1;
-
-      &::before {
-        background-color: var(--control-checked-fgColor-disabled, ${get('colors.fg.onEmphasis')});
-      }
-    }
-
-    /* Windows High Contrast mode */
-    @media (forced-colors: active) {
-      background-color: canvastext;
-      border-color: canvastext;
-    }
-  }
-
-  &:indeterminate {
-    background: var(--control-checked-bgColor-rest, ${get('colors.accent.fg')});
-    &::before {
-      mask-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iMiIgdmlld0JveD0iMCAwIDEwIDIiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMCAxQzAgMC40NDc3MTUgMC40NDc3MTUgMCAxIDBIOUM5LjU1MjI5IDAgMTAgMC40NDc3MTUgMTAgMUMxMCAxLjU1MjI4IDkuNTUyMjkgMiA5IDJIMUMwLjQ0NzcxNSAyIDAgMS41NTIyOCAwIDFaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K');
-      visibility: visible;
-    }
-  }
-
-  ${getGlobalFocusStyles()};
-
-  ${sx};
-
-  @keyframes checkmarkIn {
-    from {
-      clip-path: inset(var(--base-size-16, 16px) 0 0 0);
-    }
-
-    to {
-      clip-path: inset(0 0 0 0);
-    }
-  }
-
-  @keyframes checkmarkOut {
-    from {
-      clip-path: inset(0 0 0 0);
-    }
-
-    to {
-      clip-path: inset(var(--base-size-16, 16px) 0 0 0);
-    }
-  }
-`
-
 /**
  * An accessible, native checkbox component
  */
@@ -163,7 +58,6 @@ const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>(
     },
     ref,
   ): ReactElement => {
-    const enabled = useFeatureFlag('primer_react_css_modules_ga')
     const checkboxRef = useProvidedRefOrCreate(ref as React.RefObject<HTMLInputElement>)
     const checkboxGroupContext = useContext(CheckboxGroupContext)
     const handleOnChange: ChangeEventHandler<HTMLInputElement> = e => {
@@ -204,21 +98,17 @@ const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>(
       }
     })
 
-    if (enabled) {
-      if (sxProp) {
-        return (
-          <Box
-            as="input"
-            {...inputProps}
-            className={clsx(className, sharedClasses.Input, classes.Checkbox)}
-            sx={sxProp}
-          />
-        )
-      }
-      return <input {...inputProps} className={clsx(className, sharedClasses.Input, classes.Checkbox)} />
+    if (sxProp) {
+      return (
+        <Box
+          as="input"
+          {...inputProps}
+          className={clsx(className, sharedClasses.Input, classes.Checkbox)}
+          sx={sxProp}
+        />
+      )
     }
-
-    return <StyledCheckbox {...inputProps} className={className} sx={sxProp} />
+    return <input {...inputProps} className={clsx(className, sharedClasses.Input, classes.Checkbox)} />
   },
 )
 

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +---
 +"@primer/react": minor
 +---
++
 +Remove the CSS modules feature flag from Checkbox