diff --git a/CHANGELOG.md b/CHANGELOG.md index 595ad48e49d..3d87d58cab6 100644 --- a/CHANGELOG.md +++ b/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) diff --git a/src-docs/src/views/context_menu/context_menu_example.js b/src-docs/src/views/context_menu/context_menu_example.js index 3426bde4315..233f47ee452 100644 --- a/src-docs/src/views/context_menu/context_menu_example.js +++ b/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 = `, + onClick: () => { + closePopover(); + }, + }, + ] + } + ]} +/>`; import SinglePanel from './single_panel'; const singlePanelSource = require('!!raw-loader!./single_panel'); const singlePanelHtml = renderToHtml(SinglePanel); +const singlePanelSnippet = ` + This is a context menu item + + ]} +/>`; + +import Small from './small'; +const smallSizeSource = require('!!raw-loader!./small'); +const smallSizeHtml = renderToHtml(SinglePanel); +const smallSnippet = ``; import ContentPanel from './content_panel'; const contentPanelSource = require('!!raw-loader!./content_panel'); const contentPanelHtml = renderToHtml(ContentPanel); +const contentPanelSnippet = ` + + +`; import ContextMenuWithContent from './context_menu_with_content'; const contextMenuWithContentSource = require('!!raw-loader!./context_menu_with_content'); @@ -54,8 +93,35 @@ export const ContextMenuExample = {

), props: { EuiContextMenu, EuiContextMenuPanel, EuiContextMenuItem }, + snippet: contextMenuSnippet, demo: , }, + { + title: 'Sizes', + source: [ + { + type: GuideSectionTypes.JS, + code: smallSizeSource, + }, + { + type: GuideSectionTypes.HTML, + code: smallSizeHtml, + }, + ], + text: ( +

+ EuiContextMenu supports a small and medium{' '} + size. The default size is medium,{' '} + m, and should be used for most menus and major + actions such as top application menus. Use the smaller size,{' '} + s, for a more compressed version containing minor + actions or repeated menus like in EuiTable{' '} + pagination. +

+ ), + snippet: smallSnippet, + demo: , + }, { title: 'With single panel', source: [ @@ -70,11 +136,13 @@ export const ContextMenuExample = { ], text: (

- Context menus can be used for simple, non-nested menus as well. The - below pagination example has no nesting and no title. + Use EuiContextMenuPanel for simple, non-nested + context menus. The below pagination example has no nesting and no + title.

), - demo: , + snippet: singlePanelSnippet, + demo: , }, { title: 'Displaying custom elements', @@ -95,6 +163,7 @@ export const ContextMenuExample = { EuiContextMenuPanel.

), + snippet: contentPanelSnippet, demo: , }, { diff --git a/src-docs/src/views/context_menu/single_panel.js b/src-docs/src/views/context_menu/single_panel.js index 37a77afa2fb..bec8d6b933b 100644 --- a/src-docs/src/views/context_menu/single_panel.js +++ b/src-docs/src/views/context_menu/single_panel.js @@ -80,7 +80,7 @@ export default () => { closePopover={closePopover} panelPaddingSize="none" anchorPosition="downLeft"> - + ); }; diff --git a/src-docs/src/views/context_menu/small.js b/src-docs/src/views/context_menu/small.js new file mode 100644 index 00000000000..782d403afef --- /dev/null +++ b/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 = [ + + Copy + , + + Edit + , + + Share + , + ]; + + const button = ( + + Click to show a single panel + + ); + + return ( + + + + ); +}; diff --git a/src/components/context_menu/__snapshots__/context_menu.test.tsx.snap b/src/components/context_menu/__snapshots__/context_menu.test.tsx.snap index de113dc8e1c..d70dddefe35 100644 --- a/src/components/context_menu/__snapshots__/context_menu.test.tsx.snap +++ b/src/components/context_menu/__snapshots__/context_menu.test.tsx.snap @@ -332,3 +332,79 @@ exports[`EuiContextMenu props panels and initialPanelId renders the referenced p `; + +exports[`EuiContextMenu props size m is rendered 1`] = ` +
+
+ +
+
+
+ 2 +
+
+
+
+
+`; + +exports[`EuiContextMenu props size s is rendered 1`] = ` +
+
+ +
+
+
+ 2 +
+
+
+
+
+`; diff --git a/src/components/context_menu/__snapshots__/context_menu_item.test.tsx.snap b/src/components/context_menu/__snapshots__/context_menu_item.test.tsx.snap index 7e7f5a111a1..74d26ebfa8b 100644 --- a/src/components/context_menu/__snapshots__/context_menu_item.test.tsx.snap +++ b/src/components/context_menu/__snapshots__/context_menu_item.test.tsx.snap @@ -125,6 +125,36 @@ exports[`EuiContextMenuItem props rel is rendered 1`] = ` `; +exports[`EuiContextMenuItem props size m is rendered 1`] = ` + +`; + +exports[`EuiContextMenuItem props size s is rendered 1`] = ` + +`; + exports[`EuiContextMenuItem props target is rendered 1`] = ` `; +exports[`EuiContextMenu props size m is rendered 1`] = ` +
+
+ +
+
+
+ 2 +
+
+
+
+
+`; + +exports[`EuiContextMenu props size s is rendered 1`] = ` +
+
+ +
+
+
+ 2 +
+
+
+
+
+`; + exports[`EuiContextMenuPanel is rendered 1`] = `
`; +exports[`EuiContextMenuPanel props size m is rendered 1`] = ` +
+
+ + Title + +
+
+
+
+
+`; + +exports[`EuiContextMenuPanel props size s is rendered 1`] = ` +
+
+ + Title + +
+
+
+
+
+`; + exports[`EuiContextMenuPanel props title is rendered 1`] = `
- + - + - + - + - +