[EuiContextMenu] Add size prop

CHANGELOG.md

@@ -2,6 +2,7 @@
 
 - Reduced the size of the icons and clear button for compressed `EuiFormControlLayout` ([#4374](https://github.com/elastic/eui/pull/4374))
 - Added ability for text input updates in `EuiDatePicker` ([#4243](https://github.com/elastic/eui/pull/4243))
+- Added `size` prop to `EuiContextMenu` ([#4409](https://github.com/elastic/eui/pull/4409))
 
 ## [`31.0.0`](https://github.com/elastic/eui/tree/v31.0.0)
 

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

@@ -20,6 +20,10 @@ import SinglePanel from './single_panel';
 const singlePanelSource = require('!!raw-loader!./single_panel');
 const singlePanelHtml = renderToHtml(SinglePanel);
 
+import Small from './small';
+const smallSizeSource = require('!!raw-loader!./small');
+const smallSizeHtml = renderToHtml(SinglePanel);
+
 import ContentPanel from './content_panel';
 const contentPanelSource = require('!!raw-loader!./content_panel');
 const contentPanelHtml = renderToHtml(ContentPanel);
@@ -76,6 +80,34 @@ export const ContextMenuExample = {
       ),
       demo: <SinglePanel />,
     },
+    {
+      title: 'Sizes',
+      source: [
+        {
+          type: GuideSectionTypes.JS,
+          code: smallSizeSource,
+        },
+        {
+          type: GuideSectionTypes.HTML,
+          code: smallSizeHtml,
+        },
+      ],
+      text: (
+        <div>
+          <p>
+            You can reduce the size of <strong>EuiContextMenu</strong> by
+            setting <EuiCode>size</EuiCode> to <EuiCode>s</EuiCode>.
+          </p>
+          <p>
+            Use the default size <EuiCode>m</EuiCode> for major actions such as
+            Share and Export which appear in top application menu items. Use the
+            smaller size <EuiCode>s</EuiCode> for actions that affect only a
+            single item and are repeated per row.
+          </p>
+        </div>
+      ),
+      demo: <Small />,
+    },
     {
       title: 'Displaying custom elements',
       source: [

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

@@ -0,0 +1,106 @@
+import React, { useState } from 'react';
+
+import {
+  EuiButton,
+  EuiContextMenu,
+  EuiIcon,
+  EuiPopover,
+} from '../../../../src/components';
+
+export default () => {
+  const [isPopoverOpen, setPopover] = useState(false);
+
+  const onButtonClick = () => {
+    setPopover(!isPopoverOpen);
+  };
+
+  const closePopover = () => {
+    setPopover(false);
+  };
+
+  const panels = [
+    {
+      id: 0,
+      title: 'This is a context menu',
+      items: [
+        {
+          name: 'Handle an onClick',
+          icon: <EuiIcon type="search" size="m" />,
+          onClick: () => {
+            closePopover();
+          },
+        },
+        {
+          name: 'Go to a link',
+          icon: 'user',
+          href: 'http://elastic.co',
+          target: '_blank',
+        },
+        {
+          name: 'Nest panels',
+          icon: 'user',
+          panel: 1,
+        },
+        {
+          name: 'You can add a tooltip',
+          icon: 'user',
+          toolTipTitle: 'Optional tooltip',
+          toolTipContent: 'Optional content for a tooltip',
+          toolTipPosition: 'right',
+          onClick: () => {
+            closePopover();
+          },
+        },
+        {
+          name: 'Disabled option',
+          icon: 'user',
+          toolTipContent: 'For reasons, this item is disabled',
+          toolTipPosition: 'right',
+          disabled: true,
+          onClick: () => {
+            closePopover();
+          },
+        },
+      ],
+    },
+    {
+      id: 1,
+      initialFocusedItemIndex: 1,
+      title: 'Nest panels',
+      items: [
+        {
+          name: 'PDF reports',
+          icon: 'user',
+          onClick: () => {
+            closePopover();
+          },
+        },
+        {
+          name: 'Permalinks',
+          icon: 'user',
+          onClick: () => {
+            closePopover();
+          },
+        },
+      ],
+    },
+  ];
+
+  const button = (
+    <EuiButton iconType="arrowDown" iconSide="right" onClick={onButtonClick}>
+      Small context menu
+    </EuiButton>
+  );
+
+  return (
+    <EuiPopover
+      id="contextMenuExample"
+      button={button}
+      isOpen={isPopoverOpen}
+      closePopover={closePopover}
+      panelPaddingSize="none"
+      anchorPosition="downLeft">
+      <EuiContextMenu size="s" initialPanelId={0} panels={panels} />
+    </EuiPopover>
+  );
+};

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

@@ -332,3 +332,79 @@ exports[`EuiContextMenu props panels and initialPanelId renders the referenced p
   </div>
 </div>
 `;
+
+exports[`EuiContextMenu props size m is rendered 1`] = `
+<div
+  class="euiContextMenu"
+>
+  <div
+    class="euiContextMenuPanel euiContextMenu__panel"
+    tabindex="0"
+  >
+    <button
+      class="euiContextMenuPanelTitle"
+      data-test-subj="contextMenuPanelTitleButton"
+      type="button"
+    >
+      <span
+        class="euiContextMenu__itemLayout"
+      >
+        <span
+          class="euiContextMenu__icon"
+          data-euiicon-type="arrowLeft"
+        />
+        <span
+          class="euiContextMenu__text"
+        >
+          2
+        </span>
+      </span>
+    </button>
+    <div>
+      <div>
+        <div>
+          2
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`EuiContextMenu props size s is rendered 1`] = `
+<div
+  class="euiContextMenu euiContextMenu--small"
+>
+  <div
+    class="euiContextMenuPanel euiContextMenu__panel"
+    tabindex="0"
+  >
+    <button
+      class="euiContextMenuPanelTitle"
+      data-test-subj="contextMenuPanelTitleButton"
+      type="button"
+    >
+      <span
+        class="euiContextMenu__itemLayout"
+      >
+        <span
+          class="euiContextMenu__icon"
+          data-euiicon-type="arrowLeft"
+        />
+        <span
+          class="euiContextMenu__text"
+        >
+          2
+        </span>
+      </span>
+    </button>
+    <div>
+      <div>
+        <div>
+          2
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;

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

@@ -333,6 +333,82 @@ exports[`EuiContextMenu props panels and initialPanelId renders the referenced p
 </div>
 `;
 
+exports[`EuiContextMenu props size m is rendered 1`] = `
+<div
+  class="euiContextMenu"
+>
+  <div
+    class="euiContextMenuPanel euiContextMenu__panel"
+    tabindex="0"
+  >
+    <button
+      class="euiContextMenuPanelTitle"
+      data-test-subj="contextMenuPanelTitleButton"
+      type="button"
+    >
+      <span
+        class="euiContextMenu__itemLayout"
+      >
+        <span
+          class="euiContextMenu__icon"
+          data-euiicon-type="arrowLeft"
+        />
+        <span
+          class="euiContextMenu__text"
+        >
+          2
+        </span>
+      </span>
+    </button>
+    <div>
+      <div>
+        <div>
+          2
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`EuiContextMenu props size s is rendered 1`] = `
+<div
+  class="euiContextMenu euiContextMenu--small"
+>
+  <div
+    class="euiContextMenuPanel euiContextMenu__panel"
+    tabindex="0"
+  >
+    <button
+      class="euiContextMenuPanelTitle"
+      data-test-subj="contextMenuPanelTitleButton"
+      type="button"
+    >
+      <span
+        class="euiContextMenu__itemLayout"
+      >
+        <span
+          class="euiContextMenu__icon"
+          data-euiicon-type="arrowLeft"
+        />
+        <span
+          class="euiContextMenu__text"
+        >
+          2
+        </span>
+      </span>
+    </button>
+    <div>
+      <div>
+        <div>
+          2
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
 exports[`EuiContextMenuPanel is rendered 1`] = `
 <div
   aria-label="aria-label"

src/components/context_menu/_context_menu.scss

@@ -11,6 +11,17 @@ $euiContextMenuWidth: $euiSize * 16;
   .euiContextMenu__content {
     padding: $euiSizeS;
   }
+
+  &--small {
+    .euiContextMenuPanelTitle {
+      @include euiTitle('xxxs');
+      padding: $euiSizeS;
+    }
+
+    .euiContextMenuItem {
+      padding: $euiSizeS;
+    }
+  }
 }
 
 /**

src/components/context_menu/_context_menu_item.scss

@@ -55,3 +55,9 @@
     flex-shrink: 0;
   }
 }
+
+.euiContextMenu--small {
+  .euiContextMenuItem__text {
+    @include euiFontSizeS;
+  }
+}

src/components/context_menu/context_menu.test.tsx

@@ -21,7 +21,7 @@ import React from 'react';
 import { render, mount } from 'enzyme';
 import { requiredProps, takeMountedSnapshot } from '../../test';
 
-import { EuiContextMenu } from './context_menu';
+import { EuiContextMenu, SIZES } from './context_menu';
 import { setTimeout } from 'timers';
 
 const panel3 = {
@@ -168,5 +168,16 @@ describe('EuiContextMenu', () => {
         expect(takeMountedSnapshot(component)).toMatchSnapshot();
       });
     });
+    describe('size', () => {
+      SIZES.forEach((size) => {
+        it(`${size} is rendered`, () => {
+          const component = render(
+            <EuiContextMenu panels={panels} initialPanelId={2} size={size} />
+          );
+
+          expect(component).toMatchSnapshot();
+        });
+      });
+    });
   });
 });