refactor(Checkbox): update Checkbox to use CSS Modules behind flag (#…

…4962)

* docs(storybook): enable fast refresh with react plugin

* refactor(Checkbox): update Checkbox to use CSS Modules behind flag

* test(e2e): update Checkbox test with feature flags

* chore: add changeset

* chore: fix eslint errors

* test(vrt): update snapshots

* chore: fix stylelint errors

* chore: update stylelint to error on warnings

* chore: remove unused disables

---------

Co-authored-by: Josh Black <joshblack@users.noreply.github.com>

.changeset/light-chefs-bow.md

@@ -0,0 +1,5 @@
+---
+'@primer/react': minor
+---
+
+Update Checkbox component to use CSS Modules behind feature flag

package.json

@@ -20,7 +20,7 @@
     "build:docs:preview": "NODE_OPTIONS=--openssl-legacy-provider script/build-docs preview",
     "build:components.json": "npm run build:components.json -w @primer/react",
     "lint": "eslint '**/*.{js,ts,tsx,md,mdx}' --max-warnings=0",
-    "lint:css": "stylelint '**/*.css'",
+    "lint:css": "stylelint '**/*.css' --max-warnings=0",
     "lint:css:fix": "stylelint --fix '**/*.css'",
     "lint:fix": "npm run lint -- --fix",
     "lint:md": "markdownlint-cli2 \"**/*.{md,mdx}\" \"!.github\" \"!.changeset\" \"!**/node_modules/**\" \"!**/CHANGELOG.md\"",
@@ -99,5 +99,6 @@
   ],
   "lint-staged": {
     "**/*.{js,ts,tsx,md,mdx}": "npm run lint"
-  }
+  },
+  "packageManager": "pnpm@9.10.0+sha512.73a29afa36a0d092ece5271de5177ecbf8318d454ecd701343131b8ebc0c1a91c487da46ab77c8e596d6acf1461e3594ced4becedf8921b074fbd8653ed7051c"
 }

packages/react/src/Avatar/Avatar.module.css

@@ -1,8 +1,8 @@
+/* stylelint-disable csstools/value-no-unknown-custom-properties */
+
 :where(.Avatar) {
   display: inline-block;
-  /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */
   width: var(--avatarSize-regular);
-  /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */
   height: var(--avatarSize-regular);
   overflow: hidden; /* Ensure page layout in Firefox should images fail to load */
   /* stylelint-disable-next-line primer/typography */
@@ -18,23 +18,17 @@
 
   &:where([data-responsive]) {
     @media screen and (--viewportRange-narrow) {
-      /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */
       width: var(--avatarSize-narrow);
-      /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */
       height: var(--avatarSize-narrow);
     }
 
     @media screen and (--viewportRange-regular) {
-      /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */
       width: var(--avatarSize-regular);
-      /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */
       height: var(--avatarSize-regular);
     }
 
     @media screen and (--viewportRange-wide) {
-      /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */
       width: var(--avatarSize-wide);
-      /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */
       height: var(--avatarSize-wide);
     }
   }

packages/react/src/Checkbox/Checkbox.module.css

@@ -0,0 +1,103 @@
+.Checkbox {
+  border-radius: var(--borderRadius-small);
+
+  /* checked -> unchecked - add 120ms delay to fully see animation-out */
+  transition:
+    background-color,
+    border-color 80ms cubic-bezier(0.33, 1, 0.68, 1);
+
+  &::before {
+    width: var(--base-size-16);
+    height: var(--base-size-16);
+    visibility: hidden;
+    content: '';
+    background-color: var(--fgColor-onEmphasis);
+    transition: visibility 0s linear 230ms;
+    clip-path: inset(var(--base-size-16) 0 0 0);
+    /* stylelint-disable-next-line plugin/no-unsupported-browser-features, plugin/no-unsupported-browser-features */
+    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);
+
+    /* using bgColor here to avoid a border change in dark high contrast */
+    border-color: var(--control-checked-bgColor-rest);
+
+    &::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);
+      border-color: var(--control-checked-borderColor-disabled);
+      opacity: 1;
+
+      &::before {
+        background-color: var(--control-checked-fgColor-disabled);
+      }
+    }
+
+    /* Windows High Contrast mode */
+    @media (forced-colors: active) {
+      /* stylelint-disable-next-line primer/colors */
+      background-color: canvastext;
+      border-color: canvastext;
+    }
+  }
+
+  &:indeterminate {
+    background: var(--control-checked-bgColor-rest);
+
+    &::before {
+      /* stylelint-disable-next-line plugin/no-unsupported-browser-features,  plugin/no-unsupported-browser-features */
+      mask-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iMiIgdmlld0JveD0iMCAwIDEwIDIiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMCAxQzAgMC40NDc3MTUgMC40NDc3MTUgMCAxIDBIOUM5LjU1MjI5IDAgMTAgMC40NDc3MTUgMTAgMUMxMCAxLjU1MjI4IDkuNTUyMjkgMiA5IDJIMUMwLjQ0NzcxNSAyIDAgMS41NTIyOCAwIDFaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K');
+      visibility: visible;
+    }
+  }
+
+  /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
+  &:focus-visible:not(:disabled) {
+    @mixin focusOutline 2px;
+  }
+}
+
+@keyframes checkmarkIn {
+  from {
+    clip-path: inset(var(--base-size-16) 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) 0 0 0);
+  }
+}

packages/react/src/__tests__/Checkbox.test.tsx → packages/react/src/Checkbox/Checkbox.test.tsx

@@ -1,8 +1,8 @@
-import React from 'react'
-import {Checkbox} from '..'
-import {behavesAsComponent, checkExports} from '../utils/testing'
 import {render} from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
+import React from 'react'
+import Checkbox from '../Checkbox'
+import {behavesAsComponent, checkExports} from '../utils/testing'
 
 describe('Checkbox', () => {
   beforeEach(() => {

packages/react/src/Checkbox/Checkbox.tsx

@@ -1,3 +1,4 @@
+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'
@@ -8,6 +9,10 @@ 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 = {
   /**
@@ -145,6 +150,7 @@ const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>(
   (
     {
       checked,
+      className,
       defaultChecked,
       indeterminate,
       disabled,
@@ -157,12 +163,27 @@ const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>(
     },
     ref,
   ): ReactElement => {
+    const enabled = useFeatureFlag('primer_react_css_modules_team')
     const checkboxRef = useProvidedRefOrCreate(ref as React.RefObject<HTMLInputElement>)
     const checkboxGroupContext = useContext(CheckboxGroupContext)
     const handleOnChange: ChangeEventHandler<HTMLInputElement> = e => {
       checkboxGroupContext.onChange && checkboxGroupContext.onChange(e)
       onChange && onChange(e)
     }
+    const inputProps = {
+      type: 'checkbox',
+      disabled,
+      ref: checkboxRef,
+      checked: indeterminate ? false : checked,
+      defaultChecked,
+      required,
+      ['aria-required']: required ? ('true' as const) : ('false' as const),
+      ['aria-invalid']: validationStatus === 'error' ? ('true' as const) : ('false' as const),
+      onChange: handleOnChange,
+      value,
+      name: value,
+      ...rest,
+    }
 
     useLayoutEffect(() => {
       if (checkboxRef.current) {
@@ -183,23 +204,21 @@ const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>(
       }
     })
 
-    return (
-      <StyledCheckbox
-        type="checkbox"
-        disabled={disabled}
-        ref={checkboxRef}
-        checked={indeterminate ? false : checked}
-        defaultChecked={defaultChecked}
-        sx={sxProp}
-        required={required}
-        aria-required={required ? 'true' : 'false'}
-        aria-invalid={validationStatus === 'error' ? 'true' : 'false'}
-        onChange={handleOnChange}
-        value={value}
-        name={value}
-        {...rest}
-      />
-    )
+    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)} />
+    }
+
+    return <StyledCheckbox {...inputProps} className={className} sx={sxProp} />
   },
 )
 

packages/react/src/Checkbox/shared.module.css

@@ -0,0 +1,22 @@
+.input {
+  position: relative;
+  display: grid;
+  width: var(--base-size-16);
+  height: var(--base-size-16);
+  margin: 0;
+
+  /* 2px to center align with label (20px line-height) */
+  margin-top: var(--base-size-2);
+  cursor: pointer;
+  background-color: var(--bgColor-default);
+  border-color: var(--control-borderColor-emphasis);
+  border-style: solid;
+  border-width: var(--borderWidth-thin);
+  appearance: none;
+  place-content: center;
+
+  &:disabled {
+    background-color: var(--control-bgColor-disabled);
+    border-color: var(--control-borderColor-disabled);
+  }
+}