From 6558b71e0c2964be170fe8c5f84573ba810189cf Mon Sep 17 00:00:00 2001
From: Caroline Horn <549577+cchaos@users.noreply.github.com>
Date: Tue, 11 Sep 2018 12:11:13 -0400
Subject: [PATCH] Allowing context menu panels to have different widths (#1173)

---
 CHANGELOG.md                                     |  1 +
 .../views/context_menu/context_menu_example.js   | 16 +++++++++++-----
 .../context_menu/context_menu_with_content.js    |  1 +
 .../__snapshots__/context_menu.test.js.snap      |  2 +-
 .../context_menu_panel.test.js.snap              |  2 +-
 src/components/context_menu/_context_menu.scss   |  1 +
 src/components/context_menu/context_menu.js      |  8 +++++++-
 src/components/context_menu/context_menu.test.js |  1 +
 src/components/context_menu/index.d.ts           |  1 +
 9 files changed, 25 insertions(+), 8 deletions(-)

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: (
-      <p>
-        Context menu panels can be passed React elements through the
-        <EuiCode>content</EuiCode> prop instead of <EuiCode>items</EuiCode>. The panel
-        will display your custom content without modification.
-      </p>
+      <div>
+        <p>
+          Context menu panels can be passed React elements through the
+          <EuiCode>content</EuiCode> prop instead of <EuiCode>items</EuiCode>. The panel
+          will display your custom content without modification.
+        </p>
+        <p>
+          If your panel contents have different widths or you need to ensure that a specific
+          context menu panel has a certain width, add <code>width: [number of pixels]</code> to the panel tree.
+        </p>
+      </div>
     ),
     demo: <ContextMenuWithContent />,
   }],
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: (
             <EuiPanel>
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`] = `
 <div
   class="euiContextMenu"
-  style="height: 0px;"
+  style="height: 0px; width: 400px;"
 >
   <div
     class="euiContextMenuPanel euiContextMenu__panel euiContextMenuPanel-txOutRight"
diff --git a/src/components/context_menu/__snapshots__/context_menu_panel.test.js.snap b/src/components/context_menu/__snapshots__/context_menu_panel.test.js.snap
index 9a581184bb9..06dc4953a64 100644
--- a/src/components/context_menu/__snapshots__/context_menu_panel.test.js.snap
+++ b/src/components/context_menu/__snapshots__/context_menu_panel.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`] = `
 <div
   class="euiContextMenu"
-  style="height: 0px;"
+  style="height: 0px; width: 400px;"
 >
   <div
     class="euiContextMenuPanel euiContextMenu__panel euiContextMenuPanel-txOutRight"
diff --git a/src/components/context_menu/_context_menu.scss b/src/components/context_menu/_context_menu.scss
index 5e9760a278a..87ec5fabdcd 100644
--- a/src/components/context_menu/_context_menu.scss
+++ b/src/components/context_menu/_context_menu.scss
@@ -2,6 +2,7 @@ $euiContextMenuWidth: $euiSize * 16;
 
 .euiContextMenu {
   width: $euiContextMenuWidth;
+  max-width: 100%;
   position: relative;
   overflow: hidden;
   transition: height $euiAnimSpeedFast $euiAnimSlightResistance;
diff --git a/src/components/context_menu/context_menu.js b/src/components/context_menu/context_menu.js
index f9472c49224..01f60d11ead 100644
--- a/src/components/context_menu/context_menu.js
+++ b/src/components/context_menu/context_menu.js
@@ -63,6 +63,7 @@ export const EuiContextMenuPanelItemShape = PropTypes.shape({
 
 export const EuiContextMenuPanelShape = PropTypes.shape({
   id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  width: PropTypes.number,  // Pixel value to set the panel width to
   content: PropTypes.node,  // Either content or items array should be given.
   items: PropTypes.arrayOf(EuiContextMenuPanelItemShape),
   title: PropTypes.string,
@@ -299,12 +300,17 @@ export class EuiContextMenu extends Component {
       outgoingPanel = this.renderPanel(this.state.outgoingPanelId, 'out');
     }
 
+    const width =
+      this.state.idToPanelMap[this.state.incomingPanelId] &&
+      this.state.idToPanelMap[this.state.incomingPanelId].width ?
+        this.state.idToPanelMap[this.state.incomingPanelId].width : undefined;
+
     const classes = classNames('euiContextMenu', className);
 
     return (
       <div
         className={classes}
-        style={{ height: this.state.height }}
+        style={{ height: this.state.height, width: width }}
         {...rest}
       >
         {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 &