From fdd6915a4ba9a7c8195b05be602cb63cf271bd1c Mon Sep 17 00:00:00 2001 From: Reza Rahman Date: Mon, 21 Feb 2022 17:56:37 +0000 Subject: [PATCH 01/37] prepare integration branch --- .changeset/empty-pillows-hunt.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/empty-pillows-hunt.md diff --git a/.changeset/empty-pillows-hunt.md b/.changeset/empty-pillows-hunt.md new file mode 100644 index 00000000000..922ed22e895 --- /dev/null +++ b/.changeset/empty-pillows-hunt.md @@ -0,0 +1,5 @@ +--- +'@primer/react': major +--- + +Prepare library for `v35` From 8cd12439703e39d38893e02df0ed84a45d846e55 Mon Sep 17 00:00:00 2001 From: Pavithra Kodmad Date: Thu, 24 Feb 2022 23:29:46 +1100 Subject: [PATCH 02/37] Move deprecated components to deprecated folder (#1881) * prepare integration branch * Move deprecated components to deprecated folder * Add subpath exports for deprecated * Fix up the docs * Remove dialog and formgroup components * Fix up all the tests * Create smooth-cameras-prove.md Co-authored-by: Reza Rahman --- .changeset/smooth-cameras-prove.md | 5 + deprecated/package.json | 9 + docs/package-lock.json | 323 +++++++++--------- docs/package.json | 2 +- .../gatsby-theme-doctocat/live-code-scope.js | 2 + package-lock.json | 4 +- package.json | 7 + src/__tests__/BorderBox.test.tsx | 2 +- src/__tests__/Dropdown.test.tsx | 2 +- src/__tests__/Flex.test.tsx | 2 +- src/__tests__/Grid.test.tsx | 2 +- src/__tests__/Position.test.tsx | 3 +- src/__tests__/SelectMenu.test.tsx | 3 +- src/deprecated/index.ts | 39 +++ src/index.ts | 32 +- 15 files changed, 229 insertions(+), 208 deletions(-) create mode 100644 .changeset/smooth-cameras-prove.md create mode 100644 deprecated/package.json create mode 100644 src/deprecated/index.ts diff --git a/.changeset/smooth-cameras-prove.md b/.changeset/smooth-cameras-prove.md new file mode 100644 index 00000000000..9b6fbdbdc47 --- /dev/null +++ b/.changeset/smooth-cameras-prove.md @@ -0,0 +1,5 @@ +--- +"@primer/react": major +--- + +Move deprecated components to deprecated folder diff --git a/deprecated/package.json b/deprecated/package.json new file mode 100644 index 00000000000..e7a211fd303 --- /dev/null +++ b/deprecated/package.json @@ -0,0 +1,9 @@ +{ + "_comment1": "this is required only for typescript. once this is fixed https://github.com/microsoft/TypeScript/issues/33079 we can remove this hack", + "name": "@primer/react/deprecated", + "types": "../lib-esm/deprecated/index.d.ts", + "main": "../lib-esm/deprecated/index.js", + "type": "module", + "sideEffects": false + } + \ No newline at end of file diff --git a/docs/package-lock.json b/docs/package-lock.json index 5aa240cad2d..bd8cfbb80b1 100644 --- a/docs/package-lock.json +++ b/docs/package-lock.json @@ -8,7 +8,7 @@ "name": "docs", "version": "1.0.0", "dependencies": { - "@primer/gatsby-theme-doctocat": "^3.2.0", + "@primer/gatsby-theme-doctocat": "^3.2.1", "@primer/octicons-react": "^16.1.0", "@primer/primitives": "4.1.0", "@styled-system/prop-types": "^5.1.0", @@ -2719,69 +2719,28 @@ "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz", "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==" }, + "node_modules/@primer/behaviors": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/@primer/behaviors/-/behaviors-1.1.0.tgz", + "integrity": "sha512-Ej2OUc3ZIFaR7WwIUqESO1DTzmpb7wc8xbTVRT9s52jZQDjN7g5iljoK3ocYZm+BIAcKn3MvcwB42hEk4Ga4xQ==" + }, "node_modules/@primer/component-metadata": { "version": "0.4.1", "resolved": "https://registry.npmjs.org/@primer/component-metadata/-/component-metadata-0.4.1.tgz", "integrity": "sha512-iy5ZEeIRN6pFFG7px2ruuA726yVB/n4lsgM3msfdg9qJzfS9qE2JCqq2OuvQ+yXUTxb3JKROaDSH403kdpFR4Q==" }, - "node_modules/@primer/components": { - "version": "30.3.0", - "resolved": "https://registry.npmjs.org/@primer/components/-/components-30.3.0.tgz", - "integrity": "sha512-5W2WQtTzBsGE12+SIcc49RlosgkoamFDMkwNh5kKuQq1Ni9fXjxfWQaykh8CaWydcywMfnZbPcESKnuu+KfLZQ==", - "deprecated": "@primer/components has been renamed @primer/react. Use @primer/react instead.", - "dependencies": { - "@primer/octicons-react": "^13.0.0", - "@primer/primitives": "4.8.1", - "@radix-ui/react-polymorphic": "0.0.14", - "@react-aria/ssr": "3.1.0", - "@styled-system/css": "5.1.5", - "@styled-system/props": "5.1.5", - "@styled-system/theme-get": "5.1.2", - "@types/history": "4.7.8", - "@types/styled-components": "5.1.11", - "@types/styled-system": "5.1.12", - "@types/styled-system__css": "5.0.16", - "@types/styled-system__theme-get": "5.0.1", - "classnames": "2.3.1", - "color2k": "1.2.4", - "deepmerge": "4.2.2", - "focus-visible": "5.2.0", - "styled-system": "5.1.5" - }, - "peerDependencies": { - "react": "^17.0.0", - "react-dom": "^17.0.0", - "styled-components": "4.x || 5.x" - } - }, - "node_modules/@primer/components/node_modules/@primer/octicons-react": { - "version": "13.0.0", - "resolved": "https://registry.npmjs.org/@primer/octicons-react/-/octicons-react-13.0.0.tgz", - "integrity": "sha512-j5XppNRCvgaMZLPsVvvmp6GSh7P5pq6PUbsfLNBWi2Kz3KYDeoGDWbPr5MjoxFOGUn6Hjnt6qjHPRxahd11vLQ==", - "engines": { - "node": ">=8" - }, - "peerDependencies": { - "react": ">=15" - } - }, - "node_modules/@primer/components/node_modules/@primer/primitives": { - "version": "4.8.1", - "resolved": "https://registry.npmjs.org/@primer/primitives/-/primitives-4.8.1.tgz", - "integrity": "sha512-mgr6+EKpn4DixuhLt3drk7QmNQO8M7RYONWovg1nkV7p56jklhDLfZmp1luLUee37eQGAxx3ToStL6gqINFjnQ==" - }, "node_modules/@primer/gatsby-theme-doctocat": { - "version": "3.2.0", - "resolved": "https://registry.npmjs.org/@primer/gatsby-theme-doctocat/-/gatsby-theme-doctocat-3.2.0.tgz", - "integrity": "sha512-C/8X4xHKWmVf+TKlzWzvj65+BRbcTv6rWr1VoiFQsf6hQacEvzxe6BiTvuvZTFQ+P7Ei1TWKPnTOGbqg0VUSnw==", + "version": "3.2.1", + "resolved": "https://registry.npmjs.org/@primer/gatsby-theme-doctocat/-/gatsby-theme-doctocat-3.2.1.tgz", + "integrity": "sha512-fwt/gttBmy8cwH2MaSb+/CQayytiRzxvLc9L7QoqxBUsEHkqiqkzjNX46TK+tv+Ntzs/pKyacR5yqXVN5GtfOw==", "dependencies": { "@babel/preset-env": "^7.5.5", "@babel/preset-react": "^7.0.0", "@mdx-js/mdx": "^1.0.21", "@mdx-js/react": "^1.0.21", "@primer/component-metadata": "^0.4.0", - "@primer/components": "^30.0.0", "@primer/octicons-react": "^16.0.0", + "@primer/react": "^34.5.0", "@styled-system/theme-get": "^5.0.12", "@testing-library/jest-dom": "^4.1.0", "@testing-library/react": "^9.1.3", @@ -2849,6 +2808,56 @@ "resolved": "https://registry.npmjs.org/@primer/primitives/-/primitives-4.1.0.tgz", "integrity": "sha512-bACUj3Xl2z5dnYKE/76BpNqN4/JXFngf26dbb7Goph2PU5wcf+Z2Kk3nXwtJPGG8JByO+FcU3gpZjLNoyuLMHQ==" }, + "node_modules/@primer/react": { + "version": "34.6.0", + "resolved": "https://registry.npmjs.org/@primer/react/-/react-34.6.0.tgz", + "integrity": "sha512-a0Mh6YmpEyQF6ad0mnfOJoC+y1heDM4uuvBcQQKJQ28DVeif5mn+slCD2C9ZQvnhkl4qnh3iqXOTxmKN5fCHNQ==", + "dependencies": { + "@primer/behaviors": "1.1.0", + "@primer/octicons-react": "16.1.1", + "@primer/primitives": "7.1.1", + "@radix-ui/react-polymorphic": "0.0.14", + "@react-aria/ssr": "3.1.0", + "@styled-system/css": "5.1.5", + "@styled-system/props": "5.1.5", + "@styled-system/theme-get": "5.1.2", + "@types/styled-components": "5.1.11", + "@types/styled-system": "5.1.12", + "@types/styled-system__css": "5.0.16", + "@types/styled-system__theme-get": "5.0.1", + "classnames": "2.3.1", + "color2k": "1.2.4", + "deepmerge": "4.2.2", + "focus-visible": "5.2.0", + "history": "5.0.0", + "styled-system": "5.1.5" + }, + "engines": { + "node": ">=12", + "npm": ">=7" + }, + "peerDependencies": { + "react": "^17.0.0", + "react-dom": "^17.0.0", + "styled-components": "4.x || 5.x" + } + }, + "node_modules/@primer/react/node_modules/@primer/octicons-react": { + "version": "16.1.1", + "resolved": "https://registry.npmjs.org/@primer/octicons-react/-/octicons-react-16.1.1.tgz", + "integrity": "sha512-xCxQ5z23ol7yDuJs85Lc4ARzyoay+b3zOhAKkEMU7chk0xi2hT2OnRP23QUudNNDPTGozX268RGYLexUa6P4xw==", + "engines": { + "node": ">=8" + }, + "peerDependencies": { + "react": ">=15" + } + }, + "node_modules/@primer/react/node_modules/@primer/primitives": { + "version": "7.1.1", + "resolved": "https://registry.npmjs.org/@primer/primitives/-/primitives-7.1.1.tgz", + "integrity": "sha512-+Gwo89YK1OFi6oubTlah/zPxxzMNaMLy+inECAYI646KIFdzzhAsKWb3z5tSOu5Ff7no4isRV64rWfMSKLZclw==" + }, "node_modules/@radix-ui/react-polymorphic": { "version": "0.0.14", "resolved": "https://registry.npmjs.org/@radix-ui/react-polymorphic/-/react-polymorphic-0.0.14.tgz", @@ -3310,11 +3319,6 @@ "@types/unist": "*" } }, - "node_modules/@types/history": { - "version": "4.7.8", - "resolved": "https://registry.npmjs.org/@types/history/-/history-4.7.8.tgz", - "integrity": "sha512-S78QIYirQcUoo6UJZx9CSP0O2ix9IaeAXwQi26Rhr/+mg7qqPy8TzaxHSUut7eGjL8WmLccT7/MXf304WjqHcA==" - }, "node_modules/@types/hoist-non-react-statics": { "version": "3.3.1", "resolved": "https://registry.npmjs.org/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz", @@ -14726,6 +14730,14 @@ "node": "*" } }, + "node_modules/history": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/history/-/history-5.0.0.tgz", + "integrity": "sha512-3NyRMKIiFSJmIPdq7FxkNMJkQ7ZEtVblOQ38VtKaA0zZMW1Eo6Q6W8oDKEflr1kNNTItSnk4JMCO1deeSgbLLg==", + "dependencies": { + "@babel/runtime": "^7.7.6" + } + }, "node_modules/hoist-non-react-statics": { "version": "3.3.2", "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz", @@ -28408,8 +28420,7 @@ "ws": { "version": "7.4.5", "resolved": "https://registry.npmjs.org/ws/-/ws-7.4.5.tgz", - "integrity": "sha512-xzyu3hFvomRfXKH8vOFMU3OguG6oOvhXMo3xsGy3xWExqaM2dxBbVxuD99O7m3ZUFMvvscsZDqxfgMaRr/Nr1g==", - "requires": {} + "integrity": "sha512-xzyu3hFvomRfXKH8vOFMU3OguG6oOvhXMo3xsGy3xWExqaM2dxBbVxuD99O7m3ZUFMvvscsZDqxfgMaRr/Nr1g==" } } }, @@ -28767,8 +28778,7 @@ "@mdx-js/react": { "version": "1.6.22", "resolved": "https://registry.npmjs.org/@mdx-js/react/-/react-1.6.22.tgz", - "integrity": "sha512-TDoPum4SHdfPiGSAaRBw7ECyI8VaHpK8GJugbJIJuqyh6kzw9ZLJZW3HGL3NNrJGxcAixUvqROm+YuQOo5eXtg==", - "requires": {} + "integrity": "sha512-TDoPum4SHdfPiGSAaRBw7ECyI8VaHpK8GJugbJIJuqyh6kzw9ZLJZW3HGL3NNrJGxcAixUvqROm+YuQOo5eXtg==" }, "@mdx-js/util": { "version": "1.6.22", @@ -28867,60 +28877,28 @@ } } }, + "@primer/behaviors": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/@primer/behaviors/-/behaviors-1.1.0.tgz", + "integrity": "sha512-Ej2OUc3ZIFaR7WwIUqESO1DTzmpb7wc8xbTVRT9s52jZQDjN7g5iljoK3ocYZm+BIAcKn3MvcwB42hEk4Ga4xQ==" + }, "@primer/component-metadata": { "version": "0.4.1", "resolved": "https://registry.npmjs.org/@primer/component-metadata/-/component-metadata-0.4.1.tgz", "integrity": "sha512-iy5ZEeIRN6pFFG7px2ruuA726yVB/n4lsgM3msfdg9qJzfS9qE2JCqq2OuvQ+yXUTxb3JKROaDSH403kdpFR4Q==" }, - "@primer/components": { - "version": "30.3.0", - "resolved": "https://registry.npmjs.org/@primer/components/-/components-30.3.0.tgz", - "integrity": "sha512-5W2WQtTzBsGE12+SIcc49RlosgkoamFDMkwNh5kKuQq1Ni9fXjxfWQaykh8CaWydcywMfnZbPcESKnuu+KfLZQ==", - "requires": { - "@primer/octicons-react": "^13.0.0", - "@primer/primitives": "4.8.1", - "@radix-ui/react-polymorphic": "0.0.14", - "@react-aria/ssr": "3.1.0", - "@styled-system/css": "5.1.5", - "@styled-system/props": "5.1.5", - "@styled-system/theme-get": "5.1.2", - "@types/history": "4.7.8", - "@types/styled-components": "5.1.11", - "@types/styled-system": "5.1.12", - "@types/styled-system__css": "5.0.16", - "@types/styled-system__theme-get": "5.0.1", - "classnames": "2.3.1", - "color2k": "1.2.4", - "deepmerge": "4.2.2", - "focus-visible": "5.2.0", - "styled-system": "5.1.5" - }, - "dependencies": { - "@primer/octicons-react": { - "version": "13.0.0", - "resolved": "https://registry.npmjs.org/@primer/octicons-react/-/octicons-react-13.0.0.tgz", - "integrity": "sha512-j5XppNRCvgaMZLPsVvvmp6GSh7P5pq6PUbsfLNBWi2Kz3KYDeoGDWbPr5MjoxFOGUn6Hjnt6qjHPRxahd11vLQ==", - "requires": {} - }, - "@primer/primitives": { - "version": "4.8.1", - "resolved": "https://registry.npmjs.org/@primer/primitives/-/primitives-4.8.1.tgz", - "integrity": "sha512-mgr6+EKpn4DixuhLt3drk7QmNQO8M7RYONWovg1nkV7p56jklhDLfZmp1luLUee37eQGAxx3ToStL6gqINFjnQ==" - } - } - }, "@primer/gatsby-theme-doctocat": { - "version": "3.2.0", - "resolved": "https://registry.npmjs.org/@primer/gatsby-theme-doctocat/-/gatsby-theme-doctocat-3.2.0.tgz", - "integrity": "sha512-C/8X4xHKWmVf+TKlzWzvj65+BRbcTv6rWr1VoiFQsf6hQacEvzxe6BiTvuvZTFQ+P7Ei1TWKPnTOGbqg0VUSnw==", + "version": "3.2.1", + "resolved": "https://registry.npmjs.org/@primer/gatsby-theme-doctocat/-/gatsby-theme-doctocat-3.2.1.tgz", + "integrity": "sha512-fwt/gttBmy8cwH2MaSb+/CQayytiRzxvLc9L7QoqxBUsEHkqiqkzjNX46TK+tv+Ntzs/pKyacR5yqXVN5GtfOw==", "requires": { "@babel/preset-env": "^7.5.5", "@babel/preset-react": "^7.0.0", "@mdx-js/mdx": "^1.0.21", "@mdx-js/react": "^1.0.21", "@primer/component-metadata": "^0.4.0", - "@primer/components": "^30.0.0", "@primer/octicons-react": "^16.0.0", + "@primer/react": "^34.5.0", "@styled-system/theme-get": "^5.0.12", "@testing-library/jest-dom": "^4.1.0", "@testing-library/react": "^9.1.3", @@ -28970,19 +28948,54 @@ "@primer/octicons-react": { "version": "16.2.0", "resolved": "https://registry.npmjs.org/@primer/octicons-react/-/octicons-react-16.2.0.tgz", - "integrity": "sha512-943t5kkVRt+/hxVnKS27xweUp4lXFxwJaTrsit1C1xBB4kqdjzmYGpU84zwKsNyyV2Ch7may3umKjbI/mFBPPQ==", - "requires": {} + "integrity": "sha512-943t5kkVRt+/hxVnKS27xweUp4lXFxwJaTrsit1C1xBB4kqdjzmYGpU84zwKsNyyV2Ch7may3umKjbI/mFBPPQ==" }, "@primer/primitives": { "version": "4.1.0", "resolved": "https://registry.npmjs.org/@primer/primitives/-/primitives-4.1.0.tgz", "integrity": "sha512-bACUj3Xl2z5dnYKE/76BpNqN4/JXFngf26dbb7Goph2PU5wcf+Z2Kk3nXwtJPGG8JByO+FcU3gpZjLNoyuLMHQ==" }, + "@primer/react": { + "version": "34.6.0", + "resolved": "https://registry.npmjs.org/@primer/react/-/react-34.6.0.tgz", + "integrity": "sha512-a0Mh6YmpEyQF6ad0mnfOJoC+y1heDM4uuvBcQQKJQ28DVeif5mn+slCD2C9ZQvnhkl4qnh3iqXOTxmKN5fCHNQ==", + "requires": { + "@primer/behaviors": "1.1.0", + "@primer/octicons-react": "16.1.1", + "@primer/primitives": "7.1.1", + "@radix-ui/react-polymorphic": "0.0.14", + "@react-aria/ssr": "3.1.0", + "@styled-system/css": "5.1.5", + "@styled-system/props": "5.1.5", + "@styled-system/theme-get": "5.1.2", + "@types/styled-components": "5.1.11", + "@types/styled-system": "5.1.12", + "@types/styled-system__css": "5.0.16", + "@types/styled-system__theme-get": "5.0.1", + "classnames": "2.3.1", + "color2k": "1.2.4", + "deepmerge": "4.2.2", + "focus-visible": "5.2.0", + "history": "5.0.0", + "styled-system": "5.1.5" + }, + "dependencies": { + "@primer/octicons-react": { + "version": "16.1.1", + "resolved": "https://registry.npmjs.org/@primer/octicons-react/-/octicons-react-16.1.1.tgz", + "integrity": "sha512-xCxQ5z23ol7yDuJs85Lc4ARzyoay+b3zOhAKkEMU7chk0xi2hT2OnRP23QUudNNDPTGozX268RGYLexUa6P4xw==" + }, + "@primer/primitives": { + "version": "7.1.1", + "resolved": "https://registry.npmjs.org/@primer/primitives/-/primitives-7.1.1.tgz", + "integrity": "sha512-+Gwo89YK1OFi6oubTlah/zPxxzMNaMLy+inECAYI646KIFdzzhAsKWb3z5tSOu5Ff7no4isRV64rWfMSKLZclw==" + } + } + }, "@radix-ui/react-polymorphic": { "version": "0.0.14", "resolved": "https://registry.npmjs.org/@radix-ui/react-polymorphic/-/react-polymorphic-0.0.14.tgz", - "integrity": "sha512-9nsMZEDU3LeIUeHJrpkkhZVxu/9Fc7P2g2I3WR+uA9mTbNC3hGaabi0dV6wg0CfHb+m4nSs1pejbE/5no3MJTA==", - "requires": {} + "integrity": "sha512-9nsMZEDU3LeIUeHJrpkkhZVxu/9Fc7P2g2I3WR+uA9mTbNC3hGaabi0dV6wg0CfHb+m4nSs1pejbE/5no3MJTA==" }, "@react-aria/ssr": { "version": "3.1.0", @@ -29387,11 +29400,6 @@ "@types/unist": "*" } }, - "@types/history": { - "version": "4.7.8", - "resolved": "https://registry.npmjs.org/@types/history/-/history-4.7.8.tgz", - "integrity": "sha512-S78QIYirQcUoo6UJZx9CSP0O2ix9IaeAXwQi26Rhr/+mg7qqPy8TzaxHSUut7eGjL8WmLccT7/MXf304WjqHcA==" - }, "@types/hoist-non-react-statics": { "version": "3.3.1", "resolved": "https://registry.npmjs.org/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz", @@ -29958,8 +29966,7 @@ "acorn-jsx": { "version": "5.3.1", "resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.3.1.tgz", - "integrity": "sha512-K0Ptm/47OKfQRpNQ2J/oIN/3QYiK6FwW+eJbILhsdxh2WTLdl+30o8aGdTbm5JbffpFFAg/g+zi1E+jvJha5ng==", - "requires": {} + "integrity": "sha512-K0Ptm/47OKfQRpNQ2J/oIN/3QYiK6FwW+eJbILhsdxh2WTLdl+30o8aGdTbm5JbffpFFAg/g+zi1E+jvJha5ng==" }, "acorn-walk": { "version": "6.2.0", @@ -29994,14 +30001,12 @@ "ajv-errors": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/ajv-errors/-/ajv-errors-1.0.1.tgz", - "integrity": "sha512-DCRfO/4nQ+89p/RK43i8Ezd41EqdGIU4ld7nGF8OQ14oc/we5rEntLCUa7+jrn3nn83BosfwZA0wb4pon2o8iQ==", - "requires": {} + "integrity": "sha512-DCRfO/4nQ+89p/RK43i8Ezd41EqdGIU4ld7nGF8OQ14oc/we5rEntLCUa7+jrn3nn83BosfwZA0wb4pon2o8iQ==" }, "ajv-keywords": { "version": "3.5.2", "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz", - "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==", - "requires": {} + "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==" }, "alphanum-sort": { "version": "1.0.2", @@ -30528,8 +30533,7 @@ "babel-plugin-remove-graphql-queries": { "version": "2.16.1", "resolved": "https://registry.npmjs.org/babel-plugin-remove-graphql-queries/-/babel-plugin-remove-graphql-queries-2.16.1.tgz", - "integrity": "sha512-PkHJuRodMp4p617a/ZVhV8elBhRoFpOTpdu2DaApXJFIsDJWhjZ8d4BGbbFCT/yKJrhRDTdqg1r5AhWEaEUKkw==", - "requires": {} + "integrity": "sha512-PkHJuRodMp4p617a/ZVhV8elBhRoFpOTpdu2DaApXJFIsDJWhjZ8d4BGbbFCT/yKJrhRDTdqg1r5AhWEaEUKkw==" }, "babel-plugin-styled-components": { "version": "2.0.2", @@ -32592,8 +32596,7 @@ "cssnano-utils": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/cssnano-utils/-/cssnano-utils-2.0.1.tgz", - "integrity": "sha512-i8vLRZTnEH9ubIyfdZCAdIdgnHAUeQeByEeQ2I7oTilvP9oHO6RScpeq3GsFUVqeB8uZgOQ9pw8utofNn32hhQ==", - "requires": {} + "integrity": "sha512-i8vLRZTnEH9ubIyfdZCAdIdgnHAUeQeByEeQ2I7oTilvP9oHO6RScpeq3GsFUVqeB8uZgOQ9pw8utofNn32hhQ==" }, "csso": { "version": "4.2.0", @@ -33224,8 +33227,7 @@ "ws": { "version": "7.4.6", "resolved": "https://registry.npmjs.org/ws/-/ws-7.4.6.tgz", - "integrity": "sha512-YmhHDO4MzaDLB+M9ym/mDA5z0naX8j7SIlT8f8z+I0VtzsRbekxEutHSme7NPS2qE8StCYQNUnfWdXta/Yu85A==", - "requires": {} + "integrity": "sha512-YmhHDO4MzaDLB+M9ym/mDA5z0naX8j7SIlT8f8z+I0VtzsRbekxEutHSme7NPS2qE8StCYQNUnfWdXta/Yu85A==" } } }, @@ -33249,8 +33251,7 @@ "ws": { "version": "7.4.6", "resolved": "https://registry.npmjs.org/ws/-/ws-7.4.6.tgz", - "integrity": "sha512-YmhHDO4MzaDLB+M9ym/mDA5z0naX8j7SIlT8f8z+I0VtzsRbekxEutHSme7NPS2qE8StCYQNUnfWdXta/Yu85A==", - "requires": {} + "integrity": "sha512-YmhHDO4MzaDLB+M9ym/mDA5z0naX8j7SIlT8f8z+I0VtzsRbekxEutHSme7NPS2qE8StCYQNUnfWdXta/Yu85A==" } } }, @@ -33972,8 +33973,7 @@ "eslint-plugin-react-hooks": { "version": "4.2.0", "resolved": "https://registry.npmjs.org/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-4.2.0.tgz", - "integrity": "sha512-623WEiZJqxR7VdxFCKLI6d6LLpwJkGPYKODnkH3D7WpOG5KM8yWueBd8TLsNAetEJNF5iJmolaAKO3F8yzyVBQ==", - "requires": {} + "integrity": "sha512-623WEiZJqxR7VdxFCKLI6d6LLpwJkGPYKODnkH3D7WpOG5KM8yWueBd8TLsNAetEJNF5iJmolaAKO3F8yzyVBQ==" }, "eslint-scope": { "version": "5.1.1", @@ -35754,8 +35754,7 @@ "babel-plugin-remove-graphql-queries": { "version": "3.7.1", "resolved": "https://registry.npmjs.org/babel-plugin-remove-graphql-queries/-/babel-plugin-remove-graphql-queries-3.7.1.tgz", - "integrity": "sha512-9fANNkzCZJ0i65FXGnoeg/knDPC3riazCDyRrcH/2DVovxChAMSN2mqh/7eohJ8IrB/0e6cwLO4VirqanSk1Hw==", - "requires": {} + "integrity": "sha512-9fANNkzCZJ0i65FXGnoeg/knDPC3riazCDyRrcH/2DVovxChAMSN2mqh/7eohJ8IrB/0e6cwLO4VirqanSk1Hw==" }, "braces": { "version": "3.0.2", @@ -37496,8 +37495,7 @@ "ws": { "version": "7.5.0", "resolved": "https://registry.npmjs.org/ws/-/ws-7.5.0.tgz", - "integrity": "sha512-6ezXvzOZupqKj4jUqbQ9tXuJNo+BR2gU8fFRk3XCP3e0G6WT414u5ELe6Y0vtp7kmSJ3F7YWObSNr1ESsgi4vw==", - "requires": {} + "integrity": "sha512-6ezXvzOZupqKj4jUqbQ9tXuJNo+BR2gU8fFRk3XCP3e0G6WT414u5ELe6Y0vtp7kmSJ3F7YWObSNr1ESsgi4vw==" } } }, @@ -37957,14 +37955,12 @@ "graphql-type-json": { "version": "0.3.2", "resolved": "https://registry.npmjs.org/graphql-type-json/-/graphql-type-json-0.3.2.tgz", - "integrity": "sha512-J+vjof74oMlCWXSvt0DOf2APEdZOCdubEvGDUAlqH//VBYcOYsGgRW7Xzorr44LvkjiuvecWc8fChxuZZbChtg==", - "requires": {} + "integrity": "sha512-J+vjof74oMlCWXSvt0DOf2APEdZOCdubEvGDUAlqH//VBYcOYsGgRW7Xzorr44LvkjiuvecWc8fChxuZZbChtg==" }, "graphql-ws": { "version": "4.9.0", "resolved": "https://registry.npmjs.org/graphql-ws/-/graphql-ws-4.9.0.tgz", - "integrity": "sha512-sHkK9+lUm20/BGawNEWNtVAeJzhZeBg21VmvmLoT5NdGVeZWv5PdIhkcayQIAgjSyyQ17WMKmbDijIPG2On+Ag==", - "requires": {} + "integrity": "sha512-sHkK9+lUm20/BGawNEWNtVAeJzhZeBg21VmvmLoT5NdGVeZWv5PdIhkcayQIAgjSyyQ17WMKmbDijIPG2On+Ag==" }, "gray-matter": { "version": "4.0.3", @@ -38224,6 +38220,14 @@ "resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-10.7.3.tgz", "integrity": "sha512-tzcUFauisWKNHaRkN4Wjl/ZA07gENAjFl3J/c480dprkGTg5EQstgaNFqBfUqCq54kZRIEcreTsAgF/m2quD7A==" }, + "history": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/history/-/history-5.0.0.tgz", + "integrity": "sha512-3NyRMKIiFSJmIPdq7FxkNMJkQ7ZEtVblOQ38VtKaA0zZMW1Eo6Q6W8oDKEflr1kNNTItSnk4JMCO1deeSgbLLg==", + "requires": { + "@babel/runtime": "^7.7.6" + } + }, "hoist-non-react-statics": { "version": "3.3.2", "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz", @@ -38480,8 +38484,7 @@ "icss-utils": { "version": "5.1.0", "resolved": "https://registry.npmjs.org/icss-utils/-/icss-utils-5.1.0.tgz", - "integrity": "sha512-soFhflCVWLfRNOPU3iv5Z9VUdT44xFRbzjLsEzSr5AQmgqPMTHdU3PMT1Cf1ssx8fLNJDA1juftYl+PUcv3MqA==", - "requires": {} + "integrity": "sha512-soFhflCVWLfRNOPU3iv5Z9VUdT44xFRbzjLsEzSr5AQmgqPMTHdU3PMT1Cf1ssx8fLNJDA1juftYl+PUcv3MqA==" }, "ieee754": { "version": "1.2.1", @@ -39227,8 +39230,7 @@ "isomorphic-ws": { "version": "4.0.1", "resolved": "https://registry.npmjs.org/isomorphic-ws/-/isomorphic-ws-4.0.1.tgz", - "integrity": "sha512-BhBvN2MBpWTaSHdWRb/bwdZJ1WaehQ2L1KngkCkfLUGF0mAWAT1sQUQacEmQ0jXkFw/czDXPNQSL5u2/Krsz1w==", - "requires": {} + "integrity": "sha512-BhBvN2MBpWTaSHdWRb/bwdZJ1WaehQ2L1KngkCkfLUGF0mAWAT1sQUQacEmQ0jXkFw/czDXPNQSL5u2/Krsz1w==" }, "isstream": { "version": "0.1.2", @@ -39653,8 +39655,7 @@ "jest-pnp-resolver": { "version": "1.2.2", "resolved": "https://registry.npmjs.org/jest-pnp-resolver/-/jest-pnp-resolver-1.2.2.tgz", - "integrity": "sha512-olV41bKSMm8BdnuMsewT4jqlZ8+3TCARAXjZGT9jcoSnrfUnRCqnMoF9XEeoWjbzObpqF9dRhHQj0Xb9QdF6/w==", - "requires": {} + "integrity": "sha512-olV41bKSMm8BdnuMsewT4jqlZ8+3TCARAXjZGT9jcoSnrfUnRCqnMoF9XEeoWjbzObpqF9dRhHQj0Xb9QdF6/w==" }, "jest-regex-util": { "version": "24.9.0", @@ -40721,8 +40722,7 @@ "meros": { "version": "1.1.4", "resolved": "https://registry.npmjs.org/meros/-/meros-1.1.4.tgz", - "integrity": "sha512-E9ZXfK9iQfG9s73ars9qvvvbSIkJZF5yOo9j4tcwM5tN8mUKfj/EKN5PzOr3ZH0y5wL7dLAHw3RVEfpQV9Q7VQ==", - "requires": {} + "integrity": "sha512-E9ZXfK9iQfG9s73ars9qvvvbSIkJZF5yOo9j4tcwM5tN8mUKfj/EKN5PzOr3ZH0y5wL7dLAHw3RVEfpQV9Q7VQ==" }, "methods": { "version": "1.1.2", @@ -42035,32 +42035,27 @@ "postcss-discard-comments": { "version": "5.0.1", "resolved": "https://registry.npmjs.org/postcss-discard-comments/-/postcss-discard-comments-5.0.1.tgz", - "integrity": "sha512-lgZBPTDvWrbAYY1v5GYEv8fEO/WhKOu/hmZqmCYfrpD6eyDWWzAOsl2rF29lpvziKO02Gc5GJQtlpkTmakwOWg==", - "requires": {} + "integrity": "sha512-lgZBPTDvWrbAYY1v5GYEv8fEO/WhKOu/hmZqmCYfrpD6eyDWWzAOsl2rF29lpvziKO02Gc5GJQtlpkTmakwOWg==" }, "postcss-discard-duplicates": { "version": "5.0.1", "resolved": "https://registry.npmjs.org/postcss-discard-duplicates/-/postcss-discard-duplicates-5.0.1.tgz", - "integrity": "sha512-svx747PWHKOGpAXXQkCc4k/DsWo+6bc5LsVrAsw+OU+Ibi7klFZCyX54gjYzX4TH+f2uzXjRviLARxkMurA2bA==", - "requires": {} + "integrity": "sha512-svx747PWHKOGpAXXQkCc4k/DsWo+6bc5LsVrAsw+OU+Ibi7klFZCyX54gjYzX4TH+f2uzXjRviLARxkMurA2bA==" }, "postcss-discard-empty": { "version": "5.0.1", "resolved": "https://registry.npmjs.org/postcss-discard-empty/-/postcss-discard-empty-5.0.1.tgz", - "integrity": "sha512-vfU8CxAQ6YpMxV2SvMcMIyF2LX1ZzWpy0lqHDsOdaKKLQVQGVP1pzhrI9JlsO65s66uQTfkQBKBD/A5gp9STFw==", - "requires": {} + "integrity": "sha512-vfU8CxAQ6YpMxV2SvMcMIyF2LX1ZzWpy0lqHDsOdaKKLQVQGVP1pzhrI9JlsO65s66uQTfkQBKBD/A5gp9STFw==" }, "postcss-discard-overridden": { "version": "5.0.1", "resolved": "https://registry.npmjs.org/postcss-discard-overridden/-/postcss-discard-overridden-5.0.1.tgz", - "integrity": "sha512-Y28H7y93L2BpJhrdUR2SR2fnSsT+3TVx1NmVQLbcnZWwIUpJ7mfcTC6Za9M2PG6w8j7UQRfzxqn8jU2VwFxo3Q==", - "requires": {} + "integrity": "sha512-Y28H7y93L2BpJhrdUR2SR2fnSsT+3TVx1NmVQLbcnZWwIUpJ7mfcTC6Za9M2PG6w8j7UQRfzxqn8jU2VwFxo3Q==" }, "postcss-flexbugs-fixes": { "version": "5.0.2", "resolved": "https://registry.npmjs.org/postcss-flexbugs-fixes/-/postcss-flexbugs-fixes-5.0.2.tgz", - "integrity": "sha512-18f9voByak7bTktR2QgDveglpn9DTbBWPUzSOe9g0N4WR/2eSt6Vrcbf0hmspvMI6YWGywz6B9f7jzpFNJJgnQ==", - "requires": {} + "integrity": "sha512-18f9voByak7bTktR2QgDveglpn9DTbBWPUzSOe9g0N4WR/2eSt6Vrcbf0hmspvMI6YWGywz6B9f7jzpFNJJgnQ==" }, "postcss-loader": { "version": "5.3.0", @@ -42186,8 +42181,7 @@ "postcss-modules-extract-imports": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/postcss-modules-extract-imports/-/postcss-modules-extract-imports-3.0.0.tgz", - "integrity": "sha512-bdHleFnP3kZ4NYDhuGlVK+CMrQ/pqUm8bx/oGL93K6gVwiclvX5x0n76fYMKuIGKzlABOy13zsvqjb0f92TEXw==", - "requires": {} + "integrity": "sha512-bdHleFnP3kZ4NYDhuGlVK+CMrQ/pqUm8bx/oGL93K6gVwiclvX5x0n76fYMKuIGKzlABOy13zsvqjb0f92TEXw==" }, "postcss-modules-local-by-default": { "version": "4.0.0", @@ -42225,8 +42219,7 @@ "postcss-normalize-charset": { "version": "5.0.1", "resolved": "https://registry.npmjs.org/postcss-normalize-charset/-/postcss-normalize-charset-5.0.1.tgz", - "integrity": "sha512-6J40l6LNYnBdPSk+BHZ8SF+HAkS4q2twe5jnocgd+xWpz/mx/5Sa32m3W1AA8uE8XaXN+eg8trIlfu8V9x61eg==", - "requires": {} + "integrity": "sha512-6J40l6LNYnBdPSk+BHZ8SF+HAkS4q2twe5jnocgd+xWpz/mx/5Sa32m3W1AA8uE8XaXN+eg8trIlfu8V9x61eg==" }, "postcss-normalize-display-values": { "version": "5.0.1", @@ -42597,8 +42590,7 @@ "prism-react-renderer": { "version": "1.2.1", "resolved": "https://registry.npmjs.org/prism-react-renderer/-/prism-react-renderer-1.2.1.tgz", - "integrity": "sha512-w23ch4f75V1Tnz8DajsYKvY5lF7H1+WvzvLUcF0paFxkTHSp42RS0H5CttdN2Q8RR3DRGZ9v5xD/h3n8C8kGmg==", - "requires": {} + "integrity": "sha512-w23ch4f75V1Tnz8DajsYKvY5lF7H1+WvzvLUcF0paFxkTHSp42RS0H5CttdN2Q8RR3DRGZ9v5xD/h3n8C8kGmg==" }, "prismjs": { "version": "1.26.0", @@ -42983,8 +42975,7 @@ "react-docgen-typescript": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/react-docgen-typescript/-/react-docgen-typescript-2.0.0.tgz", - "integrity": "sha512-lPf+KJKAo6a9klKyK4y8WwgaX+6t5/HkVjHOpJDMbmaXfXcV7zP0QgWtnEOc3ccEUXKvlHMGUMIS9f6Zgo1BSw==", - "requires": {} + "integrity": "sha512-lPf+KJKAo6a9klKyK4y8WwgaX+6t5/HkVjHOpJDMbmaXfXcV7zP0QgWtnEOc3ccEUXKvlHMGUMIS9f6Zgo1BSw==" }, "react-dom": { "version": "17.0.1", @@ -43065,8 +43056,7 @@ "react-frame-component": { "version": "4.1.3", "resolved": "https://registry.npmjs.org/react-frame-component/-/react-frame-component-4.1.3.tgz", - "integrity": "sha512-4PurhctiqnmC1F5prPZ+LdsalH7pZ3SFA5xoc0HBe8mSHctdLLt4Cr2WXfXOoajHBYq/yiipp9zOgx+vy8GiEA==", - "requires": {} + "integrity": "sha512-4PurhctiqnmC1F5prPZ+LdsalH7pZ3SFA5xoc0HBe8mSHctdLLt4Cr2WXfXOoajHBYq/yiipp9zOgx+vy8GiEA==" }, "react-helmet": { "version": "5.2.1", @@ -43171,8 +43161,7 @@ "react-simple-code-editor": { "version": "0.11.0", "resolved": "https://registry.npmjs.org/react-simple-code-editor/-/react-simple-code-editor-0.11.0.tgz", - "integrity": "sha512-xGfX7wAzspl113ocfKQAR8lWPhavGWHL3xSzNLeseDRHysT+jzRBi/ExdUqevSMos+7ZtdfeuBOXtgk9HTwsrw==", - "requires": {} + "integrity": "sha512-xGfX7wAzspl113ocfKQAR8lWPhavGWHL3xSzNLeseDRHysT+jzRBi/ExdUqevSMos+7ZtdfeuBOXtgk9HTwsrw==" }, "react-style-singleton": { "version": "2.1.1", @@ -45331,8 +45320,7 @@ "stylis-rule-sheet": { "version": "0.0.10", "resolved": "https://registry.npmjs.org/stylis-rule-sheet/-/stylis-rule-sheet-0.0.10.tgz", - "integrity": "sha512-nTbZoaqoBnmK+ptANthb10ZRZOGC+EmTLLUxeYIuHNkEKcmKgXX1XWKkUBT2Ac4es3NybooPe0SmvKdhKJZAuw==", - "requires": {} + "integrity": "sha512-nTbZoaqoBnmK+ptANthb10ZRZOGC+EmTLLUxeYIuHNkEKcmKgXX1XWKkUBT2Ac4es3NybooPe0SmvKdhKJZAuw==" }, "subscriptions-transport-ws": { "version": "0.9.19", @@ -46557,8 +46545,7 @@ "use-callback-ref": { "version": "1.2.5", "resolved": "https://registry.npmjs.org/use-callback-ref/-/use-callback-ref-1.2.5.tgz", - "integrity": "sha512-gN3vgMISAgacF7sqsLPByqoePooY3n2emTH59Ur5d/M8eg4WTWu1xp8i8DHjohftIyEx0S08RiYxbffr4j8Peg==", - "requires": {} + "integrity": "sha512-gN3vgMISAgacF7sqsLPByqoePooY3n2emTH59Ur5d/M8eg4WTWu1xp8i8DHjohftIyEx0S08RiYxbffr4j8Peg==" }, "use-sidecar": { "version": "1.0.5", diff --git a/docs/package.json b/docs/package.json index 0346db00bfa..65bc766c8a2 100644 --- a/docs/package.json +++ b/docs/package.json @@ -13,7 +13,7 @@ "npm": ">=7" }, "dependencies": { - "@primer/gatsby-theme-doctocat": "^3.2.0", + "@primer/gatsby-theme-doctocat": "^3.2.1", "@primer/octicons-react": "^16.1.0", "@primer/primitives": "4.1.0", "@styled-system/prop-types": "^5.1.0", diff --git a/docs/src/@primer/gatsby-theme-doctocat/live-code-scope.js b/docs/src/@primer/gatsby-theme-doctocat/live-code-scope.js index d8ee2ede36d..84a3d8c83fe 100644 --- a/docs/src/@primer/gatsby-theme-doctocat/live-code-scope.js +++ b/docs/src/@primer/gatsby-theme-doctocat/live-code-scope.js @@ -33,6 +33,7 @@ import { } from '@primer/octicons-react' import * as primerComponents from '@primer/react' import * as drafts from '@primer/react/drafts' +import * as deprecated from '@primer/react/deprecated' import {Placeholder} from '@primer/react/Placeholder' import React from 'react' import {AnchoredOverlay} from '../../../../src/AnchoredOverlay' @@ -51,6 +52,7 @@ export default function resolveScope(metastring) { ...doctocatComponents, ...primerComponents, ...(metastring.includes('drafts') ? drafts : {}), + ...deprecated, ReactRouterLink, State, CheckIcon, diff --git a/package-lock.json b/package-lock.json index 2a8634b87cf..43c3bdd8a8b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "@primer/react", - "version": "34.5.0", + "version": "34.6.0", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "@primer/react", - "version": "34.5.0", + "version": "34.6.0", "license": "MIT", "dependencies": { "@primer/behaviors": "1.1.0", diff --git a/package.json b/package.json index 35cc8dcd0e4..986a6b2b706 100644 --- a/package.json +++ b/package.json @@ -7,12 +7,19 @@ "exports": { ".": { "node": "./lib/index.js", + "require": "./lib/index.js", "default": "./lib-esm/index.js" }, "./drafts": { "node": "./lib/drafts/index.js", + "require": "./lib/drafts/index.js", "default": "./lib-esm/drafts/index.js" }, + "./deprecated": { + "node": "./lib/deprecated/index.js", + "require": "./lib/deprecated/index.js", + "default": "./lib-esm/deprecated/index.js" + }, "./lib-esm/*": { "node": [ "./lib/*.js", diff --git a/src/__tests__/BorderBox.test.tsx b/src/__tests__/BorderBox.test.tsx index 0fb7c93d0c3..428ff7f4f82 100644 --- a/src/__tests__/BorderBox.test.tsx +++ b/src/__tests__/BorderBox.test.tsx @@ -1,6 +1,6 @@ import React from 'react' import theme from '../theme' -import {BorderBox} from '..' +import {BorderBox} from '../deprecated' import {render, behavesAsComponent, checkExports} from '../utils/testing' import {render as HTMLRender, cleanup} from '@testing-library/react' import {axe, toHaveNoViolations} from 'jest-axe' diff --git a/src/__tests__/Dropdown.test.tsx b/src/__tests__/Dropdown.test.tsx index 5d91c01800b..a327c620e51 100644 --- a/src/__tests__/Dropdown.test.tsx +++ b/src/__tests__/Dropdown.test.tsx @@ -1,5 +1,5 @@ import React from 'react' -import {Dropdown} from '..' +import {Dropdown} from '../deprecated' import {behavesAsComponent, checkExports} from '../utils/testing' import {render as HTMLRender, cleanup} from '@testing-library/react' import {axe, toHaveNoViolations} from 'jest-axe' diff --git a/src/__tests__/Flex.test.tsx b/src/__tests__/Flex.test.tsx index 802bef9b689..7f7cd93828f 100644 --- a/src/__tests__/Flex.test.tsx +++ b/src/__tests__/Flex.test.tsx @@ -1,5 +1,5 @@ import React from 'react' -import {Flex} from '..' +import {Flex} from '../deprecated' import {render, behavesAsComponent, checkExports} from '../utils/testing' import {render as HTMLRender, cleanup} from '@testing-library/react' import {axe, toHaveNoViolations} from 'jest-axe' diff --git a/src/__tests__/Grid.test.tsx b/src/__tests__/Grid.test.tsx index 721fa4b7e57..dc05ddf0b66 100644 --- a/src/__tests__/Grid.test.tsx +++ b/src/__tests__/Grid.test.tsx @@ -1,5 +1,5 @@ import React from 'react' -import {Grid} from '..' +import {Grid} from '../deprecated' import {render, behavesAsComponent, checkExports} from '../utils/testing' import {render as HTMLRender, cleanup} from '@testing-library/react' import {axe, toHaveNoViolations} from 'jest-axe' diff --git a/src/__tests__/Position.test.tsx b/src/__tests__/Position.test.tsx index e145285e917..629bd09b478 100644 --- a/src/__tests__/Position.test.tsx +++ b/src/__tests__/Position.test.tsx @@ -1,5 +1,6 @@ import React from 'react' -import {Box, Position, Absolute, Fixed, Relative, Sticky} from '..' +import {Box} from '..' +import {Position, Absolute, Fixed, Relative, Sticky} from '../deprecated' import {render, behavesAsComponent, checkExports} from '../utils/testing' import {render as HTMLRender, cleanup} from '@testing-library/react' import {axe, toHaveNoViolations} from 'jest-axe' diff --git a/src/__tests__/SelectMenu.test.tsx b/src/__tests__/SelectMenu.test.tsx index 24abc9ba01b..95e31f88a68 100644 --- a/src/__tests__/SelectMenu.test.tsx +++ b/src/__tests__/SelectMenu.test.tsx @@ -1,5 +1,6 @@ import React from 'react' -import {SelectMenu, Button} from '..' +import {SelectMenu} from '../deprecated' +import {Button} from '..' import {mount, render, renderRoot, COMPONENT_DISPLAY_NAME_REGEX, checkExports} from '../utils/testing' import {render as HTMLRender, cleanup} from '@testing-library/react' import {axe, toHaveNoViolations} from 'jest-axe' diff --git a/src/deprecated/index.ts b/src/deprecated/index.ts new file mode 100644 index 00000000000..df51794a190 --- /dev/null +++ b/src/deprecated/index.ts @@ -0,0 +1,39 @@ +/** This is the place where we keep components that are deprecated. + * We don't recommend using it in production. + * If you already use them, please move to the suggested alternative components + * + * But, they are published on npm and you can import them. + * example: import {FormGroup} from '@primer/react/deprecated + */ + +export {default as BorderBox} from '../BorderBox' +export type {BorderBoxProps} from '../BorderBox' +export {default as Flex} from '../Flex' +export type {FlexProps} from '../Flex' +export {default as Grid} from '../Grid' +export type {GridProps} from '../Grid' +export {default as Position, Absolute, Fixed, Relative, Sticky} from '../Position' +export type {PositionProps, AbsoluteProps, FixedProps, RelativeProps, StickyProps} from '../Position' +export {default as Dropdown} from '../Dropdown' +export type { + DropdownProps, + DropdownCaretProps, + DropdownButtonProps, + DropdownItemProps, + DropdownMenuProps +} from '../Dropdown' +export {default as SelectMenu} from '../SelectMenu' +export type { + SelectMenuProps, + SelectMenuDividerProps, + SelectMenuFilterProps, + SelectMenuFooterProps, + SelectMenuItemProps, + SelectMenuListProps, + SelectMenuModalProps, + SelectMenuTabsProps, + SelectMenuHeaderProps, + SelectMenuTabProps, + SelectMenuTabPanelProps, + SelectMenuLoadingAnimationProps +} from '../SelectMenu' diff --git a/src/index.ts b/src/index.ts index 6a5c26f0c47..a7b04414ec3 100644 --- a/src/index.ts +++ b/src/index.ts @@ -6,16 +6,8 @@ export {default as ThemeProvider, useTheme, useColorSchemeVar} from './ThemeProv export type {ThemeProviderProps} from './ThemeProvider' // Layout -export {default as BorderBox} from './BorderBox' -export type {BorderBoxProps} from './BorderBox' export {default as Box} from './Box' export type {BoxProps} from './Box' -export {default as Flex} from './Flex' -export type {FlexProps} from './Flex' -export {default as Grid} from './Grid' -export type {GridProps} from './Grid' -export {default as Position, Absolute, Fixed, Relative, Sticky} from './Position' -export type {PositionProps, AbsoluteProps, FixedProps, RelativeProps, StickyProps} from './Position' // Hooks export {default as useDetails} from './hooks/useDetails' @@ -79,14 +71,7 @@ export type {DetailsProps} from './Details' export {default as Dialog} from './Dialog' export type {DialogProps, DialogHeaderProps} from './Dialog' export {ConfirmationDialog} from './Dialog/ConfirmationDialog' -export {default as Dropdown} from './Dropdown' -export type { - DropdownProps, - DropdownCaretProps, - DropdownButtonProps, - DropdownItemProps, - DropdownMenuProps -} from './Dropdown' + export {DropdownButton, DropdownMenu} from './DropdownMenu' // not exporting new DropdownMenu types yet due to conflict with Dropdown types above // export type {DropdownButtonProps, DropdownMenuProps} from './DropdownMenu' @@ -124,22 +109,7 @@ export type {PopoverProps, PopoverContentProps} from './Popover' // export type {PortalProps} from './Portal' export {default as ProgressBar} from './ProgressBar' export type {ProgressBarProps} from './ProgressBar' -export {default as SelectMenu} from './SelectMenu' export {default as Select} from './Select' -export type { - SelectMenuProps, - SelectMenuDividerProps, - SelectMenuFilterProps, - SelectMenuFooterProps, - SelectMenuItemProps, - SelectMenuListProps, - SelectMenuModalProps, - SelectMenuTabsProps, - SelectMenuHeaderProps, - SelectMenuTabProps, - SelectMenuTabPanelProps, - SelectMenuLoadingAnimationProps -} from './SelectMenu' export {SelectPanel} from './SelectPanel' export type {SelectPanelProps} from './SelectPanel' export {default as SideNav} from './SideNav' From 310e6553134cd333a96e67d434d3b07167d01ed1 Mon Sep 17 00:00:00 2001 From: Siddharth Kshetrapal Date: Thu, 24 Feb 2022 13:55:54 +0100 Subject: [PATCH 03/37] Prefix component with types exported from ActionList2 and ActionMenu2 (#1883) * prefix component name to types * add changeset * Update .changeset/actionlist2-actionmenu2-prefix-types.md Co-authored-by: Cole Bemis Co-authored-by: Cole Bemis --- .../actionlist2-actionmenu2-prefix-types.md | 21 +++++++++++++++++++ src/ActionList2/index.ts | 11 ++++++---- src/ActionMenu2.tsx | 6 +++--- 3 files changed, 31 insertions(+), 7 deletions(-) create mode 100644 .changeset/actionlist2-actionmenu2-prefix-types.md diff --git a/.changeset/actionlist2-actionmenu2-prefix-types.md b/.changeset/actionlist2-actionmenu2-prefix-types.md new file mode 100644 index 00000000000..b7d4cd11224 --- /dev/null +++ b/.changeset/actionlist2-actionmenu2-prefix-types.md @@ -0,0 +1,21 @@ +--- +'@primer/react': major +--- + +`ActionList2` exported types are now prefixed with `ActionList`: + +``` +ListProps → ActionListProps +GroupProps → ActionListGroupProps +ItemProps → ActionListItemProps +DescriptionProps → ActionListDescriptionProps +LeadingVisualProps → ActionListLeadingVisualProps, +TrailingVisualProps → ActionListTrailingVisualProps +``` + +`ActionMenu2` exported types are now prefixed with `ActionMenu`: + +``` +MenuButtonProps → ActionMenuButtonProps +MenuAnchorProps → ActionMenuAnchorProps +``` diff --git a/src/ActionList2/index.ts b/src/ActionList2/index.ts index d05da47652f..f27a3b53d50 100644 --- a/src/ActionList2/index.ts +++ b/src/ActionList2/index.ts @@ -7,10 +7,13 @@ import {Description} from './Description' import {LeadingVisual, TrailingVisual} from './Visuals' export type {ListProps as ActionListProps} from './List' -export type {GroupProps} from './Group' -export type {ItemProps} from './Item' -export type {DescriptionProps} from './Description' -export type {LeadingVisualProps, TrailingVisualProps} from './Visuals' +export type {GroupProps as ActionListGroupProps} from './Group' +export type {ItemProps as ActionListItemProps} from './Item' +export type {DescriptionProps as ActionListDescriptionProps} from './Description' +export type { + LeadingVisualProps as ActionListLeadingVisualProps, + TrailingVisualProps as ActionListTrailingVisualProps +} from './Visuals' /** * Collection of list-related components. diff --git a/src/ActionMenu2.tsx b/src/ActionMenu2.tsx index 1fab1223264..97622d2a101 100644 --- a/src/ActionMenu2.tsx +++ b/src/ActionMenu2.tsx @@ -64,15 +64,15 @@ const Menu: React.FC = ({ ) } -export type MenuAnchorProps = {children: React.ReactElement} -const Anchor = React.forwardRef( +export type ActionMenuAnchorProps = {children: React.ReactElement} +const Anchor = React.forwardRef( ({children, ...anchorProps}, anchorRef) => { return React.cloneElement(children, {...anchorProps, ref: anchorRef}) } ) /** this component is syntactical sugar 🍭 */ -export type MenuButtonProps = ButtonProps +export type ActionMenuButtonProps = ButtonProps const MenuButton = React.forwardRef((props, anchorRef) => { return ( From df757521a7a088628d96deeb263fbd0f0aefd9ca Mon Sep 17 00:00:00 2001 From: Cole Bemis Date: Thu, 24 Feb 2022 08:49:42 -0800 Subject: [PATCH 04/37] Export PageLayout from main bundle (#1882) * Export PageLayout from main bundle * Create odd-apes-guess.md * Add PageLayout to sidenav * Update .changeset/odd-apes-guess.md Co-authored-by: Rez * Update PageLayout docs Co-authored-by: Rez --- .changeset/odd-apes-guess.md | 12 ++++++++++++ docs/content/{drafts => }/PageLayout.mdx | 12 ++++++------ docs/src/@primer/gatsby-theme-doctocat/nav.yml | 2 ++ src/drafts/index.ts | 1 - src/index.ts | 8 ++++++++ 5 files changed, 28 insertions(+), 7 deletions(-) create mode 100644 .changeset/odd-apes-guess.md rename docs/content/{drafts => }/PageLayout.mdx (97%) diff --git a/.changeset/odd-apes-guess.md b/.changeset/odd-apes-guess.md new file mode 100644 index 00000000000..e15f28b4809 --- /dev/null +++ b/.changeset/odd-apes-guess.md @@ -0,0 +1,12 @@ +--- +"@primer/react": major +--- + +`PageLayout` is being graduated from the `drafts` bundle to the `main` bundle. + +To upgrade, rewrite your imports accordingly: + +```diff +- import {PageLayout} from '@primer/react/drafts' ++ import {PageLayout} from '@primer/react' +``` diff --git a/docs/content/drafts/PageLayout.mdx b/docs/content/PageLayout.mdx similarity index 97% rename from docs/content/drafts/PageLayout.mdx rename to docs/content/PageLayout.mdx index a04cfc87307..64d439c49d3 100644 --- a/docs/content/drafts/PageLayout.mdx +++ b/docs/content/PageLayout.mdx @@ -7,7 +7,7 @@ storybook: https://primer.style/react/storybook?path=/story/layout-pagelayout--p --- ```js -import {PageLayout} from '@primer/react/drafts' +import {PageLayout} from '@primer/react' ``` ## Examples @@ -20,7 +20,7 @@ See [storybook](https://primer.style/react/storybook?path=/story/layout-pagelayo ### Default -```jsx live drafts +```jsx live @@ -39,7 +39,7 @@ See [storybook](https://primer.style/react/storybook?path=/story/layout-pagelayo ### With dividers -```jsx live drafts +```jsx live @@ -58,7 +58,7 @@ See [storybook](https://primer.style/react/storybook?path=/story/layout-pagelayo ### With pane on left -```jsx live drafts +```jsx live @@ -77,7 +77,7 @@ See [storybook](https://primer.style/react/storybook?path=/story/layout-pagelayo ### With condensed spacing -```jsx live drafts +```jsx live @@ -96,7 +96,7 @@ See [storybook](https://primer.style/react/storybook?path=/story/layout-pagelayo ### Without header or footer -```jsx live drafts +```jsx live diff --git a/docs/src/@primer/gatsby-theme-doctocat/nav.yml b/docs/src/@primer/gatsby-theme-doctocat/nav.yml index 9584bf38cf0..0a313c91e00 100644 --- a/docs/src/@primer/gatsby-theme-doctocat/nav.yml +++ b/docs/src/@primer/gatsby-theme-doctocat/nav.yml @@ -87,6 +87,8 @@ url: /Overlay - title: Pagehead url: /Pagehead + - title: PageLayout + url: /PageLayout - title: Pagination url: /Pagination - title: PointerBox diff --git a/src/drafts/index.ts b/src/drafts/index.ts index 291e56dafbb..efa9ff196c5 100644 --- a/src/drafts/index.ts +++ b/src/drafts/index.ts @@ -11,4 +11,3 @@ export * from '../Button2' export * from '../ActionMenu2' export * from '../DropdownMenu2' export * from '../Label2' -export * from '../PageLayout' diff --git a/src/index.ts b/src/index.ts index a7b04414ec3..ff38b050969 100644 --- a/src/index.ts +++ b/src/index.ts @@ -8,6 +8,14 @@ export type {ThemeProviderProps} from './ThemeProvider' // Layout export {default as Box} from './Box' export type {BoxProps} from './Box' +export {PageLayout} from './PageLayout' +export type { + PageLayoutProps, + PageLayoutHeaderProps, + PageLayoutContentProps, + PageLayoutPaneProps, + PageLayoutFooterProps +} from './PageLayout' // Hooks export {default as useDetails} from './hooks/useDetails' From 14bd5808585b191ec5f798547303ea78ec468a58 Mon Sep 17 00:00:00 2001 From: Rez Date: Fri, 25 Feb 2022 12:11:12 +0000 Subject: [PATCH 05/37] Update release notes and add deprecation notices for SelectMenu and Dropdown (#1887) * chore: add deprecation notices for SelectMenu and Dropdown * fix: deprecated metadata scope in docs * docs: update release notes for Flex and BorderBox * docs: update release notes for Position * chore: add deprecated scope to jsx snippets * chore: add release notes for Dropdown deprecation * chore: add Grid release notes * update release notes --- .changeset/smooth-cameras-prove.md | 256 +++++++++++++++++- docs/content/deprecated/BorderBox.md | 6 +- docs/content/deprecated/Dialog.md | 8 +- docs/content/deprecated/Dropdown.md | 6 +- docs/content/deprecated/Flex.md | 6 +- docs/content/deprecated/Grid.md | 6 +- docs/content/deprecated/Position.md | 6 +- docs/content/deprecated/SelectMenu.md | 36 ++- docs/package-lock.json | 102 ++++--- .../gatsby-theme-doctocat/live-code-scope.js | 2 +- src/Dropdown.tsx | 3 + src/SelectMenu/SelectMenu.tsx | 4 + 12 files changed, 370 insertions(+), 71 deletions(-) diff --git a/.changeset/smooth-cameras-prove.md b/.changeset/smooth-cameras-prove.md index 9b6fbdbdc47..0e67d504d6c 100644 --- a/.changeset/smooth-cameras-prove.md +++ b/.changeset/smooth-cameras-prove.md @@ -1,5 +1,257 @@ --- -"@primer/react": major +'@primer/react': major --- -Move deprecated components to deprecated folder +### SelectMenu + +⚠️ `SelectMenu` has been deprecated. Please use `ActionMenu` instead. + + + + + + + + + +
Before After
+ +```jsx + + + + Projects + + Primer React bugs + Primer React roadmap + Project 3 + Project 4 + + + +``` + + + +```jsx + + Projects + + + + Primer React bugs + Primer React roadmap + Project three + Project four + + + + +``` + +
+ +See [https://primer.style/react/ActionMenu](https://primer.style/react/ActionMenu) for more migration examples. + +### Dropdown + +⚠️ `Dropdown` has been deprecated. Please use `ActionMenu` instead. + + + + + + + + + +
Before After
+ +```jsx +const fieldTypes = [ + {leadingVisual: TypographyIcon, text: 'Text'}, + {leadingVisual: NumberIcon, text: 'Number'}, +]; + +const [selectedItem, setSelectedItem] = React.useState() + + ( + + {children} + + )} + placeholder="Select a field type" + items={fieldTypes} + selectedItem={selectedItem} + onChange={() => setSelectedIndex(index)} +/> +``` + + + +```jsx +const fieldTypes = [ + {icon: , name: 'Text'}, + {icon: , name: 'Number'}, +]; + +const [selectedItem, setSelectedItem] = React.useState() + + + {selectedItem ? selectedItem.name : 'Select a field type'} + + + {fieldTypes.map(field => ( + setSelectedItem(field)} key={field.name}> + {field.icon} + {field.name} + + + + +``` + +
+ +See [https://primer.style/react/ActionMenu](https://primer.style/react/ActionMenu) for more migration examples. + +### Flex + +⚠️ `Flex` has been deprecated. Please use [`Box`](https://primer.style/react/Box) instead. + + + + + + + + + +
Before After
+ +```jsx + + + Item 1 + + +``` + + + +```jsx + + + Item 1 + + +``` + +
+ +### Grid + +⚠️ `Grid` has been deprecated. Please use `ActionMenu` instead. + + + + + + + + + +
Before After
+ +```jsx + + + 1 + + + 2 + + +``` + + + +```jsx + + + 1 + + + 2 + + +``` + +
+ +### BorderBox + +⚠️ `BorderBox` has been deprecated. Please use [`Box`](https://primer.style/react/Box) instead. + + + + + + + + + +
Before After
+ +```jsx +Item 1 +``` + + + +```jsx + + Item 1 + +``` + +
+ +### Position + +⚠️ `Position` has been deprecated. Please use [`Box`](https://primer.style/react/Box) instead. + + + + + + + + + +
Before After
+ +```jsx +<> + ... + ... + ... + ... + ... + +``` + + + +```jsx +<> + ... + ... + ... + ... + ... + +``` + +
diff --git a/docs/content/deprecated/BorderBox.md b/docs/content/deprecated/BorderBox.md index 45a206fd88e..2be97d6e22a 100644 --- a/docs/content/deprecated/BorderBox.md +++ b/docs/content/deprecated/BorderBox.md @@ -12,13 +12,13 @@ Use [Box](/Box) instead. **Before** -```jsx +```jsx deprecated Item 1 ``` **After** -```jsx +```jsx deprecated Item 1 @@ -26,7 +26,7 @@ Use [Box](/Box) instead. ## Default example -```jsx live +```jsx live deprecated This is a BorderBox ``` diff --git a/docs/content/deprecated/Dialog.md b/docs/content/deprecated/Dialog.md index aafa7065703..dcd79b30623 100644 --- a/docs/content/deprecated/Dialog.md +++ b/docs/content/deprecated/Dialog.md @@ -9,7 +9,7 @@ Use [Dialog2](/Dialog2) instead. **Before** -```jsx +```jsx deprecated setOpen(false)} aria-labelledby="header-id"> Title @@ -20,7 +20,7 @@ Use [Dialog2](/Dialog2) instead. **After** -```jsx +```jsx deprecated { open && ( {([isOpen, setIsOpen]) => { const returnFocusRef = React.useRef(null) @@ -87,7 +87,7 @@ If you're running into z-index issues or are rendering the component inside of a You can also pass any non-text content into the header: -```jsx live +```jsx deprecated live {([isOpen, setIsOpen]) => { const returnFocusRef = React.useRef(null) diff --git a/docs/content/deprecated/Dropdown.md b/docs/content/deprecated/Dropdown.md index b53bb11d42a..f08fd426d2f 100644 --- a/docs/content/deprecated/Dropdown.md +++ b/docs/content/deprecated/Dropdown.md @@ -5,7 +5,7 @@ status: Deprecated ## Deprecation -Use [DropdownMenu](/DropdownMenu) instead. +Use [ActionMenu](/ActionMenu) instead. --- @@ -17,7 +17,7 @@ Dropdown.Menu wraps your menu content. Be sure to pass a `direction` prop to thi ## Default example -```jsx live +```jsx live deprecated Dropdown @@ -30,7 +30,7 @@ Dropdown.Menu wraps your menu content. Be sure to pass a `direction` prop to thi ## With custom button -```jsx live +```jsx live deprecated Dropdown diff --git a/docs/content/deprecated/Flex.md b/docs/content/deprecated/Flex.md index 67e7fa385b7..5ad6838dfc8 100644 --- a/docs/content/deprecated/Flex.md +++ b/docs/content/deprecated/Flex.md @@ -12,7 +12,7 @@ Use [Box](/Box) instead. **Before** -```jsx +```jsx deprecated Item 1 @@ -22,7 +22,7 @@ Use [Box](/Box) instead. **After** -```jsx +```jsx deprecated Item 1 @@ -32,7 +32,7 @@ Use [Box](/Box) instead. ## Default example -```jsx live +```jsx deprecated live diff --git a/docs/content/deprecated/Grid.md b/docs/content/deprecated/Grid.md index 305bed992be..905630fe9e7 100644 --- a/docs/content/deprecated/Grid.md +++ b/docs/content/deprecated/Grid.md @@ -12,7 +12,7 @@ Use [Box](/Box) instead. **Before** -```jsx +```jsx deprecated 1 @@ -25,7 +25,7 @@ Use [Box](/Box) instead. **After** -```jsx +```jsx deprecated 1 @@ -38,7 +38,7 @@ Use [Box](/Box) instead. ## Default example -```jsx live +```jsx deprecated live 1 diff --git a/docs/content/deprecated/Position.md b/docs/content/deprecated/Position.md index 74212be10fa..fb2006117ca 100644 --- a/docs/content/deprecated/Position.md +++ b/docs/content/deprecated/Position.md @@ -12,7 +12,7 @@ Use [Box](/Box) instead. **Before** -```jsx +```jsx deprecated <> ... ... @@ -24,7 +24,7 @@ Use [Box](/Box) instead. **After** -```jsx +```jsx deprecated <> ... ... @@ -36,7 +36,7 @@ Use [Box](/Box) instead. ## Default examples -```jsx live +```jsx deprecated live Relative + Absolute diff --git a/docs/content/deprecated/SelectMenu.md b/docs/content/deprecated/SelectMenu.md index faea3452588..b6fbea07843 100644 --- a/docs/content/deprecated/SelectMenu.md +++ b/docs/content/deprecated/SelectMenu.md @@ -3,13 +3,19 @@ title: SelectMenu status: Deprecated --- +## Deprecation + +Use [ActionMenu](/ActionMenu) instead. + +--- + The `SelectMenu` components are a suite of components which can be combined together to make several different variations of our GitHub select menu. At it's most basic form, a select menu is comprised of a `SelectMenu` wrapper, which contains a `summary` component of your choice and a `Select.Modal` which contains the select menu content. Use `SelectMenu.List` to wrap items in the select menu, and `SelectMenu.Item` to wrap each item. Several additional components exist to provide even more functionality: `SelectMenu.Header`, `SelectMenu.Filter`, `SelectMenu.Tabs`, `SelectMenu.TabPanel` `SelectMenu.Footer` and `SelectMenu.Divider`. ## Basic Example -```jsx live +```jsx deprecated live @@ -28,7 +34,7 @@ Several additional components exist to provide even more functionality: `SelectM Main wrapper component for select menu. -```jsx +```jsx deprecated {/* all other sub components are wrapped here*/} ``` @@ -56,7 +62,7 @@ SelectMenu.MenuContext is a [context object](https://reactjs.org/docs/context.ht ### Example Usage -```jsx +```jsx deprecated import {SelectMenu, Button} from `@primer/react` import React, {useContext} from 'react' @@ -83,7 +89,7 @@ const MyButton = () => { Used to wrap the content in a `SelectMenu`. -```jsx +```jsx deprecated {/* all menu content is wrapped in the modal*/} ``` @@ -91,7 +97,7 @@ Used to wrap the content in a `SelectMenu`. Use the `align='right'` prop to align the modal to the right. Note that this only modifies alignment for the modal, and not the SelectMenu itself. You will need to wrap the SelectMenu in a relatively positioned element for this to work properly. -```jsx live +```jsx deprecated live @@ -120,7 +126,7 @@ Use the `align='right'` prop to align the modal to the right. Note that this onl Used to wrap the select menu list content. All menu items **must** be wrapped in a SelectMenu.List in order for the accessbility keyboard handling to function properly. If you are using the `SelectMenu.TabPanel` you do not need to provide a `SelectMenu.List` as that component renders a `SelectMenu.List` as a wrapper. -```jsx +```jsx deprecated {/* all menu list items are wrapped in the list*/} ``` @@ -136,7 +142,7 @@ Individual items in a select menu. SelectMenu.Item renders an anchor tag by defa You can use a `button` tag instead by utilizing the [`as` prop](/core-concepts#the-as-prop). Be sure to consider [which HTML element is the right choice](https://marcysutton.com/links-vs-buttons-in-modern-web-applications) for your usage of the component. -```jsx +```jsx deprecated {/* wraps an individual list item*/} @@ -154,7 +160,7 @@ You can use a `button` tag instead by utilizing the [`as` prop](/core-concepts#t Use a `SelectMenu.Filter` to add a filter UI to your select menu. Users are expected to implement their own filtering and manage the state of the `value` prop on the input. This gives users more flexibility over the type of filtering and type of content passed into each select menu item. -```jsx live +```jsx deprecated live @@ -192,7 +198,7 @@ Each `Select.Menu` tab will need to have an `index` prop. The first tab should b If you need access to the selected tab state, you can find it in the MenuContext object exported from `SelectMenu` as `MenuContext.selectedTab`. -```jsx live +```jsx deprecated live @@ -227,7 +233,7 @@ Used for each individual tab inside of a `SelectMenu.Tabs`. Be sure to set the ` The `onClick` prop is optional and can be used for any events or data fetching you might need to trigger on tab clicks. -```jsx +```jsx deprecated <> @@ -249,7 +255,7 @@ Wraps the content for each tab. Make sure to use the `tabName` prop to identify **Note**: SelectMenu.TabPanel wraps content in a SelectMenu.List, so adding a SelectMenu.List manually is not necessary. -```jsx +```jsx deprecated {/* Wraps content for each tab */} ``` @@ -264,7 +270,7 @@ Wraps the content for each tab. Make sure to use the `tabName` prop to identify Use a `SelectMenu.Divider` to add information between items in a `SelectMenu.List`. -```jsx live +```jsx deprecated live @@ -290,7 +296,7 @@ Use a `SelectMenu.Divider` to add information between items in a `SelectMenu.Lis Use a `SelectMenu.Footer` to add content to the bottom of the select menu. -```jsx live +```jsx deprecated live @@ -316,7 +322,7 @@ Use a `SelectMenu.Footer` to add content to the bottom of the select menu. Use a `SelectMenu.Header` to add a header to the top of the select menu content. -```jsx live +```jsx deprecated live @@ -344,7 +350,7 @@ Use a `SelectMenu.LoadingAnimation` to add a loading animation inside of the Sel **Note**: You will need to handle showing/hiding the appropriate modal content for your application during the loading state. We recommend always showing the `SelectMenu.Filter` and `SelectMenu.Header` (if used) and hiding the rest of the modal content during the loading state. -```jsx live +```jsx deprecated live diff --git a/docs/package-lock.json b/docs/package-lock.json index bd8cfbb80b1..f7109a43471 100644 --- a/docs/package-lock.json +++ b/docs/package-lock.json @@ -28420,7 +28420,8 @@ "ws": { "version": "7.4.5", "resolved": "https://registry.npmjs.org/ws/-/ws-7.4.5.tgz", - "integrity": "sha512-xzyu3hFvomRfXKH8vOFMU3OguG6oOvhXMo3xsGy3xWExqaM2dxBbVxuD99O7m3ZUFMvvscsZDqxfgMaRr/Nr1g==" + "integrity": "sha512-xzyu3hFvomRfXKH8vOFMU3OguG6oOvhXMo3xsGy3xWExqaM2dxBbVxuD99O7m3ZUFMvvscsZDqxfgMaRr/Nr1g==", + "requires": {} } } }, @@ -28778,7 +28779,8 @@ "@mdx-js/react": { "version": "1.6.22", "resolved": "https://registry.npmjs.org/@mdx-js/react/-/react-1.6.22.tgz", - "integrity": "sha512-TDoPum4SHdfPiGSAaRBw7ECyI8VaHpK8GJugbJIJuqyh6kzw9ZLJZW3HGL3NNrJGxcAixUvqROm+YuQOo5eXtg==" + "integrity": "sha512-TDoPum4SHdfPiGSAaRBw7ECyI8VaHpK8GJugbJIJuqyh6kzw9ZLJZW3HGL3NNrJGxcAixUvqROm+YuQOo5eXtg==", + "requires": {} }, "@mdx-js/util": { "version": "1.6.22", @@ -28948,7 +28950,8 @@ "@primer/octicons-react": { "version": "16.2.0", "resolved": "https://registry.npmjs.org/@primer/octicons-react/-/octicons-react-16.2.0.tgz", - "integrity": "sha512-943t5kkVRt+/hxVnKS27xweUp4lXFxwJaTrsit1C1xBB4kqdjzmYGpU84zwKsNyyV2Ch7may3umKjbI/mFBPPQ==" + "integrity": "sha512-943t5kkVRt+/hxVnKS27xweUp4lXFxwJaTrsit1C1xBB4kqdjzmYGpU84zwKsNyyV2Ch7may3umKjbI/mFBPPQ==", + "requires": {} }, "@primer/primitives": { "version": "4.1.0", @@ -28983,7 +28986,8 @@ "@primer/octicons-react": { "version": "16.1.1", "resolved": "https://registry.npmjs.org/@primer/octicons-react/-/octicons-react-16.1.1.tgz", - "integrity": "sha512-xCxQ5z23ol7yDuJs85Lc4ARzyoay+b3zOhAKkEMU7chk0xi2hT2OnRP23QUudNNDPTGozX268RGYLexUa6P4xw==" + "integrity": "sha512-xCxQ5z23ol7yDuJs85Lc4ARzyoay+b3zOhAKkEMU7chk0xi2hT2OnRP23QUudNNDPTGozX268RGYLexUa6P4xw==", + "requires": {} }, "@primer/primitives": { "version": "7.1.1", @@ -28995,7 +28999,8 @@ "@radix-ui/react-polymorphic": { "version": "0.0.14", "resolved": "https://registry.npmjs.org/@radix-ui/react-polymorphic/-/react-polymorphic-0.0.14.tgz", - "integrity": "sha512-9nsMZEDU3LeIUeHJrpkkhZVxu/9Fc7P2g2I3WR+uA9mTbNC3hGaabi0dV6wg0CfHb+m4nSs1pejbE/5no3MJTA==" + "integrity": "sha512-9nsMZEDU3LeIUeHJrpkkhZVxu/9Fc7P2g2I3WR+uA9mTbNC3hGaabi0dV6wg0CfHb+m4nSs1pejbE/5no3MJTA==", + "requires": {} }, "@react-aria/ssr": { "version": "3.1.0", @@ -29966,7 +29971,8 @@ "acorn-jsx": { "version": "5.3.1", "resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.3.1.tgz", - "integrity": "sha512-K0Ptm/47OKfQRpNQ2J/oIN/3QYiK6FwW+eJbILhsdxh2WTLdl+30o8aGdTbm5JbffpFFAg/g+zi1E+jvJha5ng==" + "integrity": "sha512-K0Ptm/47OKfQRpNQ2J/oIN/3QYiK6FwW+eJbILhsdxh2WTLdl+30o8aGdTbm5JbffpFFAg/g+zi1E+jvJha5ng==", + "requires": {} }, "acorn-walk": { "version": "6.2.0", @@ -30001,12 +30007,14 @@ "ajv-errors": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/ajv-errors/-/ajv-errors-1.0.1.tgz", - "integrity": "sha512-DCRfO/4nQ+89p/RK43i8Ezd41EqdGIU4ld7nGF8OQ14oc/we5rEntLCUa7+jrn3nn83BosfwZA0wb4pon2o8iQ==" + "integrity": "sha512-DCRfO/4nQ+89p/RK43i8Ezd41EqdGIU4ld7nGF8OQ14oc/we5rEntLCUa7+jrn3nn83BosfwZA0wb4pon2o8iQ==", + "requires": {} }, "ajv-keywords": { "version": "3.5.2", "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz", - "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==" + "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==", + "requires": {} }, "alphanum-sort": { "version": "1.0.2", @@ -30533,7 +30541,8 @@ "babel-plugin-remove-graphql-queries": { "version": "2.16.1", "resolved": "https://registry.npmjs.org/babel-plugin-remove-graphql-queries/-/babel-plugin-remove-graphql-queries-2.16.1.tgz", - "integrity": "sha512-PkHJuRodMp4p617a/ZVhV8elBhRoFpOTpdu2DaApXJFIsDJWhjZ8d4BGbbFCT/yKJrhRDTdqg1r5AhWEaEUKkw==" + "integrity": "sha512-PkHJuRodMp4p617a/ZVhV8elBhRoFpOTpdu2DaApXJFIsDJWhjZ8d4BGbbFCT/yKJrhRDTdqg1r5AhWEaEUKkw==", + "requires": {} }, "babel-plugin-styled-components": { "version": "2.0.2", @@ -32596,7 +32605,8 @@ "cssnano-utils": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/cssnano-utils/-/cssnano-utils-2.0.1.tgz", - "integrity": "sha512-i8vLRZTnEH9ubIyfdZCAdIdgnHAUeQeByEeQ2I7oTilvP9oHO6RScpeq3GsFUVqeB8uZgOQ9pw8utofNn32hhQ==" + "integrity": "sha512-i8vLRZTnEH9ubIyfdZCAdIdgnHAUeQeByEeQ2I7oTilvP9oHO6RScpeq3GsFUVqeB8uZgOQ9pw8utofNn32hhQ==", + "requires": {} }, "csso": { "version": "4.2.0", @@ -33227,7 +33237,8 @@ "ws": { "version": "7.4.6", "resolved": "https://registry.npmjs.org/ws/-/ws-7.4.6.tgz", - "integrity": "sha512-YmhHDO4MzaDLB+M9ym/mDA5z0naX8j7SIlT8f8z+I0VtzsRbekxEutHSme7NPS2qE8StCYQNUnfWdXta/Yu85A==" + "integrity": "sha512-YmhHDO4MzaDLB+M9ym/mDA5z0naX8j7SIlT8f8z+I0VtzsRbekxEutHSme7NPS2qE8StCYQNUnfWdXta/Yu85A==", + "requires": {} } } }, @@ -33251,7 +33262,8 @@ "ws": { "version": "7.4.6", "resolved": "https://registry.npmjs.org/ws/-/ws-7.4.6.tgz", - "integrity": "sha512-YmhHDO4MzaDLB+M9ym/mDA5z0naX8j7SIlT8f8z+I0VtzsRbekxEutHSme7NPS2qE8StCYQNUnfWdXta/Yu85A==" + "integrity": "sha512-YmhHDO4MzaDLB+M9ym/mDA5z0naX8j7SIlT8f8z+I0VtzsRbekxEutHSme7NPS2qE8StCYQNUnfWdXta/Yu85A==", + "requires": {} } } }, @@ -33973,7 +33985,8 @@ "eslint-plugin-react-hooks": { "version": "4.2.0", "resolved": "https://registry.npmjs.org/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-4.2.0.tgz", - "integrity": "sha512-623WEiZJqxR7VdxFCKLI6d6LLpwJkGPYKODnkH3D7WpOG5KM8yWueBd8TLsNAetEJNF5iJmolaAKO3F8yzyVBQ==" + "integrity": "sha512-623WEiZJqxR7VdxFCKLI6d6LLpwJkGPYKODnkH3D7WpOG5KM8yWueBd8TLsNAetEJNF5iJmolaAKO3F8yzyVBQ==", + "requires": {} }, "eslint-scope": { "version": "5.1.1", @@ -35754,7 +35767,8 @@ "babel-plugin-remove-graphql-queries": { "version": "3.7.1", "resolved": "https://registry.npmjs.org/babel-plugin-remove-graphql-queries/-/babel-plugin-remove-graphql-queries-3.7.1.tgz", - "integrity": "sha512-9fANNkzCZJ0i65FXGnoeg/knDPC3riazCDyRrcH/2DVovxChAMSN2mqh/7eohJ8IrB/0e6cwLO4VirqanSk1Hw==" + "integrity": "sha512-9fANNkzCZJ0i65FXGnoeg/knDPC3riazCDyRrcH/2DVovxChAMSN2mqh/7eohJ8IrB/0e6cwLO4VirqanSk1Hw==", + "requires": {} }, "braces": { "version": "3.0.2", @@ -37495,7 +37509,8 @@ "ws": { "version": "7.5.0", "resolved": "https://registry.npmjs.org/ws/-/ws-7.5.0.tgz", - "integrity": "sha512-6ezXvzOZupqKj4jUqbQ9tXuJNo+BR2gU8fFRk3XCP3e0G6WT414u5ELe6Y0vtp7kmSJ3F7YWObSNr1ESsgi4vw==" + "integrity": "sha512-6ezXvzOZupqKj4jUqbQ9tXuJNo+BR2gU8fFRk3XCP3e0G6WT414u5ELe6Y0vtp7kmSJ3F7YWObSNr1ESsgi4vw==", + "requires": {} } } }, @@ -37955,12 +37970,14 @@ "graphql-type-json": { "version": "0.3.2", "resolved": "https://registry.npmjs.org/graphql-type-json/-/graphql-type-json-0.3.2.tgz", - "integrity": "sha512-J+vjof74oMlCWXSvt0DOf2APEdZOCdubEvGDUAlqH//VBYcOYsGgRW7Xzorr44LvkjiuvecWc8fChxuZZbChtg==" + "integrity": "sha512-J+vjof74oMlCWXSvt0DOf2APEdZOCdubEvGDUAlqH//VBYcOYsGgRW7Xzorr44LvkjiuvecWc8fChxuZZbChtg==", + "requires": {} }, "graphql-ws": { "version": "4.9.0", "resolved": "https://registry.npmjs.org/graphql-ws/-/graphql-ws-4.9.0.tgz", - "integrity": "sha512-sHkK9+lUm20/BGawNEWNtVAeJzhZeBg21VmvmLoT5NdGVeZWv5PdIhkcayQIAgjSyyQ17WMKmbDijIPG2On+Ag==" + "integrity": "sha512-sHkK9+lUm20/BGawNEWNtVAeJzhZeBg21VmvmLoT5NdGVeZWv5PdIhkcayQIAgjSyyQ17WMKmbDijIPG2On+Ag==", + "requires": {} }, "gray-matter": { "version": "4.0.3", @@ -38484,7 +38501,8 @@ "icss-utils": { "version": "5.1.0", "resolved": "https://registry.npmjs.org/icss-utils/-/icss-utils-5.1.0.tgz", - "integrity": "sha512-soFhflCVWLfRNOPU3iv5Z9VUdT44xFRbzjLsEzSr5AQmgqPMTHdU3PMT1Cf1ssx8fLNJDA1juftYl+PUcv3MqA==" + "integrity": "sha512-soFhflCVWLfRNOPU3iv5Z9VUdT44xFRbzjLsEzSr5AQmgqPMTHdU3PMT1Cf1ssx8fLNJDA1juftYl+PUcv3MqA==", + "requires": {} }, "ieee754": { "version": "1.2.1", @@ -39230,7 +39248,8 @@ "isomorphic-ws": { "version": "4.0.1", "resolved": "https://registry.npmjs.org/isomorphic-ws/-/isomorphic-ws-4.0.1.tgz", - "integrity": "sha512-BhBvN2MBpWTaSHdWRb/bwdZJ1WaehQ2L1KngkCkfLUGF0mAWAT1sQUQacEmQ0jXkFw/czDXPNQSL5u2/Krsz1w==" + "integrity": "sha512-BhBvN2MBpWTaSHdWRb/bwdZJ1WaehQ2L1KngkCkfLUGF0mAWAT1sQUQacEmQ0jXkFw/czDXPNQSL5u2/Krsz1w==", + "requires": {} }, "isstream": { "version": "0.1.2", @@ -39655,7 +39674,8 @@ "jest-pnp-resolver": { "version": "1.2.2", "resolved": "https://registry.npmjs.org/jest-pnp-resolver/-/jest-pnp-resolver-1.2.2.tgz", - "integrity": "sha512-olV41bKSMm8BdnuMsewT4jqlZ8+3TCARAXjZGT9jcoSnrfUnRCqnMoF9XEeoWjbzObpqF9dRhHQj0Xb9QdF6/w==" + "integrity": "sha512-olV41bKSMm8BdnuMsewT4jqlZ8+3TCARAXjZGT9jcoSnrfUnRCqnMoF9XEeoWjbzObpqF9dRhHQj0Xb9QdF6/w==", + "requires": {} }, "jest-regex-util": { "version": "24.9.0", @@ -40722,7 +40742,8 @@ "meros": { "version": "1.1.4", "resolved": "https://registry.npmjs.org/meros/-/meros-1.1.4.tgz", - "integrity": "sha512-E9ZXfK9iQfG9s73ars9qvvvbSIkJZF5yOo9j4tcwM5tN8mUKfj/EKN5PzOr3ZH0y5wL7dLAHw3RVEfpQV9Q7VQ==" + "integrity": "sha512-E9ZXfK9iQfG9s73ars9qvvvbSIkJZF5yOo9j4tcwM5tN8mUKfj/EKN5PzOr3ZH0y5wL7dLAHw3RVEfpQV9Q7VQ==", + "requires": {} }, "methods": { "version": "1.1.2", @@ -42035,27 +42056,32 @@ "postcss-discard-comments": { "version": "5.0.1", "resolved": "https://registry.npmjs.org/postcss-discard-comments/-/postcss-discard-comments-5.0.1.tgz", - "integrity": "sha512-lgZBPTDvWrbAYY1v5GYEv8fEO/WhKOu/hmZqmCYfrpD6eyDWWzAOsl2rF29lpvziKO02Gc5GJQtlpkTmakwOWg==" + "integrity": "sha512-lgZBPTDvWrbAYY1v5GYEv8fEO/WhKOu/hmZqmCYfrpD6eyDWWzAOsl2rF29lpvziKO02Gc5GJQtlpkTmakwOWg==", + "requires": {} }, "postcss-discard-duplicates": { "version": "5.0.1", "resolved": "https://registry.npmjs.org/postcss-discard-duplicates/-/postcss-discard-duplicates-5.0.1.tgz", - "integrity": "sha512-svx747PWHKOGpAXXQkCc4k/DsWo+6bc5LsVrAsw+OU+Ibi7klFZCyX54gjYzX4TH+f2uzXjRviLARxkMurA2bA==" + "integrity": "sha512-svx747PWHKOGpAXXQkCc4k/DsWo+6bc5LsVrAsw+OU+Ibi7klFZCyX54gjYzX4TH+f2uzXjRviLARxkMurA2bA==", + "requires": {} }, "postcss-discard-empty": { "version": "5.0.1", "resolved": "https://registry.npmjs.org/postcss-discard-empty/-/postcss-discard-empty-5.0.1.tgz", - "integrity": "sha512-vfU8CxAQ6YpMxV2SvMcMIyF2LX1ZzWpy0lqHDsOdaKKLQVQGVP1pzhrI9JlsO65s66uQTfkQBKBD/A5gp9STFw==" + "integrity": "sha512-vfU8CxAQ6YpMxV2SvMcMIyF2LX1ZzWpy0lqHDsOdaKKLQVQGVP1pzhrI9JlsO65s66uQTfkQBKBD/A5gp9STFw==", + "requires": {} }, "postcss-discard-overridden": { "version": "5.0.1", "resolved": "https://registry.npmjs.org/postcss-discard-overridden/-/postcss-discard-overridden-5.0.1.tgz", - "integrity": "sha512-Y28H7y93L2BpJhrdUR2SR2fnSsT+3TVx1NmVQLbcnZWwIUpJ7mfcTC6Za9M2PG6w8j7UQRfzxqn8jU2VwFxo3Q==" + "integrity": "sha512-Y28H7y93L2BpJhrdUR2SR2fnSsT+3TVx1NmVQLbcnZWwIUpJ7mfcTC6Za9M2PG6w8j7UQRfzxqn8jU2VwFxo3Q==", + "requires": {} }, "postcss-flexbugs-fixes": { "version": "5.0.2", "resolved": "https://registry.npmjs.org/postcss-flexbugs-fixes/-/postcss-flexbugs-fixes-5.0.2.tgz", - "integrity": "sha512-18f9voByak7bTktR2QgDveglpn9DTbBWPUzSOe9g0N4WR/2eSt6Vrcbf0hmspvMI6YWGywz6B9f7jzpFNJJgnQ==" + "integrity": "sha512-18f9voByak7bTktR2QgDveglpn9DTbBWPUzSOe9g0N4WR/2eSt6Vrcbf0hmspvMI6YWGywz6B9f7jzpFNJJgnQ==", + "requires": {} }, "postcss-loader": { "version": "5.3.0", @@ -42181,7 +42207,8 @@ "postcss-modules-extract-imports": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/postcss-modules-extract-imports/-/postcss-modules-extract-imports-3.0.0.tgz", - "integrity": "sha512-bdHleFnP3kZ4NYDhuGlVK+CMrQ/pqUm8bx/oGL93K6gVwiclvX5x0n76fYMKuIGKzlABOy13zsvqjb0f92TEXw==" + "integrity": "sha512-bdHleFnP3kZ4NYDhuGlVK+CMrQ/pqUm8bx/oGL93K6gVwiclvX5x0n76fYMKuIGKzlABOy13zsvqjb0f92TEXw==", + "requires": {} }, "postcss-modules-local-by-default": { "version": "4.0.0", @@ -42219,7 +42246,8 @@ "postcss-normalize-charset": { "version": "5.0.1", "resolved": "https://registry.npmjs.org/postcss-normalize-charset/-/postcss-normalize-charset-5.0.1.tgz", - "integrity": "sha512-6J40l6LNYnBdPSk+BHZ8SF+HAkS4q2twe5jnocgd+xWpz/mx/5Sa32m3W1AA8uE8XaXN+eg8trIlfu8V9x61eg==" + "integrity": "sha512-6J40l6LNYnBdPSk+BHZ8SF+HAkS4q2twe5jnocgd+xWpz/mx/5Sa32m3W1AA8uE8XaXN+eg8trIlfu8V9x61eg==", + "requires": {} }, "postcss-normalize-display-values": { "version": "5.0.1", @@ -42590,7 +42618,8 @@ "prism-react-renderer": { "version": "1.2.1", "resolved": "https://registry.npmjs.org/prism-react-renderer/-/prism-react-renderer-1.2.1.tgz", - "integrity": "sha512-w23ch4f75V1Tnz8DajsYKvY5lF7H1+WvzvLUcF0paFxkTHSp42RS0H5CttdN2Q8RR3DRGZ9v5xD/h3n8C8kGmg==" + "integrity": "sha512-w23ch4f75V1Tnz8DajsYKvY5lF7H1+WvzvLUcF0paFxkTHSp42RS0H5CttdN2Q8RR3DRGZ9v5xD/h3n8C8kGmg==", + "requires": {} }, "prismjs": { "version": "1.26.0", @@ -42975,7 +43004,8 @@ "react-docgen-typescript": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/react-docgen-typescript/-/react-docgen-typescript-2.0.0.tgz", - "integrity": "sha512-lPf+KJKAo6a9klKyK4y8WwgaX+6t5/HkVjHOpJDMbmaXfXcV7zP0QgWtnEOc3ccEUXKvlHMGUMIS9f6Zgo1BSw==" + "integrity": "sha512-lPf+KJKAo6a9klKyK4y8WwgaX+6t5/HkVjHOpJDMbmaXfXcV7zP0QgWtnEOc3ccEUXKvlHMGUMIS9f6Zgo1BSw==", + "requires": {} }, "react-dom": { "version": "17.0.1", @@ -43056,7 +43086,8 @@ "react-frame-component": { "version": "4.1.3", "resolved": "https://registry.npmjs.org/react-frame-component/-/react-frame-component-4.1.3.tgz", - "integrity": "sha512-4PurhctiqnmC1F5prPZ+LdsalH7pZ3SFA5xoc0HBe8mSHctdLLt4Cr2WXfXOoajHBYq/yiipp9zOgx+vy8GiEA==" + "integrity": "sha512-4PurhctiqnmC1F5prPZ+LdsalH7pZ3SFA5xoc0HBe8mSHctdLLt4Cr2WXfXOoajHBYq/yiipp9zOgx+vy8GiEA==", + "requires": {} }, "react-helmet": { "version": "5.2.1", @@ -43161,7 +43192,8 @@ "react-simple-code-editor": { "version": "0.11.0", "resolved": "https://registry.npmjs.org/react-simple-code-editor/-/react-simple-code-editor-0.11.0.tgz", - "integrity": "sha512-xGfX7wAzspl113ocfKQAR8lWPhavGWHL3xSzNLeseDRHysT+jzRBi/ExdUqevSMos+7ZtdfeuBOXtgk9HTwsrw==" + "integrity": "sha512-xGfX7wAzspl113ocfKQAR8lWPhavGWHL3xSzNLeseDRHysT+jzRBi/ExdUqevSMos+7ZtdfeuBOXtgk9HTwsrw==", + "requires": {} }, "react-style-singleton": { "version": "2.1.1", @@ -45320,7 +45352,8 @@ "stylis-rule-sheet": { "version": "0.0.10", "resolved": "https://registry.npmjs.org/stylis-rule-sheet/-/stylis-rule-sheet-0.0.10.tgz", - "integrity": "sha512-nTbZoaqoBnmK+ptANthb10ZRZOGC+EmTLLUxeYIuHNkEKcmKgXX1XWKkUBT2Ac4es3NybooPe0SmvKdhKJZAuw==" + "integrity": "sha512-nTbZoaqoBnmK+ptANthb10ZRZOGC+EmTLLUxeYIuHNkEKcmKgXX1XWKkUBT2Ac4es3NybooPe0SmvKdhKJZAuw==", + "requires": {} }, "subscriptions-transport-ws": { "version": "0.9.19", @@ -46545,7 +46578,8 @@ "use-callback-ref": { "version": "1.2.5", "resolved": "https://registry.npmjs.org/use-callback-ref/-/use-callback-ref-1.2.5.tgz", - "integrity": "sha512-gN3vgMISAgacF7sqsLPByqoePooY3n2emTH59Ur5d/M8eg4WTWu1xp8i8DHjohftIyEx0S08RiYxbffr4j8Peg==" + "integrity": "sha512-gN3vgMISAgacF7sqsLPByqoePooY3n2emTH59Ur5d/M8eg4WTWu1xp8i8DHjohftIyEx0S08RiYxbffr4j8Peg==", + "requires": {} }, "use-sidecar": { "version": "1.0.5", diff --git a/docs/src/@primer/gatsby-theme-doctocat/live-code-scope.js b/docs/src/@primer/gatsby-theme-doctocat/live-code-scope.js index 84a3d8c83fe..5caa96ccbcd 100644 --- a/docs/src/@primer/gatsby-theme-doctocat/live-code-scope.js +++ b/docs/src/@primer/gatsby-theme-doctocat/live-code-scope.js @@ -52,7 +52,7 @@ export default function resolveScope(metastring) { ...doctocatComponents, ...primerComponents, ...(metastring.includes('drafts') ? drafts : {}), - ...deprecated, + ...(metastring.includes('deprecated') ? deprecated : {}), ReactRouterLink, State, CheckIcon, diff --git a/src/Dropdown.tsx b/src/Dropdown.tsx index 70fea52a980..fba007a1c38 100644 --- a/src/Dropdown.tsx +++ b/src/Dropdown.tsx @@ -146,6 +146,9 @@ Dropdown.defaultProps = Details.defaultProps export type DropdownCaretProps = ComponentProps export type DropdownMenuProps = ComponentProps export type DropdownItemProps = ComponentProps +/** + * @deprecated Use ActionMenu instead. See https://primer.style/react/ActionMenu for more details. + */ export default Object.assign(Dropdown, { Caret: DropdownCaret, Menu: DropdownMenu, diff --git a/src/SelectMenu/SelectMenu.tsx b/src/SelectMenu/SelectMenu.tsx index 5a6d3ff356c..5436a2215f1 100644 --- a/src/SelectMenu/SelectMenu.tsx +++ b/src/SelectMenu/SelectMenu.tsx @@ -107,6 +107,10 @@ export type {SelectMenuModalProps} from './SelectMenuModal' export type {SelectMenuTabProps} from './SelectMenuTab' export type {SelectMenuTabPanelProps} from './SelectMenuTabPanel' export type {SelectMenuTabsProps} from './SelectMenuTabs' + +/** + * @deprecated Use ActionMenu instead. See https://primer.style/react/ActionMenu for more details. + */ export default Object.assign(SelectMenu, { MenuContext, List: SelectMenuList, From f366604526d13e21f5bcbdf508842bb52e0fbf76 Mon Sep 17 00:00:00 2001 From: Siddharth Kshetrapal Date: Fri, 25 Feb 2022 18:32:04 +0100 Subject: [PATCH 06/37] Deprecate ActionMenu v1 & Promote drafts/ActionMenu v2 (#1895) * Deprecate ActionList v1 * Promote drafts/ActionList2 to main/ActionList * Add changelog * Undo package-lock change * update ActionList import for Menu2 docs * Deprecate ActionMenu - part 1 * Deprecate ActionMenu - part 2 * Promote drafts/ActionMenu2 to main/ActionMenu * Add changelog * Add @deprecated on deprecated/ActionMenu * docs fixed! --- ...ecate-actionmenuv1-promote-actionmenuv2.md | 67 ++ .changeset/empty-pillows-hunt.md | 149 +++- docs/content/ActionList.mdx | 509 ++++++++++--- docs/content/ActionMenu.mdx | 391 ++++++++-- docs/content/deprecated/ActionList.mdx | 136 ++++ docs/content/deprecated/ActionMenu.mdx | 127 ++++ docs/content/drafts/ActionList2.mdx | 449 ------------ docs/content/drafts/ActionMenu2.mdx | 341 --------- docs/content/drafts/DropdownMenu2.mdx | 10 +- .../src/@primer/gatsby-theme-doctocat/nav.yml | 12 +- .../ActionListContainerContext.tsx | 0 .../Description.tsx | 0 src/ActionList/Divider.tsx | 40 +- src/ActionList/Group.tsx | 119 +++- src/ActionList/Item.tsx | 670 ++++++------------ src/{ActionList2 => ActionList}/LinkItem.tsx | 0 src/ActionList/List.tsx | 293 ++------ src/{ActionList2 => ActionList}/Selection.tsx | 0 src/{ActionList2 => ActionList}/Visuals.tsx | 0 src/ActionList/index.ts | 29 +- src/ActionList2/Divider.tsx | 29 - src/ActionList2/Group.tsx | 110 --- src/ActionList2/Item.tsx | 269 ------- src/ActionList2/List.tsx | 73 -- src/ActionList2/index.ts | 42 -- src/ActionMenu.tsx | 173 +++-- src/ActionMenu2.tsx | 131 ---- src/Autocomplete/AutocompleteMenu.tsx | 2 +- src/DropdownMenu/DropdownMenu.tsx | 4 +- src/DropdownMenu2.tsx | 4 +- src/FilteredActionList/FilteredActionList.tsx | 4 +- src/SelectPanel/SelectPanel.tsx | 4 +- src/__tests__/ActionList.test.tsx | 143 +++- src/__tests__/ActionList2.test.tsx | 158 ----- src/__tests__/ActionMenu.test.tsx | 210 +++--- src/__tests__/ActionMenu2.test.tsx | 150 ---- src/__tests__/Autocomplete.test.tsx | 2 +- src/__tests__/ConfirmationDialog.test.tsx | 2 +- src/__tests__/DropdownMenu.test.tsx | 2 +- src/__tests__/DropdownMenu2.test.tsx | 2 +- src/__tests__/SelectPanel.test.tsx | 2 +- .../__snapshots__/ActionList.test.tsx.snap | 221 +----- .../__snapshots__/ActionList2.test.tsx.snap | 14 - .../__snapshots__/ActionMenu.test.tsx.snap | 134 +++- .../__snapshots__/ActionMenu2.test.tsx.snap | 144 ---- src/__tests__/deprecated/ActionList.test.tsx | 53 ++ .../ActionList.types.test.tsx | 2 +- src/__tests__/deprecated/ActionMenu.test.tsx | 136 ++++ .../__snapshots__/ActionList.test.tsx.snap | 223 ++++++ .../__snapshots__/ActionMenu.test.tsx.snap | 80 +++ src/deprecated/ActionList/Divider.tsx | 25 + src/deprecated/ActionList/Group.tsx | 45 ++ src/{ => deprecated}/ActionList/Header.tsx | 4 +- src/deprecated/ActionList/Item.tsx | 481 +++++++++++++ src/deprecated/ActionList/List.tsx | 258 +++++++ src/deprecated/ActionList/index.ts | 21 + src/deprecated/ActionMenu.tsx | 109 +++ src/deprecated/index.ts | 4 + src/drafts/index.ts | 2 - src/index.ts | 10 +- .../examples.stories.tsx | 9 +- .../fixtures.stories.tsx | 19 +- .../examples.stories.tsx | 5 +- .../fixtures.stories.tsx | 6 +- src/stories/ConfirmationDialog.stories.tsx | 2 +- src/stories/DropdownMenu.stories.tsx | 2 +- .../DropdownMenu2/examples.stories.tsx | 2 +- .../DropdownMenu2/fixtures.stories.tsx | 2 +- src/stories/Overlay.stories.tsx | 16 +- src/stories/SelectPanel.stories.tsx | 2 +- .../{ => deprecated}/ActionList.stories.tsx | 12 +- .../{ => deprecated}/ActionMenu.stories.tsx | 16 +- 72 files changed, 3607 insertions(+), 3310 deletions(-) create mode 100644 .changeset/deprecate-actionmenuv1-promote-actionmenuv2.md create mode 100644 docs/content/deprecated/ActionList.mdx create mode 100644 docs/content/deprecated/ActionMenu.mdx delete mode 100644 docs/content/drafts/ActionList2.mdx delete mode 100644 docs/content/drafts/ActionMenu2.mdx rename src/{ActionList2 => ActionList}/ActionListContainerContext.tsx (100%) rename src/{ActionList2 => ActionList}/Description.tsx (100%) rename src/{ActionList2 => ActionList}/LinkItem.tsx (100%) rename src/{ActionList2 => ActionList}/Selection.tsx (100%) rename src/{ActionList2 => ActionList}/Visuals.tsx (100%) delete mode 100644 src/ActionList2/Divider.tsx delete mode 100644 src/ActionList2/Group.tsx delete mode 100644 src/ActionList2/Item.tsx delete mode 100644 src/ActionList2/List.tsx delete mode 100644 src/ActionList2/index.ts delete mode 100644 src/ActionMenu2.tsx delete mode 100644 src/__tests__/ActionList2.test.tsx delete mode 100644 src/__tests__/ActionMenu2.test.tsx delete mode 100644 src/__tests__/__snapshots__/ActionList2.test.tsx.snap delete mode 100644 src/__tests__/__snapshots__/ActionMenu2.test.tsx.snap create mode 100644 src/__tests__/deprecated/ActionList.test.tsx rename src/__tests__/{ => deprecated}/ActionList.types.test.tsx (93%) create mode 100644 src/__tests__/deprecated/ActionMenu.test.tsx create mode 100644 src/__tests__/deprecated/__snapshots__/ActionList.test.tsx.snap create mode 100644 src/__tests__/deprecated/__snapshots__/ActionMenu.test.tsx.snap create mode 100644 src/deprecated/ActionList/Divider.tsx create mode 100644 src/deprecated/ActionList/Group.tsx rename src/{ => deprecated}/ActionList/Header.tsx (96%) create mode 100644 src/deprecated/ActionList/Item.tsx create mode 100644 src/deprecated/ActionList/List.tsx create mode 100644 src/deprecated/ActionList/index.ts create mode 100644 src/deprecated/ActionMenu.tsx rename src/stories/{ActionList2 => ActionList}/examples.stories.tsx (98%) rename src/stories/{ActionList2 => ActionList}/fixtures.stories.tsx (98%) rename src/stories/{ActionMenu2 => ActionMenu}/examples.stories.tsx (98%) rename src/stories/{ActionMenu2 => ActionMenu}/fixtures.stories.tsx (99%) rename src/stories/{ => deprecated}/ActionList.stories.tsx (97%) rename src/stories/{ => deprecated}/ActionMenu.stories.tsx (96%) diff --git a/.changeset/deprecate-actionmenuv1-promote-actionmenuv2.md b/.changeset/deprecate-actionmenuv1-promote-actionmenuv2.md new file mode 100644 index 00000000000..4c769755314 --- /dev/null +++ b/.changeset/deprecate-actionmenuv1-promote-actionmenuv2.md @@ -0,0 +1,67 @@ +--- +'@primer/react': major +--- + +### ActionMenu + +ActionMenu now ships a composable API that utilises ActionList + +See full list of props and examples: https://primer.style/react/ActionMenu + +Main changes: + +1. Instead of using `items` prop, use `ActionList` inside `ActionMenu` +2. Instead of using `anchorContent` on `ActionMenu`, use `ActionMenu.Button` with `children` +3. Instead of using `onAction` prop on `ActionMenu`, use `onSelect` prop on `ActionList.Item` +4. Instead of using `groupMetadata` on `ActionMenu`, use `ActionList.Group` +5. Instead of `overlayProps` on `ActionMenu`, use `ActionMenu.Overlay` + + + + + + + + + +
Before After
+ +```jsx + +``` + + + +```jsx + + Menu + + + New file + Copy link + Edit file + + Delete file + + + +``` + +
+ +To continue to use the deprecated API for now, change the import path to `@primer/react/deprecated`: + +```js +import {ActionMenu} from '@primer/react/deprecated' +``` diff --git a/.changeset/empty-pillows-hunt.md b/.changeset/empty-pillows-hunt.md index 922ed22e895..bda4d62c285 100644 --- a/.changeset/empty-pillows-hunt.md +++ b/.changeset/empty-pillows-hunt.md @@ -2,4 +2,151 @@ '@primer/react': major --- -Prepare library for `v35` +### ActionList + +ActionList now ships a composable API. + +See full list of props and examples: https://primer.style/react/ActionList + + + + + + + + + + + + + + + + + +
Before After
+ +```jsx + +``` + + + +```jsx + + New file + Copy link + Edit file + + Delete file + +``` + +
+ +```jsx + , + text: 'mona', + description: 'Monalisa Octocat', + descriptionVariant: 'block' + }, + { + key: '2', + leadingVisual: GearIcon, + text: 'View Settings', + trailingVisual: ArrowRightIcon + } + ]} +/> +``` + + + +```jsx + + + + + + github/primer + + + + + + mona + Monalisa Octocat + + + + + + View settings + + + + + +``` + +
+ +```jsx + +``` + + + +```jsx + + + repo:github/github + + + + + Table + Board Description> + + + + View settings + +``` + +
+ +To continue to use the deprecated API for now, change the import path to `@primer/react/deprecated`: + +```js +import {ActionList} from '@primer/react/deprecated' +``` diff --git a/docs/content/ActionList.mdx b/docs/content/ActionList.mdx index 7eb5066cca2..f414bdd2f3d 100644 --- a/docs/content/ActionList.mdx +++ b/docs/content/ActionList.mdx @@ -3,98 +3,447 @@ componentId: action_list title: ActionList status: Alpha source: https://github.com/primer/react/tree/main/src/ActionList +storybook: '/react/storybook?path=/story/composite-components-actionlist' +description: An ActionList is a list of items that can be activated or selected. ActionList is the base component for many menu-type components, including DropdownMenu and ActionMenu. --- -An `ActionList` is a list of items which can be activated or selected. `ActionList` is the base component for many of our menu-type components, including `DropdownMenu` and `ActionMenu`. +import {Avatar} from '@primer/react' +import {ActionList} from '@primer/react' +import {LinkIcon, AlertIcon, ArrowRightIcon} from '@primer/octicons-react' +import InlineCode from '@primer/gatsby-theme-doctocat/src/components/inline-code' -## Minimal example + + + + + + + github.com/primer + + A React implementation of GitHub's Primer Design System + + + + + + + mona + Monalisa Octocat + + + + + + 4 vulnerabilities + + + + + + + +```js +import {ActionList} from '@primer/react' +``` + +## Examples + +### Minimal example ```jsx live - + + New file + Copy link + Edit file + + Delete file + ``` -## Example with grouped items +### With leading visual + +Leading visuals are optional and appear at the start of an item. They can be octicons, avatars, and other custom visuals that fit a small area. + ```jsx live - + + + + github.com/primer + + + + 4 vulnerabilities + + + + mona + + + ``` -## Example with custom item renderer - -```jsx - - }, - { - text: 'React Router link', - renderItem: props => - }, - { - text: 'NextJS style', - renderItem: props => ( - - - - ) - } - ]} -/> +### With trailing visual + +Trailing visual and trailing text can display auxiliary information. They're placed at the right of the item, and can denote status, keyboard shortcuts, or be used to set expectations about what the action does. + +```jsx live + + + New file + ⌘ + N + + + Copy link + ⌘ + C + + + Edit file + ⌘ + E + + + Delete file + + + +``` + +### With description and dividers + +Item dividers allow users to parse heavier amounts of information. They're placed between items and are useful in complex lists, particularly when descriptions or multi-line text is present. + +```jsx live + + + + + + mona + Monalisa Octocat + + + + + + hubot + Hubot + + + + + + primer-css + GitHub Design Systems Bot + + +``` + +### With links + +When you want to add links to the List instead of actions, use `ActionList.LinkItem` + + +```jsx live + + + + + + github/primer + + + + + + MIT License + + + + + + 1.4k stars + + +``` + +### With groups + +```javascript live noinline +const SelectFields = () => { + const [options, setOptions] = React.useState([ + {text: 'Status', selected: true}, + {text: 'Stage', selected: true}, + {text: 'Assignee', selected: true}, + {text: 'Team', selected: true}, + {text: 'Estimate', selected: false}, + {text: 'Due Date', selected: false} + ]) + + const visibleOptions = options.filter(option => option.selected) + const hiddenOptions = options.filter(option => !option.selected) + + const toggle = text => { + setOptions( + options.map(option => { + if (option.text === text) option.selected = !option.selected + return option + }) + ) + } + + return ( + + + {visibleOptions.map(option => ( + toggle(option.text)}> + {option.text} + + ))} + + + {hiddenOptions.map((option, index) => ( + toggle(option.text)}> + {option.text} + + ))} + {hiddenOptions.length === 0 && No hidden fields} + + + ) +} + +render() ``` ## Props -| Name | Type | Default | Description | -| :--------------- | :------------------------------------------------------------------------------------------------------------------------------------------------ | :---------------: | :------------------------------------------------------------------------------------------------------------------------------------------------------ | -| items | `(ItemProps & Omit, keyof ItemProps>) \| ((Partial & {renderItem: RenderItemFn}) & {key?: Key})` | `undefined` | Required. A list of item objects conforming to the `ActionList.Item` props interface. | -| renderItem | `(props: ItemProps) => JSX.Element` | `ActionList.Item` | Optional. If defined, each item in `items` will be passed to this function, allowing for `ActionList`-wide custom item rendering. | -| groupMetadata | `GroupProps[]` | `undefined` | Optional. If defined, `ActionList` will group `items` into `ActionList.Group`s separated by `ActionList.Divider` according to their `groupId` property. | -| showItemDividers | `boolean` | `false` | Optional. If `true` dividers will be displayed above each `ActionList.Item` which does not follow an `ActionList.Header` or `ActionList.Divider` | +### ActionList + + + + + inset children are offset (vertically and horizontally) from list edges.{' '} + full children are flush (vertically and horizontally) with list edges + + } + /> + + + AriaRole + } + description={ + <> + ARIA role describing the function of the list. listbox and{' '} + menu are a common values. + + } + /> + + + +### ActionList.Item + + + + + danger indicates that the item is destructive. + + } + /> + + + + AriaRole + } + description={ + <> + ARIA role describing the function of the item. option is a common value. + + } + /> + + + +### ActionList.LinkItem + + + + MDN + } + /> + + +### ActionList.LeadingVisual + + + + + + +### ActionList.TrailingVisual + + + + + + +### ActionList.Description + + + + + inline descriptions are positioned beside primary text. block{' '} + descriptions are positioned below primary text. + + } + /> + + + +### ActionList.Group + + + + + + + inline descriptions are positioned beside primary text. block{' '} + descriptions are positioned below primary text. + + } + /> + + Set selectionVariant at the group level. + + } + /> + AriaRole + } + description={ + <> + ARIA role describing the function of the list inside the group. listbox and{' '} + menu are a common values. + + } + /> + + + +## Status + + + +## Further reading + +- [Interface guidelines: Action List](https://primer.style/design/components/action-list) + +## Related components + +- [ActionMenu](/ActionMenu) +- [DropdownMenu](/DropdownMenu) +- [SelectPanel](/SelectPanel) diff --git a/docs/content/ActionMenu.mdx b/docs/content/ActionMenu.mdx index 1c0e13ecd9b..8c97169f556 100644 --- a/docs/content/ActionMenu.mdx +++ b/docs/content/ActionMenu.mdx @@ -2,81 +2,338 @@ componentId: action_menu title: ActionMenu status: Alpha +source: https://github.com/primer/react/tree/main/src/ActionMenu.tsx +storybook: '/react/storybook?path=/story/composite-components-actionmenu' +description: An ActionMenu is an ActionList-based component for creating a menu of actions that expands through a trigger button. --- -An `ActionMenu` is an ActionList-based component for creating a menu of actions that expands through a trigger button. +import {Box, Avatar, ActionList, ActionMenu} from '@primer/react' -## Default example +
+ + + + Menu + + + + Copy link + ⌘C + + + Quote reply + ⌘Q + + + Edit comment + ⌘E + + + + Delete file + ⌘D + + + + + + +
+ +```js +import {ActionMenu} from '@primer/react/drafts' +``` + +
+ +## Examples + +### Minimal example + +`ActionMenu` ships with `ActionMenu.Button` which is an accessible trigger for the overlay. It's recommended to compose `ActionList` with `ActionMenu.Overlay` + +  ```jsx live - console.log(text)} - items={[ - {text: 'New file', key: 'new-file'}, - ActionMenu.Divider, - {text: 'Copy link', key: 'copy-link'}, - {text: 'Edit file', key: 'edit-file'}, - {text: 'Delete file', variant: 'danger', key: 'delete-file'} - ]} -/> + + Menu + + + + console.log('New file')}>New file + Copy link + Edit file + + Delete file + + + ``` -## Example with grouped items +### With a custom anchor + +You can choose to have a different _anchor_ for the Menu dependending on the application's context. + +  ```jsx live - console.log(text)} - groupMetadata={[ - {groupId: '0'}, - {groupId: '1', header: {title: 'Live query', variant: 'subtle'}}, - {groupId: '2', header: {title: 'Layout', variant: 'subtle'}}, - {groupId: '3'}, - {groupId: '4'} - ]} - items={[ - {key: '1', leadingVisual: TypographyIcon, text: 'Rename', groupId: '0'}, - {key: '2', leadingVisual: VersionsIcon, text: 'Duplicate', groupId: '0'}, - {key: '3', leadingVisual: SearchIcon, text: 'repo:github/github', groupId: '1'}, - { - key: '4', - leadingVisual: NoteIcon, - text: 'Table', - description: 'Information-dense table optimized for operations across teams', - descriptionVariant: 'block', - groupId: '2' - }, - { - key: '5', - leadingVisual: ProjectIcon, - text: 'Board', - description: 'Kanban-style board focused on visual states', - descriptionVariant: 'block', - groupId: '2' - }, - { - key: '6', - leadingVisual: FilterIcon, - text: 'Save sort and filters to current view', - disabled: true, - groupId: '3' - }, - {key: '7', leadingVisual: FilterIcon, text: 'Save sort and filters to new view', groupId: '3'}, - {key: '8', leadingVisual: GearIcon, text: 'View settings', groupId: '4'} - ]} -/> + + + + + + + + + + + + + + Rename + + + + + + Archive all cards + + + + + + Delete + + + + +``` + +### With Groups + +```jsx live + + Open column menu + + + + + + + + + repo:github/memex,github/github + + + + + + + + + Table + + Information-dense table optimized for operations across teams + + + + + + + Board + Kanban-style board focused on visual states + + + + + + + + + Save sort and filters to current view + + + + + + Save sort and filters to new view + + + + + + + + + View settings + + + + + +``` + +### With selection + +Use `selectionVariant` on `ActionList` to create a menu with single or multiple selection. + +```javascript live noinline +const fieldTypes = [ + {icon: TypographyIcon, name: 'Text'}, + {icon: NumberIcon, name: 'Number'}, + {icon: CalendarIcon, name: 'Date'}, + {icon: SingleSelectIcon, name: 'Single select'}, + {icon: IterationsIcon, name: 'Iteration'} +] + +const Example = () => { + const [selectedIndex, setSelectedIndex] = React.useState(1) + const selectedType = fieldTypes[selectedIndex] + + return ( + + + {selectedType.name} + + + + {fieldTypes.map((type, index) => ( + setSelectedIndex(index)}> + {type.name} + + ))} + + + + ) +} + +render() ``` -## Component props - -| Name | Type | Default | Description | -| :------------ | :------------------------------------ | :---------------: | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| items | `ItemProps[]` | `undefined` | Required. A list of item objects conforming to the `ActionList.Item` props interface. | -| renderItem | `(props: ItemProps) => JSX.Element` | `ActionList.Item` | Optional. If defined, each item in `items` will be passed to this function, allowing for `ActionList`-wide custom item rendering. | -| groupMetadata | `GroupProps[]` | `undefined` | Optional. If defined, `ActionList` will group `items` into `ActionList.Group`s separated by `ActionList.Divider` according to their `groupId` property. | -| renderAnchor | `(props: ButtonProps) => JSX.Element` | `Button` | Optional. If defined, provided component will be used to render the menu anchor. Will receive the selected `Item` text as `children` prop when an item is activated. | -| anchorContent | React.ReactNode | `undefined` | Optional. If defined, it will be passed to the trigger as the elements child. | -| onAction | (props: ItemProps) => void | `undefined` | Optional. If defined, this function will be called when a menu item is activated either by a click or a keyboard press. | -| open | boolean | `undefined` | Optional. If defined, ActionMenu will use this to control the open/closed state of the Overlay instead of controlling the state internally. Should be used in conjunction with the `setOpen` prop. | -| setOpen | (state: boolean) => void | `undefined` | Optional. If defined, ActionMenu will use this to control the open/closed state of the Overlay instead of controlling the state internally. Should be used in conjunction with the `open` prop. | +### With External Anchor + +To create an anchor outside of the menu, you need to switch to controlled mode for the menu and pass it as `anchorRef` to `ActionMenu`. Make sure you add `aria-expanded` and `aria-haspopup` to the external anchor: + +```javascript live noinline +const Example = () => { + const [open, setOpen] = React.useState(false) + const anchorRef = React.createRef() + + return ( + <> + + + + + + Copy link + Quote reply + Edit comment + + Delete file + + + + + ) +} + +render() +``` + +### With Overlay Props + +To create an anchor outside of the menu, you need to switch to controlled mode for the menu and pass it as `anchorRef` to `ActionMenu`: + +```javascript live noinline +const handleEscape = () => alert('you hit escape!') + +render( + + Open Actions Menu + + + + Open current Codespace + + Your existing Codespace will be opened to its previous state, and you'll be asked to manually switch to + new-branch. + + ⌘O + + + Create new Codespace + + Create a brand new Codespace with a fresh image and checkout this branch. + + ⌘C + + + + +) +``` + +## Props / API reference + +### ActionMenu + +| Name | Type | Default | Description | +| :----------- | :----------------------------- | :-----: | :----------------------------------------------------------------------------------------------------------------------- | +| children\* | `React.ReactElement[]` | - | Required. Recommended: `ActionMenu.Button` or `ActionMenu.Anchor` with `ActionMenu.Overlay` | +| open | `boolean` | - | Optional. If defined, will control the open/closed state of the overlay. Must be used in conjuction with `onOpenChange`. | +| onOpenChange | `(open: boolean) => void` | - | Optional. If defined, will control the open/closed state of the overlay. Must be used in conjuction with `open`. | +| anchorRef | `React.RefObject` | - | Optional. Useful for defining an external anchor | + +### ActionMenu.Button + +| Type | Default | Description | +| :----------------------------------------------- | :-----: | :---------------------------------------------------------------------------------------------------------------- | +| [Button v2 props](/drafts/Button2#api-reference) | - | You can pass all of the props that you would pass to a [`Button`](/drafts/Button2) component like `variant`, `sx` | + +### ActionMenu.Anchor + +| Name | Type | Default | Description | +| :--------- | :------------------- | :-----: | :-------------------------------- | +| children\* | `React.ReactElement` | - | Required. Accepts a single child. | + +### ActionMenu.Overlay + +| Name | Type | Default | Description | +| :--------------------------------------- | :-------------------- | :-----------------: | :-------------------------------------------------------------------------------------------- | +| children\* | `React.ReactElement[] | React.ReactElement` | Required. Recommended: [`ActionList`](/ActionList) | +| [OverlayProps](/Overlay#component-props) | - | - | Optional. Props to be spread on the internal [`AnchoredOverlay`](/AnchoredOverlay) component. | + +## Status + + + +## Further reading + +[Interface guidelines: Action List + Menu](https://primer.style/design/components/action-list) + +## Related components + +- [ActionList](/ActionList) +- [SelectPanel](/SelectPanel) +- [Button](/drafts/Button2) diff --git a/docs/content/deprecated/ActionList.mdx b/docs/content/deprecated/ActionList.mdx new file mode 100644 index 00000000000..1b933448b03 --- /dev/null +++ b/docs/content/deprecated/ActionList.mdx @@ -0,0 +1,136 @@ +--- +componentId: action_list +title: ActionList +status: Deprecated +source: https://github.com/primer/react/tree/main/src/deprecated/ActionList +--- + +An `ActionList` is a list of items which can be activated or selected. `ActionList` is the base component for many of our menu-type components, including `DropdownMenu` and `ActionMenu`. + +## Deprecation + +Use [composable API instead](/ActionList) instead. + +**Before** + +```jsx + +``` + +**After** + +```jsx + + New file + Copy link + Edit file + + Delete file + +``` + +Or continue using deprecated API: + +```js +import {ActionList} from '@primer/react/deprecated' +``` + +## Minimal example + +```jsx live deprecated + +``` + +## Example with grouped items + +```jsx live deprecated + +``` + +## Example with custom item renderer + +```jsx deprecated + + }, + { + text: 'React Router link', + renderItem: props => + }, + { + text: 'NextJS style', + renderItem: props => ( + + + + ) + } + ]} +/> +``` + +## Props + +| Name | Type | Default | Description | +| :--------------- | :------------------------------------------------------------------------------------------------------------------------------------------------ | :---------------: | :------------------------------------------------------------------------------------------------------------------------------------------------------ | +| items | `(ItemProps & Omit, keyof ItemProps>) \| ((Partial & {renderItem: RenderItemFn}) & {key?: Key})` | `undefined` | Required. A list of item objects conforming to the `ActionList.Item` props interface. | +| renderItem | `(props: ItemProps) => JSX.Element` | `ActionList.Item` | Optional. If defined, each item in `items` will be passed to this function, allowing for `ActionList`-wide custom item rendering. | +| groupMetadata | `GroupProps[]` | `undefined` | Optional. If defined, `ActionList` will group `items` into `ActionList.Group`s separated by `ActionList.Divider` according to their `groupId` property. | +| showItemDividers | `boolean` | `false` | Optional. If `true` dividers will be displayed above each `ActionList.Item` which does not follow an `ActionList.Header` or `ActionList.Divider` | diff --git a/docs/content/deprecated/ActionMenu.mdx b/docs/content/deprecated/ActionMenu.mdx new file mode 100644 index 00000000000..46c542ba2e3 --- /dev/null +++ b/docs/content/deprecated/ActionMenu.mdx @@ -0,0 +1,127 @@ +--- +componentId: action_menu +title: ActionMenu +status: Deprecated +source: https://github.com/primer/react/tree/main/src/deprecated/ActionMenu.tsx +--- + +An `ActionMenu` is an ActionList-based component for creating a menu of actions that expands through a trigger button. + +## Deprecation + +Use [composable API](/ActionMenu) with ActionList instead. + +**Before** + +```jsx + +``` + +**After** + +```jsx + + Menu + + + New file + Copy link + Edit file + + Delete file + + + +``` + +Or continue using deprecated API: + +```js +import {ActionMenu} from '@primer/react/deprecated' +``` + +## Default example + +```jsx live deprecated + console.log(text)} + items={[ + {text: 'New file', key: 'new-file'}, + ActionMenu.Divider, + {text: 'Copy link', key: 'copy-link'}, + {text: 'Edit file', key: 'edit-file'}, + {text: 'Delete file', variant: 'danger', key: 'delete-file'} + ]} +/> +``` + +## Example with grouped items + +```jsx live deprecated + console.log(text)} + groupMetadata={[ + {groupId: '0'}, + {groupId: '1', header: {title: 'Live query', variant: 'subtle'}}, + {groupId: '2', header: {title: 'Layout', variant: 'subtle'}}, + {groupId: '3'}, + {groupId: '4'} + ]} + items={[ + {key: '1', leadingVisual: TypographyIcon, text: 'Rename', groupId: '0'}, + {key: '2', leadingVisual: VersionsIcon, text: 'Duplicate', groupId: '0'}, + {key: '3', leadingVisual: SearchIcon, text: 'repo:github/github', groupId: '1'}, + { + key: '4', + leadingVisual: NoteIcon, + text: 'Table', + description: 'Information-dense table optimized for operations across teams', + descriptionVariant: 'block', + groupId: '2' + }, + { + key: '5', + leadingVisual: ProjectIcon, + text: 'Board', + description: 'Kanban-style board focused on visual states', + descriptionVariant: 'block', + groupId: '2' + }, + { + key: '6', + leadingVisual: FilterIcon, + text: 'Save sort and filters to current view', + disabled: true, + groupId: '3' + }, + {key: '7', leadingVisual: FilterIcon, text: 'Save sort and filters to new view', groupId: '3'}, + {key: '8', leadingVisual: GearIcon, text: 'View settings', groupId: '4'} + ]} +/> +``` + +## Component props + +| Name | Type | Default | Description | +| :------------ | :------------------------------------ | :---------------: | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| items | `ItemProps[]` | `undefined` | Required. A list of item objects conforming to the `ActionList.Item` props interface. | +| renderItem | `(props: ItemProps) => JSX.Element` | `ActionList.Item` | Optional. If defined, each item in `items` will be passed to this function, allowing for `ActionList`-wide custom item rendering. | +| groupMetadata | `GroupProps[]` | `undefined` | Optional. If defined, `ActionList` will group `items` into `ActionList.Group`s separated by `ActionList.Divider` according to their `groupId` property. | +| renderAnchor | `(props: ButtonProps) => JSX.Element` | `Button` | Optional. If defined, provided component will be used to render the menu anchor. Will receive the selected `Item` text as `children` prop when an item is activated. | +| anchorContent | React.ReactNode | `undefined` | Optional. If defined, it will be passed to the trigger as the elements child. | +| onAction | (props: ItemProps) => void | `undefined` | Optional. If defined, this function will be called when a menu item is activated either by a click or a keyboard press. | +| open | boolean | `undefined` | Optional. If defined, ActionMenu will use this to control the open/closed state of the Overlay instead of controlling the state internally. Should be used in conjunction with the `setOpen` prop. | +| setOpen | (state: boolean) => void | `undefined` | Optional. If defined, ActionMenu will use this to control the open/closed state of the Overlay instead of controlling the state internally. Should be used in conjunction with the `open` prop. | diff --git a/docs/content/drafts/ActionList2.mdx b/docs/content/drafts/ActionList2.mdx deleted file mode 100644 index bf842be1fe6..00000000000 --- a/docs/content/drafts/ActionList2.mdx +++ /dev/null @@ -1,449 +0,0 @@ ---- -componentId: action_list2 -title: ActionList v2 -status: Alpha -source: https://github.com/primer/react/tree/main/src/ActionList2 -storybook: '/react/storybook?path=/story/composite-components-actionlist2' -description: An ActionList is a list of items that can be activated or selected. ActionList is the base component for many menu-type components, including DropdownMenu and ActionMenu. ---- - -import {Avatar} from '@primer/react' -import {ActionList} from '@primer/react/drafts' -import {LinkIcon, AlertIcon, ArrowRightIcon} from '@primer/octicons-react' -import InlineCode from '@primer/gatsby-theme-doctocat/src/components/inline-code' - - - - - - - - github.com/primer - - A React implementation of GitHub's Primer Design System - - - - - - - mona - Monalisa Octocat - - - - - - 4 vulnerabilities - - - - - - - -```js -import {ActionList} from '@primer/react/drafts' -``` - -## Examples - -### Minimal example - -```jsx live drafts - - New file - Copy link - Edit file - - Delete file - -``` - -### With leading visual - -Leading visuals are optional and appear at the start of an item. They can be octicons, avatars, and other custom visuals that fit a small area. - - -```jsx live drafts - - - - github.com/primer - - - - 4 vulnerabilities - - - - mona - - - -``` - -### With trailing visual - -Trailing visual and trailing text can display auxiliary information. They're placed at the right of the item, and can denote status, keyboard shortcuts, or be used to set expectations about what the action does. - -```jsx live drafts - - - New file - ⌘ + N - - - Copy link - ⌘ + C - - - Edit file - ⌘ + E - - - Delete file - - - -``` - -### With description and dividers - -Item dividers allow users to parse heavier amounts of information. They're placed between items and are useful in complex lists, particularly when descriptions or multi-line text is present. - -```jsx live drafts - - - - - - mona - Monalisa Octocat - - - - - - hubot - Hubot - - - - - - primer-css - GitHub Design Systems Bot - - -``` - -### With links - -When you want to add links to the List instead of actions, use `ActionList.LinkItem` - - -```jsx live drafts - - - - - - github/primer - - - - - - MIT License - - - - - - 1.4k stars - - -``` - -### With groups - -```javascript live noinline drafts -const SelectFields = () => { - const [options, setOptions] = React.useState([ - {text: 'Status', selected: true}, - {text: 'Stage', selected: true}, - {text: 'Assignee', selected: true}, - {text: 'Team', selected: true}, - {text: 'Estimate', selected: false}, - {text: 'Due Date', selected: false} - ]) - - const visibleOptions = options.filter(option => option.selected) - const hiddenOptions = options.filter(option => !option.selected) - - const toggle = text => { - setOptions( - options.map(option => { - if (option.text === text) option.selected = !option.selected - return option - }) - ) - } - - return ( - - - {visibleOptions.map(option => ( - toggle(option.text)}> - {option.text} - - ))} - - - {hiddenOptions.map((option, index) => ( - toggle(option.text)}> - {option.text} - - ))} - {hiddenOptions.length === 0 && No hidden fields} - - - ) -} - -render() -``` - -## Props - -### ActionList - - - - - inset children are offset (vertically and horizontally) from list edges.{' '} - full children are flush (vertically and horizontally) with list edges - - } - /> - - - AriaRole - } - description={ - <> - ARIA role describing the function of the list. listbox and{' '} - menu are a common values. - - } - /> - - - -### ActionList.Item - - - - - danger indicates that the item is destructive. - - } - /> - - - - AriaRole - } - description={ - <> - ARIA role describing the function of the item. option is a common value. - - } - /> - - - -### ActionList.LinkItem - - - - MDN - } - /> - - -### ActionList.LeadingVisual - - - - - - -### ActionList.TrailingVisual - - - - - - -### ActionList.Description - - - - - inline descriptions are positioned beside primary text. block{' '} - descriptions are positioned below primary text. - - } - /> - - - -### ActionList.Group - - - - - - - inline descriptions are positioned beside primary text. block{' '} - descriptions are positioned below primary text. - - } - /> - - Set selectionVariant at the group level. - - } - /> - AriaRole - } - description={ - <> - ARIA role describing the function of the list inside the group. listbox and{' '} - menu are a common values. - - } - /> - - - -## Status - - - -## Further reading - -- [Interface guidelines: Action List](https://primer.style/design/components/action-list) - -## Related components - -- [ActionMenu](/drafts/ActionMenu2) -- [DropdownMenu](/DropdownMenu) -- [SelectPanel](/SelectPanel) diff --git a/docs/content/drafts/ActionMenu2.mdx b/docs/content/drafts/ActionMenu2.mdx deleted file mode 100644 index 4ccc9b3c5a3..00000000000 --- a/docs/content/drafts/ActionMenu2.mdx +++ /dev/null @@ -1,341 +0,0 @@ ---- -componentId: action_menu2 -title: ActionMenu v2 -status: Alpha -source: https://github.com/primer/react/tree/main/src/ActionMenu -storybook: '/react/storybook?path=/story/composite-components-actionmenu2' -description: An ActionMenu is an ActionList-based component for creating a menu of actions that expands through a trigger button. ---- - -import {Box, Avatar} from '@primer/react' -import {ActionMenu, ActionList} from '@primer/react/drafts' -import {Props} from '../../src/props' - -
- - - - Menu - - - - Copy link - ⌘C - - - Quote reply - ⌘Q - - - Edit comment - ⌘E - - - - Delete file - ⌘D - - - - - - -
- -```js -import {ActionMenu} from '@primer/react/drafts' -``` - -
- -## Examples - -### Minimal example - -`ActionMenu` ships with `ActionMenu.Button` which is an accessible trigger for the overlay. It's recommended to compose `ActionList` with `ActionMenu.Overlay` - -  - -```jsx live drafts - - Menu - - - - console.log('New file')}>New file - Copy link - Edit file - - Delete file - - - -``` - -### With a custom anchor - -You can choose to have a different _anchor_ for the Menu dependending on the application's context. - -  - -```jsx live drafts - - - - - - - - - - - - - - Rename - - - - - - Archive all cards - - - - - - Delete - - - - -``` - -### With Groups - -```jsx live drafts - - Open column menu - - - - - - - - - repo:github/memex,github/github - - - - - - - - - Table - - Information-dense table optimized for operations across teams - - - - - - - Board - Kanban-style board focused on visual states - - - - - - - - - Save sort and filters to current view - - - - - - Save sort and filters to new view - - - - - - - - - View settings - - - - - -``` - -### With selection - -Use `selectionVariant` on `ActionList` to create a menu with single or multiple selection. - -```javascript live noinline drafts -const fieldTypes = [ - {icon: TypographyIcon, name: 'Text'}, - {icon: NumberIcon, name: 'Number'}, - {icon: CalendarIcon, name: 'Date'}, - {icon: SingleSelectIcon, name: 'Single select'}, - {icon: IterationsIcon, name: 'Iteration'} -] - -const Example = () => { - const [selectedIndex, setSelectedIndex] = React.useState(1) - const selectedType = fieldTypes[selectedIndex] - - return ( - - - {selectedType.name} - - - - {fieldTypes.map((type, index) => ( - setSelectedIndex(index)}> - {type.name} - - ))} - - - - ) -} - -render() -``` - -### With External Anchor - -To create an anchor outside of the menu, you need to switch to controlled mode for the menu and pass it as `anchorRef` to `ActionMenu`. Make sure you add `aria-expanded` and `aria-haspopup` to the external anchor: - -```javascript live noinline drafts -const Example = () => { - const [open, setOpen] = React.useState(false) - const anchorRef = React.createRef() - - return ( - <> - - - - - - Copy link - Quote reply - Edit comment - - Delete file - - - - - ) -} - -render() -``` - -### With Overlay Props - -To create an anchor outside of the menu, you need to switch to controlled mode for the menu and pass it as `anchorRef` to `ActionMenu`: - -```javascript live noinline drafts -const handleEscape = () => alert('you hit escape!') - -render( - - Open Actions Menu - - - - Open current Codespace - - Your existing Codespace will be opened to its previous state, and you'll be asked to manually switch to - new-branch. - - ⌘O - - - Create new Codespace - - Create a brand new Codespace with a fresh image and checkout this branch. - - ⌘C - - - - -) -``` - -## Props / API reference - -### ActionMenu - -| Name | Type | Default | Description | -| :----------- | :----------------------------- | :-----: | :----------------------------------------------------------------------------------------------------------------------- | -| children\* | `React.ReactElement[]` | - | Required. Recommended: `ActionMenu.Button` or `ActionMenu.Anchor` with `ActionMenu.Overlay` | -| open | `boolean` | - | Optional. If defined, will control the open/closed state of the overlay. Must be used in conjuction with `onOpenChange`. | -| onOpenChange | `(open: boolean) => void` | - | Optional. If defined, will control the open/closed state of the overlay. Must be used in conjuction with `open`. | -| anchorRef | `React.RefObject` | - | Optional. Useful for defining an external anchor | - -### ActionMenu.Button - -| Type | Default | Description | -| :----------------------------------------------- | :-----: | :---------------------------------------------------------------------------------------------------------------- | -| [Button v2 props](/drafts/Button2#api-reference) | - | You can pass all of the props that you would pass to a [`Button`](/drafts/Button2) component like `variant`, `sx` | - -### ActionMenu.Anchor - -| Name | Type | Default | Description | -| :--------- | :------------------- | :-----: | :-------------------------------- | -| children\* | `React.ReactElement` | - | Required. Accepts a single child. | - -### ActionMenu.Overlay - -| Name | Type | Default | Description | -| :--------------------------------------- | :-------------------- | :-----------------: | :-------------------------------------------------------------------------------------------- | -| children\* | `React.ReactElement[] | React.ReactElement` | Required. Recommended: [`ActionList`](/drafts/ActionList2) | -| [OverlayProps](/Overlay#component-props) | - | - | Optional. Props to be spread on the internal [`AnchoredOverlay`](/AnchoredOverlay) component. | - -## Status - - - -## Further reading - -[Interface guidelines: Action List + Menu](https://primer.style/design/components/action-list) - -## Related components - -- [ActionList](/drafts/ActionList2) -- [SelectPanel](/SelectPanel) -- [Button](/drafts/Button2) diff --git a/docs/content/drafts/DropdownMenu2.mdx b/docs/content/drafts/DropdownMenu2.mdx index 68cd522aa1e..47eba34b758 100644 --- a/docs/content/drafts/DropdownMenu2.mdx +++ b/docs/content/drafts/DropdownMenu2.mdx @@ -7,8 +7,8 @@ storybook: '/react/storybook?path=/story/composite-components-dropdownmenu2' description: Use DropdownMenu to select a single option from a list of menu options. --- -import {Box, Avatar} from '@primer/react' -import {DropdownMenu, ActionList} from '@primer/react/drafts' +import {Box, Avatar, ActionList} from '@primer/react' +import {DropdownMenu} from '@primer/react/drafts' import {Props} from '../../src/props' import State from '../../components/State' import {CalendarIcon, IterationsIcon, NumberIcon, SingleSelectIcon, TypographyIcon} from '@primer/octicons-react' @@ -312,7 +312,7 @@ Use `DropdownMenu` to select an option from a small list. If you’re looking fo description={ <> Recommended:{' '} - + ActionList @@ -359,6 +359,6 @@ Use `DropdownMenu` to select an option from a small list. If you’re looking fo ## Related components -- [ActionList](/drafts/ActionList2) -- [ActionMenu](/ActionMenu2) +- [ActionList](/ActionList) +- [ActionMenu](/ActionMenu) - [SelectPanel](/SelectPanel) diff --git a/docs/src/@primer/gatsby-theme-doctocat/nav.yml b/docs/src/@primer/gatsby-theme-doctocat/nav.yml index 0a313c91e00..68d87527e5e 100644 --- a/docs/src/@primer/gatsby-theme-doctocat/nav.yml +++ b/docs/src/@primer/gatsby-theme-doctocat/nav.yml @@ -35,6 +35,10 @@ # url: /useOverlay - title: Components children: + - title: ActionList + url: /ActionList + - title: ActionMenu + url: /ActionMenu - title: Autocomplete url: /Autocomplete - title: Avatar @@ -143,10 +147,6 @@ url: /drafts/LinkButton - title: IconButton url: /drafts/IconButton - - title: ActionList v2 - url: /drafts/ActionList2 - - title: ActionMenu v2 - url: /drafts/ActionMenu2 - title: Deprecated children: - title: BorderBox @@ -165,3 +165,7 @@ url: /FormGroup - title: SelectMenu url: /deprecated/SelectMenu + - title: ActionList + url: /deprecated/ActionList + - title: ActionMenu + url: /deprecated/ActionMenu diff --git a/src/ActionList2/ActionListContainerContext.tsx b/src/ActionList/ActionListContainerContext.tsx similarity index 100% rename from src/ActionList2/ActionListContainerContext.tsx rename to src/ActionList/ActionListContainerContext.tsx diff --git a/src/ActionList2/Description.tsx b/src/ActionList/Description.tsx similarity index 100% rename from src/ActionList2/Description.tsx rename to src/ActionList/Description.tsx diff --git a/src/ActionList/Divider.tsx b/src/ActionList/Divider.tsx index 0513b60f1ce..e286448eb42 100644 --- a/src/ActionList/Divider.tsx +++ b/src/ActionList/Divider.tsx @@ -1,25 +1,29 @@ import React from 'react' -import styled from 'styled-components' +import Box from '../Box' import {get} from '../constants' - -export const StyledDivider = styled.div` - height: 1px; - background: ${get('colors.border.muted')}; - margin-top: calc(${get('space.2')} - 1px); - margin-bottom: ${get('space.2')}; -` +import {Theme} from '../ThemeProvider' +import {SxProp, merge} from '../sx' /** * Visually separates `Item`s or `Group`s in an `ActionList`. */ -export function Divider(): JSX.Element { - return -} -/** - * `Divider` fulfills the `ItemPropsWithCustomRenderer` contract, - * so it can be used inline in an `ActionList`’s `items` prop. - * In other words, `items={[ActionList.Divider]}` is supported as a concise - * alternative to `items={[{renderItem: () => }]}`. - */ -Divider.renderItem = Divider +export const Divider: React.FC = ({sx = {}}) => { + return ( +