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,