feat: 🎸 add separate { isSeparator: true } interface for h-rule

elastic · Sep 10, 2020 · 39f7f2b · 39f7f2b
1 parent 094f427
commit 39f7f2b
Show file tree

Hide file tree

Showing 4 changed files with 82 additions and 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
@@ -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
@@ -8,6 +8,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"

diff --git a/src/components/context_menu/context_menu.test.tsx b/src/components/context_menu/context_menu.test.tsx
@@ -103,7 +103,7 @@ describe('EuiContextMenu', () => {
             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
@@ -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<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 +295,10 @@ export class EuiContextMenu extends Component<EuiContextMenuProps, State> {
 
   renderItems(items: EuiContextMenuPanelItemDescriptor[] = []) {
     return items.map((item, index) => {
+      if (isItemSeparator(item)) {
+        return <EuiHorizontalRule key={item.key || index} margin="none" />;
+      }
+
       const {
         panel,
         name,