Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

KuiContextMenu => EuiContextMenu #17621

Merged
merged 2 commits into from
May 10, 2018
Merged

KuiContextMenu => EuiContextMenu #17621

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
0776422
Switch to euicontextmenu
stacey-gammon Apr 9, 2018
e6a2f32
update jest panel snapshots
stacey-gammon Apr 9, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
33 changes: 27 additions & 6 deletions src/core_plugins/kibana/public/dashboard/panel/__snapshots__/dashboard_panel.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
55 changes: 26 additions & 29 deletions src/core_plugins/kibana/public/dashboard/panel/panel_header/panel_options_menu.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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
Expand Down Expand Up @@ -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,
}
Expand All @@ -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,
});
Expand Down Expand Up @@ -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>
);
}
}
Expand Down
4 changes: 4 additions & 0 deletions src/core_plugins/kibana/public/dashboard/styles/index.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,10 @@
}
}

.euiContextMenuItem {
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is the only thing I'm not sure of. Will see if @snide has any ideas.

display: block;
}

.layout-view {
/**
* 1. Due to https://github.com/STRML/react-grid-layout/issues/240 we have to manually hide the resizable
Expand Down