diff --git a/CHANGELOG.md b/CHANGELOG.md index beca0990122..9f03f83ae9b 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -9,6 +9,7 @@ - Added more customization options to `EuiAvatar` ([#903](https://github.com/elastic/eui/pull/903)) - Added more color options to `EuiButtonIcon` ([#907](https://github.com/elastic/eui/pull/907)) - Added icon for EMS (Elastic Map Service) (`emsApp`) ([#914](https://github.com/elastic/eui/pull/914)) +- 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 addba409211..9c8236262ca 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 d8d41821feb..b5c90e2a3f5 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 ac3c16cefdd..ff0f3034929 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
- - - - - + {arrow} + ); + let button; + // elements don't respect the `disabled` attribute. So if we're disabled, we'll just pretend + // this is a button and piggyback off its disabled styles. + if (href && !disabled) { + const secureRel = getSecureRelForTarget(target, rel); + + button = ( + + {buttonInner} + + ); + } else { + button = ( + + ); + } + if (toolTipContent) { return ( { ); - 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(