Merge 1054fd1 into 8f7186a

.changeset/nine-news-walk.md

@@ -0,0 +1,7 @@
+---
+'@primer/react': major
+---
+
+Remove `DropdownButton` and `DropdownMenu` from deprecated and update the usages across
+
+<!-- Changed components: SelectPanel, ActionList -->

docs/content/deprecated/ActionList.mdx

@@ -4,7 +4,7 @@ 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`.
+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 and `ActionMenu`.
 
 ## Deprecation
 

docs/src/@primer/gatsby-theme-doctocat/nav.yml

@@ -176,8 +176,6 @@
       url: /deprecated/ActionMenu
     - title: Buttons (legacy)
       url: /deprecated/Buttons
-    - title: DropdownMenu
-      url: /deprecated/DropdownMenu
     - title: FilteredSearch
       url: /deprecated/FilteredSearch
     - title: FilterList

src/ActionList/Item.tsx

@@ -61,7 +61,7 @@ export const Item = React.forwardRef<HTMLLIElement, ActionListItemProps>(
 
     /** Infer item role based on the container */
     let itemRole: ActionListItemProps['role']
-    if (container === 'ActionMenu' || container === 'DropdownMenu') {
+    if (container === 'ActionMenu') {
       if (selectionVariant === 'single') itemRole = 'menuitemradio'
       else if (selectionVariant === 'multiple') itemRole = 'menuitemcheckbox'
       else itemRole = 'menuitem'

src/SelectPanel/SelectPanel.tsx

@@ -1,4 +1,4 @@
-import {SearchIcon} from '@primer/octicons-react'
+import {SearchIcon, TriangleDownIcon} from '@primer/octicons-react'
 import React, {useCallback, useMemo} from 'react'
 import {AnchoredOverlay, AnchoredOverlayProps} from '../AnchoredOverlay'
 import {AnchoredOverlayWrapperAnchorProps} from '../AnchoredOverlay/AnchoredOverlay'
@@ -9,7 +9,7 @@ import {OverlayProps} from '../Overlay'
 import {TextInputProps} from '../TextInput'
 import {ItemProps} from '../deprecated/ActionList'
 import {ItemInput} from '../deprecated/ActionList/List'
-import {DropdownButton} from '../deprecated/DropdownMenu'
+import {Button} from '../Button'
 import {useProvidedRefOrCreate} from '../hooks'
 import {FocusZoneHookSettings} from '../hooks/useFocusZone'
 import {useId} from '../hooks/useId'
@@ -60,7 +60,14 @@ const focusZoneSettings: Partial<FocusZoneHookSettings> = {
 export function SelectPanel({
   open,
   onOpenChange,
-  renderAnchor = props => <DropdownButton {...props} />,
+  renderAnchor = props => {
+    const {children, ...rest} = props
+    return (
+      <Button trailingAction={TriangleDownIcon} {...rest}>
+        {children}
+      </Button>
+    )
+  },
   anchorRef: externalAnchorRef,
   placeholder,
   placeholderText = 'Filter items',