diff --git a/CHANGELOG.md b/CHANGELOG.md index a3cac4fe20e..af406eae3ec 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,6 +1,7 @@ ## [`master`](https://github.com/elastic/eui/tree/master) - Added `euiFacetButton` and `euiFacetGroup` ([#1167](https://github.com/elastic/eui/pull/1167)) +- Added `width` prop to `EuiContextMenu` panels ([#1173](https://github.com/elastic/eui/pull/1173)) ## [`3.10.0`](https://github.com/elastic/eui/tree/v3.10.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 07353e56248..8924170fe4a 100644 --- a/src-docs/src/views/context_menu/context_menu_example.js +++ b/src-docs/src/views/context_menu/context_menu_example.js @@ -90,11 +90,17 @@ export const ContextMenuExample = { code: contextMenuWithContentHtml, }], text: ( -

- Context menu panels can be passed React elements through the - content prop instead of items. The panel - will display your custom content without modification. -

+
+

+ Context menu panels can be passed React elements through the + content prop instead of items. The panel + will display your custom content without modification. +

+

+ If your panel contents have different widths or you need to ensure that a specific + context menu panel has a certain width, add width: [number of pixels] to the panel tree. +

+
), demo: , }], 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 index fee75b19b1e..e30c6702fcf 100644 --- a/src-docs/src/views/context_menu/context_menu_with_content.js +++ b/src-docs/src/views/context_menu/context_menu_with_content.js @@ -51,6 +51,7 @@ export default class extends Component { icon: 'plusInCircle', panel: { id: 1, + width: 400, title: 'See more', content: ( diff --git a/src/components/context_menu/__snapshots__/context_menu.test.js.snap b/src/components/context_menu/__snapshots__/context_menu.test.js.snap index bee9cd17c18..b33bede4715 100644 --- a/src/components/context_menu/__snapshots__/context_menu.test.js.snap +++ b/src/components/context_menu/__snapshots__/context_menu.test.js.snap @@ -65,7 +65,7 @@ exports[`EuiContextMenu props panels and initialPanelId allows you to click the exports[`EuiContextMenu props panels and initialPanelId allows you to click the title button to go back to the previous panel 2`] = `
{outgoingPanel} diff --git a/src/components/context_menu/context_menu.test.js b/src/components/context_menu/context_menu.test.js index 9f716923adf..9810f439360 100644 --- a/src/components/context_menu/context_menu.test.js +++ b/src/components/context_menu/context_menu.test.js @@ -17,6 +17,7 @@ const panel2 = { const panel1 = { id: 1, title: '1', + width: 400, items: [{ name: '2a', panel: 2, diff --git a/src/components/context_menu/index.d.ts b/src/components/context_menu/index.d.ts index ee4532f2283..dbea11145ef 100644 --- a/src/components/context_menu/index.d.ts +++ b/src/components/context_menu/index.d.ts @@ -97,6 +97,7 @@ declare module '@elastic/eui' { title: string; items?: EuiContextMenuPanelItemDescriptor[]; content?: React.ReactNode; + width?: number; } export type EuiContextMenuProps = CommonProps &