Add arrow navigation to Warning dropdown menu (#24333)

* add arrow navigation to warning dropdown menu * use svg icon directly * use noIcons DropdownMenu prop
WordPress · Aug 3, 2020 · 9bebc90 · 9bebc90
1 parent 8d6a3e6
commit 9bebc90
Showing 1 changed file with 12 additions and 14 deletions.
diff --git a/packages/block-editor/src/components/warning/index.js b/packages/block-editor/src/components/warning/index.js
@@ -7,7 +7,7 @@ import classnames from 'classnames';
  * WordPress dependencies
  */
 import { Children } from '@wordpress/element';
-import { Dropdown, Button, MenuGroup, MenuItem } from '@wordpress/components';
+import { DropdownMenu, MenuGroup, MenuItem } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { moreHorizontal } from '@wordpress/icons';
 
@@ -29,19 +29,17 @@ function Warning( { className, actions, children, secondaryActions } ) {
 								</span>
 							) ) }
 						{ secondaryActions && (
-							<Dropdown
+							<DropdownMenu
 								className="block-editor-warning__secondary"
-								contentClassName="block-editor-warning__dropdown"
-								position="bottom left"
-								renderToggle={ ( { isOpen, onToggle } ) => (
-									<Button
-										icon={ moreHorizontal }
-										label={ __( 'More options' ) }
-										onClick={ onToggle }
-										aria-expanded={ isOpen }
-									/>
-								) }
-								renderContent={ () => (
+								icon={ moreHorizontal }
+								label={ __( 'More options' ) }
+								popoverProps={ {
+									position: 'bottom left',
+									className: 'block-editor-warning__dropdown',
+								} }
+								noIcons
+							>
+								{ () => (
 									<MenuGroup>
 										{ secondaryActions.map(
 											( item, pos ) => (
@@ -55,7 +53,7 @@ function Warning( { className, actions, children, secondaryActions } ) {
 										) }
 									</MenuGroup>
 								) }
-							/>
+							</DropdownMenu>
 						) }
 					</div>
 				) }