diff --git a/.changeset/light-chefs-bow.md b/.changeset/light-chefs-bow.md new file mode 100644 index 00000000000..a3a03f80df1 --- /dev/null +++ b/.changeset/light-chefs-bow.md @@ -0,0 +1,5 @@ +--- +'@primer/react': minor +--- + +Update Checkbox component to use CSS Modules behind feature flag diff --git a/.playwright/snapshots/components/Avatar.test.ts-snapshots/Avatar-Size-dark-linux.png b/.playwright/snapshots/components/Avatar.test.ts-snapshots/Avatar-Size-dark-linux.png index 0ebc8c72c8f..a245ceb874f 100644 Binary files a/.playwright/snapshots/components/Avatar.test.ts-snapshots/Avatar-Size-dark-linux.png and b/.playwright/snapshots/components/Avatar.test.ts-snapshots/Avatar-Size-dark-linux.png differ diff --git a/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-Default-focus-dark-colorblind-linux.png b/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-Default-focus-dark-colorblind-linux.png index 83c5f7604ee..d3d869bb412 100644 Binary files a/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-Default-focus-dark-colorblind-linux.png and b/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-Default-focus-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-Default-focus-dark-dimmed-linux.png b/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-Default-focus-dark-dimmed-linux.png index 4fccd06bf37..55a67300d0e 100644 Binary files a/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-Default-focus-dark-dimmed-linux.png and b/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-Default-focus-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-Default-focus-dark-high-contrast-linux.png b/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-Default-focus-dark-high-contrast-linux.png index 9d32810bfa4..74c4b5b700c 100644 Binary files a/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-Default-focus-dark-high-contrast-linux.png and b/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-Default-focus-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-Default-focus-dark-linux.png b/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-Default-focus-dark-linux.png index 83c5f7604ee..d3d869bb412 100644 Binary files a/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-Default-focus-dark-linux.png and b/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-Default-focus-dark-linux.png differ diff --git a/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-Default-focus-dark-tritanopia-linux.png b/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-Default-focus-dark-tritanopia-linux.png index 83c5f7604ee..d3d869bb412 100644 Binary files a/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-Default-focus-dark-tritanopia-linux.png and b/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-Default-focus-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-Default-focus-light-high-contrast-linux.png b/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-Default-focus-light-high-contrast-linux.png index dbeae9532ee..9ac7f2a89b4 100644 Binary files a/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-Default-focus-light-high-contrast-linux.png and b/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-Default-focus-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-Indeterminate-focus-dark-colorblind-linux.png b/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-Indeterminate-focus-dark-colorblind-linux.png index 028c995d520..ac6d3557b08 100644 Binary files a/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-Indeterminate-focus-dark-colorblind-linux.png and b/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-Indeterminate-focus-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-Indeterminate-focus-dark-dimmed-linux.png b/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-Indeterminate-focus-dark-dimmed-linux.png index 73c0decbeda..718ff5c7fd1 100644 Binary files a/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-Indeterminate-focus-dark-dimmed-linux.png and b/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-Indeterminate-focus-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-Indeterminate-focus-dark-high-contrast-linux.png b/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-Indeterminate-focus-dark-high-contrast-linux.png index 5f804472e08..ea0b12ae97f 100644 Binary files a/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-Indeterminate-focus-dark-high-contrast-linux.png and b/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-Indeterminate-focus-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-Indeterminate-focus-dark-linux.png b/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-Indeterminate-focus-dark-linux.png index 028c995d520..ac6d3557b08 100644 Binary files a/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-Indeterminate-focus-dark-linux.png and b/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-Indeterminate-focus-dark-linux.png differ diff --git a/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-Indeterminate-focus-dark-tritanopia-linux.png b/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-Indeterminate-focus-dark-tritanopia-linux.png index 028c995d520..ac6d3557b08 100644 Binary files a/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-Indeterminate-focus-dark-tritanopia-linux.png and b/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-Indeterminate-focus-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-Indeterminate-focus-light-colorblind-linux.png b/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-Indeterminate-focus-light-colorblind-linux.png index 37b131a5e3c..5cd5bdf344f 100644 Binary files a/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-Indeterminate-focus-light-colorblind-linux.png and b/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-Indeterminate-focus-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-Indeterminate-focus-light-high-contrast-linux.png b/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-Indeterminate-focus-light-high-contrast-linux.png index d88158ca714..673e63f19c5 100644 Binary files a/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-Indeterminate-focus-light-high-contrast-linux.png and b/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-Indeterminate-focus-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-Indeterminate-focus-light-linux.png b/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-Indeterminate-focus-light-linux.png index 37b131a5e3c..5cd5bdf344f 100644 Binary files a/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-Indeterminate-focus-light-linux.png and b/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-Indeterminate-focus-light-linux.png differ diff --git a/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-Indeterminate-focus-light-tritanopia-linux.png b/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-Indeterminate-focus-light-tritanopia-linux.png index 37b131a5e3c..5cd5bdf344f 100644 Binary files a/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-Indeterminate-focus-light-tritanopia-linux.png and b/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-Indeterminate-focus-light-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-Visually-Hidden-focus-light-high-contrast-linux.png b/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-Visually-Hidden-focus-light-high-contrast-linux.png index 51a5f7c8ef7..c526b98decc 100644 Binary files a/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-Visually-Hidden-focus-light-high-contrast-linux.png and b/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-Visually-Hidden-focus-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-With-Caption-dark-colorblind-linux.png b/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-With-Caption-dark-colorblind-linux.png index d15d5b4f2ab..58680aa4a68 100644 Binary files a/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-With-Caption-dark-colorblind-linux.png and b/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-With-Caption-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-With-Caption-dark-dimmed-linux.png b/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-With-Caption-dark-dimmed-linux.png index d2b2fc3ecc2..567594b30ad 100644 Binary files a/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-With-Caption-dark-dimmed-linux.png and b/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-With-Caption-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-With-Caption-dark-linux.png b/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-With-Caption-dark-linux.png index d15d5b4f2ab..58680aa4a68 100644 Binary files a/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-With-Caption-dark-linux.png and b/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-With-Caption-dark-linux.png differ diff --git a/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-With-Caption-dark-tritanopia-linux.png b/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-With-Caption-dark-tritanopia-linux.png index d15d5b4f2ab..58680aa4a68 100644 Binary files a/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-With-Caption-dark-tritanopia-linux.png and b/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-With-Caption-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-With-Caption-light-colorblind-linux.png b/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-With-Caption-light-colorblind-linux.png index d8137aac65a..77d6d36e770 100644 Binary files a/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-With-Caption-light-colorblind-linux.png and b/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-With-Caption-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-With-Caption-light-linux.png b/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-With-Caption-light-linux.png index d8137aac65a..77d6d36e770 100644 Binary files a/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-With-Caption-light-linux.png and b/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-With-Caption-light-linux.png differ diff --git a/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-With-Caption-light-tritanopia-linux.png b/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-With-Caption-light-tritanopia-linux.png index d8137aac65a..77d6d36e770 100644 Binary files a/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-With-Caption-light-tritanopia-linux.png and b/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-With-Caption-light-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-With-Leading-Visual-focus-dark-colorblind-linux.png b/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-With-Leading-Visual-focus-dark-colorblind-linux.png index 2540365e0b0..959ee2d221e 100644 Binary files a/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-With-Leading-Visual-focus-dark-colorblind-linux.png and b/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-With-Leading-Visual-focus-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-With-Leading-Visual-focus-dark-dimmed-linux.png b/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-With-Leading-Visual-focus-dark-dimmed-linux.png index bca89a29c2f..d6c9027dd00 100644 Binary files a/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-With-Leading-Visual-focus-dark-dimmed-linux.png and b/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-With-Leading-Visual-focus-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-With-Leading-Visual-focus-dark-high-contrast-linux.png b/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-With-Leading-Visual-focus-dark-high-contrast-linux.png index d069b5e680d..3a647b99d0f 100644 Binary files a/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-With-Leading-Visual-focus-dark-high-contrast-linux.png and b/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-With-Leading-Visual-focus-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-With-Leading-Visual-focus-dark-linux.png b/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-With-Leading-Visual-focus-dark-linux.png index 2540365e0b0..959ee2d221e 100644 Binary files a/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-With-Leading-Visual-focus-dark-linux.png and b/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-With-Leading-Visual-focus-dark-linux.png differ diff --git a/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-With-Leading-Visual-focus-dark-tritanopia-linux.png b/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-With-Leading-Visual-focus-dark-tritanopia-linux.png index 2540365e0b0..959ee2d221e 100644 Binary files a/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-With-Leading-Visual-focus-dark-tritanopia-linux.png and b/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-With-Leading-Visual-focus-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-With-Leading-Visual-focus-light-high-contrast-linux.png b/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-With-Leading-Visual-focus-light-high-contrast-linux.png index 72460ab7a08..f4644f7f8e0 100644 Binary files a/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-With-Leading-Visual-focus-light-high-contrast-linux.png and b/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-With-Leading-Visual-focus-light-high-contrast-linux.png differ diff --git a/package-lock.json b/package-lock.json index fb41f601a9e..476efa55d32 100644 --- a/package-lock.json +++ b/package-lock.json @@ -5846,9 +5846,9 @@ } }, "node_modules/@next/swc-darwin-x64": { - "version": "14.2.10", - "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-14.2.10.tgz", - "integrity": "sha512-Y0TC+FXbFUQ2MQgimJ/7Ina2mXIKhE7F+GUe1SgnzRmwFY3hX2z8nyVCxE82I2RicspdkZnSWMn4oTjIKz4uzA==", + "version": "14.2.8", + "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-14.2.8.tgz", + "integrity": "sha512-87t3I86rNRSOJB1gXIUzaQWWSWrkWPDyZGsR0Z7JAPtLeX3uUOW2fHxl7dNWD2BZvbvftctTQjgtfpp7nMtmWg==", "cpu": [ "x64" ], @@ -5861,9 +5861,9 @@ } }, "node_modules/@next/swc-linux-arm64-gnu": { - "version": "14.2.10", - "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-14.2.10.tgz", - "integrity": "sha512-ZfQ7yOy5zyskSj9rFpa0Yd7gkrBnJTkYVSya95hX3zeBG9E55Z6OTNPn1j2BTFWvOVVj65C3T+qsjOyVI9DQpA==", + "version": "14.2.8", + "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-14.2.8.tgz", + "integrity": "sha512-ta2sfVzbOpTbgBrF9HM5m+U58dv6QPuwU4n5EX4LLyCJGKc433Z0D9h9gay/HSOjLEXJ2fJYrMP5JYYbHdxhtw==", "cpu": [ "arm64" ], @@ -5876,9 +5876,9 @@ } }, "node_modules/@next/swc-linux-arm64-musl": { - "version": "14.2.10", - "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-14.2.10.tgz", - "integrity": "sha512-n2i5o3y2jpBfXFRxDREr342BGIQCJbdAUi/K4q6Env3aSx8erM9VuKXHw5KNROK9ejFSPf0LhoSkU/ZiNdacpQ==", + "version": "14.2.8", + "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-14.2.8.tgz", + "integrity": "sha512-+IoLTPK6Z5uIgDhgeWnQF5/o5GBN7+zyUNrs4Bes1W3g9++YELb8y0unFybS8s87ntAKMDl6jeQ+mD7oNwp/Ng==", "cpu": [ "arm64" ], @@ -5891,9 +5891,9 @@ } }, "node_modules/@next/swc-linux-x64-gnu": { - "version": "14.2.10", - "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-14.2.10.tgz", - "integrity": "sha512-GXvajAWh2woTT0GKEDlkVhFNxhJS/XdDmrVHrPOA83pLzlGPQnixqxD8u3bBB9oATBKB//5e4vpACnx5Vaxdqg==", + "version": "14.2.8", + "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-14.2.8.tgz", + "integrity": "sha512-pO+hVXC+mvzUOQJJRG4RX4wJsRJ5BkURSf6dD6EjUXAX4Ml9es1WsEfkaZ4lcpmFzFvY47IkDaffks/GdCn9ag==", "cpu": [ "x64" ], @@ -5906,9 +5906,9 @@ } }, "node_modules/@next/swc-linux-x64-musl": { - "version": "14.2.10", - "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-14.2.10.tgz", - "integrity": "sha512-opFFN5B0SnO+HTz4Wq4HaylXGFV+iHrVxd3YvREUX9K+xfc4ePbRrxqOuPOFjtSuiVouwe6uLeDtabjEIbkmDA==", + "version": "14.2.8", + "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-14.2.8.tgz", + "integrity": "sha512-bCat9izctychCtf3uL1nqHq31N5e1VxvdyNcBQflkudPMLbxVnlrw45Vi87K+lt1CwrtVayHqzo4ie0Szcpwzg==", "cpu": [ "x64" ], @@ -5921,9 +5921,9 @@ } }, "node_modules/@next/swc-win32-arm64-msvc": { - "version": "14.2.10", - "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-14.2.10.tgz", - "integrity": "sha512-9NUzZuR8WiXTvv+EiU/MXdcQ1XUvFixbLIMNQiVHuzs7ZIFrJDLJDaOF1KaqttoTujpcxljM/RNAOmw1GhPPQQ==", + "version": "14.2.8", + "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-14.2.8.tgz", + "integrity": "sha512-gbxfUaSPV7EyUobpavida2Hwi62GhSJaSg7iBjmBWoxkxlmETOD7U4tWt763cGIsyE6jM7IoNavq0BXqwdW2QA==", "cpu": [ "arm64" ], @@ -5936,9 +5936,9 @@ } }, "node_modules/@next/swc-win32-ia32-msvc": { - "version": "14.2.10", - "resolved": "https://registry.npmjs.org/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-14.2.10.tgz", - "integrity": "sha512-fr3aEbSd1GeW3YUMBkWAu4hcdjZ6g4NBl1uku4gAn661tcxd1bHs1THWYzdsbTRLcCKLjrDZlNp6j2HTfrw+Bg==", + "version": "14.2.8", + "resolved": "https://registry.npmjs.org/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-14.2.8.tgz", + "integrity": "sha512-PUXzEzjTTlUh3b5VAn1nlpwvujTnuCMMwbiCnaTazoVlN1nA3kWjlmp42IfURA2N/nyrlVEw7pURa/o4Qxj1cw==", "cpu": [ "ia32" ], @@ -5951,9 +5951,9 @@ } }, "node_modules/@next/swc-win32-x64-msvc": { - "version": "14.2.10", - "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-14.2.10.tgz", - "integrity": "sha512-UjeVoRGKNL2zfbcQ6fscmgjBAS/inHBh63mjIlfPg/NG8Yn2ztqylXt5qilYb6hoHIwaU2ogHknHWWmahJjgZQ==", + "version": "14.2.8", + "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-14.2.8.tgz", + "integrity": "sha512-EnPKv0ttq02E9/1KZ/8Dn7kuutv6hy1CKc0HlNcvzOQcm4/SQtvfws5gY0zrG9tuupd3HfC2L/zcTrnBhpjTuQ==", "cpu": [ "x64" ], diff --git a/package.json b/package.json index 35bf6e35722..63a3c2fbc27 100644 --- a/package.json +++ b/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" } diff --git a/packages/react/src/Avatar/Avatar.module.css b/packages/react/src/Avatar/Avatar.module.css index feba91a8ccb..f20124dedfa 100644 --- a/packages/react/src/Avatar/Avatar.module.css +++ b/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); } } diff --git a/packages/react/src/Checkbox/Checkbox.module.css b/packages/react/src/Checkbox/Checkbox.module.css new file mode 100644 index 00000000000..f202558ca7c --- /dev/null +++ b/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); + } +} diff --git a/packages/react/src/__tests__/Checkbox.test.tsx b/packages/react/src/Checkbox/Checkbox.test.tsx similarity index 99% rename from packages/react/src/__tests__/Checkbox.test.tsx rename to packages/react/src/Checkbox/Checkbox.test.tsx index 303d2a20682..085fae85432 100644 --- a/packages/react/src/__tests__/Checkbox.test.tsx +++ b/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(() => { diff --git a/packages/react/src/Checkbox/Checkbox.tsx b/packages/react/src/Checkbox/Checkbox.tsx index 06c8705892f..34ea8ee6e5d 100644 --- a/packages/react/src/Checkbox/Checkbox.tsx +++ b/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( ( { checked, + className, defaultChecked, indeterminate, disabled, @@ -157,12 +163,27 @@ const Checkbox = React.forwardRef( }, ref, ): ReactElement => { + const enabled = useFeatureFlag('primer_react_css_modules_team') const checkboxRef = useProvidedRefOrCreate(ref as React.RefObject) const checkboxGroupContext = useContext(CheckboxGroupContext) const handleOnChange: ChangeEventHandler = 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( } }) - return ( - - ) + if (enabled) { + if (sxProp) { + return ( + + ) + } + return + } + + return }, ) diff --git a/packages/react/src/Checkbox/shared.module.css b/packages/react/src/Checkbox/shared.module.css new file mode 100644 index 00000000000..029da1957ce --- /dev/null +++ b/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); + } +}