💡 Add a XLarge dimension to modals

[fraincs]

Problem to solve

Modals supports three sizes (small, medium and large) the largest modal possible is 960px wide except the full screen one that has no limits, which is not that useful considering that the layout won't affect it.

Idea

Introducing a wider modal (1280px) could even replace the need for a fullscreen modal as it would render it redondant in most cases except if a fullscreen modal is now really fullscreen.

While at it I would render the modal full width when under a certain width render the modal at 100% of the viewport.

for reference : https://www.carbondesignsystem.com/components/modal/style/#sizes Carbon have an interesting approach.

[patricklafrance]

I am not sure an XL size could replace a fullscreen option. IMO, XL imply a fix size while fullscreen imply a dynamic size based on the viewport of the user.

[fraincs]

By replace I meant render fullscreen useless as a fullscreen has no limit, this could lead to weird situation in big screens.

We could keep fullscreen but it would be in the consumer hands to assure that the modal is still readable and accessible.

[patricklafrance]

@fraincs of course. Isn't it similar to a page? For a page, the devs always have to make sure it's readable no matter the size of the user screen.

I am not sure why a modal like a "group detail" is not fullscreen.

I agree thought that every modal size should become fullscreen for breakpoint smaller than lg.

[fraincs]

I am not sure why a modal like a "group detail" is not fullscreen.

That's a good question I would need to ask designers about this one.

My other concern is that currently as far as I know you can't limit the width of the Modal content

            <Modal fullscreen>
                <Heading>Apollo 11 movie</Heading>
                <Content>
                    <Paragraph>Apollo 11 is a 2019 American documentary film edited, produced and directed by Todd Douglas Miller. It focuses on the 1969 Apollo 11 mission, the first spaceflight from which men walked on the Moon.</Paragraph>
                    <Paragraph>The film consists solely of archival footage, including 70 mm film previously unreleased to the public, and does not feature narration, interviews or modern recreations. The Saturn V rocket, Apollo crew consisting of Buzz Aldrin, Neil Armstrong, and Michael Collins, and Apollo program Earth-based mission operations engineers are prominently featured in the film.</Paragraph>
                </Content>
                <ButtonGroup>
                    <Button variant="secondary">Select</Button>
                    <Button>Next</Button>
                </ButtonGroup>
            </Modal>

[patricklafrance]

It's fullscreen, why would you want to do this?

Every modal have it's own layout, IMO it's the responsability of the specific modal layout to limit the width of a specific section if necessary.

I don't expect every modal layout to be used as fullscreen. For example, I don't think it would generally make sense for a modal with an illustration to be fullscreen. In most case the UI is not complex enough to justify fullscreen.

It does make sense for a group detail thought. In fact, I think it's the only modal in Apricot for which fullscreen could make sense on a large desktop.

Maybe we don't need fullscreen for desktop and it should only be forced on small viewports?

[patricklafrance]

Can this issue be closed?