Allowing context menu panels to have different widths

CHANGELOG.md

@@ -1,6 +1,7 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
 - Added `maxWidth` prop to `EuiModal` ([#1165](https://github.com/elastic/eui/pull/1165))
+- Added `width` prop to `EuiContextMenu` panels ([#1173](https://github.com/elastic/eui/pull/1173))
 
 ## [`3.9.0`](https://github.com/elastic/eui/tree/v3.9.0)
 

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 />,
   }],

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>

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"

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"

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;

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}

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,

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 &