[EuiContextMenu] Add line separator as menu item

CHANGELOG.md

@@ -1,6 +1,7 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
 - Added `.browserslistrc` for global browser support reference ([#4022](https://github.com/elastic/eui/pull/4022))
+- Added horizontal line separator to `EuiContextMenu` ([#4018](https://github.com/elastic/eui/pull/4018))
 
 **Bug fixes**
 

src-docs/src/views/context_menu/context_menu_example.js

@@ -8,8 +8,9 @@ import { GuideSectionTypes } from '../../components';
 import {
   EuiCode,
   EuiContextMenu,
-  EuiContextMenuPanel,
   EuiContextMenuItem,
+  EuiContextMenuPanel,
+  EuiLink,
 } from '../../../../src/components';
 
 import ContextMenu from './context_menu';
@@ -122,6 +123,22 @@ export const ContextMenuExample = {
             <EuiCode language="ts">width: [number of pixels]</EuiCode> to the
             panel tree.
           </p>
+          <p>
+            You can add separator lines through <EuiCode>items</EuiCode> prop if
+            you define items as{' '}
+            <EuiCode language="ts">{'{isSeparator: true}'}</EuiCode>. Separator
+            passes through rest of its fields as props to{' '}
+            <Link to="/layout/horizontal-rule">
+              <strong>EuiHorizontalRule</strong>
+            </Link>{' '}
+            component. Separators can also have a{' '}
+            <EuiLink
+              href="https://reactjs.org/docs/lists-and-keys.html#keys"
+              target="_blank">
+              <EuiCode>key</EuiCode> prop
+            </EuiLink>
+            , used by React for list rendering.
+          </p>
         </div>
       ),
       demo: <ContextMenuWithContent />,

src-docs/src/views/context_menu/context_menu_with_content.js

@@ -59,6 +59,10 @@ export default () => {
             window.alert('Show fullscreen');
           },
         },
+        {
+          isSeparator: true,
+          key: 'sep',
+        },
         {
           name: 'See more',
           icon: 'plusInCircle',

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`] = `
+<div
+  class="euiContextMenu"
+>
+  <div
+    class="euiContextMenuPanel euiContextMenu__panel"
+    tabindex="0"
+  >
+    <div
+      class="euiPopoverTitle"
+    >
+      <span
+        class="euiContextMenu__itemLayout"
+      >
+        Testing separator
+      </span>
+    </div>
+    <div>
+      <div>
+        <hr
+          class="euiHorizontalRule euiHorizontalRule--half euiHorizontalRule--marginSmall"
+        />
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
 exports[`EuiContextMenu is rendered 1`] = `
 <div
   aria-label="aria-label"
@@ -8,6 +36,62 @@ exports[`EuiContextMenu is rendered 1`] = `
 />
 `;
 
+exports[`EuiContextMenu panel item can be a separator line 1`] = `
+<div
+  class="euiContextMenu"
+>
+  <div
+    class="euiContextMenuPanel euiContextMenu__panel"
+    tabindex="0"
+  >
+    <div
+      class="euiPopoverTitle"
+    >
+      <span
+        class="euiContextMenu__itemLayout"
+      >
+        Testing separator
+      </span>
+    </div>
+    <div>
+      <div>
+        <button
+          class="euiContextMenuItem"
+          type="button"
+        >
+          <span
+            class="euiContextMenu__itemLayout"
+          >
+            <span
+              class="euiContextMenuItem__text"
+            >
+              Foo
+            </span>
+          </span>
+        </button>
+        <hr
+          class="euiHorizontalRule euiHorizontalRule--full"
+        />
+        <button
+          class="euiContextMenuItem"
+          type="button"
+        >
+          <span
+            class="euiContextMenu__itemLayout"
+          >
+            <span
+              class="euiContextMenuItem__text"
+            >
+              Bar
+            </span>
+          </span>
+        </button>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
 exports[`EuiContextMenu panel item can contain JSX 1`] = `
 <div
   class="euiContextMenu"

src/components/context_menu/__snapshots__/context_menu_panel.test.tsx.snap

@@ -1,5 +1,33 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`EuiContextMenu can pass-through horizontal rule props 1`] = `
+<div
+  class="euiContextMenu"
+>
+  <div
+    class="euiContextMenuPanel euiContextMenu__panel"
+    tabindex="0"
+  >
+    <div
+      class="euiPopoverTitle"
+    >
+      <span
+        class="euiContextMenu__itemLayout"
+      >
+        Testing separator
+      </span>
+    </div>
+    <div>
+      <div>
+        <hr
+          class="euiHorizontalRule euiHorizontalRule--half euiHorizontalRule--marginSmall"
+        />
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
 exports[`EuiContextMenu is rendered 1`] = `
 <div
   aria-label="aria-label"
@@ -8,6 +36,62 @@ exports[`EuiContextMenu is rendered 1`] = `
 />
 `;
 
+exports[`EuiContextMenu panel item can be a separator line 1`] = `
+<div
+  class="euiContextMenu"
+>
+  <div
+    class="euiContextMenuPanel euiContextMenu__panel"
+    tabindex="0"
+  >
+    <div
+      class="euiPopoverTitle"
+    >
+      <span
+        class="euiContextMenu__itemLayout"
+      >
+        Testing separator
+      </span>
+    </div>
+    <div>
+      <div>
+        <button
+          class="euiContextMenuItem"
+          type="button"
+        >
+          <span
+            class="euiContextMenu__itemLayout"
+          >
+            <span
+              class="euiContextMenuItem__text"
+            >
+              Foo
+            </span>
+          </span>
+        </button>
+        <hr
+          class="euiHorizontalRule euiHorizontalRule--full"
+        />
+        <button
+          class="euiContextMenuItem"
+          type="button"
+        >
+          <span
+            class="euiContextMenu__itemLayout"
+          >
+            <span
+              class="euiContextMenuItem__text"
+            >
+              Bar
+            </span>
+          </span>
+        </button>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
 exports[`EuiContextMenu panel item can contain JSX 1`] = `
 <div
   class="euiContextMenu"

src/components/context_menu/context_menu.test.tsx

@@ -94,6 +94,51 @@ describe('EuiContextMenu', () => {
     expect(component).toMatchSnapshot();
   });
 
+  it('panel item can be a separator line', () => {
+    const component = render(
+      <EuiContextMenu
+        panels={[
+          {
+            id: 3,
+            title: 'Testing separator',
+            items: [
+              { name: 'Foo', key: 'foo' },
+              { isSeparator: true },
+              { name: 'Bar', key: 'bar' },
+            ],
+          },
+        ]}
+        initialPanelId={3}
+      />
+    );
+
+    expect(component).toMatchSnapshot();
+  });
+
+  it('can pass-through horizontal rule props', () => {
+    const component = render(
+      <EuiContextMenu
+        panels={[
+          {
+            id: 3,
+            title: 'Testing separator',
+            items: [
+              {
+                isSeparator: true,
+                key: 'separator',
+                margin: 's',
+                size: 'half',
+              },
+            ],
+          },
+        ]}
+        initialPanelId={3}
+      />
+    );
+
+    expect(component).toMatchSnapshot();
+  });
+
   describe('props', () => {
     describe('panels and initialPanelId', () => {
       it('renders the referenced panel', () => {

src/components/context_menu/context_menu.tsx

@@ -35,10 +35,11 @@ import {
   EuiContextMenuItem,
   EuiContextMenuItemProps,
 } from './context_menu_item';
+import { EuiHorizontalRule, EuiHorizontalRuleProps } from '../horizontal_rule';
 
 export type EuiContextMenuPanelId = string | number;
 
-export type EuiContextMenuPanelItemDescriptor = Omit<
+export type EuiContextMenuPanelItemDescriptorEntry = Omit<
   EuiContextMenuItemProps,
   'hasPanel'
 > & {
@@ -47,6 +48,16 @@ export type EuiContextMenuPanelItemDescriptor = Omit<
   panel?: EuiContextMenuPanelId;
 };
 
+export interface EuiContextMenuPanelItemSeparator
+  extends EuiHorizontalRuleProps {
+  isSeparator: true;
+  key?: string;
+}
+
+export type EuiContextMenuPanelItemDescriptor =
+  | EuiContextMenuPanelItemDescriptorEntry
+  | EuiContextMenuPanelItemSeparator;
+
 export interface EuiContextMenuPanelDescriptor {
   id: EuiContextMenuPanelId;
   title?: string;
@@ -61,6 +72,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 +93,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 +115,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 +245,8 @@ export class EuiContextMenu extends Component<EuiContextMenuProps, State> {
       // 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 +296,11 @@ export class EuiContextMenu extends Component<EuiContextMenuProps, State> {
 
   renderItems(items: EuiContextMenuPanelItemDescriptor[] = []) {
     return items.map((item, index) => {
+      if (isItemSeparator(item)) {
+        const { isSeparator: omit, key = index, ...rest } = item;
+        return <EuiHorizontalRule key={key} margin="none" {...rest} />;
+      }
+
       const {
         panel,
         name,

src/components/context_menu/context_menu_item.tsx

@@ -100,7 +100,6 @@ export class EuiContextMenuItem extends Component<Props> {
       rel,
       ...rest
     } = this.props;
-
     let iconInstance;
 
     if (icon) {