Adds maxWidth prop to EuiModal

[ryankeairns]

Adds a maxWidth prop to EuiModal that is disabled by default.

When enabled, a default class is applied that sets the max-width to the EUI medium breakpoint value. Users can optionally provide a number value that converts to a max px width value, or they can provide a string that includes an alternative form of measurement (e.g. 90vw).

There is no impact to smaller screen sizes as the medium breakpoint (768px) exceeds the small screen width. For smaller screens, the width is set as 100vw + 2px.

You can test this change using the overflow example in the Modal section of the docs. It was previously set to 800px via style, but it now uses the default width of maxWidth.

[cchaos]

LGTM. With the one exception.

Long term: I wonder if there's a way to turn this sort of prop functionality into a service?

[cchaos]

I'd think we'd want the maxWidth on by default.

[ryankeairns]

Changing it to true would potentially break current implementations, right? Though I suppose it's very likely they would have already set an explicit width else they would have full width modals.

Flipping it to true would be the preferable approach from a design perspective.

[cchaos]

I'm not sure if it would be breaking or not. I think most implementations, like you said, would have needed to add an explicit width. Since max-width doesn't actually force a width, until a certain size (which is quite large for the default anyway), I would consider it a necessary default.

[ryankeairns]

My point of reference is heavily Canvas-skewed :) , but it would affect all four instances of modals used in that application. Each is currently set wider than 768px.

[cchaos]

Hmm, then yeah maybe we do call it a breaking change, but I do think it's an important default moving forward.

[cchaos]

This isn't really necessary for this PR, but I was just looking at the first example, and it sets a inline style of width: 800px on the modal which makes it really large for it's contents.

But if you take off the inline width, it seems to only get it's width from the header not the body content.

Could we, at the very least, change this value to be closer to just containing the form (~400px), or is there a way to better ensure the content of the modal is deciding the width without having to put an explicit value on it?

[ryankeairns]

@cchaos Adding words to the switch label does expand the width of the modal (up to the max-width of 400px). Do we want a min-width on modals? or modals containing forms?

[cchaos]

Oh hmm, ok, then can you just set that particular example to have a width: 400px?

[snide]

I think it's OK to set the maxWidth setting on by default. Canvas already has something to overwrite it, and AFAIK that's the only place with a super wide modal like that. Using it beyond that, actually goes against our published guidelines so I'm also OK with releasing this as a non-breaking change (with the caveat of us letting cloud know and double checking canvas usage.

[snide]

@ryankeairns don't forget a changelog when you do add this.

[ryankeairns]

I'll switch it to true. After a quick scan, I see a few other places where this will have an impact, but it looks minimal. In these non-Canvas modals the widths are between 800 and 860 pixels.