From 3855fc319f179fe477f275f0cf1a323f5e768a25 Mon Sep 17 00:00:00 2001 From: Max Duval Date: Mon, 27 Nov 2023 11:47:37 +0000 Subject: [PATCH 01/24] docs(CONTRIBUTING): fix dead link (#3974) Style overrides is part of primer/react, not primer/components --- contributor-docs/CONTRIBUTING.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/contributor-docs/CONTRIBUTING.md b/contributor-docs/CONTRIBUTING.md index 7522dcdec6c..d65e5436712 100644 --- a/contributor-docs/CONTRIBUTING.md +++ b/contributor-docs/CONTRIBUTING.md @@ -151,7 +151,7 @@ If your component doesn't use DOM globals, it likely won't cause layout shift du ### Adding the `sx` prop -Each component should accept a prop called `sx` that allows for setting theme-aware ad-hoc styles. See the [overriding styles](https://primer.style/components/overriding-styles) doc for more information on using the prop. +Each component should accept a prop called `sx` that allows for setting theme-aware ad-hoc styles. See the [overriding styles](https://primer.style/react/overriding-styles) doc for more information on using the prop. To add the `sx` prop to your component: import the default export from the `sx` module, add it to your style definition, and add the appropriate prop types. **The `sx` prop should go at the _very end_ of your style definition.** From 051d18e33c64691371269825d590783441cd1d7a Mon Sep 17 00:00:00 2001 From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com> Date: Mon, 27 Nov 2023 11:26:55 -0600 Subject: [PATCH 02/24] chore(deps-dev): bump @babel/plugin-transform-modules-commonjs (#3954) Bumps [@babel/plugin-transform-modules-commonjs](https://github.com/babel/babel/tree/HEAD/packages/babel-plugin-transform-modules-commonjs) from 7.22.15 to 7.23.3. - [Release notes](https://github.com/babel/babel/releases) - [Changelog](https://github.com/babel/babel/blob/main/CHANGELOG.md) - [Commits](https://github.com/babel/babel/commits/v7.23.3/packages/babel-plugin-transform-modules-commonjs) --- updated-dependencies: - dependency-name: "@babel/plugin-transform-modules-commonjs" 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 | 16 ++++++++-------- package.json | 2 +- 2 files changed, 9 insertions(+), 9 deletions(-) diff --git a/package-lock.json b/package-lock.json index 565223915e7..4e3a0f5aa28 100644 --- a/package-lock.json +++ b/package-lock.json @@ -47,7 +47,7 @@ "@babel/parser": "7.23.0", "@babel/plugin-proposal-nullish-coalescing-operator": "7.18.6", "@babel/plugin-proposal-optional-chaining": "7.21.0", - "@babel/plugin-transform-modules-commonjs": "7.22.15", + "@babel/plugin-transform-modules-commonjs": "7.23.3", "@babel/preset-react": "7.23.3", "@babel/preset-typescript": "7.22.15", "@changesets/changelog-github": "0.4.8", @@ -599,9 +599,9 @@ } }, "node_modules/@babel/helper-module-transforms": { - "version": "7.22.20", - "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.22.20.tgz", - "integrity": "sha512-dLT7JVWIUUxKOs1UnJUBR3S70YK+pKX6AbJgB2vMIvEkZkrfJDbYDJesnPshtKV4LhDOR3Oc5YULeDizRek+5A==", + "version": "7.23.3", + "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.23.3.tgz", + "integrity": "sha512-7bBs4ED9OmswdfDzpz4MpWgSrV7FXlc3zIagvLFjS5H+Mk7Snr21vQ6QwrsoCGMfNC4e4LQPdoULEt4ykz0SRQ==", "dev": true, "dependencies": { "@babel/helper-environment-visitor": "^7.22.20", @@ -1563,12 +1563,12 @@ } }, "node_modules/@babel/plugin-transform-modules-commonjs": { - "version": "7.22.15", - "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-commonjs/-/plugin-transform-modules-commonjs-7.22.15.tgz", - "integrity": "sha512-jWL4eh90w0HQOTKP2MoXXUpVxilxsB2Vl4ji69rSjS3EcZ/v4sBmn+A3NpepuJzBhOaEBbR7udonlHHn5DWidg==", + "version": "7.23.3", + "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-commonjs/-/plugin-transform-modules-commonjs-7.23.3.tgz", + "integrity": "sha512-aVS0F65LKsdNOtcz6FRCpE4OgsP2OFnW46qNxNIX9h3wuzaNcSQsJysuMwqSibC98HPrf2vCgtxKNwS0DAlgcA==", "dev": true, "dependencies": { - "@babel/helper-module-transforms": "^7.22.15", + "@babel/helper-module-transforms": "^7.23.3", "@babel/helper-plugin-utils": "^7.22.5", "@babel/helper-simple-access": "^7.22.5" }, diff --git a/package.json b/package.json index 936b355a3b5..b95ffbff48a 100644 --- a/package.json +++ b/package.json @@ -132,7 +132,7 @@ "@babel/parser": "7.23.0", "@babel/plugin-proposal-nullish-coalescing-operator": "7.18.6", "@babel/plugin-proposal-optional-chaining": "7.21.0", - "@babel/plugin-transform-modules-commonjs": "7.22.15", + "@babel/plugin-transform-modules-commonjs": "7.23.3", "@babel/preset-react": "7.23.3", "@babel/preset-typescript": "7.22.15", "@changesets/changelog-github": "0.4.8", From 4344014b4d9e1db5602c96a428f207cfd48cd1f7 Mon Sep 17 00:00:00 2001 From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com> Date: Mon, 27 Nov 2023 11:27:15 -0600 Subject: [PATCH 03/24] chore(deps-dev): bump micromark-extension-mdxjs from 2.0.0 to 3.0.0 (#3955) Bumps [micromark-extension-mdxjs](https://github.com/micromark/micromark-extension-mdxjs) from 2.0.0 to 3.0.0. - [Release notes](https://github.com/micromark/micromark-extension-mdxjs/releases) - [Commits](https://github.com/micromark/micromark-extension-mdxjs/compare/2.0.0...3.0.0) --- updated-dependencies: - dependency-name: micromark-extension-mdxjs 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 | 96 +++++++++++++++++++++++++++++------------------ package.json | 2 +- 2 files changed, 61 insertions(+), 37 deletions(-) diff --git a/package-lock.json b/package-lock.json index 4e3a0f5aa28..86a39e0cb1a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -150,7 +150,7 @@ "mdast-util-mdx": "3.0.0", "mdast-util-to-string": "4.0.0", "micromark-extension-frontmatter": "2.0.0", - "micromark-extension-mdxjs": "2.0.0", + "micromark-extension-mdxjs": "3.0.0", "postcss-custom-properties-fallback": "1.0.2", "postcss-preset-env": "9.2.0", "prettier": "3.0.3", @@ -31470,9 +31470,9 @@ ] }, "node_modules/micromark-extension-mdx-expression": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/micromark-extension-mdx-expression/-/micromark-extension-mdx-expression-2.0.0.tgz", - "integrity": "sha512-hUI6PJCCVaymBF5paL29sOpcbtVXtumDdJgBDxN+tbHlXAqQwNl4EhhJfx4fe7bUpEZzcFRIBAeOiGq7hsZBXw==", + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/micromark-extension-mdx-expression/-/micromark-extension-mdx-expression-3.0.0.tgz", + "integrity": "sha512-sI0nwhUDz97xyzqJAbHQhp5TfaxEvZZZ2JDqUo+7NvyIYG6BZ5CPPqj2ogUoPJlmXHBnyZUzISg9+oUmU6tUjQ==", "dev": true, "funding": [ { @@ -31568,15 +31568,15 @@ ] }, "node_modules/micromark-extension-mdx-jsx": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/micromark-extension-mdx-jsx/-/micromark-extension-mdx-jsx-2.0.0.tgz", - "integrity": "sha512-hp6ff4eympWcq3Jh9XIJmJPNpM2RNmBjz5vvU1YkND7h4UwjSZas7lXSrAJjtTG7Z56JMMTyowwcbPkAjZmwMg==", + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/micromark-extension-mdx-jsx/-/micromark-extension-mdx-jsx-3.0.0.tgz", + "integrity": "sha512-uvhhss8OGuzR4/N17L1JwvmJIpPhAd8oByMawEKx6NVdBCbesjH4t+vjEp3ZXft9DwvlKSD07fCeI44/N0Vf2w==", "dev": true, "dependencies": { "@types/acorn": "^4.0.0", "@types/estree": "^1.0.0", "devlop": "^1.0.0", - "estree-util-is-identifier-name": "^2.0.0", + "estree-util-is-identifier-name": "^3.0.0", "micromark-factory-mdx-expression": "^2.0.0", "micromark-factory-space": "^2.0.0", "micromark-util-character": "^2.0.0", @@ -31590,11 +31590,21 @@ } }, "node_modules/micromark-extension-mdx-jsx/node_modules/@types/unist": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/@types/unist/-/unist-3.0.0.tgz", - "integrity": "sha512-MFETx3tbTjE7Uk6vvnWINA/1iJ7LuMdO4fcq8UfF0pRbj01aGLduVvQcRyswuACJdpnHgg8E3rQLhaRdNEJS0w==", + "version": "3.0.2", + "resolved": "https://registry.npmjs.org/@types/unist/-/unist-3.0.2.tgz", + "integrity": "sha512-dqId9J8K/vGi5Zr7oo212BGii5m3q5Hxlkwy3WpYuKPklmBEvsbMYYyLxAQpSffdLl/gdW0XUpKWFvYmyoWCoQ==", "dev": true }, + "node_modules/micromark-extension-mdx-jsx/node_modules/estree-util-is-identifier-name": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/estree-util-is-identifier-name/-/estree-util-is-identifier-name-3.0.0.tgz", + "integrity": "sha512-hFtqIDZTIUZ9BXLb8y4pYGyk6+wekIivNVTcmvk8NoOh+VeRn5y6cEHzbURrWbfp1fIqdVipilzj+lfaadNZmg==", + "dev": true, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/unified" + } + }, "node_modules/micromark-extension-mdx-jsx/node_modules/micromark-factory-space": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/micromark-factory-space/-/micromark-factory-space-2.0.0.tgz", @@ -31724,17 +31734,17 @@ ] }, "node_modules/micromark-extension-mdxjs": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/micromark-extension-mdxjs/-/micromark-extension-mdxjs-2.0.0.tgz", - "integrity": "sha512-cICbQUdcgFvfg3JH9XTqZoa1ONCZI0GsiOvl9672Ka3SilIo9kMmaKLdSd/QrDgNGxrirWtZfFh19DSKJUivWQ==", + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/micromark-extension-mdxjs/-/micromark-extension-mdxjs-3.0.0.tgz", + "integrity": "sha512-A873fJfhnJ2siZyUrJ31l34Uqwy4xIFmvPY1oj+Ean5PHcPBYzEsvqvWGaWcfEIr11O5Dlw3p2y0tZWpKHDejQ==", "dev": true, "dependencies": { "acorn": "^8.0.0", "acorn-jsx": "^5.0.0", - "micromark-extension-mdx-expression": "^2.0.0", - "micromark-extension-mdx-jsx": "^2.0.0", + "micromark-extension-mdx-expression": "^3.0.0", + "micromark-extension-mdx-jsx": "^3.0.0", "micromark-extension-mdx-md": "^2.0.0", - "micromark-extension-mdxjs-esm": "^2.0.0", + "micromark-extension-mdxjs-esm": "^3.0.0", "micromark-util-combine-extensions": "^2.0.0", "micromark-util-types": "^2.0.0" }, @@ -31744,9 +31754,9 @@ } }, "node_modules/micromark-extension-mdxjs-esm": { - "version": "2.0.1", - "resolved": "https://registry.npmjs.org/micromark-extension-mdxjs-esm/-/micromark-extension-mdxjs-esm-2.0.1.tgz", - "integrity": "sha512-HLPrY5XLYzFtG5KxEcZXfUV/SOy9Eu3R+dnpP1P6ko/ZO9xceGxmgJOAMq4r/rPLrHaEosfhNIOXDcvFSkVfKQ==", + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/micromark-extension-mdxjs-esm/-/micromark-extension-mdxjs-esm-3.0.0.tgz", + "integrity": "sha512-DJFl4ZqkErRpq/dAPyeWp15tGrcrrJho1hKK5uBS70BCtfrIFg81sqcTVu3Ta+KD1Tk5vAtBNElWxtAa+m8K9A==", "dev": true, "dependencies": { "@types/estree": "^1.0.0", @@ -31765,9 +31775,9 @@ } }, "node_modules/micromark-extension-mdxjs-esm/node_modules/@types/unist": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/@types/unist/-/unist-3.0.0.tgz", - "integrity": "sha512-MFETx3tbTjE7Uk6vvnWINA/1iJ7LuMdO4fcq8UfF0pRbj01aGLduVvQcRyswuACJdpnHgg8E3rQLhaRdNEJS0w==", + "version": "3.0.2", + "resolved": "https://registry.npmjs.org/@types/unist/-/unist-3.0.2.tgz", + "integrity": "sha512-dqId9J8K/vGi5Zr7oo212BGii5m3q5Hxlkwy3WpYuKPklmBEvsbMYYyLxAQpSffdLl/gdW0XUpKWFvYmyoWCoQ==", "dev": true }, "node_modules/micromark-extension-mdxjs-esm/node_modules/micromark-core-commonmark": { @@ -32257,9 +32267,9 @@ } }, "node_modules/micromark-factory-mdx-expression/node_modules/@types/unist": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/@types/unist/-/unist-3.0.0.tgz", - "integrity": "sha512-MFETx3tbTjE7Uk6vvnWINA/1iJ7LuMdO4fcq8UfF0pRbj01aGLduVvQcRyswuACJdpnHgg8E3rQLhaRdNEJS0w==", + "version": "3.0.2", + "resolved": "https://registry.npmjs.org/@types/unist/-/unist-3.0.2.tgz", + "integrity": "sha512-dqId9J8K/vGi5Zr7oo212BGii5m3q5Hxlkwy3WpYuKPklmBEvsbMYYyLxAQpSffdLl/gdW0XUpKWFvYmyoWCoQ==", "dev": true }, "node_modules/micromark-factory-mdx-expression/node_modules/micromark-util-character": { @@ -32534,9 +32544,9 @@ ] }, "node_modules/micromark-util-events-to-acorn": { - "version": "2.0.1", - "resolved": "https://registry.npmjs.org/micromark-util-events-to-acorn/-/micromark-util-events-to-acorn-2.0.1.tgz", - "integrity": "sha512-3pf0pxvFaTxzTwisMHmEk5lnW7oSU/oRZxpZcrdx/voJgCpPaspexc89mJodW4ekATo1UILtZvjESclKONSB6w==", + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/micromark-util-events-to-acorn/-/micromark-util-events-to-acorn-2.0.2.tgz", + "integrity": "sha512-Fk+xmBrOv9QZnEDguL9OI9/NQQp6Hz4FuQ4YmCb/5V7+9eAh1s6AYSvL20kHkD67YIg7EpE54TiSlcsf3vyZgA==", "dev": true, "funding": [ { @@ -32553,18 +32563,32 @@ "@types/estree": "^1.0.0", "@types/unist": "^3.0.0", "devlop": "^1.0.0", - "estree-util-visit": "^1.0.0", + "estree-util-visit": "^2.0.0", "micromark-util-symbol": "^2.0.0", "micromark-util-types": "^2.0.0", "vfile-message": "^4.0.0" } }, "node_modules/micromark-util-events-to-acorn/node_modules/@types/unist": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/@types/unist/-/unist-3.0.0.tgz", - "integrity": "sha512-MFETx3tbTjE7Uk6vvnWINA/1iJ7LuMdO4fcq8UfF0pRbj01aGLduVvQcRyswuACJdpnHgg8E3rQLhaRdNEJS0w==", + "version": "3.0.2", + "resolved": "https://registry.npmjs.org/@types/unist/-/unist-3.0.2.tgz", + "integrity": "sha512-dqId9J8K/vGi5Zr7oo212BGii5m3q5Hxlkwy3WpYuKPklmBEvsbMYYyLxAQpSffdLl/gdW0XUpKWFvYmyoWCoQ==", "dev": true }, + "node_modules/micromark-util-events-to-acorn/node_modules/estree-util-visit": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/estree-util-visit/-/estree-util-visit-2.0.0.tgz", + "integrity": "sha512-m5KgiH85xAhhW8Wta0vShLcUvOsh3LLPI2YVwcbio1l7E09NTLL1EyMZFM1OyWowoH0skScNbhOPl4kcBgzTww==", + "dev": true, + "dependencies": { + "@types/estree-jsx": "^1.0.0", + "@types/unist": "^3.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/unified" + } + }, "node_modules/micromark-util-events-to-acorn/node_modules/micromark-util-symbol": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/micromark-util-symbol/-/micromark-util-symbol-2.0.0.tgz", @@ -40814,9 +40838,9 @@ } }, "node_modules/unist-util-position-from-estree/node_modules/@types/unist": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/@types/unist/-/unist-3.0.0.tgz", - "integrity": "sha512-MFETx3tbTjE7Uk6vvnWINA/1iJ7LuMdO4fcq8UfF0pRbj01aGLduVvQcRyswuACJdpnHgg8E3rQLhaRdNEJS0w==", + "version": "3.0.2", + "resolved": "https://registry.npmjs.org/@types/unist/-/unist-3.0.2.tgz", + "integrity": "sha512-dqId9J8K/vGi5Zr7oo212BGii5m3q5Hxlkwy3WpYuKPklmBEvsbMYYyLxAQpSffdLl/gdW0XUpKWFvYmyoWCoQ==", "dev": true }, "node_modules/unist-util-remove-position": { diff --git a/package.json b/package.json index b95ffbff48a..9b9cdf67117 100644 --- a/package.json +++ b/package.json @@ -235,7 +235,7 @@ "mdast-util-mdx": "3.0.0", "mdast-util-to-string": "4.0.0", "micromark-extension-frontmatter": "2.0.0", - "micromark-extension-mdxjs": "2.0.0", + "micromark-extension-mdxjs": "3.0.0", "postcss-custom-properties-fallback": "1.0.2", "postcss-preset-env": "9.2.0", "prettier": "3.0.3", From c728e43a159e4a1c7619232103dca9172c1e7439 Mon Sep 17 00:00:00 2001 From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com> Date: Mon, 27 Nov 2023 11:27:36 -0600 Subject: [PATCH 04/24] chore(deps-dev): bump postcss-preset-env from 9.2.0 to 9.3.0 (#3975) Bumps [postcss-preset-env](https://github.com/csstools/postcss-plugins/tree/HEAD/plugin-packs/postcss-preset-env) from 9.2.0 to 9.3.0. - [Changelog](https://github.com/csstools/postcss-plugins/blob/main/plugin-packs/postcss-preset-env/CHANGELOG.md) - [Commits](https://github.com/csstools/postcss-plugins/commits/HEAD/plugin-packs/postcss-preset-env) --- updated-dependencies: - dependency-name: postcss-preset-env 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 | 72 ++++++++++++++++++++++++++++++++++++++--------- package.json | 2 +- 2 files changed, 60 insertions(+), 14 deletions(-) diff --git a/package-lock.json b/package-lock.json index 86a39e0cb1a..0f5583f7a5e 100644 --- a/package-lock.json +++ b/package-lock.json @@ -15,7 +15,7 @@ "@github/relative-time-element": "^4.1.2", "@lit-labs/react": "^1.1.1", "@oddbird/popover-polyfill": "^0.3.1", - "@primer/behaviors": "1.5.1", + "@primer/behaviors": "^1.5.1", "@primer/octicons-react": "^19.8.0", "@primer/primitives": "^7.11.11", "@react-aria/ssr": "^3.5.0", @@ -152,7 +152,7 @@ "micromark-extension-frontmatter": "2.0.0", "micromark-extension-mdxjs": "3.0.0", "postcss-custom-properties-fallback": "1.0.2", - "postcss-preset-env": "9.2.0", + "postcss-preset-env": "9.3.0", "prettier": "3.0.3", "react": "18.2.0", "react-dnd": "14.0.4", @@ -2801,9 +2801,9 @@ } }, "node_modules/@csstools/postcss-cascade-layers": { - "version": "4.0.0", - "resolved": "https://registry.npmjs.org/@csstools/postcss-cascade-layers/-/postcss-cascade-layers-4.0.0.tgz", - "integrity": "sha512-dVPVVqQG0FixjM9CG/+8eHTsCAxRKqmNh6H69IpruolPlnEF1611f2AoLK8TijTSAsqBSclKd4WHs1KUb/LdJw==", + "version": "4.0.1", + "resolved": "https://registry.npmjs.org/@csstools/postcss-cascade-layers/-/postcss-cascade-layers-4.0.1.tgz", + "integrity": "sha512-UYFuFL9GgVnftg9v7tBvVEBRLaBeAD66euD+yYy5fYCUld9ZIWTJNCE30hm6STMEdt6FL5xzeVw1lAZ1tpvUEg==", "dev": true, "funding": [ { @@ -3112,6 +3112,50 @@ "postcss": "^8.4" } }, + "node_modules/@csstools/postcss-logical-overflow": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/@csstools/postcss-logical-overflow/-/postcss-logical-overflow-1.0.0.tgz", + "integrity": "sha512-cIrZ8f7bGGvr+W53nEuMspcwaeaI2YTmz6LZ4yiAO5z14/PQgOOv+Pn+qjvPOPoadeY2BmpaoTzZKvdAQuM17w==", + "dev": true, + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/csstools" + }, + { + "type": "opencollective", + "url": "https://opencollective.com/csstools" + } + ], + "engines": { + "node": "^14 || ^16 || >=18" + }, + "peerDependencies": { + "postcss": "^8.4" + } + }, + "node_modules/@csstools/postcss-logical-overscroll-behavior": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/@csstools/postcss-logical-overscroll-behavior/-/postcss-logical-overscroll-behavior-1.0.0.tgz", + "integrity": "sha512-e89S2LWjnxf0SB2wNUAbqDyFb/Fow/tlOe1XqOLbNx4rf3LrQokM9qldVx7sarnddml3ORE5LDUmlKpPOOeJTA==", + "dev": true, + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/csstools" + }, + { + "type": "opencollective", + "url": "https://opencollective.com/csstools" + } + ], + "engines": { + "node": "^14 || ^16 || >=18" + }, + "peerDependencies": { + "postcss": "^8.4" + } + }, "node_modules/@csstools/postcss-logical-resize": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/@csstools/postcss-logical-resize/-/postcss-logical-resize-2.0.0.tgz", @@ -18032,9 +18076,9 @@ "dev": true }, "node_modules/cssdb": { - "version": "7.8.0", - "resolved": "https://registry.npmjs.org/cssdb/-/cssdb-7.8.0.tgz", - "integrity": "sha512-SkeezZOQr5AHt9MgJgSFNyiuJwg1p8AwoVln6JwaQJsyxduRW9QJ+HP/gAQzbsz8SIqINtYvpJKjxTRI67zxLg==", + "version": "7.9.0", + "resolved": "https://registry.npmjs.org/cssdb/-/cssdb-7.9.0.tgz", + "integrity": "sha512-WPMT9seTQq6fPAa1yN4zjgZZeoTriSN2LqW9C+otjar12DQIWA4LuSfFrvFJiKp4oD0xIk1vumDLw8K9ur4NBw==", "dev": true, "funding": [ { @@ -35566,9 +35610,9 @@ } }, "node_modules/postcss-preset-env": { - "version": "9.2.0", - "resolved": "https://registry.npmjs.org/postcss-preset-env/-/postcss-preset-env-9.2.0.tgz", - "integrity": "sha512-Lnr4C5gb7t5Cc8akQMJzNdJkqw7s7s7BHUaQSgsuf+CTY9Lsz5lqQTft5yNZr59JyCLz0aFNSAqSLm/xRtcTpg==", + "version": "9.3.0", + "resolved": "https://registry.npmjs.org/postcss-preset-env/-/postcss-preset-env-9.3.0.tgz", + "integrity": "sha512-ycw6doPrqV6QxDCtgiyGDef61bEfiSc59HGM4gOw/wxQxmKnhuEery61oOC/5ViENz/ycpRsuhTexs1kUBTvVw==", "dev": true, "funding": [ { @@ -35581,7 +35625,7 @@ } ], "dependencies": { - "@csstools/postcss-cascade-layers": "^4.0.0", + "@csstools/postcss-cascade-layers": "^4.0.1", "@csstools/postcss-color-function": "^3.0.7", "@csstools/postcss-color-mix-function": "^2.0.7", "@csstools/postcss-exponential-functions": "^1.0.1", @@ -35593,6 +35637,8 @@ "@csstools/postcss-initial": "^1.0.0", "@csstools/postcss-is-pseudo-class": "^4.0.3", "@csstools/postcss-logical-float-and-clear": "^2.0.0", + "@csstools/postcss-logical-overflow": "^1.0.0", + "@csstools/postcss-logical-overscroll-behavior": "^1.0.0", "@csstools/postcss-logical-resize": "^2.0.0", "@csstools/postcss-logical-viewport-units": "^2.0.3", "@csstools/postcss-media-minmax": "^1.1.0", @@ -35612,7 +35658,7 @@ "css-blank-pseudo": "^6.0.0", "css-has-pseudo": "^6.0.0", "css-prefers-color-scheme": "^9.0.0", - "cssdb": "^7.8.0", + "cssdb": "^7.9.0", "postcss-attribute-case-insensitive": "^6.0.2", "postcss-clamp": "^4.1.0", "postcss-color-functional-notation": "^6.0.2", diff --git a/package.json b/package.json index 9b9cdf67117..ebe9af1e142 100644 --- a/package.json +++ b/package.json @@ -237,7 +237,7 @@ "micromark-extension-frontmatter": "2.0.0", "micromark-extension-mdxjs": "3.0.0", "postcss-custom-properties-fallback": "1.0.2", - "postcss-preset-env": "9.2.0", + "postcss-preset-env": "9.3.0", "prettier": "3.0.3", "react": "18.2.0", "react-dnd": "14.0.4", From 49bca6ec179c326ab260507d989ff4c728501f73 Mon Sep 17 00:00:00 2001 From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com> Date: Mon, 27 Nov 2023 11:27:53 -0600 Subject: [PATCH 05/24] chore(deps-dev): bump @rollup/plugin-virtual from 3.0.1 to 3.0.2 (#3976) Bumps [@rollup/plugin-virtual](https://github.com/rollup/plugins/tree/HEAD/packages/virtual) from 3.0.1 to 3.0.2. - [Changelog](https://github.com/rollup/plugins/blob/master/packages/virtual/CHANGELOG.md) - [Commits](https://github.com/rollup/plugins/commits/dsv-v3.0.2/packages/virtual) --- updated-dependencies: - dependency-name: "@rollup/plugin-virtual" 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 0f5583f7a5e..1afda9e1e0f 100644 --- a/package-lock.json +++ b/package-lock.json @@ -63,7 +63,7 @@ "@rollup/plugin-replace": "5.0.2", "@rollup/plugin-terser": "0.4.3", "@rollup/plugin-typescript": "11.1.0", - "@rollup/plugin-virtual": "3.0.1", + "@rollup/plugin-virtual": "3.0.2", "@size-limit/preset-big-lib": "8.2.6", "@storybook/addon-a11y": "7.1.0", "@storybook/addon-actions": "7.1.0", @@ -6938,15 +6938,15 @@ } }, "node_modules/@rollup/plugin-virtual": { - "version": "3.0.1", - "resolved": "https://registry.npmjs.org/@rollup/plugin-virtual/-/plugin-virtual-3.0.1.tgz", - "integrity": "sha512-fK8O0IL5+q+GrsMLuACVNk2x21g3yaw+sG2qn16SnUd3IlBsQyvWxLMGHmCmXRMecPjGRSZ/1LmZB4rjQm68og==", + "version": "3.0.2", + "resolved": "https://registry.npmjs.org/@rollup/plugin-virtual/-/plugin-virtual-3.0.2.tgz", + "integrity": "sha512-10monEYsBp3scM4/ND4LNH5Rxvh3e/cVeL3jWTgZ2SrQ+BmUoQcopVQvnaMcOnykb1VkxUFuDAN+0FnpTFRy2A==", "dev": true, "engines": { "node": ">=14.0.0" }, "peerDependencies": { - "rollup": "^1.20.0||^2.0.0||^3.0.0" + "rollup": "^1.20.0||^2.0.0||^3.0.0||^4.0.0" }, "peerDependenciesMeta": { "rollup": { diff --git a/package.json b/package.json index ebe9af1e142..886af52e34a 100644 --- a/package.json +++ b/package.json @@ -148,7 +148,7 @@ "@rollup/plugin-replace": "5.0.2", "@rollup/plugin-terser": "0.4.3", "@rollup/plugin-typescript": "11.1.0", - "@rollup/plugin-virtual": "3.0.1", + "@rollup/plugin-virtual": "3.0.2", "@size-limit/preset-big-lib": "8.2.6", "@storybook/addon-a11y": "7.1.0", "@storybook/addon-actions": "7.1.0", From 32d248711403f34fb1d7f9f9c6d4f359790303f9 Mon Sep 17 00:00:00 2001 From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com> Date: Mon, 27 Nov 2023 17:28:13 +0000 Subject: [PATCH 06/24] chore(deps): bump @primer/primitives from 7.13.0 to 7.15.4 (#3977) Bumps [@primer/primitives](https://github.com/primer/primitives) from 7.13.0 to 7.15.4. - [Release notes](https://github.com/primer/primitives/releases) - [Changelog](https://github.com/primer/primitives/blob/main/CHANGELOG.md) - [Commits](https://github.com/primer/primitives/compare/v7.13.0...v7.15.4) --- updated-dependencies: - dependency-name: "@primer/primitives" dependency-type: direct:production 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 | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/package-lock.json b/package-lock.json index 1afda9e1e0f..b7f50fdd03b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -6031,9 +6031,9 @@ } }, "node_modules/@primer/primitives": { - "version": "7.13.0", - "resolved": "https://registry.npmjs.org/@primer/primitives/-/primitives-7.13.0.tgz", - "integrity": "sha512-pO1o0rdgatVOcUosuiQIni0ur7qLS954QjwmnIz1cXWxZhVLbhjK4eY/DUL2zmvbohLTXTE+6dC6ksLafckPvg==" + "version": "7.15.4", + "resolved": "https://registry.npmjs.org/@primer/primitives/-/primitives-7.15.4.tgz", + "integrity": "sha512-471hL6pkcGuPS4G0urQ0TRZYo3ukAaVhUtvlsi1mZLofmX+EF+9iQL/iau06JfaQkm5NNP236+F7yyxXra9EjA==" }, "node_modules/@primer/view-components": { "version": "0.5.1", From e16927b5aef72a2d6b78705066fd26b3741b73df Mon Sep 17 00:00:00 2001 From: Mike Perrotti Date: Tue, 28 Nov 2023 10:24:01 -0500 Subject: [PATCH 07/24] Add 'unavailable' status to StatusLabel (#3963) * adds unavailable status to StateLabel * adds changeset * updates StateLabel docs with 'unavailable' * test(vrt): update snapshots --------- Co-authored-by: mperrotti Co-authored-by: Pavithra Kodmad --- .changeset/nervous-tomatoes-bow.md | 7 +++++ ...abel-Unavailable-dark-colorblind-linux.png | Bin 0 -> 7898 bytes ...ateLabel-Unavailable-dark-dimmed-linux.png | Bin 0 -> 7800 bytes ...l-Unavailable-dark-high-contrast-linux.png | Bin 0 -> 7941 bytes .../StateLabel-Unavailable-dark-linux.png | Bin 0 -> 7898 bytes ...abel-Unavailable-dark-tritanopia-linux.png | Bin 0 -> 7898 bytes ...bel-Unavailable-light-colorblind-linux.png | Bin 0 -> 7867 bytes ...-Unavailable-light-high-contrast-linux.png | Bin 0 -> 7886 bytes .../StateLabel-Unavailable-light-linux.png | Bin 0 -> 7867 bytes ...bel-Unavailable-light-tritanopia-linux.png | Bin 0 -> 7867 bytes e2e/components/StateLabel.test.ts | 27 ++++++++++++++++++ src/StateLabel/StateLabel.docs.json | 2 +- .../StateLabel.features.stories.tsx | 1 + src/StateLabel/StateLabel.tsx | 6 ++++ 14 files changed, 42 insertions(+), 1 deletion(-) create mode 100644 .changeset/nervous-tomatoes-bow.md create mode 100644 .playwright/snapshots/components/StateLabel.test.ts-snapshots/StateLabel-Unavailable-dark-colorblind-linux.png create mode 100644 .playwright/snapshots/components/StateLabel.test.ts-snapshots/StateLabel-Unavailable-dark-dimmed-linux.png create mode 100644 .playwright/snapshots/components/StateLabel.test.ts-snapshots/StateLabel-Unavailable-dark-high-contrast-linux.png create mode 100644 .playwright/snapshots/components/StateLabel.test.ts-snapshots/StateLabel-Unavailable-dark-linux.png create mode 100644 .playwright/snapshots/components/StateLabel.test.ts-snapshots/StateLabel-Unavailable-dark-tritanopia-linux.png create mode 100644 .playwright/snapshots/components/StateLabel.test.ts-snapshots/StateLabel-Unavailable-light-colorblind-linux.png create mode 100644 .playwright/snapshots/components/StateLabel.test.ts-snapshots/StateLabel-Unavailable-light-high-contrast-linux.png create mode 100644 .playwright/snapshots/components/StateLabel.test.ts-snapshots/StateLabel-Unavailable-light-linux.png create mode 100644 .playwright/snapshots/components/StateLabel.test.ts-snapshots/StateLabel-Unavailable-light-tritanopia-linux.png diff --git a/.changeset/nervous-tomatoes-bow.md b/.changeset/nervous-tomatoes-bow.md new file mode 100644 index 00000000000..0c065ba7524 --- /dev/null +++ b/.changeset/nervous-tomatoes-bow.md @@ -0,0 +1,7 @@ +--- +'@primer/react': minor +--- + +Adds "unavailable" status to StateLabel + + diff --git a/.playwright/snapshots/components/StateLabel.test.ts-snapshots/StateLabel-Unavailable-dark-colorblind-linux.png b/.playwright/snapshots/components/StateLabel.test.ts-snapshots/StateLabel-Unavailable-dark-colorblind-linux.png new file mode 100644 index 0000000000000000000000000000000000000000..b7ac757e92bb450331afd5d44bdd7edc470bdd1c GIT binary patch literal 7898 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 %(!hEK)HP3F%^+|N*z>0)zP`&(5J*n`@RLVkKW zh66pgnc|f2iu${`^yUO67X+8_k3IX2qHnA=^e8xxE;K=)Bzd~LV5wLdBz#h+f3At~ zmHUt={rd~L_}Ez1Y)rhk1B#4SWDl= zeB4x!Y+L*(H?(!jQ+zOn&UO~vak(A+`0fh0VjntEV&7W-7n+3T;9wPeqY6LyAV8s3 zf5PV1*5qZR(RCH@C<5qC7Z>K%Lu4U=`W%v^O$$}bAEoT&Qx>Jz0;q3JTt(2_WY0`J zQ(?EyHox?4WY!yNpIUz;aKIYnCgd%V>tYi`QfC;p?ZJa4sv0bpIXM(NOQ5EY-#f2N z<5P&4D}Uc21kG)(m6a~2cBhQc9P@9}--Z^scP>hwJcmNk%Cg@A|(oaHUe)Wjq#^X4yKHH7tFKEu3t zr05>hycr*|N(Pa>PMfq&uYH<|4hRTPvfu4YzO_cWy}}mConW!_p->liCicoV*LVQp z^dW3OhSXy{o-HD?WR$>-mA)Mv!S$S_6%^dCx>-I&iAIaFYce`1jd7zET6uZ-9@~eI zh2rv$mN^07{(U1~7l@4d=f7TIS#pzx$261*}P_;O9P@xNQ}g>pY6w8FZm zCiiz_=*_)z;XlQx;3qs_EH3pEoYEFSTmJKabj@Ll9WneqE@BNIs_0ZXW0tAgOp8x;= literal 0 HcmV?d00001 diff --git a/.playwright/snapshots/components/StateLabel.test.ts-snapshots/StateLabel-Unavailable-dark-high-contrast-linux.png b/.playwright/snapshots/components/StateLabel.test.ts-snapshots/StateLabel-Unavailable-dark-high-contrast-linux.png new file mode 100644 index 0000000000000000000000000000000000000000..955a13847847cd9146d347a04c6ed8bd473fa953 GIT binary patch literal 7941 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 literal 0 HcmV?d00001 diff --git a/.playwright/snapshots/components/StateLabel.test.ts-snapshots/StateLabel-Unavailable-dark-linux.png b/.playwright/snapshots/components/StateLabel.test.ts-snapshots/StateLabel-Unavailable-dark-linux.png new file mode 100644 index 0000000000000000000000000000000000000000..b7ac757e92bb450331afd5d44bdd7edc470bdd1c GIT binary patch literal 7898 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 J!KZ&a|1T5oK~?|& literal 0 HcmV?d00001 diff --git a/.playwright/snapshots/components/StateLabel.test.ts-snapshots/StateLabel-Unavailable-light-high-contrast-linux.png b/.playwright/snapshots/components/StateLabel.test.ts-snapshots/StateLabel-Unavailable-light-high-contrast-linux.png new file mode 100644 index 0000000000000000000000000000000000000000..ad576c9df52f394d4bb0b85a286b48410c1f05e8 GIT binary patch literal 7886 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 literal 0 HcmV?d00001 diff --git a/.playwright/snapshots/components/StateLabel.test.ts-snapshots/StateLabel-Unavailable-light-linux.png b/.playwright/snapshots/components/StateLabel.test.ts-snapshots/StateLabel-Unavailable-light-linux.png new file mode 100644 index 0000000000000000000000000000000000000000..028051f7d2d3acb743569abbbb9f075a57e8eaf7 GIT binary patch literal 7867 zcmeHM`&W`_9;azHXVx)y_L7rY%${azcT1b5$kc#oDyhSImmDQwo5pbhuK}VUxLu~U z9C6Mz<%9w{W-2O{hA0Y5*+^x0Ndd(Ks|geYydeq#`>?zJ!M4A7&ikI{ocDdt^L#I# z&*%Gnp7%;z49f3Ufxm)4Ab!V>9Z7&d)-Qq^^7aPsa2!^7j~y4HCU)53ji zn((&NS%wruS7_+8KZ7rd{*mqL;6zeYRO@nHGj0J#^*ipLB6LU`T7PD0B-JuAT?;;& zT_+BiGCZxo_u=tlX+1+dI7Ze{#mz8TT{-aaN1v%1Rl0i(k}n4eJJ6@!h3>y4T{7Ss zTHIqYe)R<(ioA8|hcOaVP#Plvc|5S4f*#bto%c23ENppihu5=M5=q#8ZzKRgO{DHB z3Dt-x*onQ)`&^tCuRepXt90GzXt;Z%EiLf$v$5ZretxfqsBa2~kyMp|u=!hT^3p>= zsQLS6jmb6H9=+NWgm(_FcQZfYiI=X5T^0Bibm&3PdeMrgxQIC6R$!LpLXtOWm#&3q@Bjq{Hq7d4d6o%7@@pWbJW_AVJs8pXA@witcLYhKjR5r$YY)DUf*7Fe@-q|bK*wO3Hrt>@~ zGr!b2t3cPcyR<uv+Fmqi^E#0}?Ofto0>zF#_NIND-eO6T~>{a$B`=rBO9*wP&TU zS$F4d_9}-+e7X4*VY)TBvF0?XG-$7wU6JqE^7BYy6h_9(5*AFiYPt*247WbW*i9PX zqj&{ki^NkML0au_yfh$4$4t&UojU8)=>Vk>Ml{UfxP0diHdDYRE!tSz6I_sUSs2yJAXTbqkwo#PwIt&)8 zbF9GaR)*P3O*XeFkc!oG*L1S`ju)*HbkE_5k8|Yu5Mlm=gU?SDG3_!27F)ca)khRR zONX6W9VHM=SP9LHI9FX;Tg&HfIw-3TWq;hcom)ury2;3Vu&lXzI>YNO1|w`=Y%mF= z-Iw0ongn2-Od=)10=r`E$j=6$nHD&X!Fa9Z>5813K;V{N#N0(!Z_xfPaxoYVU3Jl+ z3X_Tl=ofta7K;i&;mQS0tdrYxL60u;n{$Y1;f&Of0_LgaBAsmv&~5-RZtiS%Kk2)z zJY04Vx23{fT%=)biL|o{tArQ~C@&tCMdqQc!ck`X^JtGF_GH>{=z$i!qPSHLcYMJK zXJ$?;PH(1*@U4s2jicSQ+qruL8@L5UoPC+c;P#g4w=shVvr=;}R{ z0FU>A4ffUKmCK7agMnK#d&IrQ50@&3X1z+{_OVOe({(kTfIfSlKC==G@^K)ayb|cx zc17Zi4ZEU(sArIt3SGLQ=@Q#@q~igiMbVuT0}BgNf72KmIr*7Ml~do06?u~Uc75oEkkT_kTb4*uvH)&*_y1&n|0usCS_!Fc_j1+oj8I zRCgz1FfNTlMck>aSD)yP@5(nz=X5V{(hvTNEySnDvkzx!Sw96`?smN+_pe9qW+#-v zSN_`Uh$dTx#!~1tq%!J>X2A|_O5E^nZYogp6Tqj@{}?$TtHg#eXi-4F6v7#$nm_c_ z$oGk{0LxATB4NBes|6?7=>DryXi};FyrZmsIv~11q)owOu%K8Brj8YuQWM2Z+NmvQ za9x0C_qLp>Mk0pL07U!*ca&2z1^K7BcWU(t1DNgwsKr?u)tDK zPtpDd^j@4ISEtj2^9m7R&z(|h2LKQx(s>2@tTr4rJ@bwY z$(+4LquuufZPlQ+U;~!6l2fv@twNfOFj7*2*U;}dn?<^2r$r~}4`LcLsQ}K77qJ#^ zk0v&@o>6M*UiaKaOg)d5b+)-BZP2E~n62?%Dri%LVyVjo-7DHpRGmxiu=$o4 zSAh)gtizuyDGzPT@whzC=?(X*BQjoYzAS`$l@wpIkZZDtGPSL>QU_EwIV)Q9uepd*v%b&ooI2kx2wKR z+^(!CLo$wy4^()P7%$qwRFq^qbCjg0wEcL>dRTq(Kzi%<-VSI32sT4$F?{Dy;&oCx zYhl$>4Up|}%9gK12#RI@Y2ReEed@tvv((q|$AFk=R`r2PCz+3reh!-8$@i5ZhwvEN zV~hJgiD z&#RO3?SsKbU&%Qqif20ql8}2q6mp+N{sma11Z{j7Tv%n{!s_;C6Oe(4gVEk@I#$uq z8p@663@nX`-R zH^Wog{JcAfDmvMeW&!^Ez3kGP+fBT|jmg?nZ(w(~7R0q6{y$C))^N3kt2JD`$#b|h zMy)YwjZtfidJ|{*Yg)3VC2Lx;rX_1y0uDOf{4dl0m%O_0vys1j)dQdXBQP6s{AkP( J!KZ&a|1T5oK~?|& literal 0 HcmV?d00001 diff --git a/.playwright/snapshots/components/StateLabel.test.ts-snapshots/StateLabel-Unavailable-light-tritanopia-linux.png b/.playwright/snapshots/components/StateLabel.test.ts-snapshots/StateLabel-Unavailable-light-tritanopia-linux.png new file mode 100644 index 0000000000000000000000000000000000000000..028051f7d2d3acb743569abbbb9f075a57e8eaf7 GIT binary patch literal 7867 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 J!KZ&a|1T5oK~?|& literal 0 HcmV?d00001 diff --git a/e2e/components/StateLabel.test.ts b/e2e/components/StateLabel.test.ts index add2a97d42e..da6fe8c1622 100644 --- a/e2e/components/StateLabel.test.ts +++ b/e2e/components/StateLabel.test.ts @@ -275,6 +275,33 @@ test.describe('StateLabel', () => { } }) + test.describe('Unavailable', () => { + for (const theme of themes) { + test.describe(theme, () => { + test('default @vrt', async ({page}) => { + await visit(page, { + id: 'components-statelabel-features--unavailable', + globals: { + colorScheme: theme, + }, + }) + + // Default state + expect(await page.screenshot()).toMatchSnapshot(`StateLabel.Unavailable.${theme}.png`) + }) + + test('axe @aat', async ({page}) => { + await visit(page, { + id: 'components-statelabel-features--unavailable', + globals: { + colorScheme: theme, + }, + }) + }) + }) + } + }) + test.describe('Small', () => { for (const theme of themes) { test.describe(theme, () => { diff --git a/src/StateLabel/StateLabel.docs.json b/src/StateLabel/StateLabel.docs.json index 9a989a9e737..651b6279ddb 100644 --- a/src/StateLabel/StateLabel.docs.json +++ b/src/StateLabel/StateLabel.docs.json @@ -12,7 +12,7 @@ }, { "name": "status", - "type": "'issueOpened' | 'issueClosed' | 'issueClosedNotPlanned' | 'pullOpened' | 'pullClosed' | 'pullMerged' | 'draft' | 'issueDraft'", + "type": "'issueOpened' | 'issueClosed' | 'issueClosedNotPlanned' | 'pullOpened' | 'pullClosed' | 'pullMerged' | 'draft' | 'issueDraft' | 'unavailable'", "required": true }, { diff --git a/src/StateLabel/StateLabel.features.stories.tsx b/src/StateLabel/StateLabel.features.stories.tsx index 473e117e22b..2be0da3e9a7 100644 --- a/src/StateLabel/StateLabel.features.stories.tsx +++ b/src/StateLabel/StateLabel.features.stories.tsx @@ -18,6 +18,7 @@ export const PullClosed = () => Closed Merged export const Queued = () => Queued export const Draft = () => Draft +export const Unavailable = () => Unavailable export const Small = () => ( diff --git a/src/StateLabel/StateLabel.tsx b/src/StateLabel/StateLabel.tsx index 6b7017d6a62..20349220355 100644 --- a/src/StateLabel/StateLabel.tsx +++ b/src/StateLabel/StateLabel.tsx @@ -7,6 +7,7 @@ import { IssueOpenedIcon, QuestionIcon, GitMergeQueueIcon, + AlertIcon, } from '@primer/octicons-react' import React from 'react' import styled from 'styled-components' @@ -26,6 +27,7 @@ const octiconMap = { draft: GitPullRequestIcon, issueDraft: IssueDraftIcon, pullQueued: GitMergeQueueIcon, + unavailable: AlertIcon, } const colorVariants = variant({ @@ -67,6 +69,10 @@ const colorVariants = variant({ backgroundColor: 'neutral.emphasis', color: 'fg.onEmphasis', }, + unavailable: { + backgroundColor: 'neutral.emphasis', + color: 'fg.onEmphasis', + }, }, }) From 8c96909f5e9f66a3919ea62b72c4cee2aaa3d5c7 Mon Sep 17 00:00:00 2001 From: Josh Black Date: Tue, 28 Nov 2023 10:16:46 -0600 Subject: [PATCH 08/24] chore(project): update Node.js to v20 LTS (#3940) * chore(project): update Node.js to v20 LTS * chore: update lockfile --------- Co-authored-by: Josh Black Co-authored-by: Pavithra Kodmad --- .github/actions/pagerduty/action.yml | 2 +- .../workflows/assign_release_conductor.yml | 2 +- .github/workflows/ci.yml | 32 ++++---- .github/workflows/consumer_test.yml | 2 +- .github/workflows/pull_request.yml | 2 +- .github/workflows/release-schedule.yml | 2 +- .github/workflows/statuses.yml | 2 +- .github/workflows/storybook-tests.yml | 2 +- .github/workflows/vrt.yml | 2 +- .nvmrc | 2 +- examples/nextjs/package-lock.json | 82 +++++++++---------- 11 files changed, 66 insertions(+), 66 deletions(-) diff --git a/.github/actions/pagerduty/action.yml b/.github/actions/pagerduty/action.yml index 6c576dcff63..00065517dd8 100644 --- a/.github/actions/pagerduty/action.yml +++ b/.github/actions/pagerduty/action.yml @@ -38,7 +38,7 @@ runs: - name: Set up Node.js uses: actions/setup-node@v3 with: - node-version: 18 + node-version: 20 - name: Get PagerDuty Schedule id: pagerduty uses: actions/github-script@v6 diff --git a/.github/workflows/assign_release_conductor.yml b/.github/workflows/assign_release_conductor.yml index 74182a8deeb..ff5d2a81b10 100644 --- a/.github/workflows/assign_release_conductor.yml +++ b/.github/workflows/assign_release_conductor.yml @@ -17,7 +17,7 @@ jobs: - uses: actions/checkout@v4 - uses: actions/setup-node@v4 with: - node-version: 18 + node-version: 20 - run: npm ci - uses: ./.github/actions/pagerduty id: pagerduty diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index ba3f426b7a0..305700b36da 100644 --- a/.github/workflows/ci.yml +++ b/.github/workflows/ci.yml @@ -25,7 +25,7 @@ jobs: - name: Set up Node.js uses: actions/setup-node@v4 with: - node-version: 18 + node-version: 20 cache: 'npm' - name: Install dependencies run: npm ci @@ -41,7 +41,7 @@ jobs: - name: Set up Node.js uses: actions/setup-node@v4 with: - node-version: 18 + node-version: 20 cache: 'npm' - name: Install dependencies @@ -62,7 +62,7 @@ jobs: - name: Set up Node.js uses: actions/setup-node@v4 with: - node-version: 18 + node-version: 20 cache: 'npm' - name: Install dependencies @@ -83,7 +83,7 @@ jobs: - name: Set up Node.js uses: actions/setup-node@v4 with: - node-version: 18 + node-version: 20 cache: 'npm' - name: Install dependencies @@ -101,7 +101,7 @@ jobs: - name: Set up Node.js uses: actions/setup-node@v4 with: - node-version: 18 + node-version: 20 cache: 'npm' - name: Install dependencies @@ -126,10 +126,10 @@ jobs: shard: [1, 2, 3, 4] steps: - uses: actions/checkout@v4 - - name: Use Node.js 18.x + - name: Use Node.js 20.x uses: actions/setup-node@v4 with: - node-version: 18 + node-version: 20 cache: 'npm' - name: Install dependencies run: npm ci @@ -163,10 +163,10 @@ jobs: needs: vrt-runner steps: - uses: actions/checkout@v4 - - name: Use Node.js 18.x + - name: Use Node.js 20.x uses: actions/setup-node@v4 with: - node-version: 18 + node-version: 20 cache: 'npm' - name: install dependencies run: npm ci @@ -194,10 +194,10 @@ jobs: shard: [1, 2] steps: - uses: actions/checkout@v4 - - name: Use Node.js 18.x + - name: Use Node.js 20.x uses: actions/setup-node@v4 with: - node-version: 18 + node-version: 20 cache: 'npm' - name: Install dependencies run: npm ci @@ -231,10 +231,10 @@ jobs: needs: aat-runner steps: - uses: actions/checkout@v4 - - name: Use Node.js 18.x + - name: Use Node.js 20.x uses: actions/setup-node@v4 with: - node-version: 18 + node-version: 20 cache: 'npm' - name: install dependencies run: npm ci @@ -259,10 +259,10 @@ jobs: steps: - name: Checkout repository uses: actions/checkout@v4 - - name: Use Node.js 18.x + - name: Use Node.js 20.x uses: actions/setup-node@v4 with: - node-version: 18 + node-version: 20 cache: 'npm' - name: Install dependencies run: npm ci @@ -277,7 +277,7 @@ jobs: - name: Set up Node.js uses: actions/setup-node@v4 with: - node-version: 18 + node-version: 20 cache: 'npm' - name: Install dependencies run: npm ci diff --git a/.github/workflows/consumer_test.yml b/.github/workflows/consumer_test.yml index 7520fa698b2..7f1b8ad2702 100644 --- a/.github/workflows/consumer_test.yml +++ b/.github/workflows/consumer_test.yml @@ -14,7 +14,7 @@ jobs: - name: Set up Node.js uses: actions/setup-node@v4 with: - node-version: 18 + node-version: 20 cache: npm - name: Install dependencies run: npm ci diff --git a/.github/workflows/pull_request.yml b/.github/workflows/pull_request.yml index c9b1003ab8d..1da519d0301 100644 --- a/.github/workflows/pull_request.yml +++ b/.github/workflows/pull_request.yml @@ -16,7 +16,7 @@ jobs: - name: Set up Node.js uses: actions/setup-node@v4 with: - node-version: 18 + node-version: 20 - name: Get or Create Comment uses: actions/github-script@v7 diff --git a/.github/workflows/release-schedule.yml b/.github/workflows/release-schedule.yml index c32566a281a..ace13300549 100644 --- a/.github/workflows/release-schedule.yml +++ b/.github/workflows/release-schedule.yml @@ -30,7 +30,7 @@ jobs: - name: Set up Node.js uses: actions/setup-node@v4 with: - node-version: 18 + node-version: 20 - name: Install packages for github-script run: npm i date-fns - name: Create Release Issue diff --git a/.github/workflows/statuses.yml b/.github/workflows/statuses.yml index 8c759d43aee..cf29166af88 100644 --- a/.github/workflows/statuses.yml +++ b/.github/workflows/statuses.yml @@ -22,7 +22,7 @@ jobs: - name: Set up Node.js uses: actions/setup-node@v4 with: - node-version: 18 + node-version: 20 - name: Install node deps run: npm ci - name: Install ruby deps diff --git a/.github/workflows/storybook-tests.yml b/.github/workflows/storybook-tests.yml index 6adc4bfecce..41308daa00f 100644 --- a/.github/workflows/storybook-tests.yml +++ b/.github/workflows/storybook-tests.yml @@ -13,7 +13,7 @@ jobs: - uses: actions/checkout@v4 - uses: actions/setup-node@v4 with: - node-version: 18 + node-version: 20 cache: 'npm' - name: Install dependencies run: npm i diff --git a/.github/workflows/vrt.yml b/.github/workflows/vrt.yml index 5bb901b27fa..e5737845586 100644 --- a/.github/workflows/vrt.yml +++ b/.github/workflows/vrt.yml @@ -37,7 +37,7 @@ jobs: - name: Set up Node.js uses: actions/setup-node@v4 with: - node-version: 18 + node-version: 20 cache: 'npm' - name: Install dependencies run: npm ci diff --git a/.nvmrc b/.nvmrc index 3f430af82b3..9a2a0e219c9 100644 --- a/.nvmrc +++ b/.nvmrc @@ -1 +1 @@ -v18 +v20 diff --git a/examples/nextjs/package-lock.json b/examples/nextjs/package-lock.json index 4f10bcc933f..babb03f1f4c 100644 --- a/examples/nextjs/package-lock.json +++ b/examples/nextjs/package-lock.json @@ -52,15 +52,15 @@ "styled-system": "^5.1.5" }, "devDependencies": { - "@actions/core": "1.10.0", + "@actions/core": "1.10.1", "@babel/cli": "7.22.10", "@babel/core": "7.22.5", - "@babel/eslint-parser": "7.22.15", - "@babel/parser": "7.22.16", + "@babel/eslint-parser": "7.23.3", + "@babel/parser": "7.23.0", "@babel/plugin-proposal-nullish-coalescing-operator": "7.18.6", "@babel/plugin-proposal-optional-chaining": "7.21.0", "@babel/plugin-transform-modules-commonjs": "7.22.15", - "@babel/preset-react": "7.22.15", + "@babel/preset-react": "7.23.3", "@babel/preset-typescript": "7.22.15", "@changesets/changelog-github": "0.4.8", "@changesets/cli": "2.26.2", @@ -132,14 +132,14 @@ "eslint-plugin-mdx": "2.2.0", "eslint-plugin-playwright": "0.15.1", "eslint-plugin-prettier": "5.0.0", - "eslint-plugin-primer-react": "4.0.1", + "eslint-plugin-primer-react": "4.0.2", "eslint-plugin-react": "7.32.2", "eslint-plugin-react-hooks": "4.6.0", "eslint-plugin-ssr-friendly": "1.2.0", "eslint-plugin-storybook": "0.6.13", "eslint-plugin-testing-library": "6.0.2", "fast-glob": "3.3.1", - "filesize": "10.0.12", + "filesize": "10.1.0", "front-matter": "4.0.2", "gzip-size": "6.0.0", "husky": "8.0.3", @@ -158,7 +158,7 @@ "markdownlint-cli2": "^0.10.0", "markdownlint-cli2-formatter-pretty": "0.0.3", "mdast-util-from-markdown": "2.0.0", - "mdast-util-frontmatter": "1.0.1", + "mdast-util-frontmatter": "2.0.1", "mdast-util-mdx": "3.0.0", "mdast-util-to-string": "4.0.0", "micromark-extension-frontmatter": "2.0.0", @@ -184,7 +184,7 @@ "terser": "5.17.6", "ts-node": "10.9.1", "ts-toolbelt": "9.6.0", - "typescript": "4.9.5", + "typescript": "5.2.2", "typescript-plugin-css-modules": "5.0.1", "unist-util-find": "3.0.0", "unist-util-find-before": "4.0.0", @@ -35704,30 +35704,30 @@ } }, "node_modules/@babel/compat-data": { - "version": "7.23.2", - "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.23.2.tgz", - "integrity": "sha512-0S9TQMmDHlqAZ2ITT95irXKfxN9bncq8ZCoJhun3nHL/lLUxd2NKBJYoNGWH7S0hz6fRQwWlAWn/ILM0C70KZQ==", + "version": "7.23.3", + "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.23.3.tgz", + "integrity": "sha512-BmR4bWbDIoFJmJ9z2cZ8Gmm2MXgEDgjdWgpKmKWUt54UGFJdlj31ECtbaDvCG/qVdG3AQ1SfpZEs01lUFbzLOQ==", "peer": true, "engines": { "node": ">=6.9.0" } }, "node_modules/@babel/core": { - "version": "7.23.2", - "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.23.2.tgz", - "integrity": "sha512-n7s51eWdaWZ3vGT2tD4T7J6eJs3QoBXydv7vkUM06Bf1cbVD2Kc2UrkzhiQwobfV7NwOnQXYL7UBJ5VPU+RGoQ==", + "version": "7.23.3", + "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.23.3.tgz", + "integrity": "sha512-Jg+msLuNuCJDyBvFv5+OKOUjWMZgd85bKjbICd3zWrKAo+bJ49HJufi7CQE0q0uR8NGyO6xkCACScNqyjHSZew==", "peer": true, "dependencies": { "@ampproject/remapping": "^2.2.0", "@babel/code-frame": "^7.22.13", - "@babel/generator": "^7.23.0", + "@babel/generator": "^7.23.3", "@babel/helper-compilation-targets": "^7.22.15", - "@babel/helper-module-transforms": "^7.23.0", + "@babel/helper-module-transforms": "^7.23.3", "@babel/helpers": "^7.23.2", - "@babel/parser": "^7.23.0", + "@babel/parser": "^7.23.3", "@babel/template": "^7.22.15", - "@babel/traverse": "^7.23.2", - "@babel/types": "^7.23.0", + "@babel/traverse": "^7.23.3", + "@babel/types": "^7.23.3", "convert-source-map": "^2.0.0", "debug": "^4.1.0", "gensync": "^1.0.0-beta.2", @@ -35743,11 +35743,11 @@ } }, "node_modules/@babel/generator": { - "version": "7.23.0", - "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.23.0.tgz", - "integrity": "sha512-lN85QRR+5IbYrMWM6Y4pE/noaQtg4pNiqeNGX60eqOfo6gtEj6uw/JagelB8vVztSd7R6M5n1+PQkDbHbBRU4g==", + "version": "7.23.3", + "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.23.3.tgz", + "integrity": "sha512-keeZWAV4LU3tW0qRi19HRpabC/ilM0HRBBzf9/k8FFiG4KVpiv0FIy4hHfLfFQZNhziCTPTmd59zoyv6DNISzg==", "dependencies": { - "@babel/types": "^7.23.0", + "@babel/types": "^7.23.3", "@jridgewell/gen-mapping": "^0.3.2", "@jridgewell/trace-mapping": "^0.3.17", "jsesc": "^2.5.1" @@ -35823,9 +35823,9 @@ } }, "node_modules/@babel/helper-module-transforms": { - "version": "7.23.0", - "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.23.0.tgz", - "integrity": "sha512-WhDWw1tdrlT0gMgUJSlX0IQvoO1eN279zrAUbVB+KpV2c3Tylz8+GnKOLllCS6Z/iZQEyVYxhZVUdPTqs2YYPw==", + "version": "7.23.3", + "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.23.3.tgz", + "integrity": "sha512-7bBs4ED9OmswdfDzpz4MpWgSrV7FXlc3zIagvLFjS5H+Mk7Snr21vQ6QwrsoCGMfNC4e4LQPdoULEt4ykz0SRQ==", "peer": true, "dependencies": { "@babel/helper-environment-visitor": "^7.22.20", @@ -35921,9 +35921,9 @@ } }, "node_modules/@babel/parser": { - "version": "7.23.0", - "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.23.0.tgz", - "integrity": "sha512-vvPKKdMemU85V9WE/l5wZEmImpCtLqbnTvqDS2U1fJ96KrxoW7KrXhNsNCblQlg8Ck4b85yxdTyelsMUgFUXiw==", + "version": "7.23.3", + "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.23.3.tgz", + "integrity": "sha512-uVsWNvlVsIninV2prNz/3lHCb+5CJ+e+IUBfbjToAHODtfGYLfCFuY4AU7TskI+dAKk+njsPiBjq1gKTvZOBaw==", "bin": { "parser": "bin/babel-parser.js" }, @@ -35957,18 +35957,18 @@ } }, "node_modules/@babel/traverse": { - "version": "7.23.2", - "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.23.2.tgz", - "integrity": "sha512-azpe59SQ48qG6nu2CzcMLbxUudtN+dOM9kDbUqGq3HXUJRlo7i8fvPoxQUzYgLZ4cMVmuZgm8vvBpNeRhd6XSw==", + "version": "7.23.3", + "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.23.3.tgz", + "integrity": "sha512-+K0yF1/9yR0oHdE0StHuEj3uTPzwwbrLGfNOndVJVV2TqA5+j3oljJUb4nmB954FLGjNem976+B+eDuLIjesiQ==", "dependencies": { "@babel/code-frame": "^7.22.13", - "@babel/generator": "^7.23.0", + "@babel/generator": "^7.23.3", "@babel/helper-environment-visitor": "^7.22.20", "@babel/helper-function-name": "^7.23.0", "@babel/helper-hoist-variables": "^7.22.5", "@babel/helper-split-export-declaration": "^7.22.6", - "@babel/parser": "^7.23.0", - "@babel/types": "^7.23.0", + "@babel/parser": "^7.23.3", + "@babel/types": "^7.23.3", "debug": "^4.1.0", "globals": "^11.1.0" }, @@ -35977,9 +35977,9 @@ } }, "node_modules/@babel/types": { - "version": "7.23.0", - "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.23.0.tgz", - "integrity": "sha512-0oIyUfKoI3mSqMvsxBdclDwxXKXAUA8v/apZbc+iSyARYou1o8ZGDxbUYyLFoW2arqS2jDGqJuZvv1d/io1axg==", + "version": "7.23.3", + "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.23.3.tgz", + "integrity": "sha512-OZnvoH2l8PK5eUvEcUyCt/sXgr/h+UWpVuBbOljwcrAgUl6lpchoQ++PHGyQy1AtYnVA6CEq3y5xeEI10brpXw==", "dependencies": { "@babel/helper-string-parser": "^7.22.5", "@babel/helper-validator-identifier": "^7.22.20", @@ -36364,9 +36364,9 @@ } }, "node_modules/electron-to-chromium": { - "version": "1.4.569", - "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.569.tgz", - "integrity": "sha512-LsrJjZ0IbVy12ApW3gpYpcmHS3iRxH4bkKOW98y1/D+3cvDUWGcbzbsFinfUS8knpcZk/PG/2p/RnkMCYN7PVg==", + "version": "1.4.582", + "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.582.tgz", + "integrity": "sha512-89o0MGoocwYbzqUUjc+VNpeOFSOK9nIdC5wY4N+PVUarUK0MtjyTjks75AZS2bW4Kl8MdewdFsWaH0jLy+JNoA==", "peer": true }, "node_modules/escalade": { From 87028d2b963b788f1525f6f9326ed7eb1b7346d6 Mon Sep 17 00:00:00 2001 From: Iulia Bejan <64602043+iulia-b@users.noreply.github.com> Date: Tue, 28 Nov 2023 19:52:50 +0100 Subject: [PATCH 09/24] [Fix] Non-standard formatted tasklist items are not identified as tasklist items (#3972) * identify multiple spaces in tasklist items * parity for whitespace support with classic experience * Remove extra space * chore: add changeset --------- Co-authored-by: Josh Black Co-authored-by: Josh Black --- .changeset/strong-swans-repeat.md | 5 +++++ src/drafts/MarkdownEditor/_useListEditing.ts | 10 ++++++---- 2 files changed, 11 insertions(+), 4 deletions(-) create mode 100644 .changeset/strong-swans-repeat.md diff --git a/.changeset/strong-swans-repeat.md b/.changeset/strong-swans-repeat.md new file mode 100644 index 00000000000..3ba440e4ccd --- /dev/null +++ b/.changeset/strong-swans-repeat.md @@ -0,0 +1,5 @@ +--- +'@primer/react': patch +--- + +Update MarkdownEditor to correctly identify non-standard formatted tasklist items diff --git a/src/drafts/MarkdownEditor/_useListEditing.ts b/src/drafts/MarkdownEditor/_useListEditing.ts index ccebce8b5b1..ac10fd94c2d 100644 --- a/src/drafts/MarkdownEditor/_useListEditing.ts +++ b/src/drafts/MarkdownEditor/_useListEditing.ts @@ -29,10 +29,11 @@ const calculateNextListItemStarter = ({leadingWhitespace = '', delimeter, taskBo * 3. Task box (optional) * 4. Everything following */ -export const listItemRegex = /^(\s*)([*-]|(\d+)\.)\s(?:(\[[\sx]\])\s)?(.*)/i +export const listItemRegex = /^(\s*)([*-]|(\d+)\.)(\s{1,4})(?:(\[[\sx]\])\s)?(.*)/i export type ListItem = { leadingWhitespace: string + middleWhitespace: string text: string delimeter: '-' | '*' | number taskBox: '[ ]' | '[x]' | null @@ -45,7 +46,7 @@ const isNumericListItem = (item: ListItem | null): item is NumericListItem => ty export const parseListItem = (line: string): ListItem | null => { const result = listItemRegex.exec(line) if (!result) return null - const [, leadingWhitespace = '', fullDelimeter, itemNumberStr = '', taskBox = null, text] = result + const [, leadingWhitespace = '', fullDelimeter, itemNumberStr = '', middleWhitespace, taskBox = null, text] = result const itemNumber = Number.parseInt(itemNumberStr, 10) const delimeter = Number.isNaN(itemNumber) ? (fullDelimeter as '*' | '-') : itemNumber @@ -53,14 +54,15 @@ export const parseListItem = (line: string): ListItem | null => { leadingWhitespace, text, delimeter, + middleWhitespace, taskBox: taskBox as '[ ]' | '[x]' | null, } } export const listItemToString = (item: ListItem) => `${item.leadingWhitespace}${typeof item.delimeter === 'number' ? `${item.delimeter}.` : item.delimeter}${ - item.taskBox ? ` ${item.taskBox}` : '' - } ${item.text}` + item.middleWhitespace + }${item.taskBox || ''} ${item.text}` /** * Provides support for list editing in the Markdown editor. This includes inserting new From c4216ef306f8c013c6f81a18dbc6823a7f42e562 Mon Sep 17 00:00:00 2001 From: Daniel Adams Date: Wed, 29 Nov 2023 11:18:40 +0100 Subject: [PATCH 10/24] Adjust focus styling of `textarea` and `input` (#3965) * Adjust focus styling * Update tests --- .../__snapshots__/Autocomplete.test.tsx.snap | 35 ++-- .../__snapshots__/TextInput.test.tsx.snap | 157 +++++++++++------- .../TextInputWithTokens.test.tsx.snap | 125 ++++++++------ .../__snapshots__/Textarea.test.tsx.snap | 5 +- src/internal/components/TextInputWrapper.tsx | 9 +- 5 files changed, 199 insertions(+), 132 deletions(-) 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/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 43d1dce4a103b5e23064e8a32a7bb27677dbbb95 Mon Sep 17 00:00:00 2001 From: Tyler Jones Date: Wed, 29 Nov 2023 15:41:22 -0500 Subject: [PATCH 11/24] Adjust order of PageLayout.Pane contents (#3983) * Adjust order of PageLayout.Pane contents * Add button to ResizeablePane story * Add changeset * test(vrt): update snapshots * Update snapshots * Add back prop * Add link to example * test(vrt): update snapshots --------- Co-authored-by: TylerJDev --- .changeset/serious-sloths-hide.md | 5 + .../PageLayout.features.stories.tsx | 3 + src/PageLayout/PageLayout.tsx | 62 +++--- .../__snapshots__/PageLayout.test.tsx.snap | 188 +++++++++--------- .../SplitPageLayout.test.tsx.snap | 32 +-- 5 files changed, 149 insertions(+), 141 deletions(-) create mode 100644 .changeset/serious-sloths-hide.md diff --git a/.changeset/serious-sloths-hide.md b/.changeset/serious-sloths-hide.md new file mode 100644 index 00000000000..23e2541a8e1 --- /dev/null +++ b/.changeset/serious-sloths-hide.md @@ -0,0 +1,5 @@ +--- +'@primer/react': patch +--- + +Readjust order of `PageLayout.Pane` contents diff --git a/src/PageLayout/PageLayout.features.stories.tsx b/src/PageLayout/PageLayout.features.stories.tsx index 25c704eb2d8..66a4989bd8f 100644 --- a/src/PageLayout/PageLayout.features.stories.tsx +++ b/src/PageLayout/PageLayout.features.stories.tsx @@ -124,6 +124,9 @@ export const StickyPane: Story = args => ( ) })} + + Donec sit amet massa purus. Plura de lorem Ispum. + diff --git a/src/PageLayout/PageLayout.tsx b/src/PageLayout/PageLayout.tsx index a2321b06b40..378d8fe8c3d 100644 --- a/src/PageLayout/PageLayout.tsx +++ b/src/PageLayout/PageLayout.tsx @@ -758,8 +758,8 @@ const Pane = React.forwardRef - { - // Get the number of pixels the divider was dragged - let deltaWithDirection - if (isKeyboard) { - deltaWithDirection = delta - } else { - deltaWithDirection = position === 'end' ? -delta : delta - } - updatePaneWidth(paneWidth + deltaWithDirection) - }} - // Ensure `paneWidth` state and actual pane width are in sync when the drag ends - onDragEnd={() => { - const paneRect = paneRef.current?.getBoundingClientRect() - if (!paneRect) return - updatePaneWidth(paneRect.width) - }} - // Reset pane width on double click - onDoubleClick={() => updatePaneWidth(getDefaultPaneWidth(width))} - /> - {children} + + { + // Get the number of pixels the divider was dragged + let deltaWithDirection + if (isKeyboard) { + deltaWithDirection = delta + } else { + deltaWithDirection = position === 'end' ? -delta : delta + } + updatePaneWidth(paneWidth + deltaWithDirection) + }} + // Ensure `paneWidth` state and actual pane width are in sync when the drag ends + onDragEnd={() => { + const paneRect = paneRef.current?.getBoundingClientRect() + if (!paneRect) return + updatePaneWidth(paneRect.width) + }} + // Reset pane width on double click + onDoubleClick={() => updatePaneWidth(getDefaultPaneWidth(width))} + /> ) }, diff --git a/src/PageLayout/__snapshots__/PageLayout.test.tsx.snap b/src/PageLayout/__snapshots__/PageLayout.test.tsx.snap index ad552cc80d3..bb23bd6bec0 100644 --- a/src/PageLayout/__snapshots__/PageLayout.test.tsx.snap +++ b/src/PageLayout/__snapshots__/PageLayout.test.tsx.snap @@ -109,13 +109,6 @@ exports[`PageLayout renders condensed layout 1`] = ` } .c10 { - height: 100%; - position: relative; - display: none; - margin-right: 16px; -} - -.c11 { --pane-min-width: 256px; --pane-max-width-diff: 511px; --pane-max-width: calc(100vw - var(--pane-max-width-diff)); @@ -123,6 +116,13 @@ exports[`PageLayout renders condensed layout 1`] = ` padding: 0; } +.c11 { + height: 100%; + position: relative; + display: none; + margin-right: 16px; +} + .c12 { -webkit-order: 4; -ms-flex-order: 4; @@ -143,9 +143,9 @@ exports[`PageLayout renders condensed layout 1`] = ` width: auto; margin-top: 0 !important; margin-bottom: 0 !important; - -webkit-flex-direction: row; - -ms-flex-direction: row; - flex-direction: row; + -webkit-flex-direction: row-reverse; + -ms-flex-direction: row-reverse; + flex-direction: row-reverse; margin-left: 16px; } } @@ -162,20 +162,20 @@ exports[`PageLayout renders condensed layout 1`] = ` } @media screen and (min-width:768px) { - .c11 { + .c10 { width: 256px; overflow: auto; } } @media screen and (min-width:1012px) { - .c11 { + .c10 { width: 296px; } } @media screen and (min-width:1280px) { - .c11 { + .c10 { --pane-max-width-diff: 959px; } } @@ -226,13 +226,13 @@ exports[`PageLayout renders condensed layout 1`] = ` />
-
Pane
+