[EuiContextMenu] Add size prop (#4409)

Co-authored-by: cchaos <[email protected]>
Co-authored-by: Greg Thompson <[email protected]>

CHANGELOG.md

@@ -1,6 +1,6 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
-No public interface changes since `31.2.0`.
+- Added a `size` prop to `EuiContextMenu` and added a smaller size ([#4409](https://github.com/elastic/eui/pull/4409))
 
 ## [`31.2.0`](https://github.com/elastic/eui/tree/v31.2.0)
 

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

@@ -15,14 +15,53 @@ import {
 import ContextMenu from './context_menu';
 const contextMenuSource = require('!!raw-loader!./context_menu');
 const contextMenuHtml = renderToHtml(ContextMenu);
+const contextMenuSnippet = `<EuiContextMenu
+  initialPanelId={0}
+  panels={[
+    {
+      id: 0,
+      title: 'This is a context menu',
+      items: [
+        {
+          name: 'Handle an onClick',
+          icon: <EuiIcon type="search" size="m" />,
+          onClick: () => {
+            closePopover();
+          },
+        },
+      ]
+    }
+  ]}
+/>`;
 
 import SinglePanel from './single_panel';
 const singlePanelSource = require('!!raw-loader!./single_panel');
 const singlePanelHtml = renderToHtml(SinglePanel);
+const singlePanelSnippet = `<EuiContextMenuPanel
+  items={[
+    <EuiContextMenuItem
+      key=""
+      onClick={}>
+      This is a context menu item
+    </EuiContextMenuItem>
+  ]}
+/>`;
+
+import Small from './small';
+const smallSizeSource = require('!!raw-loader!./small');
+const smallSizeHtml = renderToHtml(SinglePanel);
+const smallSnippet = `<EuiContextMenuPanel
+  size="s"
+  items={items}
+/>`;
 
 import ContentPanel from './content_panel';
 const contentPanelSource = require('!!raw-loader!./content_panel');
 const contentPanelHtml = renderToHtml(ContentPanel);
+const contentPanelSnippet = `<EuiContextMenuPanel>
+  <!-- React element as child -->
+</EuiContextMenuPanel>
+`;
 
 import ContextMenuWithContent from './context_menu_with_content';
 const contextMenuWithContentSource = require('!!raw-loader!./context_menu_with_content');
@@ -54,8 +93,35 @@ export const ContextMenuExample = {
         </p>
       ),
       props: { EuiContextMenu, EuiContextMenuPanel, EuiContextMenuItem },
+      snippet: contextMenuSnippet,
       demo: <ContextMenu />,
     },
+    {
+      title: 'Sizes',
+      source: [
+        {
+          type: GuideSectionTypes.JS,
+          code: smallSizeSource,
+        },
+        {
+          type: GuideSectionTypes.HTML,
+          code: smallSizeHtml,
+        },
+      ],
+      text: (
+        <p>
+          <strong>EuiContextMenu</strong> supports a small and medium{' '}
+          <EuiCode>size</EuiCode>. The default size is medium,{' '}
+          <EuiCode>m</EuiCode>, and should be used for most menus and major
+          actions such as top application menus. Use the smaller size,{' '}
+          <EuiCode>s</EuiCode>, for a more compressed version containing minor
+          actions or repeated menus like in <strong>EuiTable</strong>{' '}
+          pagination.
+        </p>
+      ),
+      snippet: smallSnippet,
+      demo: <SinglePanel />,
+    },
     {
       title: 'With single panel',
       source: [
@@ -70,11 +136,13 @@ export const ContextMenuExample = {
       ],
       text: (
         <p>
-          Context menus can be used for simple, non-nested menus as well. The
-          below pagination example has no nesting and no title.
+          Use <strong>EuiContextMenuPanel</strong> for simple, non-nested
+          context menus. The below pagination example has no nesting and no
+          title.
         </p>
       ),
-      demo: <SinglePanel />,
+      snippet: singlePanelSnippet,
+      demo: <Small />,
     },
     {
       title: 'Displaying custom elements',
@@ -95,6 +163,7 @@ export const ContextMenuExample = {
           <strong>EuiContextMenuPanel</strong>.
         </p>
       ),
+      snippet: contentPanelSnippet,
       demo: <ContentPanel />,
     },
     {

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

@@ -80,7 +80,7 @@ export default () => {
       closePopover={closePopover}
       panelPaddingSize="none"
       anchorPosition="downLeft">
-      <EuiContextMenuPanel items={items} />
+      <EuiContextMenuPanel size="s" items={items} />
     </EuiPopover>
   );
 };

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

@@ -0,0 +1,50 @@
+import React, { useState } from 'react';
+
+import {
+  EuiButton,
+  EuiContextMenuPanel,
+  EuiContextMenuItem,
+  EuiPopover,
+} from '../../../../src/components';
+
+export default () => {
+  const [isPopoverOpen, setPopover] = useState(false);
+
+  const onButtonClick = () => {
+    setPopover(!isPopoverOpen);
+  };
+
+  const closePopover = () => {
+    setPopover(false);
+  };
+
+  const items = [
+    <EuiContextMenuItem key="copy" icon="copy" onClick={closePopover}>
+      Copy
+    </EuiContextMenuItem>,
+    <EuiContextMenuItem key="edit" icon="pencil" onClick={closePopover}>
+      Edit
+    </EuiContextMenuItem>,
+    <EuiContextMenuItem key="share" icon="share" onClick={closePopover}>
+      Share
+    </EuiContextMenuItem>,
+  ];
+
+  const button = (
+    <EuiButton iconType="arrowDown" iconSide="right" onClick={onButtonClick}>
+      Click to show a single panel
+    </EuiButton>
+  );
+
+  return (
+    <EuiPopover
+      id="smallContextMenuExample"
+      button={button}
+      isOpen={isPopoverOpen}
+      closePopover={closePopover}
+      panelPaddingSize="none"
+      anchorPosition="downLeft">
+      <EuiContextMenuPanel size="s" items={items} />
+    </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 euiContextMenuPanelTitle--small"
+      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_item.test.tsx.snap

@@ -125,6 +125,36 @@ exports[`EuiContextMenuItem props rel is rendered 1`] = `
 </a>
 `;
 
+exports[`EuiContextMenuItem props size m is rendered 1`] = `
+<button
+  class="euiContextMenuItem"
+  type="button"
+>
+  <span
+    class="euiContextMenu__itemLayout"
+  >
+    <span
+      class="euiContextMenuItem__text"
+    />
+  </span>
+</button>
+`;
+
+exports[`EuiContextMenuItem props size s is rendered 1`] = `
+<button
+  class="euiContextMenuItem euiContextMenuItem--small"
+  type="button"
+>
+  <span
+    class="euiContextMenu__itemLayout"
+  >
+    <span
+      class="euiContextMenuItem__text"
+    />
+  </span>
+</button>
+`;
+
 exports[`EuiContextMenuItem props target is rendered 1`] = `
 <a
   aria-label="aria-label"