From d2cf7c9b9389c619c647b8e8655e6084cea2104e Mon Sep 17 00:00:00 2001 From: streamich Date: Tue, 8 Sep 2020 12:41:20 +0200 Subject: [PATCH 01/12] =?UTF-8?q?feat:=20=F0=9F=8E=B8=20add=20ability=20to?= =?UTF-8?q?=20add=20separator=20line=20in=20context=20menu?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../context_menu/context_menu_with_content.js | 4 ++ .../__snapshots__/context_menu.test.tsx.snap | 56 +++++++++++++++++++ .../context_menu/context_menu.test.tsx | 21 +++++++ .../context_menu/context_menu_item.tsx | 8 ++- 4 files changed, 88 insertions(+), 1 deletion(-) diff --git a/src-docs/src/views/context_menu/context_menu_with_content.js b/src-docs/src/views/context_menu/context_menu_with_content.js index 1239037c8a7..419c74ee10a 100644 --- a/src-docs/src/views/context_menu/context_menu_with_content.js +++ b/src-docs/src/views/context_menu/context_menu_with_content.js @@ -59,6 +59,10 @@ export default () => { window.alert('Show fullscreen'); }, }, + { + name: 'more-separator', + isLine: true, + }, { name: 'See more', icon: 'plusInCircle', diff --git a/src/components/context_menu/__snapshots__/context_menu.test.tsx.snap b/src/components/context_menu/__snapshots__/context_menu.test.tsx.snap index 85a3236d7bb..fea6feb1a63 100644 --- a/src/components/context_menu/__snapshots__/context_menu.test.tsx.snap +++ b/src/components/context_menu/__snapshots__/context_menu.test.tsx.snap @@ -8,6 +8,62 @@ exports[`EuiContextMenu is rendered 1`] = ` /> `; +exports[`EuiContextMenu panel item can be a separator line 1`] = ` +
+
+
+ + Testing separator + +
+
+
+ +
+ +
+
+
+
+`; + exports[`EuiContextMenu panel item can contain JSX 1`] = `
{ expect(component).toMatchSnapshot(); }); + it('panel item can be a separator line', () => { + const component = render( + + ); + + expect(component).toMatchSnapshot(); + }); + describe('props', () => { describe('panels and initialPanelId', () => { it('renders the referenced panel', () => { diff --git a/src/components/context_menu/context_menu_item.tsx b/src/components/context_menu/context_menu_item.tsx index ef45779ce76..11b25893498 100644 --- a/src/components/context_menu/context_menu_item.tsx +++ b/src/components/context_menu/context_menu_item.tsx @@ -33,6 +33,7 @@ import { EuiIcon } from '../icon'; import { EuiToolTip, ToolTipPositions } from '../tool_tip'; import { getSecureRelForTarget } from '../../services'; +import { EuiHorizontalRule } from '../horizontal_rule'; export type EuiContextMenuItemIcon = ReactElement | string | HTMLElement; @@ -63,6 +64,7 @@ export interface EuiContextMenuItemProps extends CommonProps { * How to align icon with content of button */ layoutAlign?: EuiContextMenuItemLayoutAlignment; + isLine?: boolean; } type Props = CommonProps & @@ -98,11 +100,15 @@ export class EuiContextMenuItem extends Component { href, target, rel, + isLine, ...rest } = this.props; - let iconInstance; + if (isLine) { + return ; + } + if (icon) { switch (typeof icon) { case 'string': From 094f427b342faaea3e75d8529159449b1c32b10a Mon Sep 17 00:00:00 2001 From: streamich Date: Thu, 10 Sep 2020 15:19:45 +0200 Subject: [PATCH 02/12] =?UTF-8?q?fix:=20=F0=9F=90=9B=20set=20buttonRef=20o?= =?UTF-8?q?nly=20on=20ContextMenuItem=20compnents?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/context_menu/context_menu_panel.tsx | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/src/components/context_menu/context_menu_panel.tsx b/src/components/context_menu/context_menu_panel.tsx index c709d62a248..6961aec546b 100644 --- a/src/components/context_menu/context_menu_panel.tsx +++ b/src/components/context_menu/context_menu_panel.tsx @@ -32,6 +32,7 @@ import { EuiIcon } from '../icon'; import { EuiPopoverTitle } from '../popover'; import { EuiResizeObserver } from '../observer/resize_observer'; import { cascadingMenuKeys } from '../../services'; +import { EuiContextMenuItem } from './context_menu_item'; export type EuiContextMenuPanelHeightChangeHandler = (height: number) => void; export type EuiContextMenuPanelTransitionType = 'in' | 'out'; @@ -471,9 +472,11 @@ export class EuiContextMenuPanel extends Component { const content = items && items.length ? items.map((MenuItem, index) => - cloneElement(MenuItem, { - buttonRef: this.menuItemRef.bind(this, index), - }) + MenuItem.type === EuiContextMenuItem + ? cloneElement(MenuItem, { + buttonRef: this.menuItemRef.bind(this, index), + }) + : MenuItem ) : children; From 39f7f2b0ffd4f8a2e9acded859e97d0e33b3c1e7 Mon Sep 17 00:00:00 2001 From: streamich Date: Thu, 10 Sep 2020 15:23:28 +0200 Subject: [PATCH 03/12] =?UTF-8?q?feat:=20=F0=9F=8E=B8=20add=20separate=20{?= =?UTF-8?q?=20isSeparator:=20true=20}=20interface=20for=20h-rule?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../context_menu/context_menu_with_content.js | 3 +- .../context_menu_panel.test.tsx.snap | 56 +++++++++++++++++++ .../context_menu/context_menu.test.tsx | 2 +- src/components/context_menu/context_menu.tsx | 26 ++++++++- 4 files changed, 82 insertions(+), 5 deletions(-) diff --git a/src-docs/src/views/context_menu/context_menu_with_content.js b/src-docs/src/views/context_menu/context_menu_with_content.js index 419c74ee10a..8ea3ad52e3b 100644 --- a/src-docs/src/views/context_menu/context_menu_with_content.js +++ b/src-docs/src/views/context_menu/context_menu_with_content.js @@ -60,8 +60,7 @@ export default () => { }, }, { - name: 'more-separator', - isLine: true, + isSeparator: true, }, { name: 'See more', diff --git a/src/components/context_menu/__snapshots__/context_menu_panel.test.tsx.snap b/src/components/context_menu/__snapshots__/context_menu_panel.test.tsx.snap index f786ba06ce3..1c0247290be 100644 --- a/src/components/context_menu/__snapshots__/context_menu_panel.test.tsx.snap +++ b/src/components/context_menu/__snapshots__/context_menu_panel.test.tsx.snap @@ -8,6 +8,62 @@ exports[`EuiContextMenu is rendered 1`] = ` /> `; +exports[`EuiContextMenu panel item can be a separator line 1`] = ` +
+
+
+ + Testing separator + +
+
+
+ +
+ +
+
+
+
+`; + exports[`EuiContextMenu panel item can contain JSX 1`] = `
{ title: 'Testing separator', items: [ { name: 'Foo', key: 'foo' }, - { isLine: true, name: 'separator' }, + { isSeparator: true }, { name: 'Bar', key: 'bar' }, ], }, diff --git a/src/components/context_menu/context_menu.tsx b/src/components/context_menu/context_menu.tsx index c51fe3fc8d6..cbd7eb9485b 100644 --- a/src/components/context_menu/context_menu.tsx +++ b/src/components/context_menu/context_menu.tsx @@ -35,10 +35,11 @@ import { EuiContextMenuItem, EuiContextMenuItemProps, } from './context_menu_item'; +import { EuiHorizontalRule } from '../horizontal_rule'; export type EuiContextMenuPanelId = string | number; -export type EuiContextMenuPanelItemDescriptor = Omit< +export type EuiContextMenuPanelItemDescriptorEntry = Omit< EuiContextMenuItemProps, 'hasPanel' > & { @@ -47,6 +48,15 @@ export type EuiContextMenuPanelItemDescriptor = Omit< panel?: EuiContextMenuPanelId; }; +export interface EuiContextMenuPanelItemSeparator { + isSeparator: true; + key?: string; +} + +export type EuiContextMenuPanelItemDescriptor = + | EuiContextMenuPanelItemDescriptorEntry + | EuiContextMenuPanelItemSeparator; + export interface EuiContextMenuPanelDescriptor { id: EuiContextMenuPanelId; title?: string; @@ -61,6 +71,11 @@ export type EuiContextMenuProps = CommonProps & initialPanelId?: EuiContextMenuPanelId; }; +const isItemSeparator = ( + item: EuiContextMenuPanelItemDescriptor +): item is EuiContextMenuPanelItemSeparator => + (item as EuiContextMenuPanelItemSeparator).isSeparator === true; + function mapIdsToPanels(panels: EuiContextMenuPanelDescriptor[]) { const map: { [id: string]: EuiContextMenuPanelDescriptor } = {}; @@ -77,6 +92,7 @@ function mapIdsToPreviousPanels(panels: EuiContextMenuPanelDescriptor[]) { panels.forEach(panel => { if (Array.isArray(panel.items)) { panel.items.forEach(item => { + if (isItemSeparator(item)) return; const isCloseable = item.panel !== undefined; if (isCloseable) { idToPreviousPanelIdMap[item.panel!] = panel.id; @@ -98,6 +114,7 @@ function mapPanelItemsToPanels(panels: EuiContextMenuPanelDescriptor[]) { if (panel.items) { panel.items.forEach((item, index) => { + if (isItemSeparator(item)) return; if (item.panel) { idAndItemIndexToPanelIdMap[panel.id][index] = item.panel; } @@ -227,7 +244,8 @@ export class EuiContextMenu extends Component { // Set focus on the item which shows the panel we're leaving. const previousPanel = this.state.idToPanelMap[previousPanelId]; const focusedItemIndex = previousPanel.items!.findIndex( - item => item.panel === this.state.incomingPanelId + item => + !isItemSeparator(item) && item.panel === this.state.incomingPanelId ); if (focusedItemIndex !== -1) { @@ -277,6 +295,10 @@ export class EuiContextMenu extends Component { renderItems(items: EuiContextMenuPanelItemDescriptor[] = []) { return items.map((item, index) => { + if (isItemSeparator(item)) { + return ; + } + const { panel, name, From 4fad887213672027178dafe9a89b953a39409237 Mon Sep 17 00:00:00 2001 From: streamich Date: Thu, 10 Sep 2020 15:34:58 +0200 Subject: [PATCH 04/12] =?UTF-8?q?chore:=20=F0=9F=A4=96=20delete=20unused?= =?UTF-8?q?=20prop?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/context_menu/context_menu_item.tsx | 7 ------- 1 file changed, 7 deletions(-) diff --git a/src/components/context_menu/context_menu_item.tsx b/src/components/context_menu/context_menu_item.tsx index 11b25893498..a3e2d457fe7 100644 --- a/src/components/context_menu/context_menu_item.tsx +++ b/src/components/context_menu/context_menu_item.tsx @@ -33,7 +33,6 @@ import { EuiIcon } from '../icon'; import { EuiToolTip, ToolTipPositions } from '../tool_tip'; import { getSecureRelForTarget } from '../../services'; -import { EuiHorizontalRule } from '../horizontal_rule'; export type EuiContextMenuItemIcon = ReactElement | string | HTMLElement; @@ -64,7 +63,6 @@ export interface EuiContextMenuItemProps extends CommonProps { * How to align icon with content of button */ layoutAlign?: EuiContextMenuItemLayoutAlignment; - isLine?: boolean; } type Props = CommonProps & @@ -100,15 +98,10 @@ export class EuiContextMenuItem extends Component { href, target, rel, - isLine, ...rest } = this.props; let iconInstance; - if (isLine) { - return ; - } - if (icon) { switch (typeof icon) { case 'string': From 5408553f1aa1df5fe4a6ae52541cf92c9fd643a5 Mon Sep 17 00:00:00 2001 From: streamich Date: Thu, 10 Sep 2020 17:32:36 +0200 Subject: [PATCH 05/12] =?UTF-8?q?feat:=20=F0=9F=8E=B8=20pass-through=20Eui?= =?UTF-8?q?HorizontalRule=20props?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../context_menu/context_menu_with_content.js | 2 ++ .../__snapshots__/context_menu.test.tsx.snap | 30 ++++++++++++++++++- .../context_menu_panel.test.tsx.snap | 30 ++++++++++++++++++- .../context_menu/context_menu.test.tsx | 24 +++++++++++++++ src/components/context_menu/context_menu.tsx | 8 +++-- src/components/horizontal_rule/index.ts | 2 +- 6 files changed, 90 insertions(+), 6 deletions(-) diff --git a/src-docs/src/views/context_menu/context_menu_with_content.js b/src-docs/src/views/context_menu/context_menu_with_content.js index 8ea3ad52e3b..b93834faf2a 100644 --- a/src-docs/src/views/context_menu/context_menu_with_content.js +++ b/src-docs/src/views/context_menu/context_menu_with_content.js @@ -61,6 +61,8 @@ export default () => { }, { isSeparator: true, + key: 'sep', + margin: 'none', }, { name: 'See more', diff --git a/src/components/context_menu/__snapshots__/context_menu.test.tsx.snap b/src/components/context_menu/__snapshots__/context_menu.test.tsx.snap index fea6feb1a63..2c868027461 100644 --- a/src/components/context_menu/__snapshots__/context_menu.test.tsx.snap +++ b/src/components/context_menu/__snapshots__/context_menu.test.tsx.snap @@ -1,5 +1,33 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP +exports[`EuiContextMenu can pass-through horizontal rule props 1`] = ` +
+
+
+ + Testing separator + +
+
+
+
+
+
+
+
+`; + exports[`EuiContextMenu is rendered 1`] = `
+`; + exports[`EuiContextMenu is rendered 1`] = `
), demo: , From de6cc5e0aaa2ed386084d9e6a3c03c2c716173ed Mon Sep 17 00:00:00 2001 From: Chandler Prall Date: Mon, 14 Sep 2020 11:09:51 -0600 Subject: [PATCH 09/12] Refactored EuiHorizontalRuleProps to contain the full set of accepted props --- src/components/horizontal_rule/horizontal_rule.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/components/horizontal_rule/horizontal_rule.tsx b/src/components/horizontal_rule/horizontal_rule.tsx index c9bf997db9b..f3b571acb04 100644 --- a/src/components/horizontal_rule/horizontal_rule.tsx +++ b/src/components/horizontal_rule/horizontal_rule.tsx @@ -25,7 +25,9 @@ import { CommonProps } from '../common'; export type EuiHorizontalRuleSize = keyof typeof sizeToClassNameMap; export type EuiHorizontalRuleMargin = keyof typeof marginToClassNameMap; -export interface EuiHorizontalRuleProps { +export interface EuiHorizontalRuleProps + extends CommonProps, + HTMLAttributes { /** * Defines the width of the HR. */ @@ -53,9 +55,7 @@ const marginToClassNameMap = { export const MARGINS = Object.keys(marginToClassNameMap); -export const EuiHorizontalRule: FunctionComponent & - EuiHorizontalRuleProps> = ({ +export const EuiHorizontalRule: FunctionComponent = ({ className, size = 'full', margin = 'l', From 41b0c11879bc15152f174f64876e37bbe0b3931a Mon Sep 17 00:00:00 2001 From: Vadim Dalecky Date: Tue, 15 Sep 2020 10:58:03 +0200 Subject: [PATCH 10/12] Update src-docs/src/views/context_menu/context_menu_example.js Co-authored-by: Caroline Horn <549577+cchaos@users.noreply.github.com> --- src-docs/src/views/context_menu/context_menu_example.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src-docs/src/views/context_menu/context_menu_example.js b/src-docs/src/views/context_menu/context_menu_example.js index 17a95fade98..5d33a94375e 100644 --- a/src-docs/src/views/context_menu/context_menu_example.js +++ b/src-docs/src/views/context_menu/context_menu_example.js @@ -124,10 +124,10 @@ export const ContextMenuExample = { panel tree.

- You can add separator lines through items prop if - you define items as{' '} - {'{isSeparator: true}'}. Separator - passes through rest of its fields as props to{' '} + You can add separator lines in the items prop if + you define an items as{' '} + {'{isSeparator: true}'}. This will + pass the rest of its fields as props to a{' '} EuiHorizontalRule {' '} From 0df852bd978f2c4bd7fdb100fab566a483d82f46 Mon Sep 17 00:00:00 2001 From: streamich Date: Tue, 15 Sep 2020 11:01:26 +0200 Subject: [PATCH 11/12] =?UTF-8?q?docs:=20=E2=9C=8F=EF=B8=8F=20update=20doc?= =?UTF-8?q?s=20as=20per=20review?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/views/context_menu/context_menu_example.js | 11 ++--------- 1 file changed, 2 insertions(+), 9 deletions(-) diff --git a/src-docs/src/views/context_menu/context_menu_example.js b/src-docs/src/views/context_menu/context_menu_example.js index 5d33a94375e..3426bde4315 100644 --- a/src-docs/src/views/context_menu/context_menu_example.js +++ b/src-docs/src/views/context_menu/context_menu_example.js @@ -10,7 +10,6 @@ import { EuiContextMenu, EuiContextMenuItem, EuiContextMenuPanel, - EuiLink, } from '../../../../src/components'; import ContextMenu from './context_menu'; @@ -125,19 +124,13 @@ export const ContextMenuExample = {

You can add separator lines in the items prop if - you define an items as{' '} + you define an item as{' '} {'{isSeparator: true}'}. This will pass the rest of its fields as props to a{' '} EuiHorizontalRule {' '} - component. Separators can also have a{' '} - - key prop - - , used by React for list rendering. + component.

), From 309c77ac6b93c88bb46391c4d9fd508d00f5c8c3 Mon Sep 17 00:00:00 2001 From: streamich Date: Tue, 15 Sep 2020 11:04:36 +0200 Subject: [PATCH 12/12] =?UTF-8?q?feat:=20=F0=9F=8E=B8=20wrap=20context=20m?= =?UTF-8?q?enu=20item=20interface=20in=20ExclusiveUnion?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/context_menu/context_menu.tsx | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/src/components/context_menu/context_menu.tsx b/src/components/context_menu/context_menu.tsx index 6c6a098451e..fa87b807ce2 100644 --- a/src/components/context_menu/context_menu.tsx +++ b/src/components/context_menu/context_menu.tsx @@ -25,7 +25,7 @@ import React, { } from 'react'; import classNames from 'classnames'; -import { CommonProps } from '../common'; +import { CommonProps, ExclusiveUnion } from '../common'; import { EuiContextMenuPanel, EuiContextMenuPanelTransitionDirection, @@ -54,9 +54,10 @@ export interface EuiContextMenuPanelItemSeparator key?: string; } -export type EuiContextMenuPanelItemDescriptor = - | EuiContextMenuPanelItemDescriptorEntry - | EuiContextMenuPanelItemSeparator; +export type EuiContextMenuPanelItemDescriptor = ExclusiveUnion< + EuiContextMenuPanelItemDescriptorEntry, + EuiContextMenuPanelItemSeparator +>; export interface EuiContextMenuPanelDescriptor { id: EuiContextMenuPanelId;