From 9bebc902f0c9d2c6d9ec47411250ea20cf038966 Mon Sep 17 00:00:00 2001
From: Nik Tsekouras <ntsekouras@outlook.com>
Date: Mon, 3 Aug 2020 19:34:34 +0300
Subject: [PATCH] Add arrow navigation to Warning dropdown menu (#24333)

* add arrow navigation to warning dropdown menu

* use svg icon directly

* use noIcons DropdownMenu prop
---
 .../src/components/warning/index.js           | 26 +++++++++----------
 1 file changed, 12 insertions(+), 14 deletions(-)

diff --git a/packages/block-editor/src/components/warning/index.js b/packages/block-editor/src/components/warning/index.js
index c49fceb119b64b..62fa9dec5876e3 100644
--- 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>
 				) }