[Feature Request]: Carbon modals - Add parameters to set min and max widths, breakpoints to change modal sizes

[wyattmichel1]

The problem

As-is, when using the Carbon modal, it seems that the width of the modal will always scale with the users' viewport width. This can result in modals looking excessively large relative to the content and actions within the modal. And, conversely, if the modal and content need to be larger.. if the user has a smaller viewport width it will shrink.

The solution

Introduce new parameters to enable developers to fine-tune modals based on their needs. These ideas can include (but are not limited to):

• Setting a 'min' and 'max' width for the modal so it will not adjust to the users' viewport after a certain threshold is met.
• Add parameters to set breakpoints (or have them pre-configured) so the card size will swap to a bigger/smaller variant depending on the browser width.

Examples

Existing component: https://react.carbondesignsystem.com/?path=/story/components-modal--playground&globals=theme:white

Example of what the as-is modal looks at a 4K browser width on 'sm' and 'xs' sizes.

Application/PAL

IBM Cloud VPC Storage

Business priority

Low Priority = release date is not dependent on fix or not upcoming

Available extra resources

No response

Code of Conduct

• [X] I agree to follow this project's Code of Conduct

[github-actions[bot]]

Thank you for submitting a feature request. Your proposal is open and will soon be triaged by the Carbon team.

If your proposal is accepted and the Carbon team has bandwidth they will take on the issue, or else request you or other volunteers from the community to work on this issue.

[aagonzales]

@wyattmichel1 I think the solution here is just to add larger breakpoints to modal sizes. Right now the last adjustment is happening only at 1584px view port. We've built in responsive sizing so you don't have to switch between prop sizes at breakpoints.

[sstrubberg]

Possible additional breakpoint here. Width of 16%? Less columns.

This should be connected to a larger work-stream around the max breakpoint on grid.

[sstrubberg]

Ref https://github.com/carbon-design-system/carbon/issues/13704

[wyattmichel1]

Hello @sstrubberg @aagonzales, with the existing options for modal breakpoints, what modal size would you recommend teams use for browser widths greater than 1584px if the modal contains very little content? such as the example in my original post.

We had tried lg, but it came out looking very stretched at a 4k browser width (3,840px). maybe md is better? Or another option entirely? let us know!

[aagonzales]

I see what the problem with our component is now @sstrubberg. We need to decrease the width at the 1584 break point, right now its just the same as 1312px. This is go a long way to help this problem. We can queue this up as a design task.

[aagonzales]

@wyattmichel1 we talked about this as a team and it would be ok for y'all in the short term to add an override for a max-width to the modal. I would max it out at whatever the percentage width size is at exactly the 1584 breakpoint. So medium max would be 1584 * (.48) = 760