From e56cc5f2d5fb2334f14230cb391d4ba1353116d7 Mon Sep 17 00:00:00 2001 From: CJ Cenizal Date: Wed, 6 Jun 2018 16:04:09 -0700 Subject: [PATCH] Add support for `href`, `target`, and `rel` properties for `EuiContextMenu` items. --- CHANGELOG.md | 1 + .../src/views/context_menu/context_menu.js | 21 +++--- .../context_menu_item.test.js.snap | 71 +++++++++++++++++++ .../context_menu_panel.test.js.snap | 16 ++--- .../context_menu/_context_menu_item.scss | 1 + .../context_menu/context_menu_item.js | 66 ++++++++++++----- .../context_menu/context_menu_item.test.js | 47 ++++++++++-- 7 files changed, 181 insertions(+), 42 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 4b77f125885f..50839502e406 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -7,6 +7,7 @@ - Added multiple style-only adjustments to `EuiFormControlLayout` buttons/icons ([#894](https://github.com/elastic/eui/pull/894)) - Shifted `readOnly` inputs to not have left padding unless it has an icon ([#894](https://github.com/elastic/eui/pull/894)) - Added more customization options to `EuiAvatar` ([#903](https://github.com/elastic/eui/pull/903)) +- Added support for `href`, `target`, and `rel` properties for `EuiContextMenu` items ([#911](https://github.com/elastic/eui/pull/911)) **Bug fixes** diff --git a/src-docs/src/views/context_menu/context_menu.js b/src-docs/src/views/context_menu/context_menu.js index addba409211c..9c8236262ca2 100644 --- a/src-docs/src/views/context_menu/context_menu.js +++ b/src-docs/src/views/context_menu/context_menu.js @@ -36,9 +36,9 @@ export default class extends Component { const panelTree = { id: 0, - title: 'View options', + title: 'This is a context menu', items: [{ - name: 'Show fullscreen', + name: 'Handle an onClick', icon: ( { this.closePopover(); window.alert('Show fullscreen'); }, }, { - name: 'Share this dashboard', + name: 'Go to a link', + icon: 'user', + href: 'http://elastic.co', + target: '_blank', + }, { + name: 'Nest panels', icon: 'user', panel: { id: 1, - title: 'Share this dashboard', + title: 'Nest panels', items: [{ name: 'PDF reports', icon: 'user', onClick: () => { this.closePopover(); window.alert('PDF reports'); }, - }, { - name: 'CSV reports', - icon: 'user', - onClick: () => { this.closePopover(); window.alert('CSV reports'); }, }, { name: 'Embed code', icon: 'user', @@ -96,10 +97,6 @@ export default class extends Component { onClick: () => { this.closePopover(); window.alert('Permalinks'); }, }], }, - }, { - name: 'Edit / add panels', - icon: 'user', - onClick: () => { this.closePopover(); window.alert('Edit / add panels'); }, }, { name: 'You can add a tooltip', icon: 'user', diff --git a/src/components/context_menu/__snapshots__/context_menu_item.test.js.snap b/src/components/context_menu/__snapshots__/context_menu_item.test.js.snap index d8d41821feb6..b5c90e2a3f5a 100644 --- a/src/components/context_menu/__snapshots__/context_menu_item.test.js.snap +++ b/src/components/context_menu/__snapshots__/context_menu_item.test.js.snap @@ -71,6 +71,23 @@ exports[`EuiContextMenuItem props hasPanel is rendered 1`] = ` `; +exports[`EuiContextMenuItem props href renders a link 1`] = ` + + + + + +`; + exports[`EuiContextMenuItem props icon is rendered 1`] = ` `; + +exports[`EuiContextMenuItem props onClick renders a button 1`] = ` + +`; + +exports[`EuiContextMenuItem props rel is rendered 1`] = ` + + + + + +`; + +exports[`EuiContextMenuItem props target is rendered 1`] = ` + + + + + +`; diff --git a/src/components/context_menu/__snapshots__/context_menu_panel.test.js.snap b/src/components/context_menu/__snapshots__/context_menu_panel.test.js.snap index ac3c16cefddd..ff0f30349292 100644 --- a/src/components/context_menu/__snapshots__/context_menu_panel.test.js.snap +++ b/src/components/context_menu/__snapshots__/context_menu_panel.test.js.snap @@ -117,7 +117,7 @@ exports[`EuiContextMenuPanel updating items and content updates to items should
- - - - - - ); + + ); + } else { + button = ( + + ); + } if (toolTipContent) { return ( diff --git a/src/components/context_menu/context_menu_item.test.js b/src/components/context_menu/context_menu_item.test.js index 5d325a7477ea..9346c186fab8 100644 --- a/src/components/context_menu/context_menu_item.test.js +++ b/src/components/context_menu/context_menu_item.test.js @@ -13,8 +13,7 @@ describe('EuiContextMenuItem', () => { ); - expect(component) - .toMatchSnapshot(); + expect(component).toMatchSnapshot(); }); describe('props', () => { @@ -24,8 +23,7 @@ describe('EuiContextMenuItem', () => { } /> ); - expect(component) - .toMatchSnapshot(); + expect(component).toMatchSnapshot(); }); }); @@ -35,12 +33,19 @@ describe('EuiContextMenuItem', () => { ); - expect(component) - .toMatchSnapshot(); + expect(component).toMatchSnapshot(); }); }); describe('onClick', () => { + test('renders a button', () => { + const component = render( + {}} /> + ); + + expect(component).toMatchSnapshot(); + }); + test(`isn't called upon instantiation`, () => { const onClickHandler = sinon.stub(); @@ -76,6 +81,36 @@ describe('EuiContextMenuItem', () => { }); }); + describe('href', () => { + test('renders a link', () => { + const component = render( + + ); + + expect(component).toMatchSnapshot(); + }); + }); + + describe('rel', () => { + test('is rendered', () => { + const component = render( + + ); + + expect(component).toMatchSnapshot(); + }); + }); + + describe('target', () => { + test('is rendered', () => { + const component = render( + + ); + + expect(component).toMatchSnapshot(); + }); + }); + describe('hasPanel', () => { test('is rendered', () => { const component = render(