Switch to euicontextmenu

elastic · May 10, 2018 · 0776422 · 0776422
1 parent 7ee5147
commit 0776422
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 29 deletions.
diff --git a/src/core_plugins/kibana/public/dashboard/panel/panel_header/panel_options_menu.js b/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>
     );
   }
 }

diff --git a/src/core_plugins/kibana/public/dashboard/styles/index.less b/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