From 3a232e38a192f40e7c5fe8d4b50c6205709ecdf8 Mon Sep 17 00:00:00 2001 From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com> Date: Mon, 4 Dec 2023 11:07:24 -0600 Subject: [PATCH 01/19] chore(deps-dev): bump typescript-plugin-css-modules from 5.0.1 to 5.0.2 (#4007) Bumps [typescript-plugin-css-modules](https://github.com/mrmckeb/typescript-plugin-css-modules) from 5.0.1 to 5.0.2. - [Release notes](https://github.com/mrmckeb/typescript-plugin-css-modules/releases) - [Commits](https://github.com/mrmckeb/typescript-plugin-css-modules/compare/v5.0.1...v5.0.2) --- updated-dependencies: - dependency-name: typescript-plugin-css-modules dependency-type: direct:development update-type: version-update:semver-patch ... Signed-off-by: dependabot[bot] Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> --- package-lock.json | 12 ++++++------ package.json | 2 +- 2 files changed, 7 insertions(+), 7 deletions(-) diff --git a/package-lock.json b/package-lock.json index 214775abd27..f800df6ac2c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "@primer/react", - "version": "36.2.0", + "version": "36.3.1", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "@primer/react", - "version": "36.2.0", + "version": "36.3.1", "license": "MIT", "dependencies": { "@github/combobox-nav": "^2.1.5", @@ -173,7 +173,7 @@ "ts-node": "10.9.1", "ts-toolbelt": "9.6.0", "typescript": "5.2.2", - "typescript-plugin-css-modules": "5.0.1", + "typescript-plugin-css-modules": "5.0.2", "unist-util-find": "3.0.0", "unist-util-find-before": "4.0.0", "unist-util-flat-filter": "2.0.0", @@ -40376,9 +40376,9 @@ } }, "node_modules/typescript-plugin-css-modules": { - "version": "5.0.1", - "resolved": "https://registry.npmjs.org/typescript-plugin-css-modules/-/typescript-plugin-css-modules-5.0.1.tgz", - "integrity": "sha512-hKXObfwfjx2/myRq4JeQ8D3xIWYTFqusi0hS/Aka7RFX1xQEoEkdOGDWyXNb8LmObawsUzbI30gQnZvqYXCrkA==", + "version": "5.0.2", + "resolved": "https://registry.npmjs.org/typescript-plugin-css-modules/-/typescript-plugin-css-modules-5.0.2.tgz", + "integrity": "sha512-ej/Og4Y8mF+43P14P9Ik1MGqNXcXBVgO1TltkESegdnZsaaRXnaJ5CoJmTPRkg25ysQlOV6P94wNhI4VxIzlkw==", "dev": true, "dependencies": { "@types/postcss-modules-local-by-default": "^4.0.0", diff --git a/package.json b/package.json index 7e727ca3782..b69aa80e7fa 100644 --- a/package.json +++ b/package.json @@ -258,7 +258,7 @@ "ts-node": "10.9.1", "ts-toolbelt": "9.6.0", "typescript": "5.2.2", - "typescript-plugin-css-modules": "5.0.1", + "typescript-plugin-css-modules": "5.0.2", "unist-util-find": "3.0.0", "unist-util-find-before": "4.0.0", "unist-util-flat-filter": "2.0.0", From 9e5e1090da988fd6e0e1d5820980df3b5c879bcb Mon Sep 17 00:00:00 2001 From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com> Date: Mon, 4 Dec 2023 11:07:40 -0600 Subject: [PATCH 02/19] chore(deps-dev): bump @primer/css from 21.0.9 to 21.1.0 (#4006) Bumps [@primer/css](https://github.com/primer/css) from 21.0.9 to 21.1.0. - [Release notes](https://github.com/primer/css/releases) - [Changelog](https://github.com/primer/css/blob/main/CHANGELOG.md) - [Commits](https://github.com/primer/css/compare/v21.0.9...v21.1.0) --- updated-dependencies: - dependency-name: "@primer/css" dependency-type: direct:development update-type: version-update:semver-minor ... Signed-off-by: dependabot[bot] Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> --- package-lock.json | 42 ++++++++++++++++++------------------------ 1 file changed, 18 insertions(+), 24 deletions(-) diff --git a/package-lock.json b/package-lock.json index f800df6ac2c..451cd0ba6ec 100644 --- a/package-lock.json +++ b/package-lock.json @@ -3791,9 +3791,9 @@ } }, "node_modules/@github/auto-complete-element": { - "version": "3.5.1", - "resolved": "https://registry.npmjs.org/@github/auto-complete-element/-/auto-complete-element-3.5.1.tgz", - "integrity": "sha512-7/g6Nz6Zz4/k0m/L0n+OEO29WZcXgXwLJn7Ql02UbIMR2ClFEZIwIvvzb+3fEECOyLpFrZC/JH7Svz9RYPc+wA==", + "version": "3.6.0", + "resolved": "https://registry.npmjs.org/@github/auto-complete-element/-/auto-complete-element-3.6.0.tgz", + "integrity": "sha512-u8fG8nCosSFv2wlKMsGga+FaFu/jkexZVFIDxLiCyLVTB8zRRu/RJyufzNnmbOZHYBezCMNBgJ0quuEBoyRh9Q==", "dev": true, "dependencies": { "@github/combobox-nav": "^2.1.7" @@ -3812,9 +3812,9 @@ "dev": true }, "node_modules/@github/clipboard-copy-element": { - "version": "1.2.1", - "resolved": "https://registry.npmjs.org/@github/clipboard-copy-element/-/clipboard-copy-element-1.2.1.tgz", - "integrity": "sha512-PLccyUCnzmOQ6zrRsH66rr67iumJyP5r7ij17ezprFQAK/oA8CXhlC8LTG+xpW3cYAvnp2zCgRNTfXS8wk09Lg==", + "version": "1.3.0", + "resolved": "https://registry.npmjs.org/@github/clipboard-copy-element/-/clipboard-copy-element-1.3.0.tgz", + "integrity": "sha512-wyntkQkwoLbLo+Hqg2LIVMXDIzcvUb9bSDz+clX6nVJItwzh103rHxdXFRZD+DmxVbuEW5xSznYQXkz1jZT+xg==", "dev": true }, "node_modules/@github/combobox-nav": { @@ -5874,9 +5874,9 @@ } }, "node_modules/@oddbird/popover-polyfill": { - "version": "0.3.1", - "resolved": "https://registry.npmjs.org/@oddbird/popover-polyfill/-/popover-polyfill-0.3.1.tgz", - "integrity": "sha512-Ne0e4L0Yo++NyNVpsrY+u1fK9xlBjwDqOj+neQQpaa4zsXhDDj/OSHuODhgbHI6YrwhA4XvgWMiFuhkBOAo1Bw==" + "version": "0.3.6", + "resolved": "https://registry.npmjs.org/@oddbird/popover-polyfill/-/popover-polyfill-0.3.6.tgz", + "integrity": "sha512-9y9vWw6svuva+pLahuK1CBScoXhk70yiS9l+Ll7IBsUC3gTmdHDGXBv+H0EwGsJ3iCytvTd98Ds3+fcQQABrPg==" }, "node_modules/@pkgjs/parseargs": { "version": "0.11.0", @@ -6007,13 +6007,13 @@ "integrity": "sha512-ApPbNhiWPHscs0+rLV76sCY75IEpPvDEZq9+iQXQqU6Tv5SLdax3PmzJlUHftlQ7O/eJnLO1dTEMEwj2Yn1BLA==" }, "node_modules/@primer/css": { - "version": "21.0.9", - "resolved": "https://registry.npmjs.org/@primer/css/-/css-21.0.9.tgz", - "integrity": "sha512-kk0TfLqtGwGYJ/qXGLMXDIL4d3qWPjlEB12Hvk08krulbsQRWEsnXjejBIvJG69GyOOuYxXNoHvP2NGenxQ8Jw==", + "version": "21.1.0", + "resolved": "https://registry.npmjs.org/@primer/css/-/css-21.1.0.tgz", + "integrity": "sha512-2MgVTgH3uWcN665JlwIasjjbB8pRLS+hMFyjFlesn5mUUseCS33aVRP8R6uIn5nk1A9IN+nq8MAGco3OAhlGZg==", "dev": true, "dependencies": { "@primer/primitives": "^7.12.0", - "@primer/view-components": "^0.5.1" + "@primer/view-components": "^0.14.0" }, "engines": { "node": ">=16.0.0" @@ -6036,30 +6036,24 @@ "integrity": "sha512-471hL6pkcGuPS4G0urQ0TRZYo3ukAaVhUtvlsi1mZLofmX+EF+9iQL/iau06JfaQkm5NNP236+F7yyxXra9EjA==" }, "node_modules/@primer/view-components": { - "version": "0.5.1", - "resolved": "https://registry.npmjs.org/@primer/view-components/-/view-components-0.5.1.tgz", - "integrity": "sha512-TI51R4rVobwK6sWRhu7HRHC6yxud2I9P1sYN6o/fHhIq7QU31mJyv1PtD8nfhmOqN/SsRC6q3pnCbh5Qt1wD/g==", + "version": "0.14.0", + "resolved": "https://registry.npmjs.org/@primer/view-components/-/view-components-0.14.0.tgz", + "integrity": "sha512-q5kctH/ujpVYYljZGWjmwZXU7s1VT70TEE6+JeIAgtohkIIMFKdlHsrzmrQ+4AwDW01Pi3maHLiIcDy3HTe1JA==", "dev": true, "dependencies": { "@github/auto-check-element": "^5.2.0", "@github/auto-complete-element": "^3.3.4", "@github/catalyst": "^1.6.0", - "@github/clipboard-copy-element": "^1.1.2", + "@github/clipboard-copy-element": "^1.3.0", "@github/details-menu-element": "^1.0.12", "@github/image-crop-element": "^5.0.0", "@github/include-fragment-element": "^6.1.1", "@github/relative-time-element": "^4.0.0", "@github/tab-container-element": "^3.1.2", - "@oddbird/popover-polyfill": "^0.2.1", + "@oddbird/popover-polyfill": "^0.3.2", "@primer/behaviors": "^1.3.4" } }, - "node_modules/@primer/view-components/node_modules/@oddbird/popover-polyfill": { - "version": "0.2.3", - "resolved": "https://registry.npmjs.org/@oddbird/popover-polyfill/-/popover-polyfill-0.2.3.tgz", - "integrity": "sha512-XDK+V/gUeE4NEsWp79eVzhlK3wuVcRDJuaas63qo0IJLJpyOLHqycJLFYvuq8kebgT1nl87P3sbSb5ZN6Vyf5g==", - "dev": true - }, "node_modules/@radix-ui/number": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/@radix-ui/number/-/number-1.0.1.tgz", From 11389fedf72b6c404a32cbede1491fcccaaaeba5 Mon Sep 17 00:00:00 2001 From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com> Date: Mon, 4 Dec 2023 11:07:56 -0600 Subject: [PATCH 03/19] chore(deps-dev): bump @types/node from 18.16.19 to 20.10.3 (#4005) Bumps [@types/node](https://github.com/DefinitelyTyped/DefinitelyTyped/tree/HEAD/types/node) from 18.16.19 to 20.10.3. - [Release notes](https://github.com/DefinitelyTyped/DefinitelyTyped/releases) - [Commits](https://github.com/DefinitelyTyped/DefinitelyTyped/commits/HEAD/types/node) --- updated-dependencies: - dependency-name: "@types/node" dependency-type: direct:development update-type: version-update:semver-major ... Signed-off-by: dependabot[bot] Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> --- package-lock.json | 28 +++++++++++++++++++++++----- package.json | 2 +- 2 files changed, 24 insertions(+), 6 deletions(-) diff --git a/package-lock.json b/package-lock.json index 451cd0ba6ec..338cda3012f 100644 --- a/package-lock.json +++ b/package-lock.json @@ -90,7 +90,7 @@ "@types/lodash.isempty": "4.4.7", "@types/lodash.isobject": "3.0.7", "@types/lodash.keyby": "4.6.7", - "@types/node": "18.16.19", + "@types/node": "20.10.3", "@types/react": "18.2.21", "@types/react-dom": "18.2.6", "@types/semver": "7.5.3", @@ -13998,10 +13998,13 @@ "integrity": "sha512-iiUgKzV9AuaEkZqkOLDIvlQiL6ltuZd9tGcW3gwpnX8JbuiuhFlEGmmFXEXkN50Cvq7Os88IY2v0dkDqXYWVgA==" }, "node_modules/@types/node": { - "version": "18.16.19", - "resolved": "https://registry.npmjs.org/@types/node/-/node-18.16.19.tgz", - "integrity": "sha512-IXl7o+R9iti9eBW4Wg2hx1xQDig183jj7YLn8F7udNceyfkbn1ZxmzZXuak20gR40D7pIkIY1kYGx5VIGbaHKA==", - "dev": true + "version": "20.10.3", + "resolved": "https://registry.npmjs.org/@types/node/-/node-20.10.3.tgz", + "integrity": "sha512-XJavIpZqiXID5Yxnxv3RUDKTN5b81ddNC3ecsA0SoFXz/QU8OGBwZGMomiq0zw+uuqbL/krztv/DINAQ/EV4gg==", + "dev": true, + "dependencies": { + "undici-types": "~5.26.4" + } }, "node_modules/@types/node-fetch": { "version": "2.6.4", @@ -40466,6 +40469,12 @@ "through": "^2.3.8" } }, + "node_modules/undici-types": { + "version": "5.26.5", + "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-5.26.5.tgz", + "integrity": "sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA==", + "dev": true + }, "node_modules/unicode-canonical-property-names-ecmascript": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/unicode-canonical-property-names-ecmascript/-/unicode-canonical-property-names-ecmascript-2.0.0.tgz", @@ -40558,6 +40567,15 @@ "url": "https://opencollective.com/unified" } }, + "node_modules/unified-engine/node_modules/@types/node": { + "version": "18.19.2", + "resolved": "https://registry.npmjs.org/@types/node/-/node-18.19.2.tgz", + "integrity": "sha512-6wzfBdbWpe8QykUkXBjtmO3zITA0A3FIjoy+in0Y2K4KrCiRhNYJIdwAPDffZ3G6GnaKaSLSEa9ZuORLfEoiwg==", + "dev": true, + "dependencies": { + "undici-types": "~5.26.4" + } + }, "node_modules/unified-engine/node_modules/brace-expansion": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz", diff --git a/package.json b/package.json index b69aa80e7fa..aeaca2dc657 100644 --- a/package.json +++ b/package.json @@ -175,7 +175,7 @@ "@types/lodash.isempty": "4.4.7", "@types/lodash.isobject": "3.0.7", "@types/lodash.keyby": "4.6.7", - "@types/node": "18.16.19", + "@types/node": "20.10.3", "@types/react": "18.2.21", "@types/react-dom": "18.2.6", "@types/semver": "7.5.3", From 3aaa6614565eae8f8b7d75d01d97f9bf9bd80766 Mon Sep 17 00:00:00 2001 From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com> Date: Mon, 4 Dec 2023 11:08:13 -0600 Subject: [PATCH 04/19] chore(deps-dev): bump @types/lodash.isempty from 4.4.7 to 4.4.9 (#4004) Bumps [@types/lodash.isempty](https://github.com/DefinitelyTyped/DefinitelyTyped/tree/HEAD/types/lodash.isempty) from 4.4.7 to 4.4.9. - [Release notes](https://github.com/DefinitelyTyped/DefinitelyTyped/releases) - [Commits](https://github.com/DefinitelyTyped/DefinitelyTyped/commits/HEAD/types/lodash.isempty) --- updated-dependencies: - dependency-name: "@types/lodash.isempty" dependency-type: direct:development update-type: version-update:semver-patch ... Signed-off-by: dependabot[bot] Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> --- package-lock.json | 8 ++++---- package.json | 2 +- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/package-lock.json b/package-lock.json index 338cda3012f..e13b3f40986 100644 --- a/package-lock.json +++ b/package-lock.json @@ -87,7 +87,7 @@ "@types/jest": "29.5.6", "@types/jest-axe": "3.5.5", "@types/lodash.groupby": "4.6.7", - "@types/lodash.isempty": "4.4.7", + "@types/lodash.isempty": "4.4.9", "@types/lodash.isobject": "3.0.7", "@types/lodash.keyby": "4.6.7", "@types/node": "20.10.3", @@ -13934,9 +13934,9 @@ } }, "node_modules/@types/lodash.isempty": { - "version": "4.4.7", - "resolved": "https://registry.npmjs.org/@types/lodash.isempty/-/lodash.isempty-4.4.7.tgz", - "integrity": "sha512-YOzlpoIn9jrfHzjIukKnu9Le3tmi+0PhUdOt2rMpJW/4J6jX7s0HeBatXdh9QckLga8qt4EKBxVIEqtEq6pzLg==", + "version": "4.4.9", + "resolved": "https://registry.npmjs.org/@types/lodash.isempty/-/lodash.isempty-4.4.9.tgz", + "integrity": "sha512-DPSFfnT2JmZiAWNWOU8IRZws/Ha6zyGF5m06TydfsY+0dVoQqby2J61Na2QU4YtwiZ+moC6cJS6zWYBJq4wBVw==", "dev": true, "dependencies": { "@types/lodash": "*" diff --git a/package.json b/package.json index aeaca2dc657..f131e93884a 100644 --- a/package.json +++ b/package.json @@ -172,7 +172,7 @@ "@types/jest": "29.5.6", "@types/jest-axe": "3.5.5", "@types/lodash.groupby": "4.6.7", - "@types/lodash.isempty": "4.4.7", + "@types/lodash.isempty": "4.4.9", "@types/lodash.isobject": "3.0.7", "@types/lodash.keyby": "4.6.7", "@types/node": "20.10.3", From 4f31e03666042fa2f01180199300414fce837efd Mon Sep 17 00:00:00 2001 From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com> Date: Mon, 4 Dec 2023 11:08:31 -0600 Subject: [PATCH 05/19] chore(deps-dev): bump @rollup/plugin-typescript from 11.1.0 to 11.1.5 (#4003) Bumps [@rollup/plugin-typescript](https://github.com/rollup/plugins/tree/HEAD/packages/typescript) from 11.1.0 to 11.1.5. - [Changelog](https://github.com/rollup/plugins/blob/master/packages/typescript/CHANGELOG.md) - [Commits](https://github.com/rollup/plugins/commits/typescript-v11.1.5/packages/typescript) --- updated-dependencies: - dependency-name: "@rollup/plugin-typescript" dependency-type: direct:development update-type: version-update:semver-patch ... Signed-off-by: dependabot[bot] Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> --- package-lock.json | 10 +++++----- package.json | 2 +- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/package-lock.json b/package-lock.json index e13b3f40986..4dca1246331 100644 --- a/package-lock.json +++ b/package-lock.json @@ -62,7 +62,7 @@ "@rollup/plugin-node-resolve": "15.1.0", "@rollup/plugin-replace": "5.0.2", "@rollup/plugin-terser": "0.4.3", - "@rollup/plugin-typescript": "11.1.0", + "@rollup/plugin-typescript": "11.1.5", "@rollup/plugin-virtual": "3.0.2", "@size-limit/preset-big-lib": "8.2.6", "@storybook/addon-a11y": "7.1.0", @@ -6906,9 +6906,9 @@ } }, "node_modules/@rollup/plugin-typescript": { - "version": "11.1.0", - "resolved": "https://registry.npmjs.org/@rollup/plugin-typescript/-/plugin-typescript-11.1.0.tgz", - "integrity": "sha512-86flrfE+bSHB69znnTV6kVjkncs2LBMhcTCyxWgRxLyfXfQrxg4UwlAqENnjrrxnSNS/XKCDJCl8EkdFJVHOxw==", + "version": "11.1.5", + "resolved": "https://registry.npmjs.org/@rollup/plugin-typescript/-/plugin-typescript-11.1.5.tgz", + "integrity": "sha512-rnMHrGBB0IUEv69Q8/JGRD/n4/n6b3nfpufUu26axhUcboUzv/twfZU8fIBbTOphRAe0v8EyxzeDpKXqGHfyDA==", "dev": true, "dependencies": { "@rollup/pluginutils": "^5.0.1", @@ -6918,7 +6918,7 @@ "node": ">=14.0.0" }, "peerDependencies": { - "rollup": "^2.14.0||^3.0.0", + "rollup": "^2.14.0||^3.0.0||^4.0.0", "tslib": "*", "typescript": ">=3.7.0" }, diff --git a/package.json b/package.json index f131e93884a..ac4bf363cd4 100644 --- a/package.json +++ b/package.json @@ -147,7 +147,7 @@ "@rollup/plugin-node-resolve": "15.1.0", "@rollup/plugin-replace": "5.0.2", "@rollup/plugin-terser": "0.4.3", - "@rollup/plugin-typescript": "11.1.0", + "@rollup/plugin-typescript": "11.1.5", "@rollup/plugin-virtual": "3.0.2", "@size-limit/preset-big-lib": "8.2.6", "@storybook/addon-a11y": "7.1.0", From df7dc2af1679a3a6634ec313476de0cb2fc07a19 Mon Sep 17 00:00:00 2001 From: Daniel Adams Date: Mon, 4 Dec 2023 18:55:28 +0100 Subject: [PATCH 06/19] Adjust focus styling input components (and considers `MarkdownEditor`) (#4008) * Adjust focus styling * Update tests * Fix MarkdownEditor focus overwrite * Add changeset --- .changeset/itchy-jokes-compare.md | 5 + .../__snapshots__/Autocomplete.test.tsx.snap | 35 ++-- .../__snapshots__/TextInput.test.tsx.snap | 157 +++++++++++------- .../TextInputWithTokens.test.tsx.snap | 125 ++++++++------ .../__snapshots__/Textarea.test.tsx.snap | 5 +- src/drafts/MarkdownEditor/MarkdownEditor.tsx | 1 + src/drafts/MarkdownEditor/_MarkdownInput.tsx | 1 + src/internal/components/TextInputWrapper.tsx | 9 +- 8 files changed, 206 insertions(+), 132 deletions(-) create mode 100644 .changeset/itchy-jokes-compare.md diff --git a/.changeset/itchy-jokes-compare.md b/.changeset/itchy-jokes-compare.md new file mode 100644 index 00000000000..38e3a73b545 --- /dev/null +++ b/.changeset/itchy-jokes-compare.md @@ -0,0 +1,5 @@ +--- +'@primer/react': patch +--- + +Changes the focus styling of input components such as `Textarea`, `TextInput`, `TextInputWithTokens` and `Select` from using `border` and `box-shadow` to use `outline` only for better border rendering and scrollbar support. diff --git a/src/__tests__/__snapshots__/Autocomplete.test.tsx.snap b/src/__tests__/__snapshots__/Autocomplete.test.tsx.snap index 27d4c2f6d55..a1944410067 100644 --- a/src/__tests__/__snapshots__/Autocomplete.test.tsx.snap +++ b/src/__tests__/__snapshots__/Autocomplete.test.tsx.snap @@ -21,6 +21,7 @@ exports[`snapshots renders a custom empty state message 1`] = ` -ms-flex-align: stretch; align-items: stretch; min-height: 32px; + overflow: hidden; } .c0 input, @@ -50,8 +51,8 @@ exports[`snapshots renders a custom empty state message 1`] = ` .c0:focus-within { border-color: #0969da; - outline: none; - box-shadow: inset 0 0 0 1px #0969da; + outline: 2px solid #0969da; + outline-offset: -1px; } .c0 > textarea { @@ -187,6 +188,7 @@ exports[`snapshots renders a loading state 1`] = ` -ms-flex-align: stretch; align-items: stretch; min-height: 32px; + overflow: hidden; } .c0 input, @@ -216,8 +218,8 @@ exports[`snapshots renders a loading state 1`] = ` .c0:focus-within { border-color: #0969da; - outline: none; - box-shadow: inset 0 0 0 1px #0969da; + outline: 2px solid #0969da; + outline-offset: -1px; } .c0 > textarea { @@ -388,6 +390,7 @@ exports[`snapshots renders a menu that contains an item to add to the menu 1`] = -ms-flex-align: stretch; align-items: stretch; min-height: 32px; + overflow: hidden; } .c0 input, @@ -417,8 +420,8 @@ exports[`snapshots renders a menu that contains an item to add to the menu 1`] = .c0:focus-within { border-color: #0969da; - outline: none; - box-shadow: inset 0 0 0 1px #0969da; + outline: 2px solid #0969da; + outline-offset: -1px; } .c0 > textarea { @@ -1165,6 +1168,7 @@ exports[`snapshots renders a multiselect input 1`] = ` -ms-flex-align: stretch; align-items: stretch; min-height: 32px; + overflow: hidden; } .c0 input, @@ -1194,8 +1198,8 @@ exports[`snapshots renders a multiselect input 1`] = ` .c0:focus-within { border-color: #0969da; - outline: none; - box-shadow: inset 0 0 0 1px #0969da; + outline: 2px solid #0969da; + outline-offset: -1px; } .c0 > textarea { @@ -1829,6 +1833,7 @@ exports[`snapshots renders a multiselect input with selected menu items 1`] = ` -ms-flex-align: stretch; align-items: stretch; min-height: 32px; + overflow: hidden; } .c0 input, @@ -1858,8 +1863,8 @@ exports[`snapshots renders a multiselect input with selected menu items 1`] = ` .c0:focus-within { border-color: #0969da; - outline: none; - box-shadow: inset 0 0 0 1px #0969da; + outline: 2px solid #0969da; + outline-offset: -1px; } .c0 > textarea { @@ -2641,6 +2646,7 @@ exports[`snapshots renders a single select input 1`] = ` -ms-flex-align: stretch; align-items: stretch; min-height: 32px; + overflow: hidden; } .c0 input, @@ -2670,8 +2676,8 @@ exports[`snapshots renders a single select input 1`] = ` .c0:focus-within { border-color: #0969da; - outline: none; - box-shadow: inset 0 0 0 1px #0969da; + outline: 2px solid #0969da; + outline-offset: -1px; } .c0 > textarea { @@ -3664,6 +3670,7 @@ exports[`snapshots renders with an input value 1`] = ` -ms-flex-align: stretch; align-items: stretch; min-height: 32px; + overflow: hidden; } .c0 input, @@ -3693,8 +3700,8 @@ exports[`snapshots renders with an input value 1`] = ` .c0:focus-within { border-color: #0969da; - outline: none; - box-shadow: inset 0 0 0 1px #0969da; + outline: 2px solid #0969da; + outline-offset: -1px; } .c0 > textarea { diff --git a/src/__tests__/__snapshots__/TextInput.test.tsx.snap b/src/__tests__/__snapshots__/TextInput.test.tsx.snap index 9fff506b6ce..1a431197282 100644 --- a/src/__tests__/__snapshots__/TextInput.test.tsx.snap +++ b/src/__tests__/__snapshots__/TextInput.test.tsx.snap @@ -20,6 +20,7 @@ exports[`TextInput renders 1`] = ` -ms-flex-align: stretch; align-items: stretch; min-height: 32px; + overflow: hidden; } .c0 input, @@ -49,8 +50,8 @@ exports[`TextInput renders 1`] = ` .c0:focus-within { border-color: #0969da; - outline: none; - box-shadow: inset 0 0 0 1px #0969da; + outline: 2px solid #0969da; + outline-offset: -1px; } .c0 > textarea { @@ -141,6 +142,7 @@ exports[`TextInput renders block 1`] = ` -ms-flex-align: stretch; align-items: stretch; min-height: 32px; + overflow: hidden; width: 100%; display: -webkit-box; display: -webkit-flex; @@ -178,8 +180,8 @@ exports[`TextInput renders block 1`] = ` .c0:focus-within { border-color: #0969da; - outline: none; - box-shadow: inset 0 0 0 1px #0969da; + outline: 2px solid #0969da; + outline-offset: -1px; } .c0 > textarea { @@ -270,6 +272,7 @@ exports[`TextInput renders consistently 1`] = ` -ms-flex-align: stretch; align-items: stretch; min-height: 32px; + overflow: hidden; } .c0 input, @@ -299,8 +302,8 @@ exports[`TextInput renders consistently 1`] = ` .c0:focus-within { border-color: #0969da; - outline: none; - box-shadow: inset 0 0 0 1px #0969da; + outline: 2px solid #0969da; + outline-offset: -1px; } .c0 > textarea { @@ -390,6 +393,7 @@ exports[`TextInput renders contrast 1`] = ` -ms-flex-align: stretch; align-items: stretch; min-height: 32px; + overflow: hidden; background-color: #f6f8fa; } @@ -420,8 +424,8 @@ exports[`TextInput renders contrast 1`] = ` .c0:focus-within { border-color: #0969da; - outline: none; - box-shadow: inset 0 0 0 1px #0969da; + outline: 2px solid #0969da; + outline-offset: -1px; } .c0 > textarea { @@ -512,6 +516,7 @@ exports[`TextInput renders error 1`] = ` -ms-flex-align: stretch; align-items: stretch; min-height: 32px; + overflow: hidden; border-color: #cf222e; } @@ -542,8 +547,8 @@ exports[`TextInput renders error 1`] = ` .c0:focus-within { border-color: #0969da; - outline: none; - box-shadow: inset 0 0 0 1px #0969da; + outline: 2px solid #0969da; + outline-offset: -1px; } .c0 > textarea { @@ -552,8 +557,8 @@ exports[`TextInput renders error 1`] = ` .c0:focus-within { border-color: #0969da; - outline: none; - box-shadow: inset 0 0 0 1px #0969da; + outline: 2px solid #0969da; + outline-offset: -1px; } .c1 { @@ -640,6 +645,7 @@ exports[`TextInput renders large 1`] = ` -ms-flex-align: stretch; align-items: stretch; min-height: 32px; + overflow: hidden; --inner-action-size: 28px; padding-left: 8px; padding-right: 8px; @@ -675,8 +681,8 @@ exports[`TextInput renders large 1`] = ` .c0:focus-within { border-color: #0969da; - outline: none; - box-shadow: inset 0 0 0 1px #0969da; + outline: 2px solid #0969da; + outline-offset: -1px; } .c0 > textarea { @@ -768,6 +774,7 @@ exports[`TextInput renders leadingVisual 1`] = ` -ms-flex-align: stretch; align-items: stretch; min-height: 32px; + overflow: hidden; } .c0 input, @@ -797,8 +804,8 @@ exports[`TextInput renders leadingVisual 1`] = ` .c0:focus-within { border-color: #0969da; - outline: none; - box-shadow: inset 0 0 0 1px #0969da; + outline: 2px solid #0969da; + outline-offset: -1px; } .c0 > textarea { @@ -916,6 +923,7 @@ exports[`TextInput renders leadingVisual 2`] = ` -ms-flex-align: stretch; align-items: stretch; min-height: 32px; + overflow: hidden; } .c0 input, @@ -945,8 +953,8 @@ exports[`TextInput renders leadingVisual 2`] = ` .c0:focus-within { border-color: #0969da; - outline: none; - box-shadow: inset 0 0 0 1px #0969da; + outline: 2px solid #0969da; + outline-offset: -1px; } .c0 > textarea { @@ -1064,6 +1072,7 @@ exports[`TextInput renders leadingVisual 3`] = ` -ms-flex-align: stretch; align-items: stretch; min-height: 32px; + overflow: hidden; } .c0 input, @@ -1093,8 +1102,8 @@ exports[`TextInput renders leadingVisual 3`] = ` .c0:focus-within { border-color: #0969da; - outline: none; - box-shadow: inset 0 0 0 1px #0969da; + outline: 2px solid #0969da; + outline-offset: -1px; } .c0 > textarea { @@ -1193,6 +1202,7 @@ exports[`TextInput renders leadingVisual 4`] = ` -ms-flex-align: stretch; align-items: stretch; min-height: 32px; + overflow: hidden; } .c0 input, @@ -1222,8 +1232,8 @@ exports[`TextInput renders leadingVisual 4`] = ` .c0:focus-within { border-color: #0969da; - outline: none; - box-shadow: inset 0 0 0 1px #0969da; + outline: 2px solid #0969da; + outline-offset: -1px; } .c0 > textarea { @@ -1322,6 +1332,7 @@ exports[`TextInput renders monospace 1`] = ` -ms-flex-align: stretch; align-items: stretch; min-height: 32px; + overflow: hidden; font-family: SFMono-Regular,Consolas,"Liberation Mono",Menlo,Courier,monospace; } @@ -1352,8 +1363,8 @@ exports[`TextInput renders monospace 1`] = ` .c0:focus-within { border-color: #0969da; - outline: none; - box-shadow: inset 0 0 0 1px #0969da; + outline: 2px solid #0969da; + outline-offset: -1px; } .c0 > textarea { @@ -1444,6 +1455,7 @@ exports[`TextInput renders placeholder 1`] = ` -ms-flex-align: stretch; align-items: stretch; min-height: 32px; + overflow: hidden; } .c0 input, @@ -1473,8 +1485,8 @@ exports[`TextInput renders placeholder 1`] = ` .c0:focus-within { border-color: #0969da; - outline: none; - box-shadow: inset 0 0 0 1px #0969da; + outline: 2px solid #0969da; + outline-offset: -1px; } .c0 > textarea { @@ -1566,6 +1578,7 @@ exports[`TextInput renders small 1`] = ` -ms-flex-align: stretch; align-items: stretch; min-height: 32px; + overflow: hidden; --inner-action-size: 20px; min-height: 28px; padding-left: 8px; @@ -1603,8 +1616,8 @@ exports[`TextInput renders small 1`] = ` .c0:focus-within { border-color: #0969da; - outline: none; - box-shadow: inset 0 0 0 1px #0969da; + outline: 2px solid #0969da; + outline-offset: -1px; } .c0 > textarea { @@ -1937,6 +1950,7 @@ exports[`TextInput renders trailingAction icon button 1`] = ` -ms-flex-align: stretch; align-items: stretch; min-height: 32px; + overflow: hidden; } .c0 input, @@ -2586,6 +2600,7 @@ exports[`TextInput renders trailingAction text button 1`] = ` -ms-flex-align: stretch; align-items: stretch; min-height: 32px; + overflow: hidden; } .c0 input, @@ -2990,6 +3005,7 @@ exports[`TextInput renders trailingAction text button with a tooltip 1`] = ` -ms-flex-align: stretch; align-items: stretch; min-height: 32px; + overflow: hidden; } .c0 input, @@ -3381,6 +3397,7 @@ exports[`TextInput renders trailingVisual 1`] = ` -ms-flex-align: stretch; align-items: stretch; min-height: 32px; + overflow: hidden; } .c0 input, @@ -3410,8 +3427,8 @@ exports[`TextInput renders trailingVisual 1`] = ` .c0:focus-within { border-color: #0969da; - outline: none; - box-shadow: inset 0 0 0 1px #0969da; + outline: 2px solid #0969da; + outline-offset: -1px; } .c0 > textarea { @@ -3529,6 +3546,7 @@ exports[`TextInput renders trailingVisual 2`] = ` -ms-flex-align: stretch; align-items: stretch; min-height: 32px; + overflow: hidden; } .c0 input, @@ -3558,8 +3576,8 @@ exports[`TextInput renders trailingVisual 2`] = ` .c0:focus-within { border-color: #0969da; - outline: none; - box-shadow: inset 0 0 0 1px #0969da; + outline: 2px solid #0969da; + outline-offset: -1px; } .c0 > textarea { @@ -3677,6 +3695,7 @@ exports[`TextInput renders trailingVisual 3`] = ` -ms-flex-align: stretch; align-items: stretch; min-height: 32px; + overflow: hidden; } .c0 input, @@ -3706,8 +3725,8 @@ exports[`TextInput renders trailingVisual 3`] = ` .c0:focus-within { border-color: #0969da; - outline: none; - box-shadow: inset 0 0 0 1px #0969da; + outline: 2px solid #0969da; + outline-offset: -1px; } .c0 > textarea { @@ -3806,6 +3825,7 @@ exports[`TextInput renders trailingVisual 4`] = ` -ms-flex-align: stretch; align-items: stretch; min-height: 32px; + overflow: hidden; } .c0 input, @@ -3835,8 +3855,8 @@ exports[`TextInput renders trailingVisual 4`] = ` .c0:focus-within { border-color: #0969da; - outline: none; - box-shadow: inset 0 0 0 1px #0969da; + outline: 2px solid #0969da; + outline-offset: -1px; } .c0 > textarea { @@ -3950,6 +3970,7 @@ exports[`TextInput renders with a loading indicator 1`] = ` -ms-flex-align: stretch; align-items: stretch; min-height: 32px; + overflow: hidden; } .c0 input, @@ -3979,8 +4000,8 @@ exports[`TextInput renders with a loading indicator 1`] = ` .c0:focus-within { border-color: #0969da; - outline: none; - box-shadow: inset 0 0 0 1px #0969da; + outline: 2px solid #0969da; + outline-offset: -1px; } .c0 > textarea { @@ -4133,6 +4154,7 @@ exports[`TextInput renders with a loading indicator 1`] = ` -ms-flex-align: stretch; align-items: stretch; min-height: 32px; + overflow: hidden; } .c0 input, @@ -4162,8 +4184,8 @@ exports[`TextInput renders with a loading indicator 1`] = ` .c0:focus-within { border-color: #0969da; - outline: none; - box-shadow: inset 0 0 0 1px #0969da; + outline: 2px solid #0969da; + outline-offset: -1px; } .c0 > textarea { @@ -4348,6 +4370,7 @@ exports[`TextInput renders with a loading indicator 1`] = ` -ms-flex-align: stretch; align-items: stretch; min-height: 32px; + overflow: hidden; } .c0 input, @@ -4377,8 +4400,8 @@ exports[`TextInput renders with a loading indicator 1`] = ` .c0:focus-within { border-color: #0969da; - outline: none; - box-shadow: inset 0 0 0 1px #0969da; + outline: 2px solid #0969da; + outline-offset: -1px; } .c0 > textarea { @@ -4540,6 +4563,7 @@ exports[`TextInput renders with a loading indicator 1`] = ` -ms-flex-align: stretch; align-items: stretch; min-height: 32px; + overflow: hidden; } .c0 input, @@ -4569,8 +4593,8 @@ exports[`TextInput renders with a loading indicator 1`] = ` .c0:focus-within { border-color: #0969da; - outline: none; - box-shadow: inset 0 0 0 1px #0969da; + outline: 2px solid #0969da; + outline-offset: -1px; } .c0 > textarea { @@ -4801,6 +4825,7 @@ exports[`TextInput renders with a loading indicator 1`] = ` -ms-flex-align: stretch; align-items: stretch; min-height: 32px; + overflow: hidden; } .c0 input, @@ -4830,8 +4855,8 @@ exports[`TextInput renders with a loading indicator 1`] = ` .c0:focus-within { border-color: #0969da; - outline: none; - box-shadow: inset 0 0 0 1px #0969da; + outline: 2px solid #0969da; + outline-offset: -1px; } .c0 > textarea { @@ -5062,6 +5087,7 @@ exports[`TextInput renders with a loading indicator 1`] = ` -ms-flex-align: stretch; align-items: stretch; min-height: 32px; + overflow: hidden; } .c0 input, @@ -5091,8 +5117,8 @@ exports[`TextInput renders with a loading indicator 1`] = ` .c0:focus-within { border-color: #0969da; - outline: none; - box-shadow: inset 0 0 0 1px #0969da; + outline: 2px solid #0969da; + outline-offset: -1px; } .c0 > textarea { @@ -5317,6 +5343,7 @@ exports[`TextInput renders with a loading indicator 1`] = ` -ms-flex-align: stretch; align-items: stretch; min-height: 32px; + overflow: hidden; } .c0 input, @@ -5346,8 +5373,8 @@ exports[`TextInput renders with a loading indicator 1`] = ` .c0:focus-within { border-color: #0969da; - outline: none; - box-shadow: inset 0 0 0 1px #0969da; + outline: 2px solid #0969da; + outline-offset: -1px; } .c0 > textarea { @@ -5540,6 +5567,7 @@ exports[`TextInput renders with a loading indicator 1`] = ` -ms-flex-align: stretch; align-items: stretch; min-height: 32px; + overflow: hidden; } .c0 input, @@ -5569,8 +5597,8 @@ exports[`TextInput renders with a loading indicator 1`] = ` .c0:focus-within { border-color: #0969da; - outline: none; - box-shadow: inset 0 0 0 1px #0969da; + outline: 2px solid #0969da; + outline-offset: -1px; } .c0 > textarea { @@ -5795,6 +5823,7 @@ exports[`TextInput renders with a loading indicator 1`] = ` -ms-flex-align: stretch; align-items: stretch; min-height: 32px; + overflow: hidden; } .c0 input, @@ -5824,8 +5853,8 @@ exports[`TextInput renders with a loading indicator 1`] = ` .c0:focus-within { border-color: #0969da; - outline: none; - box-shadow: inset 0 0 0 1px #0969da; + outline: 2px solid #0969da; + outline-offset: -1px; } .c0 > textarea { @@ -6027,6 +6056,7 @@ exports[`TextInput renders with a loading indicator 1`] = ` -ms-flex-align: stretch; align-items: stretch; min-height: 32px; + overflow: hidden; --inner-action-size: 20px; min-height: 28px; padding-left: 8px; @@ -6064,8 +6094,8 @@ exports[`TextInput renders with a loading indicator 1`] = ` .c0:focus-within { border-color: #0969da; - outline: none; - box-shadow: inset 0 0 0 1px #0969da; + outline: 2px solid #0969da; + outline-offset: -1px; } .c0 > textarea { @@ -6337,6 +6367,7 @@ exports[`TextInput renders with a loading indicator 1`] = ` -ms-flex-align: stretch; align-items: stretch; min-height: 32px; + overflow: hidden; } .c0 input, @@ -6366,8 +6397,8 @@ exports[`TextInput renders with a loading indicator 1`] = ` .c0:focus-within { border-color: #0969da; - outline: none; - box-shadow: inset 0 0 0 1px #0969da; + outline: 2px solid #0969da; + outline-offset: -1px; } .c0 > textarea { @@ -6638,6 +6669,7 @@ exports[`TextInput renders with a loading indicator 1`] = ` -ms-flex-align: stretch; align-items: stretch; min-height: 32px; + overflow: hidden; --inner-action-size: 28px; padding-left: 8px; padding-right: 8px; @@ -6673,8 +6705,8 @@ exports[`TextInput renders with a loading indicator 1`] = ` .c0:focus-within { border-color: #0969da; - outline: none; - box-shadow: inset 0 0 0 1px #0969da; + outline: 2px solid #0969da; + outline-offset: -1px; } .c0 > textarea { @@ -6912,6 +6944,7 @@ exports[`TextInput should render a password input 1`] = ` -ms-flex-align: stretch; align-items: stretch; min-height: 32px; + overflow: hidden; } .c0 input, @@ -6941,8 +6974,8 @@ exports[`TextInput should render a password input 1`] = ` .c0:focus-within { border-color: #0969da; - outline: none; - box-shadow: inset 0 0 0 1px #0969da; + outline: 2px solid #0969da; + outline-offset: -1px; } .c0 > textarea { diff --git a/src/__tests__/__snapshots__/TextInputWithTokens.test.tsx.snap b/src/__tests__/__snapshots__/TextInputWithTokens.test.tsx.snap index 613f21788ff..feaf7c79688 100644 --- a/src/__tests__/__snapshots__/TextInputWithTokens.test.tsx.snap +++ b/src/__tests__/__snapshots__/TextInputWithTokens.test.tsx.snap @@ -71,6 +71,7 @@ exports[`TextInputWithTokens renders a leadingVisual and trailingVisual 1`] = ` -ms-flex-align: stretch; align-items: stretch; min-height: 32px; + overflow: hidden; --inner-action-size: 24px; padding-left: 12px; padding-top: calc(12px / 2); @@ -104,8 +105,8 @@ exports[`TextInputWithTokens renders a leadingVisual and trailingVisual 1`] = ` .c0:focus-within { border-color: #0969da; - outline: none; - box-shadow: inset 0 0 0 1px #0969da; + outline: 2px solid #0969da; + outline-offset: -1px; } .c0 > textarea { @@ -851,6 +852,7 @@ exports[`TextInputWithTokens renders a truncated set of tokens 1`] = ` -ms-flex-align: stretch; align-items: stretch; min-height: 32px; + overflow: hidden; --inner-action-size: 24px; padding-left: 12px; padding-top: calc(12px / 2); @@ -884,8 +886,8 @@ exports[`TextInputWithTokens renders a truncated set of tokens 1`] = ` .c0:focus-within { border-color: #0969da; - outline: none; - box-shadow: inset 0 0 0 1px #0969da; + outline: 2px solid #0969da; + outline-offset: -1px; } .c0 > textarea { @@ -1263,6 +1265,7 @@ exports[`TextInputWithTokens renders as block layout 1`] = ` -ms-flex-align: stretch; align-items: stretch; min-height: 32px; + overflow: hidden; width: 100%; display: -webkit-box; display: -webkit-flex; @@ -1309,8 +1312,8 @@ exports[`TextInputWithTokens renders as block layout 1`] = ` .c0:focus-within { border-color: #0969da; - outline: none; - box-shadow: inset 0 0 0 1px #0969da; + outline: 2px solid #0969da; + outline-offset: -1px; } .c0 > textarea { @@ -1470,6 +1473,7 @@ exports[`TextInputWithTokens renders at a maximum height when specified 1`] = ` -ms-flex-align: stretch; align-items: stretch; min-height: 32px; + overflow: hidden; --inner-action-size: 24px; padding-left: 12px; padding-top: calc(12px / 2); @@ -1505,8 +1509,8 @@ exports[`TextInputWithTokens renders at a maximum height when specified 1`] = ` .c0:focus-within { border-color: #0969da; - outline: none; - box-shadow: inset 0 0 0 1px #0969da; + outline: 2px solid #0969da; + outline-offset: -1px; } .c0 > textarea { @@ -2197,6 +2201,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 1`] = ` -ms-flex-align: stretch; align-items: stretch; min-height: 32px; + overflow: hidden; --inner-action-size: 20px; min-height: 28px; padding-left: 8px; @@ -2237,8 +2242,8 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 1`] = ` .c0:focus-within { border-color: #0969da; - outline: none; - box-shadow: inset 0 0 0 1px #0969da; + outline: 2px solid #0969da; + outline-offset: -1px; } .c0 > textarea { @@ -2925,6 +2930,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 2`] = ` -ms-flex-align: stretch; align-items: stretch; min-height: 32px; + overflow: hidden; --inner-action-size: 20px; min-height: 28px; padding-left: 8px; @@ -2965,8 +2971,8 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 2`] = ` .c0:focus-within { border-color: #0969da; - outline: none; - box-shadow: inset 0 0 0 1px #0969da; + outline: 2px solid #0969da; + outline-offset: -1px; } .c0 > textarea { @@ -3653,6 +3659,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 3`] = ` -ms-flex-align: stretch; align-items: stretch; min-height: 32px; + overflow: hidden; --inner-action-size: 24px; padding-left: 12px; padding-top: calc(12px / 2); @@ -3686,8 +3693,8 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 3`] = ` .c0:focus-within { border-color: #0969da; - outline: none; - box-shadow: inset 0 0 0 1px #0969da; + outline: 2px solid #0969da; + outline-offset: -1px; } .c0 > textarea { @@ -4378,6 +4385,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 4`] = ` -ms-flex-align: stretch; align-items: stretch; min-height: 32px; + overflow: hidden; --inner-action-size: 24px; padding-left: 12px; padding-top: calc(12px / 2); @@ -4411,8 +4419,8 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 4`] = ` .c0:focus-within { border-color: #0969da; - outline: none; - box-shadow: inset 0 0 0 1px #0969da; + outline: 2px solid #0969da; + outline-offset: -1px; } .c0 > textarea { @@ -5105,6 +5113,7 @@ exports[`TextInputWithTokens renders tokens on a single line when specified 1`] -ms-flex-align: stretch; align-items: stretch; min-height: 32px; + overflow: hidden; --inner-action-size: 24px; padding-left: 12px; padding-top: calc(12px / 2); @@ -5139,8 +5148,8 @@ exports[`TextInputWithTokens renders tokens on a single line when specified 1`] .c0:focus-within { border-color: #0969da; - outline: none; - box-shadow: inset 0 0 0 1px #0969da; + outline: 2px solid #0969da; + outline-offset: -1px; } .c0 > textarea { @@ -5830,6 +5839,7 @@ exports[`TextInputWithTokens renders tokens without a remove button when specifi -ms-flex-align: stretch; align-items: stretch; min-height: 32px; + overflow: hidden; --inner-action-size: 24px; padding-left: 12px; padding-top: calc(12px / 2); @@ -5863,8 +5873,8 @@ exports[`TextInputWithTokens renders tokens without a remove button when specifi .c0:focus-within { border-color: #0969da; - outline: none; - box-shadow: inset 0 0 0 1px #0969da; + outline: 2px solid #0969da; + outline-offset: -1px; } .c0 > textarea { @@ -6278,6 +6288,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` -ms-flex-align: stretch; align-items: stretch; min-height: 32px; + overflow: hidden; --inner-action-size: 24px; padding-left: 12px; padding-top: calc(12px / 2); @@ -6311,8 +6322,8 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` .c0:focus-within { border-color: #0969da; - outline: none; - box-shadow: inset 0 0 0 1px #0969da; + outline: 2px solid #0969da; + outline-offset: -1px; } .c0 > textarea { @@ -7060,6 +7071,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` -ms-flex-align: stretch; align-items: stretch; min-height: 32px; + overflow: hidden; --inner-action-size: 24px; padding-left: 12px; padding-top: calc(12px / 2); @@ -7093,8 +7105,8 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` .c0:focus-within { border-color: #0969da; - outline: none; - box-shadow: inset 0 0 0 1px #0969da; + outline: 2px solid #0969da; + outline-offset: -1px; } .c0 > textarea { @@ -7874,6 +7886,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` -ms-flex-align: stretch; align-items: stretch; min-height: 32px; + overflow: hidden; --inner-action-size: 24px; padding-left: 12px; padding-top: calc(12px / 2); @@ -7907,8 +7920,8 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` .c0:focus-within { border-color: #0969da; - outline: none; - box-shadow: inset 0 0 0 1px #0969da; + outline: 2px solid #0969da; + outline-offset: -1px; } .c0 > textarea { @@ -8665,6 +8678,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` -ms-flex-align: stretch; align-items: stretch; min-height: 32px; + overflow: hidden; --inner-action-size: 24px; padding-left: 12px; padding-top: calc(12px / 2); @@ -8698,8 +8712,8 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` .c0:focus-within { border-color: #0969da; - outline: none; - box-shadow: inset 0 0 0 1px #0969da; + outline: 2px solid #0969da; + outline-offset: -1px; } .c0 > textarea { @@ -9525,6 +9539,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` -ms-flex-align: stretch; align-items: stretch; min-height: 32px; + overflow: hidden; --inner-action-size: 24px; padding-left: 12px; padding-top: calc(12px / 2); @@ -9558,8 +9573,8 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` .c0:focus-within { border-color: #0969da; - outline: none; - box-shadow: inset 0 0 0 1px #0969da; + outline: 2px solid #0969da; + outline-offset: -1px; } .c0 > textarea { @@ -10385,6 +10400,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` -ms-flex-align: stretch; align-items: stretch; min-height: 32px; + overflow: hidden; --inner-action-size: 24px; padding-left: 12px; padding-top: calc(12px / 2); @@ -10418,8 +10434,8 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` .c0:focus-within { border-color: #0969da; - outline: none; - box-shadow: inset 0 0 0 1px #0969da; + outline: 2px solid #0969da; + outline-offset: -1px; } .c0 > textarea { @@ -11239,6 +11255,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` -ms-flex-align: stretch; align-items: stretch; min-height: 32px; + overflow: hidden; --inner-action-size: 24px; padding-left: 12px; padding-top: calc(12px / 2); @@ -11272,8 +11289,8 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` .c0:focus-within { border-color: #0969da; - outline: none; - box-shadow: inset 0 0 0 1px #0969da; + outline: 2px solid #0969da; + outline-offset: -1px; } .c0 > textarea { @@ -12061,6 +12078,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` -ms-flex-align: stretch; align-items: stretch; min-height: 32px; + overflow: hidden; --inner-action-size: 24px; padding-left: 12px; padding-top: calc(12px / 2); @@ -12094,8 +12112,8 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` .c0:focus-within { border-color: #0969da; - outline: none; - box-shadow: inset 0 0 0 1px #0969da; + outline: 2px solid #0969da; + outline-offset: -1px; } .c0 > textarea { @@ -12915,6 +12933,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` -ms-flex-align: stretch; align-items: stretch; min-height: 32px; + overflow: hidden; --inner-action-size: 24px; padding-left: 12px; padding-top: calc(12px / 2); @@ -12948,8 +12967,8 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` .c0:focus-within { border-color: #0969da; - outline: none; - box-shadow: inset 0 0 0 1px #0969da; + outline: 2px solid #0969da; + outline-offset: -1px; } .c0 > textarea { @@ -13746,6 +13765,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` -ms-flex-align: stretch; align-items: stretch; min-height: 32px; + overflow: hidden; --inner-action-size: 20px; min-height: 28px; padding-left: 8px; @@ -13786,8 +13806,8 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` .c0:focus-within { border-color: #0969da; - outline: none; - box-shadow: inset 0 0 0 1px #0969da; + outline: 2px solid #0969da; + outline-offset: -1px; } .c0 > textarea { @@ -14651,6 +14671,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` -ms-flex-align: stretch; align-items: stretch; min-height: 32px; + overflow: hidden; --inner-action-size: 24px; padding-left: 12px; padding-top: calc(12px / 2); @@ -14684,8 +14705,8 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` .c0:focus-within { border-color: #0969da; - outline: none; - box-shadow: inset 0 0 0 1px #0969da; + outline: 2px solid #0969da; + outline-offset: -1px; } .c0 > textarea { @@ -15551,6 +15572,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` -ms-flex-align: stretch; align-items: stretch; min-height: 32px; + overflow: hidden; --inner-action-size: 24px; padding-left: 12px; padding-top: calc(12px / 2); @@ -15584,8 +15606,8 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` .c0:focus-within { border-color: #0969da; - outline: none; - box-shadow: inset 0 0 0 1px #0969da; + outline: 2px solid #0969da; + outline-offset: -1px; } .c0 > textarea { @@ -16415,6 +16437,7 @@ exports[`TextInputWithTokens renders with tokens 1`] = ` -ms-flex-align: stretch; align-items: stretch; min-height: 32px; + overflow: hidden; --inner-action-size: 24px; padding-left: 12px; padding-top: calc(12px / 2); @@ -16448,8 +16471,8 @@ exports[`TextInputWithTokens renders with tokens 1`] = ` .c0:focus-within { border-color: #0969da; - outline: none; - box-shadow: inset 0 0 0 1px #0969da; + outline: 2px solid #0969da; + outline-offset: -1px; } .c0 > textarea { @@ -17125,6 +17148,7 @@ exports[`TextInputWithTokens renders with tokens using a custom token component -ms-flex-align: stretch; align-items: stretch; min-height: 32px; + overflow: hidden; --inner-action-size: 24px; padding-left: 12px; padding-top: calc(12px / 2); @@ -17158,8 +17182,8 @@ exports[`TextInputWithTokens renders with tokens using a custom token component .c0:focus-within { border-color: #0969da; - outline: none; - box-shadow: inset 0 0 0 1px #0969da; + outline: 2px solid #0969da; + outline-offset: -1px; } .c0 > textarea { @@ -17807,6 +17831,7 @@ exports[`TextInputWithTokens renders without tokens 1`] = ` -ms-flex-align: stretch; align-items: stretch; min-height: 32px; + overflow: hidden; --inner-action-size: 24px; padding-left: 12px; padding-top: calc(12px / 2); @@ -17840,8 +17865,8 @@ exports[`TextInputWithTokens renders without tokens 1`] = ` .c0:focus-within { border-color: #0969da; - outline: none; - box-shadow: inset 0 0 0 1px #0969da; + outline: 2px solid #0969da; + outline-offset: -1px; } .c0 > textarea { diff --git a/src/__tests__/__snapshots__/Textarea.test.tsx.snap b/src/__tests__/__snapshots__/Textarea.test.tsx.snap index 991912f521a..db666d23df8 100644 --- a/src/__tests__/__snapshots__/Textarea.test.tsx.snap +++ b/src/__tests__/__snapshots__/Textarea.test.tsx.snap @@ -20,6 +20,7 @@ exports[`Textarea renders consistently 1`] = ` -ms-flex-align: stretch; align-items: stretch; min-height: 32px; + overflow: hidden; } .c0 input, @@ -49,8 +50,8 @@ exports[`Textarea renders consistently 1`] = ` .c0:focus-within { border-color: #0969da; - outline: none; - box-shadow: inset 0 0 0 1px #0969da; + outline: 2px solid #0969da; + outline-offset: -1px; } .c0 > textarea { diff --git a/src/drafts/MarkdownEditor/MarkdownEditor.tsx b/src/drafts/MarkdownEditor/MarkdownEditor.tsx index 03bcd6017b0..ad36ce2d674 100644 --- a/src/drafts/MarkdownEditor/MarkdownEditor.tsx +++ b/src/drafts/MarkdownEditor/MarkdownEditor.tsx @@ -405,6 +405,7 @@ const MarkdownEditor = forwardRef( ? { outline: '2px solid', outlineColor: 'accent.emphasis', + outlineOffset: '-1px', } : {}, ...sx, diff --git a/src/drafts/MarkdownEditor/_MarkdownInput.tsx b/src/drafts/MarkdownEditor/_MarkdownInput.tsx index e22a0858590..305fa9290e6 100644 --- a/src/drafts/MarkdownEditor/_MarkdownInput.tsx +++ b/src/drafts/MarkdownEditor/_MarkdownInput.tsx @@ -162,6 +162,7 @@ export const MarkdownInput = forwardRef display: visible ? undefined : 'none', '&: focus-within': { boxShadow: 'none', + outline: 'none', }, '& textarea': { lineHeight: 1.2, diff --git a/src/internal/components/TextInputWrapper.tsx b/src/internal/components/TextInputWrapper.tsx index 3d2be80211e..f79afeec918 100644 --- a/src/internal/components/TextInputWrapper.tsx +++ b/src/internal/components/TextInputWrapper.tsx @@ -76,16 +76,16 @@ const renderFocusStyles = (hasTrailingAction: boolean, isInputFocused: boolean) isInputFocused && css` border-color: ${get('colors.accent.fg')}; - outline: none; - box-shadow: inset 0 0 0 1px ${get('colors.accent.fg')}; + outline: 2px solid ${get('colors.accent.fg')}; + outline-offset: -1px; ` ) } return css` &:focus-within { border-color: ${get('colors.accent.fg')}; - outline: none; - box-shadow: inset 0 0 0 1px ${get('colors.accent.fg')}; + outline: 2px solid ${get('colors.accent.fg')}; + outline-offset: -1px; } ` } @@ -103,6 +103,7 @@ export const TextInputBaseWrapper = styled.span` display: inline-flex; align-items: stretch; min-height: 32px; + overflow: hidden; input, textarea { From 968d4ef05808005efde7de06ca480b4870179485 Mon Sep 17 00:00:00 2001 From: Josh Black Date: Mon, 4 Dec 2023 12:41:20 -0600 Subject: [PATCH 07/19] refactor(useId): update useId to use React.useId, update ssr utils (#3982) * chore(deps): remove @react-aria/ssr * refactor(useId): update useId to use native useId, update ssr utils * test: update snapshots * chore: add changeset * chore(eslint): update lint rules * chore: update type for SSRProvider --------- Co-authored-by: Josh Black --- .changeset/little-apples-own.md | 5 ++ .eslintrc.js | 5 -- package-lock.json | 23 +----- package.json | 1 - .../__snapshots__/NavList.test.tsx.snap | 78 +++++++++---------- .../__snapshots__/SelectPanel.test.tsx.snap | 2 +- .../__snapshots__/ActionMenu.test.tsx.snap | 2 +- .../AnchoredOverlay.test.tsx.snap | 4 +- .../__snapshots__/CheckboxGroup.test.tsx.snap | 12 +-- .../CheckboxOrRadioGroup.test.tsx.snap | 12 +-- .../__snapshots__/RadioGroup.test.tsx.snap | 12 +-- .../__snapshots__/ActionMenu.test.tsx.snap | 2 +- src/hooks/useId.ts | 38 +++------ src/utils/ssr.tsx | 10 ++- 14 files changed, 87 insertions(+), 119 deletions(-) create mode 100644 .changeset/little-apples-own.md diff --git a/.changeset/little-apples-own.md b/.changeset/little-apples-own.md new file mode 100644 index 00000000000..de440a51e52 --- /dev/null +++ b/.changeset/little-apples-own.md @@ -0,0 +1,5 @@ +--- +'@primer/react': minor +--- + +Update SSRProvider, useSSRSafeId to use the native React 18 useId() instead of @react-aria/ssr diff --git a/.eslintrc.js b/.eslintrc.js index b8784d93e39..7c5cb359fcb 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -138,11 +138,6 @@ module.exports = { 'error', { paths: [ - { - name: '@react-aria/ssr', - importNames: ['useSSRSafeId'], - message: 'Please use the `useId` hook from `src/hooks/useId.ts` instead', - }, { name: 'react', importNames: ['useLayoutEffect'], diff --git a/package-lock.json b/package-lock.json index 4dca1246331..f690e86a6eb 100644 --- a/package-lock.json +++ b/package-lock.json @@ -18,7 +18,6 @@ "@primer/behaviors": "^1.5.1", "@primer/octicons-react": "^19.8.0", "@primer/primitives": "^7.11.11", - "@react-aria/ssr": "^3.5.0", "@styled-system/css": "^5.1.5", "@styled-system/props": "^5.1.5", "@styled-system/theme-get": "^5.1.2", @@ -6717,17 +6716,6 @@ "@babel/runtime": "^7.13.10" } }, - "node_modules/@react-aria/ssr": { - "version": "3.5.0", - "resolved": "https://registry.npmjs.org/@react-aria/ssr/-/ssr-3.5.0.tgz", - "integrity": "sha512-h0MJdSWOd1qObLnJ8mprU31wI8tmKFJMuwT22MpWq6psisOOZaga6Ml4u6Ee6M6duWWISjXvqO4Sb/J0PBA+nQ==", - "dependencies": { - "@swc/helpers": "^0.4.14" - }, - "peerDependencies": { - "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0" - } - }, "node_modules/@react-dnd/asap": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/@react-dnd/asap/-/asap-4.0.0.tgz", @@ -13234,14 +13222,6 @@ "node": ">=10" } }, - "node_modules/@swc/helpers": { - "version": "0.4.14", - "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.4.14.tgz", - "integrity": "sha512-4C7nX/dvpzB7za4Ql9K81xK3HPxCpHMgwTZVyf+9JQ6VUbn9jjZVN7/Nkdz/Ugzs2CSjqnL/UPXroiVBVHUWUw==", - "dependencies": { - "tslib": "^2.4.0" - } - }, "node_modules/@testing-library/dom": { "version": "9.3.1", "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-9.3.1.tgz", @@ -40099,7 +40079,8 @@ "node_modules/tslib": { "version": "2.6.2", "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz", - "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==" + "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==", + "dev": true }, "node_modules/tsutils": { "version": "3.21.0", diff --git a/package.json b/package.json index ac4bf363cd4..46e2f4c4463 100644 --- a/package.json +++ b/package.json @@ -103,7 +103,6 @@ "@primer/behaviors": "^1.5.1", "@primer/octicons-react": "^19.8.0", "@primer/primitives": "^7.11.11", - "@react-aria/ssr": "^3.5.0", "@styled-system/css": "^5.1.5", "@styled-system/props": "^5.1.5", "@styled-system/theme-get": "^5.1.2", diff --git a/src/NavList/__snapshots__/NavList.test.tsx.snap b/src/NavList/__snapshots__/NavList.test.tsx.snap index fbbcd726f81..c9d6cf86b56 100644 --- a/src/NavList/__snapshots__/NavList.test.tsx.snap +++ b/src/NavList/__snapshots__/NavList.test.tsx.snap @@ -313,10 +313,10 @@ exports[`NavList renders a simple list 1`] = ` >
Home @@ -336,10 +336,10 @@ exports[`NavList renders a simple list 1`] = ` class="c1 c7" >
About @@ -359,10 +359,10 @@ exports[`NavList renders a simple list 1`] = ` class="c1 c7" >
Contact @@ -738,12 +738,12 @@ exports[`NavList renders with groups 1`] = ` >

Overview

  • Getting started @@ -782,22 +782,22 @@ exports[`NavList renders with groups 1`] = ` >

    Components

    • Avatar @@ -1190,15 +1190,15 @@ exports[`NavList.Item with NavList.SubNav does not have active styles if SubNav class="c0" >
      • Sub Item @@ -1673,15 +1673,15 @@ exports[`NavList.Item with NavList.SubNav has active styles if SubNav contains t class="c0" >
        • Sub Item diff --git a/src/SelectPanel/__snapshots__/SelectPanel.test.tsx.snap b/src/SelectPanel/__snapshots__/SelectPanel.test.tsx.snap index 7d696d62efc..a1682f981cd 100644 --- a/src/SelectPanel/__snapshots__/SelectPanel.test.tsx.snap +++ b/src/SelectPanel/__snapshots__/SelectPanel.test.tsx.snap @@ -248,7 +248,7 @@ exports[`SelectPanel renders consistently 1`] = ` aria-haspopup="true" className="c1" data-block={null} - id="react-aria-3" + id=":r2:" onClick={[Function]} onKeyDown={[Function]} style={{}} diff --git a/src/__tests__/__snapshots__/ActionMenu.test.tsx.snap b/src/__tests__/__snapshots__/ActionMenu.test.tsx.snap index 0893c7502ea..5f5cd763cca 100644 --- a/src/__tests__/__snapshots__/ActionMenu.test.tsx.snap +++ b/src/__tests__/__snapshots__/ActionMenu.test.tsx.snap @@ -248,7 +248,7 @@ exports[`ActionMenu renders consistently 1`] = ` aria-haspopup="true" className="c1" data-block={null} - id="react-aria-1" + id=":r0:" onClick={[Function]} onKeyDown={[Function]} style={{}} diff --git a/src/__tests__/__snapshots__/AnchoredOverlay.test.tsx.snap b/src/__tests__/__snapshots__/AnchoredOverlay.test.tsx.snap index 8196646c9ce..39e09045a50 100644 --- a/src/__tests__/__snapshots__/AnchoredOverlay.test.tsx.snap +++ b/src/__tests__/__snapshots__/AnchoredOverlay.test.tsx.snap @@ -86,7 +86,7 @@ exports[`AnchoredOverlay renders consistently 1`] = ` - )} - placeholderText="Filter Labels" - open={open} - onOpenChange={setOpen} - items={filteredItems} - selected={selected} - onSelectedChange={setSelected} - onFilterChange={setFilter} - showItemDividers={true} - overlayProps={{width: 'small', height: 'xsmall'}} - /> - - ) -} -SingleSelectStory.storyName = 'Single Select' - -export const ExternalAnchorStory = () => { - const [selected, setSelected] = React.useState(items[0]) - const [filter, setFilter] = React.useState('') - const filteredItems = items.filter(item => item.text.toLowerCase().startsWith(filter.toLowerCase())) - const [open, setOpen] = useState(false) - const buttonRef = useRef(null) - - return ( - <> -

          Select Panel With External Anchor

          - - - - ) -} -ExternalAnchorStory.storyName = 'With External Anchor' - -export const SelectPanelHeightInitialWithOverflowingItemsStory = () => { - const [selected, setSelected] = React.useState(items[0]) - const [filter, setFilter] = React.useState('') - const filteredItems = items.filter(item => item.text.toLowerCase().startsWith(filter.toLowerCase())) - const [open, setOpen] = useState(false) - - return ( - <> -

          Single Select Panel

          -
          Please select a label that describe your issue:
          - ( - - )} - placeholderText="Filter Labels" - open={open} - onOpenChange={setOpen} - items={filteredItems} - selected={selected} - onSelectedChange={setSelected} - onFilterChange={setFilter} - showItemDividers={true} - overlayProps={{width: 'small', height: 'initial', maxHeight: 'xsmall'}} - /> - - ) -} -SelectPanelHeightInitialWithOverflowingItemsStory.storyName = 'SelectPanel, Height: Initial, Overflowing Items' - -export const SelectPanelHeightInitialWithUnderflowingItemsStory = () => { - const underflowingItems = [items[0], items[1]] - const [selected, setSelected] = React.useState(underflowingItems[0]) - const [filter, setFilter] = React.useState('') - const filteredItems = underflowingItems.filter(item => item.text.toLowerCase().startsWith(filter.toLowerCase())) - const [open, setOpen] = useState(false) - - return ( - <> -

          Single Select Panel

          -
          Please select a label that describe your issue:
          - ( - - )} - placeholderText="Filter Labels" - open={open} - onOpenChange={setOpen} - items={filteredItems} - selected={selected} - onSelectedChange={setSelected} - onFilterChange={setFilter} - showItemDividers={true} - overlayProps={{width: 'small', height: 'initial', maxHeight: 'xsmall'}} - /> - - ) -} -SelectPanelHeightInitialWithUnderflowingItemsStory.storyName = 'SelectPanel, Height: Initial, Underflowing Items' - -export const SelectPanelHeightInitialWithUnderflowingItemsAfterFetch = () => { - const [selected, setSelected] = React.useState(items[0]) - const [filter, setFilter] = React.useState('') - const [fetchedItems, setFetchedItems] = useState([]) - const filteredItems = React.useMemo( - () => fetchedItems.filter(item => item.text.toLowerCase().startsWith(filter.toLowerCase())), - [fetchedItems, filter], - ) - const [open, setOpen] = useState(false) - const [height, setHeight] = useState('auto') - - const onOpenChange = () => { - setOpen(!open) - setTimeout(() => { - setFetchedItems([items[0], items[1]]) - setHeight('initial') - }, 1500) - } - - return ( - <> -

          Single Select Panel

          -
          Please select a label that describe your issue:
          - ( - - )} - placeholderText="Filter Labels" - open={open} - onOpenChange={onOpenChange} - loading={filteredItems.length === 0} - items={filteredItems} - selected={selected} - onSelectedChange={setSelected} - onFilterChange={setFilter} - showItemDividers={true} - overlayProps={{width: 'small', height, maxHeight: 'xsmall'}} - /> - - ) -} -SelectPanelHeightInitialWithUnderflowingItemsAfterFetch.storyName = - 'SelectPanel, Height: Initial, Underflowing Items (After Fetch)' - -export const SelectPanelAboveTallBody = () => { - const [selected, setSelected] = React.useState(items[0]) - const [filter, setFilter] = React.useState('') - const filteredItems = items.filter(item => item.text.toLowerCase().startsWith(filter.toLowerCase())) - const [open, setOpen] = useState(false) - - return ( - <> -

          Single Select Panel

          -
          Please select a label that describe your issue:
          - ( - - )} - placeholderText="Filter Labels" - open={open} - onOpenChange={setOpen} - items={filteredItems} - selected={selected} - onSelectedChange={setSelected} - onFilterChange={setFilter} - showItemDividers={true} - overlayProps={{width: 'small', height: 'xsmall'}} - /> -
          - This element makes the body really tall. This is to test that we do not have layout/focus issues if the Portal - is far down the page -
          - - ) -} -SelectPanelAboveTallBody.storyName = 'SelectPanel, Above a Tall Body' - -export const SelectPanelHeightAndScroll = () => { - const longItems = [...items, ...items, ...items, ...items, ...items, ...items, ...items, ...items] - const [selectedA, setSelectedA] = React.useState(longItems[0]) - const [selectedB, setSelectedB] = React.useState(longItems[0]) - const [filter, setFilter] = React.useState('') - const filteredItems = longItems.filter(item => item.text.toLowerCase().startsWith(filter.toLowerCase())) - const [openA, setOpenA] = useState(false) - const [openB, setOpenB] = useState(false) - - return ( - <> -

          With height:medium

          - ( - - )} - placeholderText="Filter Labels" - open={openA} - onOpenChange={setOpenA} - items={filteredItems} - selected={selectedA} - onSelectedChange={setSelectedA} - onFilterChange={setFilter} - showItemDividers={true} - overlayProps={{height: 'medium'}} - /> -

          With height:auto, maxheight:medium

          - ( - - )} - placeholderText="Filter Labels" - open={openB} - onOpenChange={setOpenB} - items={filteredItems} - selected={selectedB} - onSelectedChange={setSelectedB} - onFilterChange={setFilter} - showItemDividers={true} - overlayProps={{ - height: 'auto', - maxHeight: 'medium', - }} - /> - - ) -} -SelectPanelHeightAndScroll.storyName = 'SelectPanel, Height and Scroll' diff --git a/src/drafts/SelectPanel2/stories/SelectPanel.default.stories.tsx b/src/drafts/SelectPanel2/stories/SelectPanel.default.stories.tsx new file mode 100644 index 00000000000..923ffb5ad53 --- /dev/null +++ b/src/drafts/SelectPanel2/stories/SelectPanel.default.stories.tsx @@ -0,0 +1,111 @@ +import React from 'react' +import {SelectPanel} from '../SelectPanel' +import {ActionList, Box} from '../../../index' +import data from './mock-data' + +export default { + title: 'Drafts/Components/SelectPanel', + component: SelectPanel, +} + +export const Default = () => { + const initialSelectedLabels = data.issue.labelIds // mock initial state: has selected labels + const [selectedLabelIds, setSelectedLabelIds] = React.useState(initialSelectedLabels) + + /* Selection */ + const onLabelSelect = (labelId: string) => { + if (!selectedLabelIds.includes(labelId)) setSelectedLabelIds([...selectedLabelIds, labelId]) + else setSelectedLabelIds(selectedLabelIds.filter(id => id !== labelId)) + } + const onClearSelection = () => { + setSelectedLabelIds([]) + } + + const onSubmit = () => { + data.issue.labelIds = selectedLabelIds // pretending to persist changes + } + + /* Filtering */ + const [filteredLabels, setFilteredLabels] = React.useState(data.labels) + const [query, setQuery] = React.useState('') + + const onSearchInputChange: React.ChangeEventHandler = event => { + const query = event.currentTarget.value + setQuery(query) + + if (query === '') setFilteredLabels(data.labels) + else { + setFilteredLabels( + data.labels + .map(label => { + if (label.name.toLowerCase().startsWith(query)) return {priority: 1, label} + else if (label.name.toLowerCase().includes(query)) return {priority: 2, label} + else if (label.description?.toLowerCase().includes(query)) return {priority: 3, label} + else return {priority: -1, label} + }) + .filter(result => result.priority > 0) + .map(result => result.label), + ) + } + } + + const sortingFn = (itemA: {id: string}, itemB: {id: string}) => { + const initialSelectedIds = data.issue.labelIds + if (initialSelectedIds.includes(itemA.id) && initialSelectedIds.includes(itemB.id)) return 1 + else if (initialSelectedIds.includes(itemA.id)) return -1 + else if (initialSelectedIds.includes(itemB.id)) return 1 + else return 1 + } + + const itemsToShow = query ? filteredLabels : data.labels.sort(sortingFn) + + return ( + <> + { + /* optional callback, for example: for multi-step overlay or to fire sync actions */ + // eslint-disable-next-line no-console + console.log('panel was closed') + }} + onClearSelection={onClearSelection} + > + Assign label + + + + + + {itemsToShow.length === 0 ? ( + + Try a different search term + + ) : ( + + {itemsToShow.map(label => ( + onLabelSelect(label.id)} + selected={selectedLabelIds.includes(label.id)} + > + + + + {label.name} + {label.description} + + ))} + + )} + + + Edit labels + + + + ) +} diff --git a/src/drafts/SelectPanel2/SelectPanel.stories.tsx b/src/drafts/SelectPanel2/stories/SelectPanel.examples.stories.tsx similarity index 53% rename from src/drafts/SelectPanel2/SelectPanel.stories.tsx rename to src/drafts/SelectPanel2/stories/SelectPanel.examples.stories.tsx index b4dd23b130f..81698bdb900 100644 --- a/src/drafts/SelectPanel2/SelectPanel.stories.tsx +++ b/src/drafts/SelectPanel2/stories/SelectPanel.examples.stories.tsx @@ -1,22 +1,19 @@ import React from 'react' -import {SelectPanel} from './SelectPanel' -import {ActionList, ActionMenu, Avatar, Box, Button, Flash, Link, Text, ToggleSwitch} from '../../../src/index' -import { - ArrowRightIcon, - AlertIcon, - EyeIcon, - GitBranchIcon, - TriangleDownIcon, - TagIcon, - GearIcon, -} from '@primer/octicons-react' +import {SelectPanel} from '../SelectPanel' +import {ActionList, ActionMenu, Avatar, Box, Button, Flash} from '../../../index' +import {ArrowRightIcon, AlertIcon, EyeIcon, GitBranchIcon, TriangleDownIcon, GearIcon} from '@primer/octicons-react' import data from './mock-data' +export default { + title: 'Drafts/Components/SelectPanel/Examples', + component: SelectPanel, +} + const getCircle = (color: string) => ( ) -export const AControlled = () => { +export const Minimal = () => { const initialSelectedLabels = data.issue.labelIds // mock initial state: has selected labels const [selectedLabelIds, setSelectedLabelIds] = React.useState(initialSelectedLabels) @@ -26,11 +23,6 @@ export const AControlled = () => { else setSelectedLabelIds(selectedLabelIds.filter(id => id !== labelId)) } - const onClearSelection = () => { - // soft set, does not save until submit - setSelectedLabelIds([]) - } - const onSubmit = () => { data.issue.labelIds = selectedLabelIds // pretending to persist changes @@ -38,62 +30,104 @@ export const AControlled = () => { console.log('form submitted') } + const sortingFn = (itemA: {id: string}, itemB: {id: string}) => { + const initialSelectedIds = data.issue.labelIds + if (initialSelectedIds.includes(itemA.id) && initialSelectedIds.includes(itemB.id)) return 1 + else if (initialSelectedIds.includes(itemA.id)) return -1 + else if (initialSelectedIds.includes(itemB.id)) return 1 + else return 1 + } + + const itemsToShow = data.labels.sort(sortingFn) + + return ( + <> +

          Minimal SelectPanel

          + + + Assign label + + + {itemsToShow.map(label => ( + onLabelSelect(label.id)} + selected={selectedLabelIds.includes(label.id)} + > + {getCircle(label.color)} + {label.name} + {label.description} + + ))} + + + + + ) +} + +export const WithGroups = () => { + /* Selection */ + const initialAssigneeIds = data.issue.assigneeIds // mock initial state + const [selectedAssigneeIds, setSelectedAssigneeIds] = React.useState(initialAssigneeIds) + + const onCollaboratorSelect = (colloratorId: string) => { + if (!selectedAssigneeIds.includes(colloratorId)) setSelectedAssigneeIds([...selectedAssigneeIds, colloratorId]) + else setSelectedAssigneeIds(selectedAssigneeIds.filter(id => id !== colloratorId)) + } + + const onClearSelection = () => setSelectedAssigneeIds([]) + const onSubmit = () => { + data.issue.assigneeIds = selectedAssigneeIds // pretending to persist changes + } + /* Filtering */ - const [filteredLabels, setFilteredLabels] = React.useState(data.labels) + const [filteredUsers, setFilteredUsers] = React.useState(data.collaborators) const [query, setQuery] = React.useState('') const onSearchInputChange: React.ChangeEventHandler = event => { const query = event.currentTarget.value setQuery(query) - if (query === '') setFilteredLabels(data.labels) + if (query === '') setFilteredUsers(data.collaborators) else { - // Note: in the future, we should probably add a highlight for matching text - setFilteredLabels( - data.labels - .map(label => { - if (label.name.toLowerCase().startsWith(query)) return {priority: 1, label} - else if (label.name.toLowerCase().includes(query)) return {priority: 2, label} - else if (label.description?.toLowerCase().includes(query)) return {priority: 3, label} - else return {priority: -1, label} + setFilteredUsers( + data.collaborators + .map(collaborator => { + if (collaborator.login.toLowerCase().startsWith(query)) return {priority: 1, collaborator} + else if (collaborator.name.startsWith(query)) return {priority: 2, collaborator} + else if (collaborator.login.toLowerCase().includes(query)) return {priority: 3, collaborator} + else if (collaborator.name.toLowerCase().includes(query)) return {priority: 4, collaborator} + else return {priority: -1, collaborator} }) .filter(result => result.priority > 0) - .map(result => result.label), + .map(result => result.collaborator), ) } } const sortingFn = (itemA: {id: string}, itemB: {id: string}) => { - const initialSelectedIds = data.issue.labelIds + const initialSelectedIds = data.issue.assigneeIds if (initialSelectedIds.includes(itemA.id) && initialSelectedIds.includes(itemB.id)) return 1 else if (initialSelectedIds.includes(itemA.id)) return -1 else if (initialSelectedIds.includes(itemB.id)) return 1 else return 1 } - const itemsToShow = query ? filteredLabels : data.labels.sort(sortingFn) + const itemsToShow = query ? filteredUsers : data.collaborators.sort(sortingFn) return ( <> -

          Controlled SelectPanel

          +

          SelectPanel with groups

          - { - /* optional callback, for example: for multi-step overlay or to fire sync actions */ - // eslint-disable-next-line no-console - console.log('panel was closed') - }} - // API TODO: onClearSelection feels even more odd on the parent, instead of on the header. - onClearSelection={onClearSelection} - > - Assign label - {/* API TODO: header and heading is confusing. maybe skip header completely. */} + + + Reviewers + @@ -104,29 +138,52 @@ export const AControlled = () => { ) : ( - {itemsToShow.map(label => ( - onLabelSelect(label.id)} - selected={selectedLabelIds.includes(label.id)} - > - {getCircle(label.color)} - {label.name} - {label.description} - - ))} + + Suggestions + {itemsToShow + .filter(collaborator => collaborator.recommended) + .map(collaborator => ( + onCollaboratorSelect(collaborator.id)} + selected={selectedAssigneeIds.includes(collaborator.id)} + > + + + + {collaborator.login} + {collaborator.login} + + ))} + + + Everyone else + {itemsToShow + .filter(collaborator => !collaborator.recommended) + .map(collaborator => ( + onCollaboratorSelect(collaborator.id)} + selected={selectedAssigneeIds.includes(collaborator.id)} + > + + + + {collaborator.login} + {collaborator.login} + + ))} + )} - - Edit labels - + ) } -export const BWithSuspendedList = () => { +export const AsyncWithSuspendedList = () => { const [query, setQuery] = React.useState('') const onSearchInputChange: React.ChangeEventHandler = event => { @@ -136,7 +193,7 @@ export const BWithSuspendedList = () => { return ( <> -

          Suspended list

          +

          Async: Suspended list

          Fetching items once when the panel is opened (like repo labels)

          Assign label @@ -210,59 +267,6 @@ const SuspendedActionList: React.FC<{query: string}> = ({query}) => { ) } -export const CAsyncSearchWithSuspenseKey = () => { - // issue `data` is already pre-fetched - // `users` are fetched async on search - - const [query, setQuery] = React.useState('') - const onSearchInputChange: React.ChangeEventHandler = event => { - const query = event.currentTarget.value - setQuery(query) - } - - /* Selection */ - const initialAssigneeIds: string[] = data.issue.assigneeIds - const [selectedUserIds, setSelectedUserIds] = React.useState(initialAssigneeIds) - const onUserSelect = (userId: string) => { - if (!selectedUserIds.includes(userId)) setSelectedUserIds([...selectedUserIds, userId]) - else setSelectedUserIds(selectedUserIds.filter(id => id !== userId)) - } - - const onSubmit = () => { - data.issue.assigneeIds = selectedUserIds // pretending to persist changes - - // eslint-disable-next-line no-console - console.log('form submitted') - } - - return ( - <> -

          Async search with useTransition

          -

          Fetching items on every keystroke search (like github users)

          - - - Select assignees - - - - - {/* Reset suspense boundary to trigger refetch on query - Docs reference: https://react.dev/reference/react/Suspense#resetting-suspense-boundaries-on-navigation - */} - Fetching users...}> - - - - - - ) -} - /* `data` is already pre-fetched with the issue `users` are fetched async on search @@ -316,7 +320,7 @@ const SearchableUserList: React.FC<{ `data` is already pre-fetched with the issue `users` are fetched async on search */ -export const DAsyncSearchWithUseTransition = () => { +export const AsyncSearchWithUseTransition = () => { const [isPending, startTransition] = React.useTransition() const [query, setQuery] = React.useState('') @@ -341,315 +345,65 @@ export const DAsyncSearchWithUseTransition = () => { return ( <> -

          Async search with useTransition

          +

          Async: search with useTransition

          Fetching items on every keystroke search (like github users)

          - + Select assignees - + - Fetching users...}> - - - + + ) } -export const TODO2SingleSelection = () =>

          TODO

          - -export const HWithFilterButtons = () => { - const [selectedFilter, setSelectedFilter] = React.useState<'branches' | 'tags'>('branches') +export const OpenFromMenu = () => { + /* Open state */ + const [menuOpen, setMenuOpen] = React.useState(false) + const [selectPanelOpen, setSelectPanelOpen] = React.useState(false) + const buttonRef = React.useRef(null) /* Selection */ - const [savedInitialRef, setSavedInitialRef] = React.useState(data.ref) - const [selectedRef, setSelectedRef] = React.useState(savedInitialRef) - - const onSubmit = () => { - setSavedInitialRef(selectedRef) - data.ref = selectedRef // pretending to persist changes - - // eslint-disable-next-line no-console - console.log('form submitted') - } - - /* Filter */ - const [query, setQuery] = React.useState('') - const onSearchInputChange: React.ChangeEventHandler = event => { - const query = event.currentTarget.value - setQuery(query) - } + const [selectedSetting, setSelectedSetting] = React.useState('All activity') + const [selectedEvents, setSelectedEvents] = React.useState([]) - const [filteredRefs, setFilteredRefs] = React.useState(data.branches) - const setSearchResults = (query: string, selectedFilter: 'branches' | 'tags') => { - if (query === '') setFilteredRefs(data[selectedFilter]) - else { - setFilteredRefs( - data[selectedFilter] - .map(item => { - if (item.name.toLowerCase().startsWith(query)) return {priority: 1, item} - else if (item.name.toLowerCase().includes(query)) return {priority: 2, item} - else return {priority: -1, item} - }) - .filter(result => result.priority > 0) - .map(result => result.item), - ) - } + const onEventSelect = (event: string) => { + if (!selectedEvents.includes(event)) setSelectedEvents([...selectedEvents, event]) + else setSelectedEvents(selectedEvents.filter(name => name !== event)) } - React.useEffect( - function updateSearchResults() { - setSearchResults(query, selectedFilter) - }, - [query, selectedFilter], - ) - - const sortingFn = (ref: {id: string}) => { - if (ref.id === savedInitialRef) return -1 - else return 1 + const onSelectPanelSubmit = () => { + setSelectedSetting('Custom') } - const itemsToShow = query ? filteredRefs : data[selectedFilter].sort(sortingFn) + const itemsToShow = ['Issues', 'Pull requests', 'Releases', 'Discussions', 'Security alerts'] return ( <> -

          With Filter Buttons

          - - - - {savedInitialRef} - - - - - - - - - - - - {itemsToShow.length === 0 ? ( - - Try a different search term - - ) : ( - - {itemsToShow.map(item => ( - setSelectedRef(item.id)} - > - {item.name} - {item.trailingInfo} - - ))} - - )} - - - {/* @ts-ignore TODO as prop is not identified by button? */} - - View all {selectedFilter} - - - - - ) -} - -export const EMinimal = () => { - const initialSelectedLabels = data.issue.labelIds // mock initial state: has selected labels - const [selectedLabelIds, setSelectedLabelIds] = React.useState(initialSelectedLabels) - - /* Selection */ - const onLabelSelect = (labelId: string) => { - if (!selectedLabelIds.includes(labelId)) setSelectedLabelIds([...selectedLabelIds, labelId]) - else setSelectedLabelIds(selectedLabelIds.filter(id => id !== labelId)) - } - - const onSubmit = () => { - data.issue.labelIds = selectedLabelIds // pretending to persist changes - - // eslint-disable-next-line no-console - console.log('form submitted') - } - - const sortingFn = (itemA: {id: string}, itemB: {id: string}) => { - const initialSelectedIds = data.issue.labelIds - if (initialSelectedIds.includes(itemA.id) && initialSelectedIds.includes(itemB.id)) return 1 - else if (initialSelectedIds.includes(itemA.id)) return -1 - else if (initialSelectedIds.includes(itemB.id)) return 1 - else return 1 - } - - const itemsToShow = data.labels.sort(sortingFn) - - return ( - <> -

          Minimal SelectPanel

          - - - Assign label - - - {itemsToShow.map(label => ( - onLabelSelect(label.id)} - selected={selectedLabelIds.includes(label.id)} - > - {getCircle(label.color)} - {label.name} - {label.description} - - ))} - - - - - ) -} - -export const FExternalAnchor = () => { - const initialSelectedLabels = data.issue.labelIds // mock initial state: has selected labels - const [selectedLabelIds, setSelectedLabelIds] = React.useState(initialSelectedLabels) - - /* Selection */ - const onLabelSelect = (labelId: string) => { - if (!selectedLabelIds.includes(labelId)) setSelectedLabelIds([...selectedLabelIds, labelId]) - else setSelectedLabelIds(selectedLabelIds.filter(id => id !== labelId)) - } - - const onSubmit = () => { - data.issue.labelIds = selectedLabelIds // pretending to persist changes - - // eslint-disable-next-line no-console - console.log('form submitted') - } - - const sortingFn = (itemA: {id: string}, itemB: {id: string}) => { - const initialSelectedIds = data.issue.labelIds - if (initialSelectedIds.includes(itemA.id) && initialSelectedIds.includes(itemB.id)) return 1 - else if (initialSelectedIds.includes(itemA.id)) return -1 - else if (initialSelectedIds.includes(itemB.id)) return 1 - else return 1 - } - - const itemsToShow = data.labels.sort(sortingFn) - - const anchorRef = React.useRef(null) - const [open, setOpen] = React.useState(false) - - return ( - <> -

          With External Anchor

          -

          - To use an external anchor, pass an `anchorRef` to `SelectPanel`. You would also need to control the `open` state - with `onSubmit` and `onCancel` -

          - - - - { - setOpen(false) // close on submit - onSubmit() - }} - onCancel={() => setOpen(false)} // close on cancel - > - - {itemsToShow.map(label => ( - onLabelSelect(label.id)} - selected={selectedLabelIds.includes(label.id)} - > - {getCircle(label.color)} - {label.name} - {label.description} - - ))} - - - - - ) -} - -export const GOpenFromMenu = () => { - /* Open state */ - const [menuOpen, setMenuOpen] = React.useState(false) - const [selectPanelOpen, setSelectPanelOpen] = React.useState(false) - const buttonRef = React.useRef(null) - - /* Selection */ - const [selectedSetting, setSelectedSetting] = React.useState('All activity') - const [selectedEvents, setSelectedEvents] = React.useState([]) - - const onEventSelect = (event: string) => { - if (!selectedEvents.includes(event)) setSelectedEvents([...selectedEvents, event]) - else setSelectedEvents(selectedEvents.filter(name => name !== event)) - } - - const onSelectPanelSubmit = () => { - setSelectedSetting('Custom') - } - - const itemsToShow = ['Issues', 'Pull requests', 'Releases', 'Discussions', 'Security alerts'] - - return ( - <> -

          Open from ActionMenu

          - - - This implementation will most likely change.{' '} - - See decision log for more details. - - -

          - To open SelectPanel from a menu, you would need to use an external anchor and pass `anchorRef` to `SelectPanel`. - You would also need to control the `open` state for both ActionMenu and SelectPanel. -
          -
          - Important: Pass the same `anchorRef` to both ActionMenu and SelectPanel -

          +

          Open from ActionMenu

          + + + This implementation will most likely change.{' '} + + See decision log for more details. + + +

          + To open SelectPanel from a menu, you would need to use an external anchor and pass `anchorRef` to `SelectPanel`. + You would also need to control the `open` state for both ActionMenu and SelectPanel. +
          +
          + Important: Pass the same `anchorRef` to both ActionMenu and SelectPanel +

          + +           + {itemsToShow.length === 0 ? ( Try a different search term ) : ( - - {itemsToShow.map(collaborator => ( + + {itemsToShow.map(item => ( onCollaboratorSelect(collaborator.id)} - selected={selectedAssigneeIds.includes(collaborator.id)} - disabled={selectedAssigneeIds.length >= MAX_LIMIT && !selectedAssigneeIds.includes(collaborator.id)} + key={item.id} + selected={selectedRef === item.id} + onSelect={() => setSelectedRef(item.id)} > - - - - {collaborator.login} - {collaborator.login} + {item.name} + {item.trailingInfo} ))} )} - -           - - ) -} - -export const JWithErrors = () => { - const [searchBroken, setSearchBroken] = React.useState(true) - const [issuesBroken, setIssuesBroken] = React.useState(false) - - /* Selection */ - const initialAssigneeIds = data.collaborators.slice(0, 3).map(c => c.id) // mock initial state - const [selectedAssigneeIds, setSelectedAssigneeIds] = React.useState(initialAssigneeIds) - - const onCollaboratorSelect = (colloratorId: string) => { - if (!selectedAssigneeIds.includes(colloratorId)) setSelectedAssigneeIds([...selectedAssigneeIds, colloratorId]) - else setSelectedAssigneeIds(selectedAssigneeIds.filter(id => id !== colloratorId)) - } - - const onClearSelection = () => setSelectedAssigneeIds([]) - const onSubmit = () => { - data.issue.assigneeIds = selectedAssigneeIds // pretending to persist changes - } - - /* Filtering */ - const [filteredUsers, setFilteredUsers] = React.useState( - searchBroken ? data.collaborators.filter(c => initialAssigneeIds.includes(c.id)) : data.collaborators, - ) - - const [query, setQuery] = React.useState('') - - const onSearchInputChange: React.ChangeEventHandler = event => { - const query = event.currentTarget.value - setQuery(query) - - if (query === '') setFilteredUsers(data.collaborators) - else { - // if search is broken, only show assignees, not all collaborators - const allCollaborators = searchBroken - ? data.collaborators.filter(c => initialAssigneeIds.includes(c.id)) - : data.collaborators - - setFilteredUsers( - allCollaborators - .map(collaborator => { - if (collaborator.login.toLowerCase().startsWith(query)) return {priority: 1, collaborator} - else if (collaborator.name.startsWith(query)) return {priority: 2, collaborator} - else if (collaborator.login.toLowerCase().includes(query)) return {priority: 3, collaborator} - else if (collaborator.name.toLowerCase().includes(query)) return {priority: 4, collaborator} - else return {priority: -1, collaborator} - }) - .filter(result => result.priority > 0) - .map(result => result.collaborator), - ) - } - } - - const sortingFn = (itemA: {id: string}, itemB: {id: string}) => { - const initialSelectedIds = data.issue.assigneeIds - if (initialSelectedIds.includes(itemA.id) && initialSelectedIds.includes(itemB.id)) return 1 - else if (initialSelectedIds.includes(itemA.id)) return -1 - else if (initialSelectedIds.includes(itemB.id)) return 1 - else return 1 - } - - const itemsToShow = query ? filteredUsers : data.collaborators.sort(sortingFn) - - return ( - <> -

          SelectPanel with Errors

          - - - - - Break search API - - - Turn on to show error message while searching - - - setSearchBroken(enabled)} - aria-labelledby="switch-label" - aria-describedby="switch-caption" - /> - - - - - Break issues API - - - Turn on to break everything and show big error in panel - - - setIssuesBroken(enabled)} - aria-labelledby="break-issues-label" - aria-describedby="break-issues-caption" - /> - - - - - Assignees - - - - - - {issuesBroken ? ( - - Try again or if the problem persists, contact support - - ) : ( - <> - {query && searchBroken ? ( - - We couldn't load all collaborators. Try again or if the problem persists,{' '} - contact support - - ) : null} - {itemsToShow.length === 0 ? ( - - Try a different search term - - ) : ( - - {itemsToShow.map(collaborator => ( - onCollaboratorSelect(collaborator.id)} - selected={selectedAssigneeIds.includes(collaborator.id)} - > - - - - {collaborator.login} - {collaborator.login} - - ))} - - )} - - )} - - + + {/* @ts-ignore TODO as prop is not identified by button? */} + + View all {selectedFilter} + + ) @@ -1051,24 +626,6 @@ const fetchUsers = async (query: string, delay: number) => { user.login.toLowerCase().includes(query.toLowerCase()) || user.name.toLowerCase().includes(query.toLowerCase()) ) }) - // i went harder on this than is necessary 😅 - // .map(user => { - // if (user.login.toLowerCase().startsWith(query)) return {priority: 1, user} - // else if (user.login.toLowerCase().includes(query)) return {priority: 2, user} - // else if (user.name.toLowerCase().includes(query)) return {priority: 3, user} - // else return {priority: 4, user} - // }) - // .sort((userA, userB) => (userA.priority > userB.priority ? 1 : -1)) - // .sort((userA, userB) => { - // // second level sort: collaborators show up first - // if ( - // data.collaborators.find(c => c.id === userA.user.id) && - // !data.collaborators.find(c => c.id === userB.user.id) - // ) { - // return -1 - // } else return 1 - // }) - // .map(result => result.user) } /* lifted from the examples at https://react.dev/reference/react/Suspense */ @@ -1097,8 +654,3 @@ function use(promise) { throw promise } } - -export default { - title: 'Drafts/Components/SelectPanel', - component: SelectPanel, -} diff --git a/src/drafts/SelectPanel2/stories/SelectPanel.features.stories.tsx b/src/drafts/SelectPanel2/stories/SelectPanel.features.stories.tsx new file mode 100644 index 00000000000..255edd3a9d2 --- /dev/null +++ b/src/drafts/SelectPanel2/stories/SelectPanel.features.stories.tsx @@ -0,0 +1,386 @@ +import React from 'react' +import {SelectPanel} from '../SelectPanel' +import {ActionList, Avatar, Box, Button, Link, Text, ToggleSwitch} from '../../../index' +import {TagIcon, GearIcon} from '@primer/octicons-react' +import data from './mock-data' + +export default { + title: 'Drafts/Components/SelectPanel/Features', + component: SelectPanel, +} + +const getCircle = (color: string) => ( + +) + +export const InstantSelectionVariant = () => { + const [selectedTag, setSelectedTag] = React.useState() + + const onSubmit = () => { + if (!selectedTag) return + data.ref = selectedTag // pretending to persist changes + } + + const itemsToShow = data.tags + + return ( + <> +

          Instant selection variant

          + + + {selectedTag || 'Choose a tag'} + + + {itemsToShow.map(tag => ( + setSelectedTag(tag.id)} selected={selectedTag === tag.id}> + {tag.name} + + ))} + + + Edit tags + + + + ) +} + +export const SingleSelection = () =>

          TODO

          + +export const WithWarning = () => { + /* Selection */ + + const initialAssigneeIds = data.issue.assigneeIds // mock initial state + const [selectedAssigneeIds, setSelectedAssigneeIds] = React.useState(initialAssigneeIds) + const MAX_LIMIT = 3 + + const onCollaboratorSelect = (colloratorId: string) => { + if (!selectedAssigneeIds.includes(colloratorId)) setSelectedAssigneeIds([...selectedAssigneeIds, colloratorId]) + else setSelectedAssigneeIds(selectedAssigneeIds.filter(id => id !== colloratorId)) + } + + const onClearSelection = () => setSelectedAssigneeIds([]) + const onSubmit = () => { + data.issue.assigneeIds = selectedAssigneeIds // pretending to persist changes + } + + /* Filtering */ + const [filteredUsers, setFilteredUsers] = React.useState(data.collaborators) + const [query, setQuery] = React.useState('') + + const onSearchInputChange: React.ChangeEventHandler = event => { + const query = event.currentTarget.value + setQuery(query) + + if (query === '') setFilteredUsers(data.collaborators) + else { + setFilteredUsers( + data.collaborators + .map(collaborator => { + if (collaborator.login.toLowerCase().startsWith(query)) return {priority: 1, collaborator} + else if (collaborator.name.startsWith(query)) return {priority: 2, collaborator} + else if (collaborator.login.toLowerCase().includes(query)) return {priority: 3, collaborator} + else if (collaborator.name.toLowerCase().includes(query)) return {priority: 4, collaborator} + else return {priority: -1, collaborator} + }) + .filter(result => result.priority > 0) + .map(result => result.collaborator), + ) + } + } + + const sortingFn = (itemA: {id: string}, itemB: {id: string}) => { + const initialSelectedIds = data.issue.assigneeIds + if (initialSelectedIds.includes(itemA.id) && initialSelectedIds.includes(itemB.id)) return 1 + else if (initialSelectedIds.includes(itemA.id)) return -1 + else if (initialSelectedIds.includes(itemB.id)) return 1 + else return 1 + } + + const itemsToShow = query ? filteredUsers : data.collaborators.sort(sortingFn) + + return ( + <> +

          SelectPanel with warning

          + + + + Assignees + + + + + + {selectedAssigneeIds.length >= MAX_LIMIT ? ( + + You have reached the limit of {MAX_LIMIT} assignees on your free account.{' '} + Upgrade your account. + + ) : null} + + {itemsToShow.length === 0 ? ( + + Try a different search term + + ) : ( + + {itemsToShow.map(collaborator => ( + onCollaboratorSelect(collaborator.id)} + selected={selectedAssigneeIds.includes(collaborator.id)} + disabled={selectedAssigneeIds.length >= MAX_LIMIT && !selectedAssigneeIds.includes(collaborator.id)} + > + + + + {collaborator.login} + {collaborator.login} + + ))} + + )} + + + + + ) +} + +export const WithErrors = () => { + const [searchBroken, setSearchBroken] = React.useState(true) + const [issuesBroken, setIssuesBroken] = React.useState(false) + + /* Selection */ + const initialAssigneeIds = data.collaborators.slice(0, 3).map(c => c.id) // mock initial state + const [selectedAssigneeIds, setSelectedAssigneeIds] = React.useState(initialAssigneeIds) + + const onCollaboratorSelect = (colloratorId: string) => { + if (!selectedAssigneeIds.includes(colloratorId)) setSelectedAssigneeIds([...selectedAssigneeIds, colloratorId]) + else setSelectedAssigneeIds(selectedAssigneeIds.filter(id => id !== colloratorId)) + } + + const onClearSelection = () => setSelectedAssigneeIds([]) + const onSubmit = () => { + data.issue.assigneeIds = selectedAssigneeIds // pretending to persist changes + } + + /* Filtering */ + const [filteredUsers, setFilteredUsers] = React.useState( + searchBroken ? data.collaborators.filter(c => initialAssigneeIds.includes(c.id)) : data.collaborators, + ) + + const [query, setQuery] = React.useState('') + + const onSearchInputChange: React.ChangeEventHandler = event => { + const query = event.currentTarget.value + setQuery(query) + + if (query === '') setFilteredUsers(data.collaborators) + else { + // if search is broken, only show assignees, not all collaborators + const allCollaborators = searchBroken + ? data.collaborators.filter(c => initialAssigneeIds.includes(c.id)) + : data.collaborators + + setFilteredUsers( + allCollaborators + .map(collaborator => { + if (collaborator.login.toLowerCase().startsWith(query)) return {priority: 1, collaborator} + else if (collaborator.name.startsWith(query)) return {priority: 2, collaborator} + else if (collaborator.login.toLowerCase().includes(query)) return {priority: 3, collaborator} + else if (collaborator.name.toLowerCase().includes(query)) return {priority: 4, collaborator} + else return {priority: -1, collaborator} + }) + .filter(result => result.priority > 0) + .map(result => result.collaborator), + ) + } + } + + const sortingFn = (itemA: {id: string}, itemB: {id: string}) => { + const initialSelectedIds = data.issue.assigneeIds + if (initialSelectedIds.includes(itemA.id) && initialSelectedIds.includes(itemB.id)) return 1 + else if (initialSelectedIds.includes(itemA.id)) return -1 + else if (initialSelectedIds.includes(itemB.id)) return 1 + else return 1 + } + + const itemsToShow = query ? filteredUsers : data.collaborators.sort(sortingFn) + + return ( + <> +

          SelectPanel with Errors

          + + + + + Break search API + + + Turn on to show error message while searching + + + setSearchBroken(enabled)} + aria-labelledby="switch-label" + aria-describedby="switch-caption" + /> + + + + + Break issues API + + + Turn on to break everything and show big error in panel + + + setIssuesBroken(enabled)} + aria-labelledby="break-issues-label" + aria-describedby="break-issues-caption" + /> + + + + + Assignees + + + + + + {issuesBroken ? ( + + Try again or if the problem persists, contact support + + ) : ( + <> + {query && searchBroken ? ( + + We couldn't load all collaborators. Try again or if the problem persists,{' '} + contact support + + ) : null} + {itemsToShow.length === 0 ? ( + + Try a different search term + + ) : ( + + {itemsToShow.map(collaborator => ( + onCollaboratorSelect(collaborator.id)} + selected={selectedAssigneeIds.includes(collaborator.id)} + > + + + + {collaborator.login} + {collaborator.login} + + ))} + + )} + + )} + + + + + ) +} + +export const ExternalAnchor = () => { + const initialSelectedLabels = data.issue.labelIds // mock initial state: has selected labels + const [selectedLabelIds, setSelectedLabelIds] = React.useState(initialSelectedLabels) + + /* Selection */ + const onLabelSelect = (labelId: string) => { + if (!selectedLabelIds.includes(labelId)) setSelectedLabelIds([...selectedLabelIds, labelId]) + else setSelectedLabelIds(selectedLabelIds.filter(id => id !== labelId)) + } + + const onSubmit = () => { + data.issue.labelIds = selectedLabelIds // pretending to persist changes + + // eslint-disable-next-line no-console + console.log('form submitted') + } + + const sortingFn = (itemA: {id: string}, itemB: {id: string}) => { + const initialSelectedIds = data.issue.labelIds + if (initialSelectedIds.includes(itemA.id) && initialSelectedIds.includes(itemB.id)) return 1 + else if (initialSelectedIds.includes(itemA.id)) return -1 + else if (initialSelectedIds.includes(itemB.id)) return 1 + else return 1 + } + + const itemsToShow = data.labels.sort(sortingFn) + + const anchorRef = React.useRef(null) + const [open, setOpen] = React.useState(false) + + return ( + <> +

          With External Anchor

          +

          + To use an external anchor, pass an `anchorRef` to `SelectPanel`. You would also need to control the `open` state + with `onSubmit` and `onCancel` +

          + + + + { + setOpen(false) // close on submit + onSubmit() + }} + onCancel={() => setOpen(false)} // close on cancel + > + + {itemsToShow.map(label => ( + onLabelSelect(label.id)} + selected={selectedLabelIds.includes(label.id)} + > + {getCircle(label.color)} + {label.name} + {label.description} + + ))} + + + + + ) +} diff --git a/src/drafts/SelectPanel2/stories/SelectPanel.playground.stories.tsx b/src/drafts/SelectPanel2/stories/SelectPanel.playground.stories.tsx new file mode 100644 index 00000000000..a9d318eccc7 --- /dev/null +++ b/src/drafts/SelectPanel2/stories/SelectPanel.playground.stories.tsx @@ -0,0 +1,135 @@ +import React from 'react' +import {Meta, StoryFn} from '@storybook/react' +import {SelectPanel, SelectPanelProps} from '../SelectPanel' +import {ActionList, Box} from '../../../index' +import data from './mock-data' + +export default { + title: 'Drafts/Components/SelectPanel/Playground', + component: SelectPanel, + + args: { + title: 'Select labels', + selectionVariant: 'multiple', + }, + argTypes: { + secondaryButtonText: { + name: 'Secondary button text', + type: 'string', + }, + }, +} as Meta + +export const Playground: StoryFn = args => { + const initialSelectedLabels = [data.issue.labelIds[0]] // mock initial state: has selected labels + const [selectedLabelIds, setSelectedLabelIds] = React.useState(initialSelectedLabels) + + /* Selection */ + const onLabelSelect = (labelId: string) => { + if (args.selectionVariant === 'single' || args.selectionVariant === 'instant') { + setSelectedLabelIds([labelId]) + } else { + if (!selectedLabelIds.includes(labelId)) setSelectedLabelIds([...selectedLabelIds, labelId]) + else setSelectedLabelIds(selectedLabelIds.filter(id => id !== labelId)) + } + } + + const onClearSelection = () => { + setSelectedLabelIds([]) + args.onClearSelection() // call storybook action + } + + const onSubmit: SelectPanelProps['onSubmit'] = event => { + data.issue.labelIds = selectedLabelIds // pretending to persist changes + args.onSubmit(event) // call storybook action + } + + const onCancel = () => args.onCancel() // call storybook action + + /* Filtering */ + const [filteredLabels, setFilteredLabels] = React.useState(data.labels) + const [query, setQuery] = React.useState('') + + const onSearchInputChange: React.ChangeEventHandler = event => { + const query = event.currentTarget.value + setQuery(query) + + if (query === '') setFilteredLabels(data.labels) + else { + // Note: in the future, we should probably add a highlight for matching text + setFilteredLabels( + data.labels + .map(label => { + if (label.name.toLowerCase().startsWith(query)) return {priority: 1, label} + else if (label.name.toLowerCase().includes(query)) return {priority: 2, label} + else if (label.description?.toLowerCase().includes(query)) return {priority: 3, label} + else return {priority: -1, label} + }) + .filter(result => result.priority > 0) + .map(result => result.label), + ) + } + } + + const sortingFn = (itemA: {id: string}, itemB: {id: string}) => { + const initialSelectedIds = data.issue.labelIds + if (initialSelectedIds.includes(itemA.id) && initialSelectedIds.includes(itemB.id)) return 1 + else if (initialSelectedIds.includes(itemA.id)) return -1 + else if (initialSelectedIds.includes(itemB.id)) return 1 + else return 1 + } + + const itemsToShow = query ? filteredLabels : data.labels.sort(sortingFn) + + return ( + <> + + Assign label + + + + + + {itemsToShow.length === 0 ? ( + + Try a different search term + + ) : ( + + {itemsToShow.map(label => ( + onLabelSelect(label.id)} + selected={selectedLabelIds.includes(label.id)} + > + + + + {label.name} + {label.description} + + ))} + + )} + + + {args.secondaryButtonText ? ( + {args.secondaryButtonText} + ) : null} + + + + ) +} diff --git a/src/drafts/SelectPanel2/mock-data.ts b/src/drafts/SelectPanel2/stories/mock-data.ts similarity index 99% rename from src/drafts/SelectPanel2/mock-data.ts rename to src/drafts/SelectPanel2/stories/mock-data.ts index 309be3bd23c..75f86fd3c77 100644 --- a/src/drafts/SelectPanel2/mock-data.ts +++ b/src/drafts/SelectPanel2/stories/mock-data.ts @@ -9,11 +9,13 @@ const data = { id: 'MDQ6VXNlcjQxNzI2OA==', name: 'Pavithra Kodmad', login: 'pksjce', + recommended: true, }, { id: 'MDQ6VXNlcjE0NDY1MDM=', name: 'ArmaÄŸan', login: 'broccolinisoup', + recommended: true, }, { id: 'MDQ6VXNlcjE4NjM3NzE=', @@ -29,6 +31,7 @@ const data = { id: 'MDQ6VXNlcjM5MDE3NjQ=', name: 'Josh Black', login: 'joshblack', + recommended: true, }, { id: 'MDQ6VXNlcjE4NjYxMDMw', From debf4957f8c44794714047e174e52fad0af53502 Mon Sep 17 00:00:00 2001 From: Josh Black Date: Tue, 5 Dec 2023 11:12:48 -0600 Subject: [PATCH 11/19] Update release-schedule.yml (#4009) --- .github/workflows/release-schedule.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.github/workflows/release-schedule.yml b/.github/workflows/release-schedule.yml index ace13300549..6ac115b4bf0 100644 --- a/.github/workflows/release-schedule.yml +++ b/.github/workflows/release-schedule.yml @@ -6,7 +6,7 @@ on: type: boolean description: 'Run in dry mode. This option will disable creating and closing issues' schedule: - - cron: '30 15 * * MON' + - cron: '30 16 * * MON' concurrency: group: ${{ github.workflow }}-${{ github.ref }} From 3f82a1cab370951e11b474696fbfdbfe169ce970 Mon Sep 17 00:00:00 2001 From: Mike Perrotti Date: Tue, 5 Dec 2023 13:50:38 -0500 Subject: [PATCH 12/19] Adds 'inactive' state to buttons (#3812) * adds inactive state to button components * update snapshots * adds changeset * test(vrt): update snapshots * Update src/Button/ButtonBase.tsx Co-authored-by: Katie Langerman <18661030+langermank@users.noreply.github.com> * follow-up on resolving merge conflicts * adds new button style for inactive buttons * refactors inactive styles, lets disabled style override inactive style * adds docs for 'inactive' prop * upgrades styled components, fixes hover and active style bugs on inactive buttons * fix drafts/Button2 inactive implementation * cursor style tweak, update snapshots, update package-lock.json * test(vrt): update snapshots * upgrades @primer/primitives * test next primitives release * upgrades @primer/primitives to 7.15.3 * updates jest snaps * test(vrt): update snapshots * rm disabled styles * preserves border on inactive buttons * test(vrt): update snapshots --------- Co-authored-by: mperrotti Co-authored-by: Katie Langerman <18661030+langermank@users.noreply.github.com> Co-authored-by: Eric Bailey --- .changeset/soft-pans-punch.md | 7 + .../Button-Inactive-dark-colorblind-linux.png | Bin 0 -> 6300 bytes .../Button-Inactive-dark-dimmed-linux.png | Bin 0 -> 6184 bytes ...tton-Inactive-dark-high-contrast-linux.png | Bin 0 -> 6371 bytes .../Button-Inactive-dark-linux.png | Bin 0 -> 6300 bytes .../Button-Inactive-dark-tritanopia-linux.png | Bin 0 -> 6300 bytes ...Button-Inactive-light-colorblind-linux.png | Bin 0 -> 6295 bytes ...ton-Inactive-light-high-contrast-linux.png | Bin 0 -> 6294 bytes .../Button-Inactive-light-linux.png | Bin 0 -> 6295 bytes ...Button-Inactive-light-tritanopia-linux.png | Bin 0 -> 6295 bytes e2e/components/Button.test.ts | 34 +++++ package-lock.json | 56 +++---- package.json | 3 +- src/Button/Button.docs.json | 5 + src/Button/Button.features.stories.tsx | 6 + src/Button/Button.stories.tsx | 6 + src/Button/ButtonBase.tsx | 2 + src/Button/IconButton.docs.json | 5 + src/Button/IconButton.stories.tsx | 6 + .../__snapshots__/Button.test.tsx.snap | 142 ++++++++++++++++-- src/Button/styles.ts | 28 +++- src/Button/types.ts | 5 + src/Dialog/__snapshots__/Dialog.test.tsx.snap | 14 ++ .../__snapshots__/SelectPanel.test.tsx.snap | 18 ++- .../__snapshots__/ActionMenu.test.tsx.snap | 18 ++- .../__snapshots__/TextInput.test.tsx.snap | 42 ++++++ 26 files changed, 341 insertions(+), 56 deletions(-) create mode 100644 .changeset/soft-pans-punch.md create mode 100644 .playwright/snapshots/components/Button.test.ts-snapshots/Button-Inactive-dark-colorblind-linux.png create mode 100644 .playwright/snapshots/components/Button.test.ts-snapshots/Button-Inactive-dark-dimmed-linux.png create mode 100644 .playwright/snapshots/components/Button.test.ts-snapshots/Button-Inactive-dark-high-contrast-linux.png create mode 100644 .playwright/snapshots/components/Button.test.ts-snapshots/Button-Inactive-dark-linux.png create mode 100644 .playwright/snapshots/components/Button.test.ts-snapshots/Button-Inactive-dark-tritanopia-linux.png create mode 100644 .playwright/snapshots/components/Button.test.ts-snapshots/Button-Inactive-light-colorblind-linux.png create mode 100644 .playwright/snapshots/components/Button.test.ts-snapshots/Button-Inactive-light-high-contrast-linux.png create mode 100644 .playwright/snapshots/components/Button.test.ts-snapshots/Button-Inactive-light-linux.png create mode 100644 .playwright/snapshots/components/Button.test.ts-snapshots/Button-Inactive-light-tritanopia-linux.png diff --git a/.changeset/soft-pans-punch.md b/.changeset/soft-pans-punch.md new file mode 100644 index 00000000000..e0a29220089 --- /dev/null +++ b/.changeset/soft-pans-punch.md @@ -0,0 +1,7 @@ +--- +'@primer/react': minor +--- + +Adds an 'inactive' state to buttons. An inactive button looks disabled and has aria-disabled, but it can still be clicked and focused. This was added to support buttons that are broken due to availability issues, but can't be removed from the page. + + diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Inactive-dark-colorblind-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Inactive-dark-colorblind-linux.png new file mode 100644 index 0000000000000000000000000000000000000000..1e3a0c457173e5fafac0cd3d1c084cdd440dfc34 GIT binary patch literal 6300 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 literal 0 HcmV?d00001 diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Inactive-dark-high-contrast-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Inactive-dark-high-contrast-linux.png new file mode 100644 index 0000000000000000000000000000000000000000..d9fea4956381ec13349fd6bfe1fc93c750eed123 GIT binary patch literal 6371 zcmeHLTU1k58cvIqTBNBu9W0k%%VN+XTE+oNFo`;}f({7^0ZAZ2~`YW0!a~tH48#u$OYtbpdgoE5^muVNHQlgk9{nC%fmVQto@(; zt?$2m`<$H@jXmx9f%^wA7|b;?BK$lI=ClG`u=jUDGxz>*I2jt=VV*yI3MT6HoP)vk z^CH7f#$JDv^BsaeMGJiQy@#9llrnOU6fn_8!`$8XSBaeD1Buy#vvD z1>V?JI|aN*&ha{CHK3JmdRlE8ZOpX{+<R#EMSEU8tf&xZu{dqslYVT`yD->Kf9!iOFiY2@)V6=k z9O~ra@i-jAHTVuq@!FM#c+U<*=|2flcdPHUx9fB|TG#P@i9|wsHBJd~SNtDhZ}V)W zHz6nyHHy+dyc{_@XQ-?Crw0AR!{hUAoA33SQer!yFFixPUPa=BDE&EvAg+yAn2CQSvYt_q{YnrVsZkAOf zrA>Agur@x9SBZ^T4Ak>XcCuu;)cn#9lMrGXQ<$uZGJ2Ib`l#%BEdZo*r3AerSVO>jmR_KKylr_jjg`Vg{CnqOX*I&^wK0ZFC_5h*|ykSm@!eV807LRPx z6w#ang=4(nOQWI6HUZC$_Kz0<-3=|RP`Y(RhL)Pn&O&V)8;n^4*^GkxeAOzEAp`(9 zck1uRw1pE{MsGP0GLe&87G9VK_03v#x*m|C*ETp?9$;-5W^0qx?_1nj_enV@ZMI(2 zijd!}M~rR^DK-6M1jyIRe|DxrxhYj#5t7=>J)0JPGo4DEtsj;xKP?ci zJ-rnw>&?Y(3GJZ?4 zlw<@jTPt2HH9lSqqO8}&1R;{Up4ztlbCr2v)k}RXm`+Lku?gf5E$w_XOJgD-JOt#d zt}q&fQhDd@-T9^>?lV$oMm6*-0Ca=1)FkeruUcL$2Y{53?_v~+-g1_3sHDUlLBcDp zG;%mfsmmu2l?&5I0svLDKsell$E&AQ-?lAmSvl+7WD&V_+1k$TBLYn3`UL0A)W2Vw^b9Ri5T_0pW~-)NhU+)_V@w8e zHXF6Thilf?1twKdIk3-U})2AU?H=8T% z3i#v0_ipHaF3^`=jtpJ$c1EHg(Sw~G%wWUq%DiCP_e*L1z1IrVoLktrs3aGc@6BPGz85cEtis|dfPn!%5@oOUvx!8+y|tx5Y7`C^FuyrR6vjnWlmf-L z{B+LmAp3(HQDQ8?IOz8A_fx+-*5oU=K;F-+EAhh*N6fP>A<7t06uW9H1 zJX*bg;P*pnO3B;vOV_r2JKDyb%>lIyp9hX0I)eCHe0DnO%28L2y4ubkIY&o1I?B;e zj*i-nLm`KjIJCr}B@QidXbE%@vi)c7zfN8&Z96nq#lbn#w;LgLu*k2l;i6NNTmJ=- Cv_)Y6 literal 0 HcmV?d00001 diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Inactive-dark-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Inactive-dark-linux.png new file mode 100644 index 0000000000000000000000000000000000000000..1e3a0c457173e5fafac0cd3d1c084cdd440dfc34 GIT binary patch literal 6300 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 QI5vT#9?3}Ie|)y`KTjp3r2qf` literal 0 HcmV?d00001 diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Inactive-light-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Inactive-light-linux.png new file mode 100644 index 0000000000000000000000000000000000000000..3bc974ffe651b3d0b3f0df8f454389e7da1ff2b7 GIT binary patch literal 6295 zcmeHLYgAKL7EXl@7KSp*s@N*vn(64w2xK555Cdcs6&#n)c6ADfkQO8v24cW#2;r&X z)S+0gt$;j|;BrmrI2Z&pAt59nRgi>S9-1J8gh$EcnE(ldyys-*$Ncb5JIkN>anD)n zoPGA)``dee``lahL2R_A`+M#v6w32d%<+#K3=P}_e7R=zmkPX^N)&_~h7P;BYG z1r%z}ho_Do{Wz~-Wiq3Aj+ETJrcy}%q#euU$GG1LWW4~-GZT{`2sUJVM1K5oE z#ryMbpiui`hFpN$%|hk`h4&kF$eZhG3#~f%JT;h!l^z=egL(_>7ZAZ#C&TWNp zGKjI`g(J&joOBLlvTb-4Xv@a8X0#?WpDs}4$gf~8ZT08-S3RPN)!1};-^of~N4K?` z?`mD4Y3h5UWwJD;AfUcR{hV=-qTd6KH%wKSer|QVXsdrQUvlwSSmAlG=N(># z_4rVSw73Vss)$ok8o92>93PUu9c;vANBihAmmpXBwbVF=piDO1O10ri;x=7@yJ=$R z6$ly&hwMvK)$MqJ$y0Yv-nI6foIi7>B$8#5AhOSX=TO24p*;61UfD&d(-x8p5{Z96 zz@U^NhKAon;CEQ79rV>wsqKo~_dvw4b$~n(Pf! z$$CG3(<+g`_=PfP;jS+>x?&$QDObxB*%jW%847*LqJ&tOn(&#=@I&vJy_zLPgn^sj zQV8;w7docDH7+Bf{{%5Cko=b+ib_}%i(9!>TZ`36FzRWq&OEkI9iQfveW8!MW*t0@{)`$PEv)0D)L4Z`oVgnov<|`SWHLP zqEpOO#`(TTELX`P-Y`Bp z?VDrBB$!Q99fu}>WHOohL`~Pl6w708iHl#Jtf&(U09Y;BMEk_ zu{A+5p<0t-tv8Z&i}5KTH6r~J$gJ$rG5^J`t*!MIP8lIh6kOY6d;E?1&**|@g=V}6 zQ(|QwLTZ?sKN#EPgh<$SpTIJdtVThjp%mL4V#ih=x}gcb@=Q17#)zN@XAY-=9KSp( z&GFWY#Rp*!zV-r`$+LaF7pb1?L>A(T2C^pj)asfzW|PGN4?ZH;u46C$&>z8$SOVZu zYebg<>EHJfb?QNA8pJ)3)PPl4xD;}CC`jhZX{0C$&#v;9$%q-F-}2H8(7P*qbWi03n@h6!C0vqY)1Y2a1Q~(C`Ny4U#b6r} z2XGZuTXjG^GGtKP6ScJkn+<+pCsm+$P!$YMPg7M@)ysCIf=7j!#&LN|Jy$f#&{f*? zuxlan!)c@rE=JiyU!`F{aDH=?MaIqLw}3?7 z_=j%R18ezS|D~~&`O@NyAk4N+Q2;UHS+PS|7C3;`js=y!c(HMN?%IQdWX3nN<+189+r?&wX)=0u3Ba-5B!!#0ySs&9%Fm zpQP?Cf0Wql%S^-t<7gVid>N4K@Ed!W(8oGYNKC9Pb@P(miMmcAlgVAx5$pg!jGzK%X)E~9!n8qt)nHIS=t_-qJx)#umTtA28Ga~}9HR{$qUPLy8Pb<&wj z&RlZl66lBj@AsIqfSd*7EFfnAfgANt_>1FY4JT_jS;NU1PS$w+f5=}qx9SPz;@L36 Tb{Ybrg*tU2_Bi|4r&s?CT}8D! literal 0 HcmV?d00001 diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Inactive-light-tritanopia-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Inactive-light-tritanopia-linux.png new file mode 100644 index 0000000000000000000000000000000000000000..aac9a555acfc48d3c2a780ccca60759d1e6c769e GIT binary patch literal 6295 zcmeHLYfzI{8jgyK+Ci*Nr7cLDp2!(J91cGI4RB{sp3;_b#;! z-gC}--uHQ*_nh;?(WE$^E$?qZAP_zY@v+Adhz(ZoAvXO1{JHXB2pLrCpyP3$BKY!v zmk7kW#}Z;={*qT~oWM8Kky4B1U0;xrNol_1dd{D>+zdP)TJeo&eaP-xvFJS?1s=Lz zR2_dacKiB>+Q-MP6npvjRaC@ZjX8d+Zrk?jsE7MDesOh6g!Rzj>q$|@R+Iq#WqD!! ziG7Wm%T{K4O-f3d=i}X1ZjJ_?baEK?X$616qRc_BS8$W| ztBF)FcMU+(HdwZUH`hs>E0wPnkJ|oOAC2;>Ei~Czo1BAP^4vM)ZJ};}$Vm)zJj_Y; z15=IkU*71DN)_0bKR}Ou4n)T>1GqK0X0CW`+z&oNq0ZV(5D(>td;S$p`Tm-3gOmz$ zQR;RwepJO5JAbnoVDY~lcQA~6PDueB02(*hY*pLrRq9HASoJ-=Q)yp($6QlRa7qNN zt^2zv!kkH(b{Oiv7Aez@joE)^5iyFDzZ0u&bYycnM2lp|;S(vprV(XEuYDgbyGL01 z(f0fRk16CIe;{(~GS?0%o}rr<+B!&;NW^p)C!);41wEThoqmgpgE3YERjS^20jYOsF$*@D z^I&^F&N*ZsLGktlb6Tl##=}zBAV7X>?$K|6;9dumrtLd@K|5^mE41-xr_EMQ6s&PN z)Pjp?>DgksS+sWLp6=<1WVU+Q#9^~jNwv|D6V^s_-rST_T43G5`3QB3EYpgtw^QgW`-J$Q{X5BYh2-8-%n;6x(OB$jLDjW zKn$p|!g+O}c-^mW$$2nCp^?*@Bv@U&u4^{CsS8TV|%O-pLq-&F|;uHdb zD~VpcZcz}$mk2al4apr2OFzcR&Cc0V8t;=Qb#5@tC~v3W@%W~6R#r_Uh1-bl zkUt9MVbpXKNJ4!*U#FJ3(@3<*G)XHovAznUPaX#H~@Ie>M`q^I!t=7 z!^0XL*6^^#n|~jF)7 { } }) + test.describe('Inactive', () => { + for (const theme of themes) { + test.describe(theme, () => { + test('default @vrt', async ({page}) => { + await visit(page, { + id: 'components-button-features--inactive', + globals: { + colorScheme: theme, + }, + }) + + // Default state + expect(await page.screenshot()).toMatchSnapshot(`Button.Inactive.${theme}.png`) + }) + + test('axe @aat', async ({page}) => { + await visit(page, { + id: 'components-button-features--inactive', + globals: { + colorScheme: theme, + }, + }) + await expect(page).toHaveNoViolations({ + rules: { + 'color-contrast': { + enabled: theme !== 'dark_dimmed', + }, + }, + }) + }) + }) + } + }) + test.describe('Dev: Invisible Variants', () => { for (const theme of themes) { test.describe(theme, () => { diff --git a/package-lock.json b/package-lock.json index f690e86a6eb..e8c310fee41 100644 --- a/package-lock.json +++ b/package-lock.json @@ -17,7 +17,8 @@ "@oddbird/popover-polyfill": "^0.3.1", "@primer/behaviors": "^1.5.1", "@primer/octicons-react": "^19.8.0", - "@primer/primitives": "^7.11.11", + "@primer/primitives": "7.15.3", + "@react-aria/ssr": "^3.5.0", "@styled-system/css": "^5.1.5", "@styled-system/props": "^5.1.5", "@styled-system/theme-get": "^5.1.2", @@ -6030,9 +6031,9 @@ } }, "node_modules/@primer/primitives": { - "version": "7.15.4", - "resolved": "https://registry.npmjs.org/@primer/primitives/-/primitives-7.15.4.tgz", - "integrity": "sha512-471hL6pkcGuPS4G0urQ0TRZYo3ukAaVhUtvlsi1mZLofmX+EF+9iQL/iau06JfaQkm5NNP236+F7yyxXra9EjA==" + "version": "7.15.3", + "resolved": "https://registry.npmjs.org/@primer/primitives/-/primitives-7.15.3.tgz", + "integrity": "sha512-BFxFKwa0Bkr+esqbXU5Yt91z/58J2MPoW1cYtp0j2rUYus4lIZnczX7+ZYb7j4BqpfY/88q9Vn+BRwW/Sx4eIA==" }, "node_modules/@primer/view-components": { "version": "0.14.0", @@ -6716,6 +6717,20 @@ "@babel/runtime": "^7.13.10" } }, + "node_modules/@react-aria/ssr": { + "version": "3.9.0", + "resolved": "https://registry.npmjs.org/@react-aria/ssr/-/ssr-3.9.0.tgz", + "integrity": "sha512-Bz6BqP6ZorCme9tSWHZVmmY+s7AU8l6Vl2NUYmBzezD//fVHHfFo4lFBn5tBuAaJEm3AuCLaJQ6H2qhxNSb7zg==", + "dependencies": { + "@swc/helpers": "^0.5.0" + }, + "engines": { + "node": ">= 12" + }, + "peerDependencies": { + "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0" + } + }, "node_modules/@react-dnd/asap": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/@react-dnd/asap/-/asap-4.0.0.tgz", @@ -9047,17 +9062,6 @@ } } }, - "node_modules/@storybook/builder-webpack5/node_modules/@swc/helpers": { - "version": "0.5.1", - "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.1.tgz", - "integrity": "sha512-sJ902EfIzn1Fa+qYmjdQqh8tPsoxyBz+8yBKC2HKUxyezKJFwPGOn7pv4WY6QuQW//ySQi5lJjA/ZT9sNWWNTg==", - "dev": true, - "optional": true, - "peer": true, - "dependencies": { - "tslib": "^2.4.0" - } - }, "node_modules/@storybook/builder-webpack5/node_modules/@types/node": { "version": "16.18.38", "resolved": "https://registry.npmjs.org/@types/node/-/node-16.18.38.tgz", @@ -12022,17 +12026,6 @@ } } }, - "node_modules/@storybook/test-runner/node_modules/@swc/helpers": { - "version": "0.5.1", - "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.1.tgz", - "integrity": "sha512-sJ902EfIzn1Fa+qYmjdQqh8tPsoxyBz+8yBKC2HKUxyezKJFwPGOn7pv4WY6QuQW//ySQi5lJjA/ZT9sNWWNTg==", - "dev": true, - "optional": true, - "peer": true, - "dependencies": { - "tslib": "^2.4.0" - } - }, "node_modules/@storybook/test-runner/node_modules/@swc/jest": { "version": "0.2.26", "resolved": "https://registry.npmjs.org/@swc/jest/-/jest-0.2.26.tgz", @@ -13222,6 +13215,14 @@ "node": ">=10" } }, + "node_modules/@swc/helpers": { + "version": "0.5.3", + "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.3.tgz", + "integrity": "sha512-FaruWX6KdudYloq1AHD/4nU+UsMTdNE8CKyrseXWEcgjDAbvkwJg2QGPAnfIJLIWsjZOSPLOAykK6fuYp4vp4A==", + "dependencies": { + "tslib": "^2.4.0" + } + }, "node_modules/@testing-library/dom": { "version": "9.3.1", "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-9.3.1.tgz", @@ -40079,8 +40080,7 @@ "node_modules/tslib": { "version": "2.6.2", "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz", - "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==", - "dev": true + "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==" }, "node_modules/tsutils": { "version": "3.21.0", diff --git a/package.json b/package.json index 46e2f4c4463..efba074a25b 100644 --- a/package.json +++ b/package.json @@ -102,7 +102,8 @@ "@oddbird/popover-polyfill": "^0.3.1", "@primer/behaviors": "^1.5.1", "@primer/octicons-react": "^19.8.0", - "@primer/primitives": "^7.11.11", + "@primer/primitives": "7.15.3", + "@react-aria/ssr": "^3.5.0", "@styled-system/css": "^5.1.5", "@styled-system/props": "^5.1.5", "@styled-system/theme-get": "^5.1.2", diff --git a/src/Button/Button.docs.json b/src/Button/Button.docs.json index e6f74974f5b..e2ab4c6b3d1 100644 --- a/src/Button/Button.docs.json +++ b/src/Button/Button.docs.json @@ -50,6 +50,11 @@ "type": "React.ElementType", "description": "A visual to display after the button text." }, + { + "name": "inactive", + "type": "boolean", + "description": "Whether the button looks visually disabled, but can still accept all the same interactions as an enabled button.\n This is intended to be used when a system error such as an outage prevents the button from performing its usual action.\n Inactive styles are slightly different from disabled styles because inactive buttons need to have an accessible color contrast ratio. This is because inactive buttons can have tooltips or perform an action such as opening a dialog explaining why it's inactive.\n If both `disabled` and `inactive` are true, `disabled` takes precedence." + }, { "name": "as", "type": "React.ElementType", diff --git a/src/Button/Button.features.stories.tsx b/src/Button/Button.features.stories.tsx index 96197d0692e..195093642ca 100644 --- a/src/Button/Button.features.stories.tsx +++ b/src/Button/Button.features.stories.tsx @@ -63,6 +63,12 @@ export const Block = () => export const Disabled = () => +export const Inactive = () => ( + +) + export const Small = () => export const Medium = () => diff --git a/src/Button/Button.stories.tsx b/src/Button/Button.stories.tsx index 00456a231bb..793d5884195 100644 --- a/src/Button/Button.stories.tsx +++ b/src/Button/Button.stories.tsx @@ -26,6 +26,11 @@ Playground.argTypes = { type: 'boolean', }, }, + inactive: { + control: { + type: 'boolean', + }, + }, variant: { control: { type: 'radio', @@ -51,6 +56,7 @@ Playground.args = { block: false, size: 'medium', disabled: false, + inactive: false, variant: 'default', alignContent: 'center', trailingVisual: null, diff --git a/src/Button/ButtonBase.tsx b/src/Button/ButtonBase.tsx index 8ee3b3ff6f3..1e05138e5c2 100644 --- a/src/Button/ButtonBase.tsx +++ b/src/Button/ButtonBase.tsx @@ -21,6 +21,7 @@ const ButtonBase = forwardRef( size = 'medium', alignContent = 'center', block = false, + inactive, ...rest } = props @@ -68,6 +69,7 @@ const ButtonBase = forwardRef( data-block={block ? 'block' : null} data-size={size === 'small' || size === 'large' ? size : undefined} data-no-visuals={!LeadingVisual && !TrailingVisual && !TrailingAction ? true : undefined} + data-inactive={inactive ? true : undefined} > {Icon ? ( diff --git a/src/Button/IconButton.docs.json b/src/Button/IconButton.docs.json index c49de7a2661..ad1529202a8 100644 --- a/src/Button/IconButton.docs.json +++ b/src/Button/IconButton.docs.json @@ -24,6 +24,11 @@ "defaultValue": "", "description": "Changes the size of the icon button component" }, + { + "name": "inactive", + "type": "boolean", + "description": "Whether the button looks visually disabled, but can still accept all the same interactions as an enabled button." + }, { "name": "icon", "type": "Component", diff --git a/src/Button/IconButton.stories.tsx b/src/Button/IconButton.stories.tsx index cc8b1f5b78a..a60e2fc9340 100644 --- a/src/Button/IconButton.stories.tsx +++ b/src/Button/IconButton.stories.tsx @@ -23,6 +23,11 @@ Playground.argTypes = { type: 'boolean', }, }, + inactive: { + control: { + type: 'boolean', + }, + }, variant: { control: { type: 'radio', @@ -34,6 +39,7 @@ Playground.argTypes = { Playground.args = { size: 'medium', disabled: false, + inactive: false, variant: 'default', 'aria-label': 'Icon button description', icon: XIcon, diff --git a/src/Button/__tests__/__snapshots__/Button.test.tsx.snap b/src/Button/__tests__/__snapshots__/Button.test.tsx.snap index 1d0805e2466..67da6d5e057 100644 --- a/src/Button/__tests__/__snapshots__/Button.test.tsx.snap +++ b/src/Button/__tests__/__snapshots__/Button.test.tsx.snap @@ -91,6 +91,10 @@ exports[`Button renders consistently 1`] = ` transition: none; } +.c0[data-inactive] { + cursor: auto; +} + .c0:disabled { cursor: not-allowed; box-shadow: none; @@ -156,6 +160,16 @@ exports[`Button renders consistently 1`] = ` width: 100%; } +.c0[data-inactive]:not([disabled]) { + background-color: var(--button-inactive-bgColor,#eaeef2); + border-color: var(--button-inactive-bgColor,#eaeef2); + color: var(--button-inactive-fgColor,#57606a); +} + +.c0[data-inactive]:not([disabled]):focus-visible { + box-shadow: none; +} + .c0 [data-component="leadingVisual"] { grid-area: leadingVisual; } @@ -194,12 +208,12 @@ exports[`Button renders consistently 1`] = ` margin-right: 8px; } -.c0:hover:not([disabled]) { +.c0:hover:not([disabled]):not([data-inactive]) { background-color: #f3f4f6; border-color: var(--button-default-borderColor-hover,rgba(31,35,40,0.15)); } -.c0:active:not([disabled]) { +.c0:active:not([disabled]):not([data-inactive]) { background-color: hsla(220,14%,93%,1); border-color: var(--button-default-borderColor-active,rgba(31,35,40,0.15)); } @@ -326,6 +340,10 @@ exports[`Button respects block prop 1`] = ` transition: none; } +.c0[data-inactive] { + cursor: auto; +} + .c0:disabled { cursor: not-allowed; box-shadow: none; @@ -391,6 +409,16 @@ exports[`Button respects block prop 1`] = ` width: 100%; } +.c0[data-inactive]:not([disabled]) { + background-color: var(--button-inactive-bgColor,undefined); + border-color: var(--button-inactive-bgColor,undefined); + color: var(--button-inactive-fgColor,undefined); +} + +.c0[data-inactive]:not([disabled]):focus-visible { + box-shadow: none; +} + .c0 [data-component="leadingVisual"] { grid-area: leadingVisual; } @@ -429,12 +457,12 @@ exports[`Button respects block prop 1`] = ` margin-right: 8px; } -.c0:hover:not([disabled]) { +.c0:hover:not([disabled]):not([data-inactive]) { background-color: btn.hoverBg; border-color: var(--button-default-borderColor-hover,undefined); } -.c0:active:not([disabled]) { +.c0:active:not([disabled]):not([data-inactive]) { background-color: btn.activeBg; border-color: var(--button-default-borderColor-active,undefined); } @@ -566,6 +594,10 @@ exports[`Button respects the alignContent prop 1`] = ` transition: none; } +.c0[data-inactive] { + cursor: auto; +} + .c0:disabled { cursor: not-allowed; box-shadow: none; @@ -631,6 +663,16 @@ exports[`Button respects the alignContent prop 1`] = ` width: 100%; } +.c0[data-inactive]:not([disabled]) { + background-color: var(--button-inactive-bgColor,undefined); + border-color: var(--button-inactive-bgColor,undefined); + color: var(--button-inactive-fgColor,undefined); +} + +.c0[data-inactive]:not([disabled]):focus-visible { + box-shadow: none; +} + .c0 [data-component="leadingVisual"] { grid-area: leadingVisual; } @@ -669,12 +711,12 @@ exports[`Button respects the alignContent prop 1`] = ` margin-right: 8px; } -.c0:hover:not([disabled]) { +.c0:hover:not([disabled]):not([data-inactive]) { background-color: btn.hoverBg; border-color: var(--button-default-borderColor-hover,undefined); } -.c0:active:not([disabled]) { +.c0:active:not([disabled]):not([data-inactive]) { background-color: btn.activeBg; border-color: var(--button-default-borderColor-active,undefined); } @@ -805,6 +847,10 @@ exports[`Button respects the large size prop 1`] = ` transition: none; } +.c0[data-inactive] { + cursor: auto; +} + .c0:disabled { cursor: not-allowed; box-shadow: none; @@ -870,6 +916,16 @@ exports[`Button respects the large size prop 1`] = ` width: 100%; } +.c0[data-inactive]:not([disabled]) { + background-color: var(--button-inactive-bgColor,undefined); + border-color: var(--button-inactive-bgColor,undefined); + color: var(--button-inactive-fgColor,undefined); +} + +.c0[data-inactive]:not([disabled]):focus-visible { + box-shadow: none; +} + .c0 [data-component="leadingVisual"] { grid-area: leadingVisual; } @@ -908,12 +964,12 @@ exports[`Button respects the large size prop 1`] = ` margin-right: 8px; } -.c0:hover:not([disabled]) { +.c0:hover:not([disabled]):not([data-inactive]) { background-color: btn.hoverBg; border-color: var(--button-default-borderColor-hover,undefined); } -.c0:active:not([disabled]) { +.c0:active:not([disabled]):not([data-inactive]) { background-color: btn.activeBg; border-color: var(--button-default-borderColor-active,undefined); } @@ -1045,6 +1101,10 @@ exports[`Button respects the small size prop 1`] = ` transition: none; } +.c0[data-inactive] { + cursor: auto; +} + .c0:disabled { cursor: not-allowed; box-shadow: none; @@ -1110,6 +1170,16 @@ exports[`Button respects the small size prop 1`] = ` width: 100%; } +.c0[data-inactive]:not([disabled]) { + background-color: var(--button-inactive-bgColor,undefined); + border-color: var(--button-inactive-bgColor,undefined); + color: var(--button-inactive-fgColor,undefined); +} + +.c0[data-inactive]:not([disabled]):focus-visible { + box-shadow: none; +} + .c0 [data-component="leadingVisual"] { grid-area: leadingVisual; } @@ -1148,12 +1218,12 @@ exports[`Button respects the small size prop 1`] = ` margin-right: 8px; } -.c0:hover:not([disabled]) { +.c0:hover:not([disabled]):not([data-inactive]) { background-color: btn.hoverBg; border-color: var(--button-default-borderColor-hover,undefined); } -.c0:active:not([disabled]) { +.c0:active:not([disabled]):not([data-inactive]) { background-color: btn.activeBg; border-color: var(--button-default-borderColor-active,undefined); } @@ -1285,6 +1355,10 @@ exports[`Button styles danger button appropriately 1`] = ` transition: none; } +.c0[data-inactive] { + cursor: auto; +} + .c0:disabled { cursor: not-allowed; box-shadow: none; @@ -1355,6 +1429,16 @@ exports[`Button styles danger button appropriately 1`] = ` width: 100%; } +.c0[data-inactive]:not([disabled]) { + background-color: var(--button-inactive-bgColor,undefined); + border-color: var(--button-inactive-bgColor,undefined); + color: var(--button-inactive-fgColor,undefined); +} + +.c0[data-inactive]:not([disabled]):focus-visible { + box-shadow: none; +} + .c0 [data-component="leadingVisual"] { grid-area: leadingVisual; } @@ -1393,19 +1477,19 @@ exports[`Button styles danger button appropriately 1`] = ` margin-right: 8px; } -.c0:hover:not([disabled]) { +.c0:hover:not([disabled]):not([data-inactive]) { color: btn.danger.hoverText; background-color: btn.danger.hoverBg; border-color: btn.danger.hoverBorder; box-shadow: undefined; } -.c0:hover:not([disabled]) [data-component=ButtonCounter] { +.c0:hover:not([disabled]):not([data-inactive]) [data-component=ButtonCounter] { background-color: btn.danger.hoverCounterBg; color: btn.danger.hoverCounterFg; } -.c0:active:not([disabled]) { +.c0:active:not([disabled]):not([data-inactive]) { color: btn.danger.selectedText; background-color: btn.danger.selectedBg; box-shadow: undefined; @@ -1534,6 +1618,10 @@ exports[`Button styles invisible button appropriately 1`] = ` transition: none; } +.c0[data-inactive] { + cursor: auto; +} + .c0:disabled { cursor: not-allowed; box-shadow: none; @@ -1601,6 +1689,16 @@ exports[`Button styles invisible button appropriately 1`] = ` width: 100%; } +.c0[data-inactive]:not([disabled]) { + background-color: var(--button-inactive-bgColor,undefined); + border-color: var(--button-inactive-bgColor,undefined); + color: var(--button-inactive-fgColor,undefined); +} + +.c0[data-inactive]:not([disabled]):focus-visible { + box-shadow: none; +} + .c0 [data-component="leadingVisual"] { grid-area: leadingVisual; color: fg.muted; @@ -1788,6 +1886,10 @@ exports[`Button styles primary button appropriately 1`] = ` transition: none; } +.c0[data-inactive] { + cursor: auto; +} + .c0:disabled { cursor: not-allowed; box-shadow: none; @@ -1856,6 +1958,16 @@ exports[`Button styles primary button appropriately 1`] = ` width: 100%; } +.c0[data-inactive]:not([disabled]) { + background-color: var(--button-inactive-bgColor,undefined); + border-color: var(--button-inactive-bgColor,undefined); + color: var(--button-inactive-fgColor,undefined); +} + +.c0[data-inactive]:not([disabled]):focus-visible { + box-shadow: none; +} + .c0 [data-component="leadingVisual"] { grid-area: leadingVisual; } @@ -1894,7 +2006,7 @@ exports[`Button styles primary button appropriately 1`] = ` margin-right: 8px; } -.c0:hover:not([disabled]) { +.c0:hover:not([disabled]):not([data-inactive]) { color: btn.primary.hoverText; background-color: btn.primary.hoverBg; } @@ -1907,7 +2019,7 @@ exports[`Button styles primary button appropriately 1`] = ` box-shadow: inset 0 0 0 3px; } -.c0:active:not([disabled]) { +.c0:active:not([disabled]):not([data-inactive]) { background-color: btn.primary.selectedBg; box-shadow: undefined; } diff --git a/src/Button/styles.ts b/src/Button/styles.ts index e373ffd7f07..81a9d0c606b 100644 --- a/src/Button/styles.ts +++ b/src/Button/styles.ts @@ -7,11 +7,11 @@ export const getVariantStyles = (variant: VariantType = 'default', theme?: Theme color: 'btn.text', backgroundColor: 'btn.bg', boxShadow: `${theme?.shadows.btn.shadow}, ${theme?.shadows.btn.insetShadow}`, - '&:hover:not([disabled])': { + '&:hover:not([disabled]):not([data-inactive])': { backgroundColor: 'btn.hoverBg', borderColor: `var(--button-default-borderColor-hover, ${theme?.colors.btn.hoverBorder})`, }, - '&:active:not([disabled])': { + '&:active:not([disabled]):not([data-inactive])': { backgroundColor: 'btn.activeBg', borderColor: `var(--button-default-borderColor-active, ${theme?.colors.btn.activeBorder})`, }, @@ -34,7 +34,7 @@ export const getVariantStyles = (variant: VariantType = 'default', theme?: Theme backgroundColor: 'btn.primary.bg', borderColor: 'btn.primary.border', boxShadow: `${theme?.shadows.btn.primary.shadow}`, - '&:hover:not([disabled])': { + '&:hover:not([disabled]):not([data-inactive])': { color: 'btn.primary.hoverText', backgroundColor: 'btn.primary.hoverBg', }, @@ -44,7 +44,7 @@ export const getVariantStyles = (variant: VariantType = 'default', theme?: Theme '&:focus-visible:not([disabled])': { boxShadow: 'inset 0 0 0 3px', }, - '&:active:not([disabled])': { + '&:active:not([disabled]):not([data-inactive])': { backgroundColor: 'btn.primary.selectedBg', boxShadow: `${theme?.shadows.btn.primary.selectedShadow}`, }, @@ -68,7 +68,7 @@ export const getVariantStyles = (variant: VariantType = 'default', theme?: Theme color: 'btn.danger.text', backgroundColor: 'btn.bg', boxShadow: `${theme?.shadows.btn.shadow}`, - '&:hover:not([disabled])': { + '&:hover:not([disabled]):not([data-inactive])': { color: 'btn.danger.hoverText', backgroundColor: 'btn.danger.hoverBg', borderColor: 'btn.danger.hoverBorder', @@ -78,7 +78,7 @@ export const getVariantStyles = (variant: VariantType = 'default', theme?: Theme color: 'btn.danger.hoverCounterFg', }, }, - '&:active:not([disabled])': { + '&:active:not([disabled]):not([data-inactive])': { color: 'btn.danger.selectedText', backgroundColor: 'btn.danger.selectedBg', boxShadow: `${theme?.shadows.btn.danger.selectedShadow}`, @@ -152,7 +152,7 @@ export const getVariantStyles = (variant: VariantType = 'default', theme?: Theme borderColor: `var(--button-default-borderColor-rest, ${theme?.colors.btn.border})`, backgroundColor: 'btn.bg', - '&:hover:not([disabled])': { + '&:hover:not([disabled]):not([data-inactive])': { color: 'btn.outline.hoverText', backgroundColor: 'btn.outline.hoverBg', borderColor: `${theme?.colors.btn.outline.hoverBorder}`, @@ -162,7 +162,7 @@ export const getVariantStyles = (variant: VariantType = 'default', theme?: Theme color: 'btn.outline.hoverCounterFg', }, }, - '&:active:not([disabled])': { + '&:active:not([disabled]):not([data-inactive])': { color: 'btn.outline.selectedText', backgroundColor: 'btn.outline.selectedBg', boxShadow: `${theme?.shadows.btn.outline.selectedShadow}`, @@ -190,6 +190,7 @@ export const getVariantStyles = (variant: VariantType = 'default', theme?: Theme }, }, } + return style[variant] } @@ -226,6 +227,9 @@ export const getBaseStyles = (theme?: Theme) => ({ '&:active': { transition: 'none', }, + '&[data-inactive]': { + cursor: 'auto', + }, '&:disabled': { cursor: 'not-allowed', boxShadow: 'none', @@ -291,6 +295,14 @@ export const getButtonStyles = (theme?: Theme) => { '&[data-block="block"]': { width: '100%', }, + '&[data-inactive]:not([disabled])': { + backgroundColor: `var(--button-inactive-bgColor, ${theme?.colors.btn.inactive.bg})`, + borderColor: `var(--button-inactive-bgColor, ${theme?.colors.btn.inactive.bg})`, + color: `var(--button-inactive-fgColor, ${theme?.colors.btn.inactive.text})`, + }, + '&[data-inactive]:not([disabled]):focus-visible': { + boxShadow: 'none', + }, '[data-component="leadingVisual"]': { gridArea: 'leadingVisual', }, diff --git a/src/Button/types.ts b/src/Button/types.ts index d2f3c252099..49ad7969eb9 100644 --- a/src/Button/types.ts +++ b/src/Button/types.ts @@ -35,6 +35,11 @@ export type ButtonBaseProps = { * Allow button width to fill its container. */ block?: boolean + /** + * Whether the button looks visually disabled, but can still accept all the same + * interactions as an enabled button. + */ + inactive?: boolean } & SxProp & React.ButtonHTMLAttributes diff --git a/src/Dialog/__snapshots__/Dialog.test.tsx.snap b/src/Dialog/__snapshots__/Dialog.test.tsx.snap index cb0b5cfda3a..f3aaf3ab027 100644 --- a/src/Dialog/__snapshots__/Dialog.test.tsx.snap +++ b/src/Dialog/__snapshots__/Dialog.test.tsx.snap @@ -164,6 +164,10 @@ exports[`Dialog renders consistently 1`] = ` transition: none; } +.c1[data-inactive] { + cursor: auto; +} + .c1:disabled { cursor: not-allowed; box-shadow: none; @@ -231,6 +235,16 @@ exports[`Dialog renders consistently 1`] = ` width: 100%; } +.c1[data-inactive]:not([disabled]) { + background-color: var(--button-inactive-bgColor,#eaeef2); + border-color: var(--button-inactive-bgColor,#eaeef2); + color: var(--button-inactive-fgColor,#57606a); +} + +.c1[data-inactive]:not([disabled]):focus-visible { + box-shadow: none; +} + .c1 [data-component="leadingVisual"] { grid-area: leadingVisual; color: #656d76; diff --git a/src/SelectPanel/__snapshots__/SelectPanel.test.tsx.snap b/src/SelectPanel/__snapshots__/SelectPanel.test.tsx.snap index a1682f981cd..0b105cd6a03 100644 --- a/src/SelectPanel/__snapshots__/SelectPanel.test.tsx.snap +++ b/src/SelectPanel/__snapshots__/SelectPanel.test.tsx.snap @@ -105,6 +105,10 @@ exports[`SelectPanel renders consistently 1`] = ` transition: none; } +.c1[data-inactive] { + cursor: auto; +} + .c1:disabled { cursor: not-allowed; box-shadow: none; @@ -170,6 +174,16 @@ exports[`SelectPanel renders consistently 1`] = ` width: 100%; } +.c1[data-inactive]:not([disabled]) { + background-color: var(--button-inactive-bgColor,#eaeef2); + border-color: var(--button-inactive-bgColor,#eaeef2); + color: var(--button-inactive-fgColor,#57606a); +} + +.c1[data-inactive]:not([disabled]):focus-visible { + box-shadow: none; +} + .c1 [data-component="leadingVisual"] { grid-area: leadingVisual; } @@ -208,12 +222,12 @@ exports[`SelectPanel renders consistently 1`] = ` margin-right: 8px; } -.c1:hover:not([disabled]) { +.c1:hover:not([disabled]):not([data-inactive]) { background-color: #f3f4f6; border-color: var(--button-default-borderColor-hover,rgba(31,35,40,0.15)); } -.c1:active:not([disabled]) { +.c1:active:not([disabled]):not([data-inactive]) { background-color: hsla(220,14%,93%,1); border-color: var(--button-default-borderColor-active,rgba(31,35,40,0.15)); } diff --git a/src/__tests__/__snapshots__/ActionMenu.test.tsx.snap b/src/__tests__/__snapshots__/ActionMenu.test.tsx.snap index 5f5cd763cca..67221dbfe60 100644 --- a/src/__tests__/__snapshots__/ActionMenu.test.tsx.snap +++ b/src/__tests__/__snapshots__/ActionMenu.test.tsx.snap @@ -105,6 +105,10 @@ exports[`ActionMenu renders consistently 1`] = ` transition: none; } +.c1[data-inactive] { + cursor: auto; +} + .c1:disabled { cursor: not-allowed; box-shadow: none; @@ -170,6 +174,16 @@ exports[`ActionMenu renders consistently 1`] = ` width: 100%; } +.c1[data-inactive]:not([disabled]) { + background-color: var(--button-inactive-bgColor,#eaeef2); + border-color: var(--button-inactive-bgColor,#eaeef2); + color: var(--button-inactive-fgColor,#57606a); +} + +.c1[data-inactive]:not([disabled]):focus-visible { + box-shadow: none; +} + .c1 [data-component="leadingVisual"] { grid-area: leadingVisual; } @@ -208,12 +222,12 @@ exports[`ActionMenu renders consistently 1`] = ` margin-right: 8px; } -.c1:hover:not([disabled]) { +.c1:hover:not([disabled]):not([data-inactive]) { background-color: #f3f4f6; border-color: var(--button-default-borderColor-hover,rgba(31,35,40,0.15)); } -.c1:active:not([disabled]) { +.c1:active:not([disabled]):not([data-inactive]) { background-color: hsla(220,14%,93%,1); border-color: var(--button-default-borderColor-active,rgba(31,35,40,0.15)); } diff --git a/src/__tests__/__snapshots__/TextInput.test.tsx.snap b/src/__tests__/__snapshots__/TextInput.test.tsx.snap index 1a431197282..e891006f9dd 100644 --- a/src/__tests__/__snapshots__/TextInput.test.tsx.snap +++ b/src/__tests__/__snapshots__/TextInput.test.tsx.snap @@ -1779,6 +1779,10 @@ exports[`TextInput renders trailingAction icon button 1`] = ` transition: none; } +.c5[data-inactive] { + cursor: auto; +} + .c5:disabled { cursor: not-allowed; box-shadow: none; @@ -1846,6 +1850,16 @@ exports[`TextInput renders trailingAction icon button 1`] = ` width: 100%; } +.c5[data-inactive]:not([disabled]) { + background-color: var(--button-inactive-bgColor,#eaeef2); + border-color: var(--button-inactive-bgColor,#eaeef2); + color: var(--button-inactive-fgColor,#57606a); +} + +.c5[data-inactive]:not([disabled]):focus-visible { + box-shadow: none; +} + .c5 [data-component="leadingVisual"] { grid-area: leadingVisual; color: #656d76; @@ -2432,6 +2446,10 @@ exports[`TextInput renders trailingAction text button 1`] = ` transition: none; } +.c4[data-inactive] { + cursor: auto; +} + .c4:disabled { cursor: not-allowed; box-shadow: none; @@ -2499,6 +2517,16 @@ exports[`TextInput renders trailingAction text button 1`] = ` width: 100%; } +.c4[data-inactive]:not([disabled]) { + background-color: var(--button-inactive-bgColor,#eaeef2); + border-color: var(--button-inactive-bgColor,#eaeef2); + color: var(--button-inactive-fgColor,#57606a); +} + +.c4[data-inactive]:not([disabled]):focus-visible { + box-shadow: none; +} + .c4 [data-component="leadingVisual"] { grid-area: leadingVisual; color: #656d76; @@ -2837,6 +2865,10 @@ exports[`TextInput renders trailingAction text button with a tooltip 1`] = ` transition: none; } +.c5[data-inactive] { + cursor: auto; +} + .c5:disabled { cursor: not-allowed; box-shadow: none; @@ -2904,6 +2936,16 @@ exports[`TextInput renders trailingAction text button with a tooltip 1`] = ` width: 100%; } +.c5[data-inactive]:not([disabled]) { + background-color: var(--button-inactive-bgColor,#eaeef2); + border-color: var(--button-inactive-bgColor,#eaeef2); + color: var(--button-inactive-fgColor,#57606a); +} + +.c5[data-inactive]:not([disabled]):focus-visible { + box-shadow: none; +} + .c5 [data-component="leadingVisual"] { grid-area: leadingVisual; color: #656d76; From 98ad3203a33c9caf2579474fa517a0c7a2ba8924 Mon Sep 17 00:00:00 2001 From: Josh Black Date: Tue, 5 Dec 2023 16:27:00 -0600 Subject: [PATCH 13/19] fix(PageLayout): update onMouseDown to check which button is pressed (#4022) * fix(PageLayout): update onMouseDown to check which button is pressed * chore: add changeset --------- Co-authored-by: Josh Black --- .changeset/warm-sloths-tickle.md | 5 +++++ src/PageLayout/PageLayout.tsx | 8 +++++--- 2 files changed, 10 insertions(+), 3 deletions(-) create mode 100644 .changeset/warm-sloths-tickle.md diff --git a/.changeset/warm-sloths-tickle.md b/.changeset/warm-sloths-tickle.md new file mode 100644 index 00000000000..1a300487110 --- /dev/null +++ b/.changeset/warm-sloths-tickle.md @@ -0,0 +1,5 @@ +--- +'@primer/react': patch +--- + +Update the resize behavior of PageLayout to ignore right clicks when resizing diff --git a/src/PageLayout/PageLayout.tsx b/src/PageLayout/PageLayout.tsx index 378d8fe8c3d..7b18f7bf0b4 100644 --- a/src/PageLayout/PageLayout.tsx +++ b/src/PageLayout/PageLayout.tsx @@ -352,9 +352,11 @@ const VerticalDivider: React.FC { - setIsDragging(true) - onDragStart?.() + onMouseDown={event => { + if (event.button === 0) { + setIsDragging(true) + onDragStart?.() + } }} onKeyDown={event => { if ( From 4321d59e9de5e319523c438e8e7d238178571301 Mon Sep 17 00:00:00 2001 From: Iulia Bejan <64602043+iulia-b@users.noreply.github.com> Date: Wed, 6 Dec 2023 15:32:14 +0100 Subject: [PATCH 14/19] Update new line identifier in MarkdownViewer and MarkdownEditor (#3987) * update new line identifier in MD related hooks * address pr reviews * Create funny-fishes-appear.md --------- Co-authored-by: Siddharth Kshetrapal --- .changeset/funny-fishes-appear.md | 5 + src/__tests__/hooks/_useListEditing.test.tsx | 98 +++++++++++++++++++ .../hooks/_useListInteraction.test.tsx | 43 ++++++++ src/drafts/MarkdownEditor/_useIndenting.ts | 2 +- src/drafts/MarkdownEditor/_useListEditing.ts | 8 +- .../MarkdownViewer/MarkdownViewer.test.tsx | 16 +++ .../MarkdownViewer/_useListInteraction.ts | 8 +- 7 files changed, 171 insertions(+), 9 deletions(-) create mode 100644 .changeset/funny-fishes-appear.md create mode 100644 src/__tests__/hooks/_useListEditing.test.tsx create mode 100644 src/__tests__/hooks/_useListInteraction.test.tsx diff --git a/.changeset/funny-fishes-appear.md b/.changeset/funny-fishes-appear.md new file mode 100644 index 00000000000..0a7180ad32e --- /dev/null +++ b/.changeset/funny-fishes-appear.md @@ -0,0 +1,5 @@ +--- +"@primer/react": patch +--- + +MarkdownEditor & MarkdownViewer: Update new line identifier for formatting markdown diff --git a/src/__tests__/hooks/_useListEditing.test.tsx b/src/__tests__/hooks/_useListEditing.test.tsx new file mode 100644 index 00000000000..32d02de6fed --- /dev/null +++ b/src/__tests__/hooks/_useListEditing.test.tsx @@ -0,0 +1,98 @@ +import {parseListItem, listItemToString, ListItem} from '../../drafts/MarkdownEditor/_useListEditing' + +describe('parseListItem', () => { + it('should return null for a line that is not a list item', () => { + expect(parseListItem('This is a test line')).toBeNull() + }) + + it('should parse a line that is a numbered list item', () => { + expect(parseListItem('1. This is a test line')).toEqual({ + leadingWhitespace: '', + text: 'This is a test line', + delimeter: 1, + middleWhitespace: ' ', + taskBox: null, + }) + }) + + it('should parse a line that is a numbered list item and multiple spaces within', () => { + expect(parseListItem('1. This is a test line')).toEqual({ + leadingWhitespace: '', + text: 'This is a test line', + delimeter: 1, + middleWhitespace: ' ', + taskBox: null, + }) + }) + + it('should parse a line that is a bulleted list item', () => { + expect(parseListItem('* This is a test line')).toEqual({ + leadingWhitespace: '', + text: 'This is a test line', + delimeter: '*', + middleWhitespace: ' ', + taskBox: null, + }) + }) + + it('should parse a line that is a task list item', () => { + expect(parseListItem('- [x] This is a test line')).toEqual({ + leadingWhitespace: '', + text: 'This is a test line', + delimeter: '-', + middleWhitespace: ' ', + taskBox: '[x]', + }) + + // Up to 4 spaces are supported + expect(parseListItem('- [x] This is a test line')).toEqual({ + leadingWhitespace: '', + text: 'This is a test line', + delimeter: '-', + middleWhitespace: ' ', + taskBox: '[x]', + }) + + // 5 spaces are not supported + expect(parseListItem('- [x] This is a test line')).toEqual({ + leadingWhitespace: '', + text: ' [x] This is a test line', + delimeter: '-', + middleWhitespace: ' ', + taskBox: null, + }) + + // Tabs are supported + expect(parseListItem('- [x] This is a test line')).toEqual({ + leadingWhitespace: '', + text: 'This is a test line', + delimeter: '-', + middleWhitespace: ' ', + taskBox: '[x]', + }) + }) +}) + +describe('listItemToString', () => { + it('should convert a list item to a string', () => { + const item = { + leadingWhitespace: '', + text: 'This is a test line', + delimeter: 1, + middleWhitespace: ' ', + taskBox: null, + } + expect(listItemToString(item)).toBe('1. This is a test line') + }) + + it('should convert a task list item to a string', () => { + const item = { + leadingWhitespace: '', + text: 'This is a test line', + delimeter: '-', + middleWhitespace: ' ', + taskBox: '[x]', + } as ListItem + expect(listItemToString(item)).toBe('- [x] This is a test line') + }) +}) diff --git a/src/__tests__/hooks/_useListInteraction.test.tsx b/src/__tests__/hooks/_useListInteraction.test.tsx new file mode 100644 index 00000000000..7bb9a697e17 --- /dev/null +++ b/src/__tests__/hooks/_useListInteraction.test.tsx @@ -0,0 +1,43 @@ +import {parseCodeFenceBegin, isCodeFenceEnd} from '../../drafts/MarkdownViewer/_useListInteraction' + +describe('parseCodeFenceBegin', () => { + it('should return null for a line without a code fence', () => { + expect(parseCodeFenceBegin('This is a test line without a code fence')).toBeNull() + }) + + it('should return the code fence for a line with a code fence', () => { + expect(parseCodeFenceBegin('```This is a test line with a code fence')).toBe('```') + }) + + it('should return the code fence for a line with a code fence and leading spaces', () => { + expect(parseCodeFenceBegin(' ~~~This is a test line with a code fence and leading spaces')).toBe('~~~') + }) + + it('should return null for a line with more than 3 leading spaces before the code fence', () => { + expect( + parseCodeFenceBegin(' ```This is a test line with more than 3 leading spaces before the code fence'), + ).toBeNull() + }) +}) + +describe('isCodeFenceEnd', () => { + it('should return true for a line that ends a code fence', () => { + expect(isCodeFenceEnd('```', '```')).toBe(true) + }) + + it('should return false for a line that does not end a code fence', () => { + expect(isCodeFenceEnd('This is a test line', '```')).toBe(false) + }) + + it('should return true for a line that ends a code fence with leading spaces', () => { + expect(isCodeFenceEnd(' ~~~', '~~~')).toBe(true) + }) + + it('should return true for a line that ends a code fence with different new line characteres', () => { + expect(isCodeFenceEnd('~~~', '~~~')).toBe(true) + }) + + it('should return false for a line with more than 3 leading spaces before the code fence end', () => { + expect(isCodeFenceEnd(' ```', '```')).toBe(false) + }) +}) diff --git a/src/drafts/MarkdownEditor/_useIndenting.ts b/src/drafts/MarkdownEditor/_useIndenting.ts index abea48e79f5..a57ea51302a 100644 --- a/src/drafts/MarkdownEditor/_useIndenting.ts +++ b/src/drafts/MarkdownEditor/_useIndenting.ts @@ -29,7 +29,7 @@ export const useIndenting = ({emitChange}: UseIndentingSettings): UseIndentingRe const [start, end] = getSelectedLineRange(textarea) const updatedLines = textarea.value .slice(start, end) - .split('\n') + .split(/\r?\n/) .map(line => (event.shiftKey ? dedent(line) : indent(line))) .join('\n') diff --git a/src/drafts/MarkdownEditor/_useListEditing.ts b/src/drafts/MarkdownEditor/_useListEditing.ts index ac10fd94c2d..dd2712eb3e5 100644 --- a/src/drafts/MarkdownEditor/_useListEditing.ts +++ b/src/drafts/MarkdownEditor/_useListEditing.ts @@ -60,9 +60,9 @@ export const parseListItem = (line: string): ListItem | null => { } export const listItemToString = (item: ListItem) => - `${item.leadingWhitespace}${typeof item.delimeter === 'number' ? `${item.delimeter}.` : item.delimeter}${ - item.middleWhitespace - }${item.taskBox || ''} ${item.text}` + typeof item.delimeter === 'number' + ? `${item.leadingWhitespace}${`${item.delimeter}.`}${item.middleWhitespace}${item.text}` + : `${item.leadingWhitespace}${item.delimeter}${item.middleWhitespace}${item.taskBox || ''} ${item.text}` /** * Provides support for list editing in the Markdown editor. This includes inserting new @@ -79,7 +79,7 @@ export const useListEditing = ({emitChange}: UseListEditingSettings): UseListEdi // Strip off the leading newline by adding 1 const followingText = textarea.value.slice(currentLineEnd + 1) - const followingLines = followingText.split('\n') + const followingLines = followingText.split(/\r?\n/) const followingNumericListItems: Array = [] let prevItemNumber = currentLineItem.delimeter diff --git a/src/drafts/MarkdownViewer/MarkdownViewer.test.tsx b/src/drafts/MarkdownViewer/MarkdownViewer.test.tsx index c6db485a296..ac2f0c1c1f0 100644 --- a/src/drafts/MarkdownViewer/MarkdownViewer.test.tsx +++ b/src/drafts/MarkdownViewer/MarkdownViewer.test.tsx @@ -28,6 +28,7 @@ text before list - [ ] item 2 text after list` + const noItemsCheckedWithSpecialNewLineMarkdown = `\ntext before list\r\n\r\n- [ ] item 1\n- [ ] item 2\r\n\r\ntext after list` const hierarchyBeforeTaskListNoItemsChecked = ` text before list @@ -125,6 +126,21 @@ text after list` await waitFor(() => expect(onChangeMock).toHaveBeenCalledWith(firstItemCheckedMarkdown)) }) + it('calls `onChange` with the updated Markdown when a task is checked in a text with different new line chars', async () => { + const onChangeMock = jest.fn() + const {getAllByRole} = render( + , + ) + const items = getAllByRole('checkbox') + fireEvent.change(items[0]) + await waitFor(() => expect(onChangeMock).toHaveBeenCalledWith(firstItemCheckedMarkdown)) + }) + it('calls `onChange` with the updated Markdown when a task is checked and hierarchy is present', async () => { const onChangeMock = jest.fn() const {getAllByRole} = render( diff --git a/src/drafts/MarkdownViewer/_useListInteraction.ts b/src/drafts/MarkdownViewer/_useListInteraction.ts index ce1dad4ace0..03847489550 100644 --- a/src/drafts/MarkdownViewer/_useListInteraction.ts +++ b/src/drafts/MarkdownViewer/_useListInteraction.ts @@ -5,17 +5,17 @@ import {ListItem, listItemToString, parseListItem} from '../MarkdownEditor/_useL type TaskListItem = ListItem & {taskBox: '[ ]' | '[x]'} // Make check for code fences more robust per spec: https://github.github.com/gfm/#fenced-code-blocks -const parseCodeFenceBegin = (line: string) => { +export const parseCodeFenceBegin = (line: string) => { const match = line.match(/^ {0,3}(`{3,}|~{3,})[^`]*$/) return match ? match[1] : null } -const isCodeFenceEnd = (line: string, fence: string) => { +export const isCodeFenceEnd = (line: string, fence: string) => { const regex = new RegExp(`^ {0,3}${fence}${fence[0]}* *$`) return regex.test(line) } -const isTaskListItem = (item: ListItem | null): item is TaskListItem => typeof item?.taskBox === 'string' +export const isTaskListItem = (item: ListItem | null): item is TaskListItem => typeof item?.taskBox === 'string' const toggleTaskListItem = (item: TaskListItem): TaskListItem => ({ ...item, @@ -53,7 +53,7 @@ export const useListInteraction = ({ const onToggleItem = useCallback( (toggledItemIndex: number) => () => { - const lines = markdownRef.current.split('\n') + const lines = markdownRef.current.split(/\r?\n/) let currentCodeFence: string | null = null for (let lineIndex = 0, taskIndex = 0; lineIndex < lines.length; lineIndex++) { From d26aeab32ad90e084d2cec0073df18d811fda820 Mon Sep 17 00:00:00 2001 From: Keith Cirkel Date: Wed, 6 Dec 2023 15:59:30 +0000 Subject: [PATCH 15/19] Allow modal dialogs in useRovingTabIndex (#4013) * skip modal dialog elements in useRovingTabIndex * changeset --- .changeset/ten-tables-grin.md | 5 +++++ src/TreeView/useRovingTabIndex.ts | 11 +++++++++++ 2 files changed, 16 insertions(+) create mode 100644 .changeset/ten-tables-grin.md diff --git a/.changeset/ten-tables-grin.md b/.changeset/ten-tables-grin.md new file mode 100644 index 00000000000..54167faac4a --- /dev/null +++ b/.changeset/ten-tables-grin.md @@ -0,0 +1,5 @@ +--- +'@primer/react': patch +--- + +Avoid error when using Modal Dialog within TreeView diff --git a/src/TreeView/useRovingTabIndex.ts b/src/TreeView/useRovingTabIndex.ts index 99cc4b9f319..1d93387bec0 100644 --- a/src/TreeView/useRovingTabIndex.ts +++ b/src/TreeView/useRovingTabIndex.ts @@ -22,6 +22,17 @@ export function useRovingTabIndex({ getNextFocusable: (direction, from, event) => { if (!(from instanceof HTMLElement)) return + // Skip elements within a modal dialog + // This need to be in a try/catch to avoid errors in + // non-supported browsers + try { + if (from.closest('dialog:modal')) { + return + } + } catch { + // Don't return + } + return getNextFocusableElement(from, event) ?? from }, focusInStrategy: () => { From 503c7e625a8a3388737949880b64791f5833f027 Mon Sep 17 00:00:00 2001 From: Mike Perrotti Date: Wed, 6 Dec 2023 11:02:57 -0500 Subject: [PATCH 16/19] Fixes layout for loading cells (#4026) * fixes layout for loading cells * Create cuddly-dancers-greet.md --- .changeset/cuddly-dancers-greet.md | 7 +++++++ src/DataTable/Table.tsx | 1 + 2 files changed, 8 insertions(+) create mode 100644 .changeset/cuddly-dancers-greet.md diff --git a/.changeset/cuddly-dancers-greet.md b/.changeset/cuddly-dancers-greet.md new file mode 100644 index 00000000000..661e9fea84f --- /dev/null +++ b/.changeset/cuddly-dancers-greet.md @@ -0,0 +1,7 @@ +--- +"@primer/react": patch +--- + +Fixes layout for loading DataTable cells + + diff --git a/src/DataTable/Table.tsx b/src/DataTable/Table.tsx index e5c709ad61a..af65ba9aedb 100644 --- a/src/DataTable/Table.tsx +++ b/src/DataTable/Table.tsx @@ -171,6 +171,7 @@ const StyledTable = styled.table>` .TableCellSkeletonItems { display: flex; flex-direction: column; + width: 100%; } .TableCellSkeletonItem { From 0e9d841e398118843c92f9b92881ead62337c682 Mon Sep 17 00:00:00 2001 From: Katie Langerman <18661030+langermank@users.noreply.github.com> Date: Wed, 6 Dec 2023 09:05:44 -0800 Subject: [PATCH 17/19] Fix `line-height` on markdown viewer (comment box) (#4001) * adjust lh * Create fluffy-brooms-dream.md --- .changeset/fluffy-brooms-dream.md | 5 +++++ src/drafts/MarkdownEditor/_MarkdownInput.tsx | 2 +- 2 files changed, 6 insertions(+), 1 deletion(-) create mode 100644 .changeset/fluffy-brooms-dream.md diff --git a/.changeset/fluffy-brooms-dream.md b/.changeset/fluffy-brooms-dream.md new file mode 100644 index 00000000000..9693260837b --- /dev/null +++ b/.changeset/fluffy-brooms-dream.md @@ -0,0 +1,5 @@ +--- +"@primer/react": patch +--- + +Fix `line-height` on markdown viewer (comment box) diff --git a/src/drafts/MarkdownEditor/_MarkdownInput.tsx b/src/drafts/MarkdownEditor/_MarkdownInput.tsx index 305fa9290e6..62136b5699a 100644 --- a/src/drafts/MarkdownEditor/_MarkdownInput.tsx +++ b/src/drafts/MarkdownEditor/_MarkdownInput.tsx @@ -165,7 +165,7 @@ export const MarkdownInput = forwardRef outline: 'none', }, '& textarea': { - lineHeight: 1.2, + lineHeight: 'var(--text-body-lineHeight-medium, 1.4285)', resize: fullHeight ? 'none' : 'vertical', p: 3, fontFamily: monospace ? 'mono' : 'normal', From 0ea121af393e13a22c64514283ed881ae57414e5 Mon Sep 17 00:00:00 2001 From: Cole Bemis Date: Thu, 7 Dec 2023 02:55:09 -0800 Subject: [PATCH 18/19] StateLabel: Use correct octicons for draft PR and closed PR (#4024) * StateLabel: Use correct icons for draft PR and closed PR * Create tidy-coins-fix.md * Update StateLabel.tsx * test(vrt): update snapshots --------- Co-authored-by: Josh Black --- .changeset/tidy-coins-fix.md | 5 +++++ ...StateLabel-Draft-dark-colorblind-linux.png | Bin 7009 -> 7126 bytes .../StateLabel-Draft-dark-dimmed-linux.png | Bin 6870 -> 7038 bytes ...teLabel-Draft-dark-high-contrast-linux.png | Bin 7060 -> 7151 bytes .../StateLabel-Draft-dark-linux.png | Bin 7009 -> 7126 bytes ...StateLabel-Draft-dark-tritanopia-linux.png | Bin 7009 -> 7126 bytes ...tateLabel-Draft-light-colorblind-linux.png | Bin 6966 -> 7076 bytes ...eLabel-Draft-light-high-contrast-linux.png | Bin 6991 -> 7115 bytes .../StateLabel-Draft-light-linux.png | Bin 6966 -> 7076 bytes ...tateLabel-Draft-light-tritanopia-linux.png | Bin 6966 -> 7076 bytes ...abel-Pull-Closed-dark-colorblind-linux.png | Bin 7474 -> 7623 bytes ...ateLabel-Pull-Closed-dark-dimmed-linux.png | Bin 7194 -> 7331 bytes ...l-Pull-Closed-dark-high-contrast-linux.png | Bin 7465 -> 7519 bytes .../StateLabel-Pull-Closed-dark-linux.png | Bin 7359 -> 7482 bytes ...abel-Pull-Closed-dark-tritanopia-linux.png | Bin 7474 -> 7623 bytes ...bel-Pull-Closed-light-colorblind-linux.png | Bin 7440 -> 7572 bytes ...-Pull-Closed-light-high-contrast-linux.png | Bin 7414 -> 7566 bytes .../StateLabel-Pull-Closed-light-linux.png | Bin 7384 -> 7522 bytes ...bel-Pull-Closed-light-tritanopia-linux.png | Bin 7440 -> 7572 bytes src/StateLabel/StateLabel.tsx | 6 ++++-- 20 files changed, 9 insertions(+), 2 deletions(-) create mode 100644 .changeset/tidy-coins-fix.md diff --git a/.changeset/tidy-coins-fix.md b/.changeset/tidy-coins-fix.md new file mode 100644 index 00000000000..b6b3b62e3d0 --- /dev/null +++ b/.changeset/tidy-coins-fix.md @@ -0,0 +1,5 @@ +--- +"@primer/react": patch +--- + +StateLabel: Use correct octicons for `draft` and `pullClosed` states diff --git a/.playwright/snapshots/components/StateLabel.test.ts-snapshots/StateLabel-Draft-dark-colorblind-linux.png b/.playwright/snapshots/components/StateLabel.test.ts-snapshots/StateLabel-Draft-dark-colorblind-linux.png index 2e966260cc62fd5124ddcbaa0911920550ffab59..f6e84b9eddc61b0f802af9e51c7db70adb1b52db 100644 GIT binary patch literal 7126 zcmeHL{acb(A7^XHS~_>FXIYxs=9W)anfa9YE|o1SAEaeyfr!pZ1r-ZP5s_tEKAVZX zO`C7{l5Z$5HBbRz)h07dvqTg{G|d+f6csTMcy4xG`wO1uM}D~Pb6w|q?sI?6=leaM z@AsS^&xQuud}RL-2n4b@ed@$H5NOj1@PIzF0(yShvp)%F-ou{@J`Q5`?wSLE9PXSx zaqN70iAqLHl&6tJn$}o94u0VD8ReJIq8gu~s&*;0fL#}{`|;&idlBcOx(S{98}@r(D(@%&)X@i5s{())bTB>J325Hmk^#Iw{Brg^ z5NP+Eaxe(=-O>NeFtBnaDsiPszY$9$NLZpQ z(!r~-K`=Jf?_`GRk^FnMpy_I)8=|=}ypdapKp;-O`IL30qoaczBdcO3b;lCshklFC z-vk2vw!`y_WAf3_NH6|eO%d@)<3yBiryAv_B#LMmfVXyPSQW%YM@^5pqsc4KL7@-StBnWKnW^)7aj&icIWMN zd>uFN>g~RhBy02ZcVf1z7Yq&}+Lx9lE?{~PO-oCdq$CHG2VmUcVvm&WA;;I{@{P|M z8e-RP9||-+9X_PwASuGEnHsU@)i>W~yy+?pa-4v(nwpx5ibaw#W^cdKW;0{af5K*q zfu8J;?KX;%G{cyimYeWe(dAgmUgtJoyDB%=`X{SPE^6=E8k1z#l_NR6(-*OciH#$2 zL+|=f4&fZp4 zgHz=+PvuGz*;h^;&(Ts_Wswa9?)4oo2ol-4;QjWh@`$0$zSthS@Vd{?=?S*7!aR#b z((CJ+YG{-w#syAW0h(JU$efWV?-Giw0w(*|v_tK5`jJ3Rb=KlbDV@$u)jVy9!VNb1 zn77GypF1r1t?Ua&eY4FKYCqt^)A^$&MP8CW>|QW!4a=_d*4BjwBFBJ?#_MSTC~%Z_ zx|Cg1T!hhTCFd!o{`DbO2vX@~Y;#(B;zD@D;}z^joZULp#{fGcka>BN3N&QNmYv$4 zUF2QCFmAxcP%wXXOH`)jtgLzZ7FSy;MB>QZdF*e8-$+|cM^z(~^5lzna);K<>pWbX zO|%meaC|zmEs^L}0%@hw$C}rr8Jd?B3h8psPLpcWCJ|Q8al6@u1gKlQ7L=7ENP0S~ z8Xc3%(Qvqk>gcEPmxpqpHt`ci&l&pFgsf@`oiYO6!pZiLfTo3k4c=Nqno6ykd(zUe$ zt`eIjk;%C%YN`&vER<{Wq{e~qG7e2;cpo4beRwK=w3Q9rLG=ku=&F2YUTYC#p^|IT zL+n@H@pSWycKj8wvbQu`lut{Ske43)sGaL0HIdXP;pZRdoVj8#wjZb!|i$% zpi<*v?4QTvGV-H6u)sL)E5u*OdfNdZd5+lCW$L0YcV)~uoSJIPLL#GFpcJI>UsF^z-{U>CPPH@Jea~)Z%Ac;h@&Sv zJ^Aw`0)f#t^AT@PXnX^f)!rPHrXIi~1!$aYLhRfD38*#JneM997#uAU$Gc2m$QIKH z>M>F$MQA?SVPSVZGXP}oBOWN#-Fetbs_nr;7@u`-mux;%OIs=-El_^t@<$lJRRO$I8Y1G{b819fI{;oMH`1n zW&{LH$*^|AXwY``Wybuoipq@@QN@LUrgpUSk$L*w&O5Z1I-O3unuG)sdJ6^XG;K>z z4yOMpQOh8i7A||B;o2!`Z$`SR6X8usR#7IRWq7$R$5&A|B1md@2t;G_1?zWP$Z$9k ziR_rPm4`v0ECud~13Wn2iNO;r{h^p^+G{Qhg1n|&SKx4&Oa^387A3;KPF|iY{@oui zJ-c!tTR_Jcq&f5BS@sa3dRY3a`fk4y5SQP1TpG$22!%qyvWll%tO$C>o_e_0auci^ z!%90diFpo!P{}+y33+w;@ literal 7009 zcmeHM|6fw)9%pmQZOz>499w-&*%M1sS%fxR8wCdJv zP2JYr{2I_#;8`Rfn} zKfkz7qm%NhjVk)q+k5Z5`R@5$Uw=3i9oIK1S$K8- zE9?_3#L*(T!f-Or=~O#ueJWc2lGCx_w9RwX8W_+!>GB+J_=wn7{j(99 zkx&AMb>u?j4?mmqda#!#6s*}A!By>*j5wC%R&zKK{Qmpzbpfx#bgZj4Ml*M-JB2Uw zWKLEZb7xuctvnOUdQahCn~h^TRcsjOwqI{i%WN!GEWSWWJ?5C6k{WoMo7$TS*BAfZ z%MD7jdhjEItlU(kXbL2r@9HX`-USp`%*CMBUPT}Vq9~k4fxceyO&)aua{IdU$HTAl zpZ;=N7XU|fX5F>mX!TIW@Xhqi%H|{h2u|KMAmEp*KG%y)Vh`?A9d|*9xfQ4_;~fI< zDj(XtWj>DEG=@G!Ru%Tvh_*h)HLYz-aXw)i*BZ)yQ>pO2yhA&Fzb(hS5a7J@V9S6^ zhUbKc!4uMm7f!D&_!n~FoTZ5uoPbW5pSCC}h+9C6qKWt8<`sr1zpQ!?EGYr!`*v`0 zO`|DN`M?*k)&K76>$BdMA{(n1&I^SKa5cm=?aCe|L;dJx6lMH?Msu7}{SF+DI<_UK zqq||HFP2E0KHpcNcIxjHSjH_fp&7Ku3Z|<80H_OIcG70m%x8KKEL30T=u50xJg2`+ZoE+OxJ35h}`)3yS_VvqT#pMuLUYG3< zOc^ruAhJv60hKYK*03nX(*(QW`SZp^->r=s##lAO`&<<2c;hv>$_k$-;;&ayz|r-f zcxf@1pMCcTB|m#F0H{u@&p}!x1OU`tNz~yy?ouXXMv-(stYl~^H5v`HXbmE3rs_c1 zdJrDn@Dtj(M?_!x%!g&-TjR@90KgEQ+2kzvf&u^{%G?r0G%?sofCrw9z2Z2}a9j%7 zzgVrJnPrq3VarLe@wkh>gD@|TYsGX&uM;ah!2v$Co#^*ul)CYI> z8WuGroHE98w#wEW0}Y4v%OFK67DsTfKu|cNx5&~>bfQsZ8A{&vRW<_#W68H8H;RZh> z61~t-TRR!^5djE8p|E8<2JY%9WshDr6Lsr0flWMCI_Xk#_|P?RwmLH)L*k$K_z2@!e)VfvGsTz%^p_kAuzHkvkk~fwRB8d6<*UZQa`Ki-|WC#}R zH6I)7_6;Byc)6d)9n1AMCwo>(^@ggH@Kk0x7vI_}ps1;LcyvobTGW%{uq!{tRV?6U z@@B?Slc%xxn~jAuKdR&^SwF}(xOyzn!$`u&SeKrC2{}h0=<0zgmNi<%p9+QSK@2-i zE6%rw__Y2m>s9hrUTi`Fe5nPVVsw+s5e9n_y=i?h>Y}zvDORNU;WBx$dlSad!y(xO z(;IVk!F>3~OU4~vU!n{-R^ag}2!piVua!P6x$|)KIqH0I`0)FsTuy5>4I7pc<3hHv zXkTS>bF+22zsO3hT7X079@IY9MLK-096nN1)HwBMM^}8r(tUKp1dJlAuJ!ZYvS4nF z=%zTzd7bGxVfIL_6%_VPDVyoX`nj$e{A zaonHw&%r>;JLA+b1VEOFGBijNZEdYNRj8=P_mILDWv9n#EzT07kAWsu- za&j_vs~<;3k}J9j30_|O8??W`txl8+GQY9JMn*9McL? zMn;AZ<0`c);8M#2^;&KHe4qGdY$qLn%zYK#?DfA=>A7lHLq>9mEM=;vcl?7CSXPKc z-vzO&9{J)se_2ClyCxJ0>s}ljBIW1T3o<8?5{j6V;&0oY!7a};gguLPCfC)R!d|8K zwTHnKI;@b!sT-^xZRwb3>}{25wHf?mE{R{s&+4C13ZYSDvvElm;8L&puUVu4Sds|i zpd3E~<2)07@y{)FUgE0B-4#3`e|G8VCecme|KgFxomcL>a_7~{+$3--%B?83qTGsl z85@pnFL8T`+e_SD;`S1FOXKCg&-s7Ys~x%jA!}3TL$&MG86xhp_)nX5A36J9_=-)W diff --git a/.playwright/snapshots/components/StateLabel.test.ts-snapshots/StateLabel-Draft-dark-dimmed-linux.png b/.playwright/snapshots/components/StateLabel.test.ts-snapshots/StateLabel-Draft-dark-dimmed-linux.png index 9c28728a16a78fe1dcfe381a6feb9ae84d6ee156..192629cfc853e9568d012e8ac379736bd5262e18 100644 GIT binary patch literal 7038 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 diff --git a/.playwright/snapshots/components/StateLabel.test.ts-snapshots/StateLabel-Draft-dark-high-contrast-linux.png b/.playwright/snapshots/components/StateLabel.test.ts-snapshots/StateLabel-Draft-dark-high-contrast-linux.png index a143fbe236b8f7efed56f769ccaf90b72ba74436..27daf124151d39009d1bfb108e06fbb179569a72 100644 GIT binary patch delta 2570 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 aJN3J={}mS6QV35uL>-Jh!2bTkPyYc80)99E delta 2490 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 diff --git a/.playwright/snapshots/components/StateLabel.test.ts-snapshots/StateLabel-Draft-dark-linux.png b/.playwright/snapshots/components/StateLabel.test.ts-snapshots/StateLabel-Draft-dark-linux.png index 2e966260cc62fd5124ddcbaa0911920550ffab59..f6e84b9eddc61b0f802af9e51c7db70adb1b52db 100644 GIT binary patch literal 7126 zcmeHL{acb(A7^XHS~_>FXIYxs=9W)anfa9YE|o1SAEaeyfr!pZ1r-ZP5s_tEKAVZX zO`C7{l5Z$5HBbRz)h07dvqTg{G|d+f6csTMcy4xG`wO1uM}D~Pb6w|q?sI?6=leaM z@AsS^&xQuud}RL-2n4b@ed@$H5NOj1@PIzF0(yShvp)%F-ou{@J`Q5`?wSLE9PXSx zaqN70iAqLHl&6tJn$}o94u0VD8ReJIq8gu~s&*;0fL#}{`|;&idlBcOx(S{98}@r(D(@%&)X@i5s{())bTB>J325Hmk^#Iw{Brg^ z5NP+Eaxe(=-O>NeFtBnaDsiPszY$9$NLZpQ z(!r~-K`=Jf?_`GRk^FnMpy_I)8=|=}ypdapKp;-O`IL30qoaczBdcO3b;lCshklFC z-vk2vw!`y_WAf3_NH6|eO%d@)<3yBiryAv_B#LMmfVXyPSQW%YM@^5pqsc4KL7@-StBnWKnW^)7aj&icIWMN zd>uFN>g~RhBy02ZcVf1z7Yq&}+Lx9lE?{~PO-oCdq$CHG2VmUcVvm&WA;;I{@{P|M z8e-RP9||-+9X_PwASuGEnHsU@)i>W~yy+?pa-4v(nwpx5ibaw#W^cdKW;0{af5K*q zfu8J;?KX;%G{cyimYeWe(dAgmUgtJoyDB%=`X{SPE^6=E8k1z#l_NR6(-*OciH#$2 zL+|=f4&fZp4 zgHz=+PvuGz*;h^;&(Ts_Wswa9?)4oo2ol-4;QjWh@`$0$zSthS@Vd{?=?S*7!aR#b z((CJ+YG{-w#syAW0h(JU$efWV?-Giw0w(*|v_tK5`jJ3Rb=KlbDV@$u)jVy9!VNb1 zn77GypF1r1t?Ua&eY4FKYCqt^)A^$&MP8CW>|QW!4a=_d*4BjwBFBJ?#_MSTC~%Z_ zx|Cg1T!hhTCFd!o{`DbO2vX@~Y;#(B;zD@D;}z^joZULp#{fGcka>BN3N&QNmYv$4 zUF2QCFmAxcP%wXXOH`)jtgLzZ7FSy;MB>QZdF*e8-$+|cM^z(~^5lzna);K<>pWbX zO|%meaC|zmEs^L}0%@hw$C}rr8Jd?B3h8psPLpcWCJ|Q8al6@u1gKlQ7L=7ENP0S~ z8Xc3%(Qvqk>gcEPmxpqpHt`ci&l&pFgsf@`oiYO6!pZiLfTo3k4c=Nqno6ykd(zUe$ zt`eIjk;%C%YN`&vER<{Wq{e~qG7e2;cpo4beRwK=w3Q9rLG=ku=&F2YUTYC#p^|IT zL+n@H@pSWycKj8wvbQu`lut{Ske43)sGaL0HIdXP;pZRdoVj8#wjZb!|i$% zpi<*v?4QTvGV-H6u)sL)E5u*OdfNdZd5+lCW$L0YcV)~uoSJIPLL#GFpcJI>UsF^z-{U>CPPH@Jea~)Z%Ac;h@&Sv zJ^Aw`0)f#t^AT@PXnX^f)!rPHrXIi~1!$aYLhRfD38*#JneM997#uAU$Gc2m$QIKH z>M>F$MQA?SVPSVZGXP}oBOWN#-Fetbs_nr;7@u`-mux;%OIs=-El_^t@<$lJRRO$I8Y1G{b819fI{;oMH`1n zW&{LH$*^|AXwY``Wybuoipq@@QN@LUrgpUSk$L*w&O5Z1I-O3unuG)sdJ6^XG;K>z z4yOMpQOh8i7A||B;o2!`Z$`SR6X8usR#7IRWq7$R$5&A|B1md@2t;G_1?zWP$Z$9k ziR_rPm4`v0ECud~13Wn2iNO;r{h^p^+G{Qhg1n|&SKx4&Oa^387A3;KPF|iY{@oui zJ-c!tTR_Jcq&f5BS@sa3dRY3a`fk4y5SQP1TpG$22!%qyvWll%tO$C>o_e_0auci^ z!%90diFpo!P{}+y33+w;@ literal 7009 zcmeHM|6fw)9%pmQZOz>499w-&*%M1sS%fxR8wCdJv zP2JYr{2I_#;8`Rfn} zKfkz7qm%NhjVk)q+k5Z5`R@5$Uw=3i9oIK1S$K8- zE9?_3#L*(T!f-Or=~O#ueJWc2lGCx_w9RwX8W_+!>GB+J_=wn7{j(99 zkx&AMb>u?j4?mmqda#!#6s*}A!By>*j5wC%R&zKK{Qmpzbpfx#bgZj4Ml*M-JB2Uw zWKLEZb7xuctvnOUdQahCn~h^TRcsjOwqI{i%WN!GEWSWWJ?5C6k{WoMo7$TS*BAfZ z%MD7jdhjEItlU(kXbL2r@9HX`-USp`%*CMBUPT}Vq9~k4fxceyO&)aua{IdU$HTAl zpZ;=N7XU|fX5F>mX!TIW@Xhqi%H|{h2u|KMAmEp*KG%y)Vh`?A9d|*9xfQ4_;~fI< zDj(XtWj>DEG=@G!Ru%Tvh_*h)HLYz-aXw)i*BZ)yQ>pO2yhA&Fzb(hS5a7J@V9S6^ zhUbKc!4uMm7f!D&_!n~FoTZ5uoPbW5pSCC}h+9C6qKWt8<`sr1zpQ!?EGYr!`*v`0 zO`|DN`M?*k)&K76>$BdMA{(n1&I^SKa5cm=?aCe|L;dJx6lMH?Msu7}{SF+DI<_UK zqq||HFP2E0KHpcNcIxjHSjH_fp&7Ku3Z|<80H_OIcG70m%x8KKEL30T=u50xJg2`+ZoE+OxJ35h}`)3yS_VvqT#pMuLUYG3< zOc^ruAhJv60hKYK*03nX(*(QW`SZp^->r=s##lAO`&<<2c;hv>$_k$-;;&ayz|r-f zcxf@1pMCcTB|m#F0H{u@&p}!x1OU`tNz~yy?ouXXMv-(stYl~^H5v`HXbmE3rs_c1 zdJrDn@Dtj(M?_!x%!g&-TjR@90KgEQ+2kzvf&u^{%G?r0G%?sofCrw9z2Z2}a9j%7 zzgVrJnPrq3VarLe@wkh>gD@|TYsGX&uM;ah!2v$Co#^*ul)CYI> z8WuGroHE98w#wEW0}Y4v%OFK67DsTfKu|cNx5&~>bfQsZ8A{&vRW<_#W68H8H;RZh> z61~t-TRR!^5djE8p|E8<2JY%9WshDr6Lsr0flWMCI_Xk#_|P?RwmLH)L*k$K_z2@!e)VfvGsTz%^p_kAuzHkvkk~fwRB8d6<*UZQa`Ki-|WC#}R zH6I)7_6;Byc)6d)9n1AMCwo>(^@ggH@Kk0x7vI_}ps1;LcyvobTGW%{uq!{tRV?6U z@@B?Slc%xxn~jAuKdR&^SwF}(xOyzn!$`u&SeKrC2{}h0=<0zgmNi<%p9+QSK@2-i zE6%rw__Y2m>s9hrUTi`Fe5nPVVsw+s5e9n_y=i?h>Y}zvDORNU;WBx$dlSad!y(xO z(;IVk!F>3~OU4~vU!n{-R^ag}2!piVua!P6x$|)KIqH0I`0)FsTuy5>4I7pc<3hHv zXkTS>bF+22zsO3hT7X079@IY9MLK-096nN1)HwBMM^}8r(tUKp1dJlAuJ!ZYvS4nF z=%zTzd7bGxVfIL_6%_VPDVyoX`nj$e{A zaonHw&%r>;JLA+b1VEOFGBijNZEdYNRj8=P_mILDWv9n#EzT07kAWsu- za&j_vs~<;3k}J9j30_|O8??W`txl8+GQY9JMn*9McL? zMn;AZ<0`c);8M#2^;&KHe4qGdY$qLn%zYK#?DfA=>A7lHLq>9mEM=;vcl?7CSXPKc z-vzO&9{J)se_2ClyCxJ0>s}ljBIW1T3o<8?5{j6V;&0oY!7a};gguLPCfC)R!d|8K zwTHnKI;@b!sT-^xZRwb3>}{25wHf?mE{R{s&+4C13ZYSDvvElm;8L&puUVu4Sds|i zpd3E~<2)07@y{)FUgE0B-4#3`e|G8VCecme|KgFxomcL>a_7~{+$3--%B?83qTGsl z85@pnFL8T`+e_SD;`S1FOXKCg&-s7Ys~x%jA!}3TL$&MG86xhp_)nX5A36J9_=-)W diff --git a/.playwright/snapshots/components/StateLabel.test.ts-snapshots/StateLabel-Draft-dark-tritanopia-linux.png b/.playwright/snapshots/components/StateLabel.test.ts-snapshots/StateLabel-Draft-dark-tritanopia-linux.png index 2e966260cc62fd5124ddcbaa0911920550ffab59..f6e84b9eddc61b0f802af9e51c7db70adb1b52db 100644 GIT binary patch literal 7126 zcmeHL{acb(A7^XHS~_>FXIYxs=9W)anfa9YE|o1SAEaeyfr!pZ1r-ZP5s_tEKAVZX zO`C7{l5Z$5HBbRz)h07dvqTg{G|d+f6csTMcy4xG`wO1uM}D~Pb6w|q?sI?6=leaM z@AsS^&xQuud}RL-2n4b@ed@$H5NOj1@PIzF0(yShvp)%F-ou{@J`Q5`?wSLE9PXSx zaqN70iAqLHl&6tJn$}o94u0VD8ReJIq8gu~s&*;0fL#}{`|;&idlBcOx(S{98}@r(D(@%&)X@i5s{())bTB>J325Hmk^#Iw{Brg^ z5NP+Eaxe(=-O>NeFtBnaDsiPszY$9$NLZpQ z(!r~-K`=Jf?_`GRk^FnMpy_I)8=|=}ypdapKp;-O`IL30qoaczBdcO3b;lCshklFC z-vk2vw!`y_WAf3_NH6|eO%d@)<3yBiryAv_B#LMmfVXyPSQW%YM@^5pqsc4KL7@-StBnWKnW^)7aj&icIWMN zd>uFN>g~RhBy02ZcVf1z7Yq&}+Lx9lE?{~PO-oCdq$CHG2VmUcVvm&WA;;I{@{P|M z8e-RP9||-+9X_PwASuGEnHsU@)i>W~yy+?pa-4v(nwpx5ibaw#W^cdKW;0{af5K*q zfu8J;?KX;%G{cyimYeWe(dAgmUgtJoyDB%=`X{SPE^6=E8k1z#l_NR6(-*OciH#$2 zL+|=f4&fZp4 zgHz=+PvuGz*;h^;&(Ts_Wswa9?)4oo2ol-4;QjWh@`$0$zSthS@Vd{?=?S*7!aR#b z((CJ+YG{-w#syAW0h(JU$efWV?-Giw0w(*|v_tK5`jJ3Rb=KlbDV@$u)jVy9!VNb1 zn77GypF1r1t?Ua&eY4FKYCqt^)A^$&MP8CW>|QW!4a=_d*4BjwBFBJ?#_MSTC~%Z_ zx|Cg1T!hhTCFd!o{`DbO2vX@~Y;#(B;zD@D;}z^joZULp#{fGcka>BN3N&QNmYv$4 zUF2QCFmAxcP%wXXOH`)jtgLzZ7FSy;MB>QZdF*e8-$+|cM^z(~^5lzna);K<>pWbX zO|%meaC|zmEs^L}0%@hw$C}rr8Jd?B3h8psPLpcWCJ|Q8al6@u1gKlQ7L=7ENP0S~ z8Xc3%(Qvqk>gcEPmxpqpHt`ci&l&pFgsf@`oiYO6!pZiLfTo3k4c=Nqno6ykd(zUe$ zt`eIjk;%C%YN`&vER<{Wq{e~qG7e2;cpo4beRwK=w3Q9rLG=ku=&F2YUTYC#p^|IT zL+n@H@pSWycKj8wvbQu`lut{Ske43)sGaL0HIdXP;pZRdoVj8#wjZb!|i$% zpi<*v?4QTvGV-H6u)sL)E5u*OdfNdZd5+lCW$L0YcV)~uoSJIPLL#GFpcJI>UsF^z-{U>CPPH@Jea~)Z%Ac;h@&Sv zJ^Aw`0)f#t^AT@PXnX^f)!rPHrXIi~1!$aYLhRfD38*#JneM997#uAU$Gc2m$QIKH z>M>F$MQA?SVPSVZGXP}oBOWN#-Fetbs_nr;7@u`-mux;%OIs=-El_^t@<$lJRRO$I8Y1G{b819fI{;oMH`1n zW&{LH$*^|AXwY``Wybuoipq@@QN@LUrgpUSk$L*w&O5Z1I-O3unuG)sdJ6^XG;K>z z4yOMpQOh8i7A||B;o2!`Z$`SR6X8usR#7IRWq7$R$5&A|B1md@2t;G_1?zWP$Z$9k ziR_rPm4`v0ECud~13Wn2iNO;r{h^p^+G{Qhg1n|&SKx4&Oa^387A3;KPF|iY{@oui zJ-c!tTR_Jcq&f5BS@sa3dRY3a`fk4y5SQP1TpG$22!%qyvWll%tO$C>o_e_0auci^ z!%90diFpo!P{}+y33+w;@ literal 7009 zcmeHM|6fw)9%pmQZOz>499w-&*%M1sS%fxR8wCdJv zP2JYr{2I_#;8`Rfn} zKfkz7qm%NhjVk)q+k5Z5`R@5$Uw=3i9oIK1S$K8- zE9?_3#L*(T!f-Or=~O#ueJWc2lGCx_w9RwX8W_+!>GB+J_=wn7{j(99 zkx&AMb>u?j4?mmqda#!#6s*}A!By>*j5wC%R&zKK{Qmpzbpfx#bgZj4Ml*M-JB2Uw zWKLEZb7xuctvnOUdQahCn~h^TRcsjOwqI{i%WN!GEWSWWJ?5C6k{WoMo7$TS*BAfZ z%MD7jdhjEItlU(kXbL2r@9HX`-USp`%*CMBUPT}Vq9~k4fxceyO&)aua{IdU$HTAl zpZ;=N7XU|fX5F>mX!TIW@Xhqi%H|{h2u|KMAmEp*KG%y)Vh`?A9d|*9xfQ4_;~fI< zDj(XtWj>DEG=@G!Ru%Tvh_*h)HLYz-aXw)i*BZ)yQ>pO2yhA&Fzb(hS5a7J@V9S6^ zhUbKc!4uMm7f!D&_!n~FoTZ5uoPbW5pSCC}h+9C6qKWt8<`sr1zpQ!?EGYr!`*v`0 zO`|DN`M?*k)&K76>$BdMA{(n1&I^SKa5cm=?aCe|L;dJx6lMH?Msu7}{SF+DI<_UK zqq||HFP2E0KHpcNcIxjHSjH_fp&7Ku3Z|<80H_OIcG70m%x8KKEL30T=u50xJg2`+ZoE+OxJ35h}`)3yS_VvqT#pMuLUYG3< zOc^ruAhJv60hKYK*03nX(*(QW`SZp^->r=s##lAO`&<<2c;hv>$_k$-;;&ayz|r-f zcxf@1pMCcTB|m#F0H{u@&p}!x1OU`tNz~yy?ouXXMv-(stYl~^H5v`HXbmE3rs_c1 zdJrDn@Dtj(M?_!x%!g&-TjR@90KgEQ+2kzvf&u^{%G?r0G%?sofCrw9z2Z2}a9j%7 zzgVrJnPrq3VarLe@wkh>gD@|TYsGX&uM;ah!2v$Co#^*ul)CYI> z8WuGroHE98w#wEW0}Y4v%OFK67DsTfKu|cNx5&~>bfQsZ8A{&vRW<_#W68H8H;RZh> z61~t-TRR!^5djE8p|E8<2JY%9WshDr6Lsr0flWMCI_Xk#_|P?RwmLH)L*k$K_z2@!e)VfvGsTz%^p_kAuzHkvkk~fwRB8d6<*UZQa`Ki-|WC#}R zH6I)7_6;Byc)6d)9n1AMCwo>(^@ggH@Kk0x7vI_}ps1;LcyvobTGW%{uq!{tRV?6U z@@B?Slc%xxn~jAuKdR&^SwF}(xOyzn!$`u&SeKrC2{}h0=<0zgmNi<%p9+QSK@2-i zE6%rw__Y2m>s9hrUTi`Fe5nPVVsw+s5e9n_y=i?h>Y}zvDORNU;WBx$dlSad!y(xO z(;IVk!F>3~OU4~vU!n{-R^ag}2!piVua!P6x$|)KIqH0I`0)FsTuy5>4I7pc<3hHv zXkTS>bF+22zsO3hT7X079@IY9MLK-096nN1)HwBMM^}8r(tUKp1dJlAuJ!ZYvS4nF z=%zTzd7bGxVfIL_6%_VPDVyoX`nj$e{A zaonHw&%r>;JLA+b1VEOFGBijNZEdYNRj8=P_mILDWv9n#EzT07kAWsu- za&j_vs~<;3k}J9j30_|O8??W`txl8+GQY9JMn*9McL? zMn;AZ<0`c);8M#2^;&KHe4qGdY$qLn%zYK#?DfA=>A7lHLq>9mEM=;vcl?7CSXPKc z-vzO&9{J)se_2ClyCxJ0>s}ljBIW1T3o<8?5{j6V;&0oY!7a};gguLPCfC)R!d|8K zwTHnKI;@b!sT-^xZRwb3>}{25wHf?mE{R{s&+4C13ZYSDvvElm;8L&puUVu4Sds|i zpd3E~<2)07@y{)FUgE0B-4#3`e|G8VCecme|KgFxomcL>a_7~{+$3--%B?83qTGsl z85@pnFL8T`+e_SD;`S1FOXKCg&-s7Ys~x%jA!}3TL$&MG86xhp_)nX5A36J9_=-)W diff --git a/.playwright/snapshots/components/StateLabel.test.ts-snapshots/StateLabel-Draft-light-colorblind-linux.png b/.playwright/snapshots/components/StateLabel.test.ts-snapshots/StateLabel-Draft-light-colorblind-linux.png index 8be9f56b965a5f110d63bfdbf3794e33aa6fbe22..de638b9ea33e2fad40e4ff1a002d26c6fbbdca1c 100644 GIT binary patch literal 7076 zcmeHM`&&}?AE&HYYebio&1%ioOAfRU+>H7^?q}> z^7Wx0`1`K!!(cFY@R$3Jz+g_3;0w0sJ@Cxc4WClMWnR*epgk~tyZa~%=0*zMhdp|> z(9lb{L8dWf6Y*6CQ*O0gUa)6T|Hm#)qGc=grSF@6W&ZnA4`<(W#r^B0MTaQ*WOpGC zPm#qW6lOQQ{1Po!@=Y6FfD4 zaT@r(=##&9q0M*jxiOqY=1HQNsD`L$VIBP_gArsI>zO{1-MK8&L;1}>Pcy!!K7lq_ zQzksFDa;R~44ugV(LM3`onr@&dtYFKq6xi;`nM4YvKKm|@uL@^@N%W{&aPovv~uCW zc3wghF_YmAqCHUWy~L`~Xspk1CT>CQ7D0PE|K84LEnR<9@@Ox+o(bO-s=`7;U!BPT zy?(L?`3Y955Z3WU#vb9sFKtVDK;=2De#*bzME#az{%l@X{zbh6A@l zh_%Y9!8*kB8VJi;_+l%Hq1NB|*2lF{@dK@e=cD_G+yo}A1natD(!cj@sk*0^*(vj4 zjcv2^BO*yGz@HT^1%~{0oV=9V)Wi_$o$KbltCxYh9lx|Dxs#qkQxy3S;NP_cYEyze zQlH*V>$|tb^2qF>7<)ysHOh+4{#t1fNp0Unp6h;??qR-xL?RWdOsPRky9s@mZT*9d zh!q49`22Q0|Gf~f-kzmmtZbPn-AtSyvZ8oQBG3pENfQ+-&m zBkpujV%K8dD#AhAZ;vr4eMw|8%McSUfPCh)Ka}7C0&MJCE1()mB zkr$dvPKjZ@5uk}orZb?Ff;m@%7W4gwYp`t#Kjglqms2p1l?u8w>6Fu81*Zu_$zm9Y>RrLOoE_*rILpu(pDv2&Os1r059ad5m9| zejfAZB`!B2sUyQWT0|${6=0c z_M#wJuTv9S;(>0gK@?ApkDTSPFypBc0fO>_Kwq0>s!sAy*~?&AKo~!SvEF5C*^=C1A|CHTK6`FU z_?*=`7>ZL(#)Ou0b!_zX^M-y*Jh!J9Zc9(t#PS7$^NyM>$+V9~Pq}wB6c-nBxh_o1 z?DEhJDk!f-Kt{E5BY-=XMxd&zco9Tmtg`hMMJr+A@yMC+VBt8@tgj6ugfW7Gni3}N zH}uW<%YWD|JpLCLt@{jZm(la>N8dIhTvn?~v2u8q4AuQp0J|K*&rdD81!+mAYjP*9@H0vA++b){-e5qA z;arv7;-(FFW7+8LU&`frYDM}d9Svf}xq&<%jk!G^O^s!m1GVKL1$9c|)}2z4AIs>? zHq-C!JTZ5}0EdVqD>2=}$ahm?Vp6BHE|L}KZ{PM?GO9bcuSm>9BocmFzJ9nkQr4D7 z^6)64nVN@LD}cOhnF=WN<&^kd+H}5JM4^YE5?^51QF6`&VCFAxKO6Cx^ve!ts6E|_ zEfXo#jrG)hO$ihNfTP1E*{W_dd-es=&0+htct6jaQ3Z_21x>G z0Wwz3ft-K{0~W3d?you8+lxY`O>%}SMvca@sqFSxH~-ppV$ILlUz|)7)*6AFjDW{& z6(Pi8pxh2ZMuMD5(?5&nf>q+yX~GQTl_IRiz;vAThKhkQ^xTP*q`7}t7;CULyuC(H zT$-RFfywTUfK%<&rZg#ZiYwGpjANnXTAv~Dd+ zZyT~@YoQLgw3%ZkqwKb2G*B?ftf?iwR;x%mbrU1HzrhP#=BaKJu5K-eB#VX`8h{HS zVC>3qX?WYHGr$SsMUpo*>FU!?s*KhyylUww`3aSLdjo&2bt6|Kim4BRTJP%;L1zw? z%DWuh=GB=W|N2Z6%GO%Ei#qh&g2Bv9B%PFSbr(X2IzC%acK31NF){mluASa}^_T2j zW2=jWyIVn&oy)+mk%d67jy)suRZ5u7te@;ZJraq^(6$LF2V_kK<3rGy1Lv{idjd58 z6YpQr5&JZ3oig=W`)V_IW&2lqFM@{tT+;3}?(`>V^P!z_2byL=u4OVlfWCJlVFHqx(zC4Ej>IdVC?69Pq1&FU;f|(mW-#pdvL{aZ(1sjh-luP z*mI0J(5&>50tm|YJ@x;)?~ym+*(??8eKdiVZ`MuFl`P zViJ!B=M|dlg@X2~twnbiW!Rf=HTU5JbwKyywL3~ZSzK};%N6;00EGD29(Z^s@Iuqn zOEXsu3g@Q8T(LNM6AoDc3E9hEt9ADu4mS*fcb@n5e}e_|N@~3{jAz@Ass)D=da}HD zDqA<&J$Awu+xBscw-&-=Ee^1bkMEIjKLm6uteKt5eV1$ zV}}oXbh&bFG~w^JiB#c2#`k|3?3v!5>vC{^$hyq8*ROed`}(Ix5yO9V)v~3KUNz<(8+-ts+&_C=%>g~)j%6(xbZa*Q$cR52?XyE5 z_HRFc1P@pKzaLV?1oFdz3eQHZTadKasEbQTpl~=G>61fOle#v!{`{3wDEx!uA&kmS zqoY2()PteK_Eh;%>x92UAYKs99>(EtW2cku2&$VrR%MJFxsbr*8(*AG!XFI?Dynzr z#nj3&XP*VM)R60hYY>RjWp2%P)U&hop61jD^gk~_#H=jG&UXvLe0+L1Y0vM)XN{9# zvDjZc0YcjqzVX98Qg$}%j^p!N&~4TIVZt(Wat?LUPR*R2_B({OE@nq`N8T4><`hNY zUNx)sHo4_iS7=VhWU>9JMe2e7z=x^C9kJ2u04A9&)Q#z0U&y5gJsM&hH(^AseU5t0K|Y=55rJMy@Y z6_Y}tQc3s3d7nxQqN(zE;{&%>>A4u%lM&vyLFwuzxmd$w^3BF4YNXZ$_}<`T=V&Mt ziQ)yiS`#Wo)ZL_5thuRl9wx7e4=Purv9gA5JY^=-y&J0wQ{N`=D)?AV%CtuM_2W3MXMvj!*TXQ zLwKWTR4agr#5%eig-ruc@v4_wIm^$f+P)%bEClb#Oo6fNR-ReGZa*myU@eU_G#bsB zTW}}p8b}*bcUZZccQ^PHp=IjKzzec?cls%9s~elW{Yj#As;2_8? z@It+3V^SOhHKl}OrnQArOCYIpOWnZ4f~XK!ooNk^H#<#ZRbXhzrWfNdQO)%XUZmkH z(=-pVx5>GE_v@325HESO#=H?owf~XI& z=g9X0(}rTYO1v2~fr-hXsGW#YpO#8mm!`!(NF+mC%Xd7>-myk3*Yv%NGFU?#{Kriu zL-AvmZ+)2asp$5cacKbY$4LgmP}^=C=FMPY#T`5I&Hce8y$*n}qzjKpa+;~aPMDR1 zO_7e%_9p2g^JW5s5;HT>+UR6;6!9774lwMC%20;*<^~fo_AO~pQ}>G*Z1p@}H6i3kO4TdzXuWs$y-rc?*Nu7h$XJfQ)M7q+s9koK zjcUW}1VLZg5G*fBiHL{*$cC3K6*?l35RbHk0@U@i!XQqy$*R`d8sv&hfWGLI8CkRAzC77>Y{_u)zm1r_$h z2NQa0blZiw>OSk>Dhte{)r@#94y#LVYwX)n%&CQXs;^*$PV8*1hh?(k30#3ev{;S3 z9etuUoFx*my!gtfeN*?V+d8jp@?tV-ahdC_>h5~x@d3 zymWBxW`bdHXm<$qD#{BM!=Mir<4Wm&zE7a&6%(hdQH*6U0&|*oewqZ7klU^Nk7Z^*EZPc_0$4 zNCr~yVtMPl*YfTM?VPb0@5Ei~`1tZy43rbytnP|t%Sv7MTslkNO^O9u!MTXa;Jbks z!%f3a>A3pa=9fs!K}!KhhhDVhpy~Pd?^^S%ElWw)PPUl>NTRRH1GVskk&n6j0}6#w z(r0?u1Ci8@e#u& z9$S2%kiTS1aYu&K$v^oA6f}SWYY8pDyDE+YA8!P`*sJmB>EX5%+?LFqnJ8iM%bEb{K|F zAsZ4QrpL!8Mn~=KmtqbvTFK$3n&(I2TP8nYZ?mG5uS3gm_<<6kq84K$qd6Hg4u>nf z(xO9Mp6??N_4#|wi0km_?g@>J$ppnW&jT_<-9VHZ?s@=;%9Y-d`pW^p+|E?F?=tZB zm~iOz9cEtRxya_~H5@K&B-%*)EnZq|d1cEhTVB1+YXDnC*(%CbQMQVD9aoArEwO2d rO-pQAV$%|Ezw!G2vH7j!)r?F(EEHc^_l_rkjW~8B@-XY*=`Vi)S|Oj0 diff --git a/.playwright/snapshots/components/StateLabel.test.ts-snapshots/StateLabel-Draft-light-high-contrast-linux.png b/.playwright/snapshots/components/StateLabel.test.ts-snapshots/StateLabel-Draft-light-high-contrast-linux.png index d3c0325ee2a751fcb9b05b7d4e7f5395a5067475..95450aa3ceb214747b68ca60712d37a99ea0f8eb 100644 GIT binary patch literal 7115 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 diff --git a/.playwright/snapshots/components/StateLabel.test.ts-snapshots/StateLabel-Draft-light-tritanopia-linux.png b/.playwright/snapshots/components/StateLabel.test.ts-snapshots/StateLabel-Draft-light-tritanopia-linux.png index 8be9f56b965a5f110d63bfdbf3794e33aa6fbe22..de638b9ea33e2fad40e4ff1a002d26c6fbbdca1c 100644 GIT binary patch literal 7076 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 diff --git a/.playwright/snapshots/components/StateLabel.test.ts-snapshots/StateLabel-Pull-Closed-dark-colorblind-linux.png b/.playwright/snapshots/components/StateLabel.test.ts-snapshots/StateLabel-Pull-Closed-dark-colorblind-linux.png index 2d6cef6d79f03fb693147aa42463aad24216ffac..42e6709edf4df8aea823ae2fac974d8078d92a5f 100644 GIT binary patch literal 7623 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
          +{*6b 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 WZt2TzL_)}d#q2w@m$B#gxqkz}yu=y+ diff --git a/.playwright/snapshots/components/StateLabel.test.ts-snapshots/StateLabel-Pull-Closed-dark-dimmed-linux.png b/.playwright/snapshots/components/StateLabel.test.ts-snapshots/StateLabel-Pull-Closed-dark-dimmed-linux.png index 2bab068804113262eced6e80e435cfcb1e2fc1ef..59303c0c0b148fe116c68326a7d8c1c2958fa5b2 100644 GIT binary patch literal 7331 zcmeHM=~q+N7LT>9)q=cgD~%v2uP6=-N-Q&pid897pT3qy86q-dVZdk@!jPeA4NIYn z5(q1}gx~3t z|4ge`8qci15*sC3ll`RbJY&Hw9_h*Wqpa+7vR$~ylQH~ z=WEt4$QqC92oefZHp-et)U{7V7@0P7F+FS0p6U7#q}RV)P_ONw5mr-iZyOBu^Qjv) z&}7H<4CsB(Zhi|4b}#>bBRCqPxzbQvZ$)FOZJ&^qu(xO{?HG=A0&z%L%1&SeOI`N2 zER_*vb0hSBZK%&0o@`1!o`70=5>Mqm+u}=jN$c?@Za6H`qNv;-9z0SXLQHV)Y7@s9 z2F)V)A;g_$Z*ZKqEDW!w*otMG{H?zjiOI6#vpyJEu|?uoaYUYm4{@!QwqUNbV$gPV zo>v2dLXl&LF0|9Wqh{%fE!ldY=NMi}pf)oeK_E?|O#oF-CggmK^HP zX^FXItg_{(0A{do#Q4?PdixF5(A-aUyY--uLt@P)@VKC zW1q|3-Z#(oc=1RJEg_YYcfE6dU7!D6PQ+ApJq{jJrr`UPzw#>AZh-``p(2G6hu6I~ z%d(-bO|wMGl8FxIpe7ORTK}hR$`a?Vp)KycdU%tvk#BslUi{IVZiwa2B&D&f&?Rf> zmRR>CMf(zRoN%Fm;@b-vdvh!|lG)Y3_J!>Mm) zk9aP7ELt{9IBc3LyEJ@(XYZU7`sI)RDz|ctX;Z8RfQ!LJjjVzi8OMMkl076%Az0Fg zg}v8`*mx(;dpf_%uPTN!Ic-)R++Uv>NYF+wz@;h|u#;t{O$?RleR>^s`UXXQnKUfY z|4u#(3GqHtlR*RGaX+HEjlL`5v=KccLc@rzws%xRPiv_ z`)Kc}URH)5tx+VnI(d?@Z2XQbkg@cAs3#rdsAKYAAb?iIDxaFXi6jGbAvo!VB(JFj zV|kSC;+(0mw6Ajqk_CZ`TK&wOx?wj5%v?k!*&6~Y&$*hZ@kzt8mL^)G^>a3tP<)l6 zHYA)mRij2K+t3nlBim=$)tY*qw$(LueQ3#|msIHB7zjOa34uWzl9>`&7}K%J!gfsF4`2Z?bPDKJf;fBvm@e_* zY%Jk}cB1SWLn6zBdkU`!m4*ID>!gIYAtZMRwpO&-VW}K%8aP~w+|<{>O0#t9bH8`!+`X$IijpNI;n@wLL*QJ$+jUCh5abV$%L%_39i6YK05 zt80|GlE!xpeqAB8Qo6q+u4DC9JAyd&NU(BEc>zJ< z$#XG4-;!XA(ESp=XEX*7$@oLDb)q3>@VSao#VS%PdlglBA@`+y&mO}MCaZtt)9dzs zn$6E$Vk~zgrOTq3s!3g+4Oma@BQ}hV!l3}$_du$(&d|kH!!N26`rm$0n~dg8_Q0v6 z^y{1{2D(r&zzb-`XU+#@S(n`cRn>gxOy_zXleixkrN(KWu@6c1f%#KHHIkWehNfm# zPQ_!fM!qFBZNZOm#c=8^&tSzLI^WAmdr3$D^_fMP%c6R{&dlC;g4VS&m`T#9?!32h zjRP`y1*F;B95h%abRtcu901#_IB$7{S)WabVmCsNET1d%wGeRhznIC0;SFn@IpB0G zoH~Ca00EvO7%W}97h475DXQ2O?uuZobT_|1ka-$#`&BqL_vbIP$5SQ8u#IYnkhc;zO0YQg^GnE$b?s=6~Ik+ zFgZgt-0lKax?$Ia!vZ-)BY{KdfR@CnTvMux0=LBi1r~AZjYMZ^{;CvLc&o?EzOrI1 z9(#aD+3$}xyr2DOoqecvEeRg%?a{Rzoga^iZ8L6#i`?y7-_rv|!<+8oG<{*j*_|!p zn{oB$DD~~CM-O+6TJXbIPn@#5h@ka`(vot>W9CJGTLf!OiH%YGS`yo~j7MZ#s;Xd0 zd4^yHRV9ZrGlo=+3p|qIa!}JqZTx_EqSePgPjef>Y_;_90(QP7kdH|iYq}pzrx->H zGgtUmRSE`gB`-BwZ^uBX6+#(UYgScJ@Fs~!p8#YbnGc&#&50$Yn@QgGM;~97-8OT6 zolktkNX z^>>KH`v$pTV1t?C$85Ypw@eHdKKp%mg;$hW!tTH=ib%;_;pV(uGR zA4Nxm@$yr+BUjwQ<}NtNxJOo`ZFiT7Len8eu9v}Qo;S>ZDzx@gTUq*wvF+E+?^WYG5(_!0Wq)h~lX!G`NdTuB8vDmU_(`pU+qy;qG`fwAt&v$JS zzd!c^qMWcb5loPnoWXPqOp(D96HVE`lpsx|fvG4m)rqDG+0+}D+9gw?Xljv7w+8>u d`;v9=i<>hoXI?+s{AmL7`!?uw?Wv15{sVzmyTbqg literal 7194 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 diff --git a/.playwright/snapshots/components/StateLabel.test.ts-snapshots/StateLabel-Pull-Closed-dark-high-contrast-linux.png b/.playwright/snapshots/components/StateLabel.test.ts-snapshots/StateLabel-Pull-Closed-dark-high-contrast-linux.png index 8b2b569cf7c491a9f8125623de0fe828a44aef17..4356729adc4d3318cd487e1e75972a99024ded59 100644 GIT binary patch literal 7519 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 delta 2774 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 diff --git a/.playwright/snapshots/components/StateLabel.test.ts-snapshots/StateLabel-Pull-Closed-dark-tritanopia-linux.png b/.playwright/snapshots/components/StateLabel.test.ts-snapshots/StateLabel-Pull-Closed-dark-tritanopia-linux.png index 2d6cef6d79f03fb693147aa42463aad24216ffac..42e6709edf4df8aea823ae2fac974d8078d92a5f 100644 GIT binary patch literal 7623 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
          +{*6b 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 WZt2TzL_)}d#q2w@m$B#gxqkz}yu=y+ diff --git a/.playwright/snapshots/components/StateLabel.test.ts-snapshots/StateLabel-Pull-Closed-light-colorblind-linux.png b/.playwright/snapshots/components/StateLabel.test.ts-snapshots/StateLabel-Pull-Closed-light-colorblind-linux.png index b4d2412fd97264f3f1f04b245cee44d5cb42eac0..dd908e7a3e060926e2780dd87b40d09560682091 100644 GIT binary patch literal 7572 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 B5upG8 literal 7440 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 literal 7414 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 M{PZ#Uk#o2H1O9#PzyJUM literal 7384 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 diff --git a/.playwright/snapshots/components/StateLabel.test.ts-snapshots/StateLabel-Pull-Closed-light-tritanopia-linux.png b/.playwright/snapshots/components/StateLabel.test.ts-snapshots/StateLabel-Pull-Closed-light-tritanopia-linux.png index b4d2412fd97264f3f1f04b245cee44d5cb42eac0..dd908e7a3e060926e2780dd87b40d09560682091 100644 GIT binary patch literal 7572 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 B5upG8 literal 7440 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 Date: Thu, 7 Dec 2023 13:20:44 +0100 Subject: [PATCH 19/19] Version Packages (#4016) Co-authored-by: github-actions[bot] --- .changeset/cuddly-dancers-greet.md | 7 ------- .changeset/fluffy-brooms-dream.md | 5 ----- .changeset/funny-fishes-appear.md | 5 ----- .changeset/itchy-jokes-compare.md | 5 ----- .changeset/little-apples-own.md | 5 ----- .changeset/soft-pans-punch.md | 7 ------- .changeset/ten-tables-grin.md | 5 ----- .changeset/thin-ladybugs-travel.md | 5 ----- .changeset/tidy-coins-fix.md | 5 ----- .changeset/warm-sloths-tickle.md | 5 ----- CHANGELOG.md | 30 ++++++++++++++++++++++++++++++ package.json | 2 +- 12 files changed, 31 insertions(+), 55 deletions(-) delete mode 100644 .changeset/cuddly-dancers-greet.md delete mode 100644 .changeset/fluffy-brooms-dream.md delete mode 100644 .changeset/funny-fishes-appear.md delete mode 100644 .changeset/itchy-jokes-compare.md delete mode 100644 .changeset/little-apples-own.md delete mode 100644 .changeset/soft-pans-punch.md delete mode 100644 .changeset/ten-tables-grin.md delete mode 100644 .changeset/thin-ladybugs-travel.md delete mode 100644 .changeset/tidy-coins-fix.md delete mode 100644 .changeset/warm-sloths-tickle.md diff --git a/.changeset/cuddly-dancers-greet.md b/.changeset/cuddly-dancers-greet.md deleted file mode 100644 index 661e9fea84f..00000000000 --- a/.changeset/cuddly-dancers-greet.md +++ /dev/null @@ -1,7 +0,0 @@ ---- -"@primer/react": patch ---- - -Fixes layout for loading DataTable cells - - diff --git a/.changeset/fluffy-brooms-dream.md b/.changeset/fluffy-brooms-dream.md deleted file mode 100644 index 9693260837b..00000000000 --- a/.changeset/fluffy-brooms-dream.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -"@primer/react": patch ---- - -Fix `line-height` on markdown viewer (comment box) diff --git a/.changeset/funny-fishes-appear.md b/.changeset/funny-fishes-appear.md deleted file mode 100644 index 0a7180ad32e..00000000000 --- a/.changeset/funny-fishes-appear.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -"@primer/react": patch ---- - -MarkdownEditor & MarkdownViewer: Update new line identifier for formatting markdown diff --git a/.changeset/itchy-jokes-compare.md b/.changeset/itchy-jokes-compare.md deleted file mode 100644 index 38e3a73b545..00000000000 --- a/.changeset/itchy-jokes-compare.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'@primer/react': patch ---- - -Changes the focus styling of input components such as `Textarea`, `TextInput`, `TextInputWithTokens` and `Select` from using `border` and `box-shadow` to use `outline` only for better border rendering and scrollbar support. diff --git a/.changeset/little-apples-own.md b/.changeset/little-apples-own.md deleted file mode 100644 index de440a51e52..00000000000 --- a/.changeset/little-apples-own.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'@primer/react': minor ---- - -Update SSRProvider, useSSRSafeId to use the native React 18 useId() instead of @react-aria/ssr diff --git a/.changeset/soft-pans-punch.md b/.changeset/soft-pans-punch.md deleted file mode 100644 index e0a29220089..00000000000 --- a/.changeset/soft-pans-punch.md +++ /dev/null @@ -1,7 +0,0 @@ ---- -'@primer/react': minor ---- - -Adds an 'inactive' state to buttons. An inactive button looks disabled and has aria-disabled, but it can still be clicked and focused. This was added to support buttons that are broken due to availability issues, but can't be removed from the page. - - diff --git a/.changeset/ten-tables-grin.md b/.changeset/ten-tables-grin.md deleted file mode 100644 index 54167faac4a..00000000000 --- a/.changeset/ten-tables-grin.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'@primer/react': patch ---- - -Avoid error when using Modal Dialog within TreeView diff --git a/.changeset/thin-ladybugs-travel.md b/.changeset/thin-ladybugs-travel.md deleted file mode 100644 index 93489b128ce..00000000000 --- a/.changeset/thin-ladybugs-travel.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'@primer/react': patch ---- - -Ensure ConfirmationDialog adds host element to the DOM diff --git a/.changeset/tidy-coins-fix.md b/.changeset/tidy-coins-fix.md deleted file mode 100644 index b6b3b62e3d0..00000000000 --- a/.changeset/tidy-coins-fix.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -"@primer/react": patch ---- - -StateLabel: Use correct octicons for `draft` and `pullClosed` states diff --git a/.changeset/warm-sloths-tickle.md b/.changeset/warm-sloths-tickle.md deleted file mode 100644 index 1a300487110..00000000000 --- a/.changeset/warm-sloths-tickle.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'@primer/react': patch ---- - -Update the resize behavior of PageLayout to ignore right clicks when resizing diff --git a/CHANGELOG.md b/CHANGELOG.md index e862b512482..e996df673be 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,35 @@ # @primer/components +## 36.4.0 + +### Minor Changes + +- [#3982](https://github.com/primer/react/pull/3982) [`968d4ef05`](https://github.com/primer/react/commit/968d4ef05808005efde7de06ca480b4870179485) Thanks [@joshblack](https://github.com/joshblack)! - Update SSRProvider, useSSRSafeId to use the native React 18 useId() instead of @react-aria/ssr + +- [#3812](https://github.com/primer/react/pull/3812) [`3f82a1cab`](https://github.com/primer/react/commit/3f82a1cab370951e11b474696fbfdbfe169ce970) Thanks [@mperrotti](https://github.com/mperrotti)! - Adds an 'inactive' state to buttons. An inactive button looks disabled and has aria-disabled, but it can still be clicked and focused. This was added to support buttons that are broken due to availability issues, but can't be removed from the page. + + + +### Patch Changes + +- [#4026](https://github.com/primer/react/pull/4026) [`503c7e625`](https://github.com/primer/react/commit/503c7e625a8a3388737949880b64791f5833f027) Thanks [@mperrotti](https://github.com/mperrotti)! - Fixes layout for loading DataTable cells + + + +- [#4001](https://github.com/primer/react/pull/4001) [`0e9d841e3`](https://github.com/primer/react/commit/0e9d841e398118843c92f9b92881ead62337c682) Thanks [@langermank](https://github.com/langermank)! - Fix `line-height` on markdown viewer (comment box) + +- [#3987](https://github.com/primer/react/pull/3987) [`4321d59e9`](https://github.com/primer/react/commit/4321d59e9de5e319523c438e8e7d238178571301) Thanks [@iulia-b](https://github.com/iulia-b)! - MarkdownEditor & MarkdownViewer: Update new line identifier for formatting markdown + +- [#4008](https://github.com/primer/react/pull/4008) [`df7dc2af1`](https://github.com/primer/react/commit/df7dc2af1679a3a6634ec313476de0cb2fc07a19) Thanks [@dipree](https://github.com/dipree)! - Changes the focus styling of input components such as `Textarea`, `TextInput`, `TextInputWithTokens` and `Select` from using `border` and `box-shadow` to use `outline` only for better border rendering and scrollbar support. + +- [#4013](https://github.com/primer/react/pull/4013) [`d26aeab32`](https://github.com/primer/react/commit/d26aeab32ad90e084d2cec0073df18d811fda820) Thanks [@keithamus](https://github.com/keithamus)! - Avoid error when using Modal Dialog within TreeView + +- [#4012](https://github.com/primer/react/pull/4012) [`5fd025f04`](https://github.com/primer/react/commit/5fd025f0414b343abf3435cfab90bc9b24bdcea7) Thanks [@keithamus](https://github.com/keithamus)! - Ensure ConfirmationDialog adds host element to the DOM + +- [#4024](https://github.com/primer/react/pull/4024) [`0ea121af3`](https://github.com/primer/react/commit/0ea121af393e13a22c64514283ed881ae57414e5) Thanks [@colebemis](https://github.com/colebemis)! - StateLabel: Use correct octicons for `draft` and `pullClosed` states + +- [#4022](https://github.com/primer/react/pull/4022) [`98ad3203a`](https://github.com/primer/react/commit/98ad3203a33c9caf2579474fa517a0c7a2ba8924) Thanks [@joshblack](https://github.com/joshblack)! - Update the resize behavior of PageLayout to ignore right clicks when resizing + ## 36.3.1 ### Patch Changes diff --git a/package.json b/package.json index efba074a25b..39bcd849dd0 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@primer/react", - "version": "36.3.1", + "version": "36.4.0", "description": "An implementation of GitHub's Primer Design System using React", "main": "lib/index.js", "module": "lib-esm/index.js",