[EuiContextMenu] Add "style" prop to context menu

[p-young]

EuiContextMenu does not have a "style" prop

It would be convenient to have it so that we can modify it the same way as most elastic components, in my case I would like to change the width.

Is there a specific purpose that it's omitted? Thanks!

[elizabetdev]

Hi @p-young,

It seems that our documentation is a little bit confusing. If you want to change the width of the panels you can do this:

const panels = [
    {
      id: 0,
      title: "This is a context menu",
      // You can change the width here
      width: 800,
      items: [...]
    },
    {
      id: 1,
      title: "Nest panels",
      // You can change the width here
      width: 800,
      items: [...]
   }
  ];

<EuiContextMenu width={2000} initialPanelId={0} panels={panels} />

Or just see this CodeSandbox example.

Let me know if this is helpful.

From the EUI side, we need to improve the documentation. The EuiContextMenuPanelDescriptor[] props are missing in the props table.

[p-young]

I'm doing something a little different where I want to set the EuiContextMenu width to 100% so that I can use it in two different places, one that is not in a popover and needs to take up the full width of the screen

Changing the width of the panels wouldn't be be able to help that because the context menu width is also set

I'm achieving this using css for now but as eui is moving to use emotion, it would still be helpful to be able to change the style as needed

[cee-chen]

Maybe I'm missing your specific use case, but I'm not 100% sure we would want to support allowing consumers to override the style: { width } that we set manually in EUI internals. We're deliberately adjusting the width of the parent EuiContextMenu to match the width of the child EuiContextMenuPanel. Allowing consumers to override our internal widths has typically led to a lot of issues/unexpected behavior in the past with (e.g.) popovers.

Changing the width of the panels wouldn't be be able to help that because the context menu width is also set

This is not entirely correct as I mentioned previously - EuiContextMenu sets its style/width based on the width prop of the current panel, so in theory you should should be able to control the width of the parent by setting the same width on all children.

[p-young]

The width prop on the panels only allows a number, so I can't set it to 100% which is what I need (assuming the menu would then also get 100% width)

In my use case I want the menu to expand to fill the space, so I don't know what the width is (unless I want to use javascript for that but it's easily solved with css 100% width)

Exposing the style prop on other components lets users override how the component is designed so I feel like it would be nice here too

This is my current solution that I can't get using the props from the menu or panels:

div.euiContextMenu { width: 100%; }

[cee-chen]

@p-young Despite the width being typed as a number, it looks like the actual usage is directly within a style tag - can you // @ts-ignore the number typing and try passing in width: '100%' and see if it works for you?

If so, I can update our typing to be a less strict CSSProperties['width'] instead of number.

[p-young]

@constancecchen Tested it with width: '100%' set on the panel and ignored the type error, it works!

Thanks for the help

[cee-chen]

Awesome, thank you for helping us confirm! I'll open a PR now with the quick type fix.