Context menu allow jsx (#2817)

* feat: 🎸 allow <ContextMenu> items to render any JSX * test: 💍 add Jest snapshot * docs: ✏️ add entry to CHANGELOG.md * docs: ✏️ fix typo in CHANGELOG.md
elastic · Feb 3, 2020 · 14df13c · 14df13c
1 parent a83c853
commit 14df13c
Show file tree

Hide file tree

Showing 5 changed files with 111 additions and 3 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -6,6 +6,7 @@
 - Changed SASS comments to non-compiled comments in invisibles files ([#2807](https://github.com/elastic/eui/pull/2807))
 - Added `rowHeader` prop to `EuiBasicTable` to allow consumers to set the identifying cell in a row ([#2802](https://github.com/elastic/eui/pull/2802))
 - Improved `EuiDescribedFormGroup` accessibility by avoiding duplicated output in screen readers ([#2783](https://github.com/elastic/eui/pull/2783))
+- Added optional `key` attribute to `EuiContextMenu` items and relaxed `name` attribute to allow any React node ([#2817](https://github.com/elastic/eui/pull/2817))
 
 **Bug fixes**
 

diff --git 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,49 @@ exports[`EuiContextMenu is rendered 1`] = `
 />
 `;
 
+exports[`EuiContextMenu panel item can contain JSX 1`] = `
+<div
+  class="euiContextMenu"
+>
+  <div
+    class="euiContextMenuPanel euiContextMenu__panel"
+    tabindex="0"
+  >
+    <div
+      class="euiPopoverTitle"
+    >
+      <span
+        class="euiContextMenu__itemLayout"
+      >
+        3
+      </span>
+    </div>
+    <div>
+      <div>
+        <button
+          class="euiContextMenuItem"
+          type="button"
+        >
+          <span
+            class="euiContextMenu__itemLayout"
+          >
+            <span
+              class="euiContextMenuItem__text"
+            >
+              <span
+                style="color:tomato"
+              >
+                foo
+              </span>
+            </span>
+          </span>
+        </button>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
 exports[`EuiContextMenu props panels and initialPanelId allows you to click the title button to go back to the previous panel 1`] = `
 <div
   class="euiContextMenu"

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,49 @@ exports[`EuiContextMenu is rendered 1`] = `
 />
 `;
 
+exports[`EuiContextMenu panel item can contain JSX 1`] = `
+<div
+  class="euiContextMenu"
+>
+  <div
+    class="euiContextMenuPanel euiContextMenu__panel"
+    tabindex="0"
+  >
+    <div
+      class="euiPopoverTitle"
+    >
+      <span
+        class="euiContextMenu__itemLayout"
+      >
+        3
+      </span>
+    </div>
+    <div>
+      <div>
+        <button
+          class="euiContextMenuItem"
+          type="button"
+        >
+          <span
+            class="euiContextMenu__itemLayout"
+          >
+            <span
+              class="euiContextMenuItem__text"
+            >
+              <span
+                style="color:tomato"
+              >
+                foo
+              </span>
+            </span>
+          </span>
+        </button>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
 exports[`EuiContextMenu props panels and initialPanelId allows you to click the title button to go back to the previous panel 1`] = `
 <div
   class="euiContextMenu"

diff --git a/src/components/context_menu/context_menu.test.tsx b/src/components/context_menu/context_menu.test.tsx
@@ -5,6 +5,17 @@ import { requiredProps, takeMountedSnapshot } from '../../test';
 import { EuiContextMenu } from './context_menu';
 import { setTimeout } from 'timers';
 
+const panel3 = {
+  id: 3,
+  title: '3',
+  items: [
+    {
+      name: <span style={{ color: 'tomato' }}>foo</span>,
+      key: 'foo',
+    },
+  ],
+};
+
 const panel2 = {
   id: 2,
   title: '2',
@@ -42,7 +53,7 @@ const panel0 = {
   ],
 };
 
-const panels = [panel0, panel1, panel2];
+const panels = [panel0, panel1, panel2, panel3];
 
 export const tick = (ms = 0) =>
   new Promise(resolve => {
@@ -56,6 +67,14 @@ describe('EuiContextMenu', () => {
     expect(component).toMatchSnapshot();
   });
 
+  it('panel item can contain JSX', () => {
+    const component = render(
+      <EuiContextMenu panels={panels} initialPanelId={3} />
+    );
+
+    expect(component).toMatchSnapshot();
+  });
+
   describe('props', () => {
     describe('panels and initialPanelId', () => {
       it('renders the referenced panel', () => {

diff --git a/src/components/context_menu/context_menu.tsx b/src/components/context_menu/context_menu.tsx
@@ -23,7 +23,8 @@ export type EuiContextMenuPanelItemDescriptor = Omit<
   EuiContextMenuItemProps,
   'hasPanel'
 > & {
-  name: string;
+  name: React.ReactNode;
+  key?: string;
   panel?: EuiContextMenuPanelId;
 };
 
@@ -260,6 +261,7 @@ export class EuiContextMenu extends Component<EuiContextMenuProps, State> {
       const {
         panel,
         name,
+        key,
         icon,
         onClick,
         toolTipTitle,
@@ -285,7 +287,7 @@ export class EuiContextMenu extends Component<EuiContextMenuProps, State> {
 
       return (
         <EuiContextMenuItem
-          key={name}
+          key={key || (typeof name === 'string' ? name : undefined) || index}
           icon={icon}
           onClick={onClickHandler}
           hasPanel={Boolean(panel)}