[6.x] KuiContextMenu => EuiContextMenu (#17621)

src/core_plugins/kibana/public/dashboard/panel/__snapshots__/dashboard_panel.test.js.snap

@@ -24,15 +24,36 @@ exports[`DashboardPanel matches snapshot 1`] = `
         class="kuiMicroButtonGroup"
       >
         <div
-          class="kuiPopover kuiPopover--anchorRight dashboardPanelPopOver kuiPopover--withTitle"
+          class="euiPopover euiPopover--anchorDownRight dashboardPanelPopOver euiPopover--withTitle"
         >
-          <span
+          <button
+            aria-controls="panelContextMenu"
+            aria-expanded="false"
             aria-label="Panel options"
-            class="kuiButton__icon kuiIcon panel-dropdown fa fa-gear"
+            class="euiButtonIcon euiButtonIcon--primary"
             data-test-subj="dashboardPanelToggleMenuIcon"
-            role="button"
-            tabindex="0"
-          />
+            type="button"
+          >
+            <svg
+              aria-hidden="true"
+              class="euiIcon euiIcon--medium euiButtonIcon__icon"
+              height="16"
+              viewBox="0 0 16 16"
+              width="16"
+              xmlns="http://www.w3.org/2000/svg"
+              xmlns:xlink="http://www.w3.org/1999/xlink"
+            >
+              <defs>
+                <path
+                  d="M.164 10.329L1.87 8 .163 5.67c.18-.601.43-1.19.758-1.757a8.197 8.197 0 0 1 1.142-1.535l2.872.313L6.099.05a8.166 8.166 0 0 1 3.8-.003l1.166 2.644 2.872-.313a8.166 8.166 0 0 1 1.899 3.293L14.13 8l1.706 2.33c-.18.601-.43 1.19-.758 1.757a8.197 8.197 0 0 1-1.142 1.535l-2.872-.313-1.164 2.641a8.166 8.166 0 0 1-3.8.003l-1.166-2.644-2.872.313a8.166 8.166 0 0 1-1.899-3.293zm4.663 1.986a1 1 0 0 1 1.023.591l.957 2.17c.79.134 1.597.132 2.387-.001l.956-2.169a1 1 0 0 1 1.023-.59l2.358.256a7.23 7.23 0 0 0 1.194-2.068l-1.401-1.913a1 1 0 0 1 0-1.182l1.4-1.912a7.165 7.165 0 0 0-1.192-2.069l-2.359.257a1 1 0 0 1-1.023-.591L9.193.924a7.165 7.165 0 0 0-2.387.001L5.85 3.094a1 1 0 0 1-1.023.59l-2.358-.256a7.23 7.23 0 0 0-1.194 2.068l1.401 1.913a1 1 0 0 1 0 1.182l-1.4 1.912c.28.751.681 1.45 1.192 2.069l2.359-.257zM8 11a3 3 0 1 1 0-6 3 3 0 0 1 0 6zm0-1a2 2 0 1 0 0-4 2 2 0 0 0 0 4z"
+                  id="gear-a"
+                />
+              </defs>
+              <use
+                xlink:href="#gear-a"
+              />
+            </svg>
+          </button>
         </div>
       </div>
     </div>

src/core_plugins/kibana/public/dashboard/panel/panel_header/panel_options_menu.js

@@ -1,13 +1,15 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import {
-  KuiPopover,
-  KuiContextMenu,
-  KuiKeyboardAccessible,
-} from '@kbn/ui-framework/components';
 
 import { PanelOptionsMenuForm } from './panel_options_menu_form';
 
+import {
+  EuiContextMenu,
+  EuiPopover,
+  EuiIcon,
+  EuiButtonIcon,
+} from '@elastic/eui';
+
 export class PanelOptionsMenu extends React.Component {
   state = {
     isPopoverOpen: false
@@ -39,28 +41,25 @@ export class PanelOptionsMenu extends React.Component {
       {
         name: 'Edit visualization',
         'data-test-subj': 'dashboardPanelEditLink',
-        icon: <span
-          aria-hidden="true"
-          className="kuiButton__icon kuiIcon fa-edit"
+        icon: <EuiIcon
+          type="pencil"
         />,
         onClick: this.onEditPanel,
         disabled: !this.props.editUrl,
       },
       {
         name: 'Customize panel',
         'data-test-subj': 'dashboardPanelOptionsSubMenuLink',
-        icon: <span
-          aria-hidden="true"
-          className="kuiButton__icon kuiIcon fa-edit"
+        icon: <EuiIcon
+          type="pencil"
         />,
         panel: 'panelSubOptionsMenu',
       },
       {
         name: isExpanded ? 'Minimize' : 'Full screen',
         'data-test-subj': 'dashboardPanelExpandIcon',
-        icon: <span
-          aria-hidden="true"
-          className={`kuiButton__icon kuiIcon ${isExpanded ? 'fa-compress' : 'fa-expand'}`}
+        icon: <EuiIcon
+          type={isExpanded ? 'expand' : 'expand'}
         />,
         onClick: this.onToggleExpandPanel,
       }
@@ -69,9 +68,8 @@ export class PanelOptionsMenu extends React.Component {
       mainPanelMenuItems.push({
         name: 'Delete from dashboard',
         'data-test-subj': 'dashboardPanelRemoveIcon',
-        icon: <span
-          aria-hidden="true"
-          className="kuiButton__icon kuiIcon fa-trash"
+        icon: <EuiIcon
+          type="trash"
         />,
         onClick: this.onDeletePanel,
       });
@@ -106,31 +104,30 @@ export class PanelOptionsMenu extends React.Component {
 
   render() {
     const button = (
-      <KuiKeyboardAccessible>
-        <span
-          aria-label="Panel options"
-          className="kuiButton__icon kuiIcon panel-dropdown fa fa-gear"
-          data-test-subj="dashboardPanelToggleMenuIcon"
-          onClick={this.toggleMenu}
-        />
-      </KuiKeyboardAccessible>
+      <EuiButtonIcon
+        iconType="gear"
+        aria-label="Panel options"
+        data-test-subj="dashboardPanelToggleMenuIcon"
+        onClick={this.toggleMenu}
+      />
     );
 
     return (
-      <KuiPopover
+      <EuiPopover
+        id="panelContextMenu"
         className="dashboardPanelPopOver"
         button={button}
         isOpen={this.state.isPopoverOpen}
         closePopover={this.closePopover}
         panelPaddingSize="none"
-        anchorPosition="right"
+        anchorPosition="downRight"
         withTitle
       >
-        <KuiContextMenu
+        <EuiContextMenu
           initialPanelId="mainMenu"
           panels={this.renderPanels()}
         />
-      </KuiPopover>
+      </EuiPopover>
     );
   }
 }

src/core_plugins/kibana/public/dashboard/styles/index.less

@@ -23,6 +23,10 @@
   }
 }
 
+.euiContextMenuItem {
+  display: block;
+}
+
 .layout-view {
   /**
    * 1. Due to https://github.com/STRML/react-grid-layout/issues/240 we have to manually hide the resizable