@dGoligorsky had a great breakdown of this. I am not sure we currently have the same experiential needs that Carbon does to warrant a suite of modal variants. I think the biggest issue we have is lack of composability. There seems to be too much baked into it or not easy ways to compose experiences in it.

One confusing thing I have noticed is that Modals props title primaryAction secondaryAction render ui all over the modal. Users have little control of the spacing, ui rendered, etc. when using these props. When pairing with @yuraima it wasn't initially clear that the button at the bottom of the modal was being created by a prop that is defined in the first line of code in a modal. This should be fast and frictionless to understand.

This markup doesn't help developers quickly know where and what UI is rendering.

<Modal primaryAction={{ content: "Add Instagram", onAction: handleChange}}>
 <p>Hello world</p>
 {/* A button will appear here */}
</Modal>

Adding composability removes this confusion and simplifies the modal

<Modal>
 <Stack>
 <p>Hello world</p>
 <Button primary onClick={() => handleChange}>Add Instagram</Button>
 </Stack>
</Modal>

This happens across multiple components, but I noticed it on Modal recently and think it's worth bringing up.

This wasn't exactly your prompt but it is something that has come up for me related to modals. I would love to see guidance around modal usage. For example, are there instances where there is too much information to reasonably scan (a long list or a complex table) or too many interactions needed for a given task and a modal is not suitable? Instead, that information should live in a sub page or something other than a modal. Some standards or rough guidance around best practices might be helpful in increasing consistency throughout the admin.

On my end, working on media and file mgmt, I found the following:
1- There's one or two design approaches for modals that makes it very challenging accounting for contextual needs or use cases that come up contextually. for instance, designing the file picker, it is a modal window that entails multiple functionalities.
2- Seems like modals have been designed in a one way fits all so if there's a use case that has more than one step, the result will be modal on top of modal...etc.
3- A bit overly relied on vs. inline design approach which I found a bit challenging scaling for smaller breakpoints and mobile web as well as maintaining closer parity when designing for native apps. (edited)
4- Horizontal default style makes it challenging to maintain clear hierarchy especially when we factor in adding tools like search, sort..etc

Screen Shot 2022年07月20日 at 12 54 04 PM

Personally I find hierarchy challenging with the title separated by a dividing line from the content. Makes the rest of the modal tough to design elegantly.

Following up from the recent Slack prompt to share thoughts on modals:

Here's a video (9m17s) talking through frameworks and how they play out in specific examples within Shopify admin.

image

Often, the title for modals with less content gets repeated in the context of the modal and offers little value. See example:

Screen Shot 2022年07月21日 at 9 34 14 AM

Hi folks, we're working on building something similar, and I would like to share a prototype that I've built very quickly regarding a multistep/paged modal.

Here an example of how it works.
Here is the source code, and here is how it's API could potentially be used.

Capturing another thread on modals—

Came upon the Cancel order modal and felt that the spacing was off— hierarchy was lost because the spacing between headings and content is the same as spacing between sections.
image

In a quick push to suggest an improvement, noticed discrepancies in the type styles used for section labels.

• e.g. Export Orders uses body text, which has good legibility, but no hierarchy since it’s the same style as the radio select text.
• e.g. Manage Rates uses subheading, which has ok hierarchy, though I believe all-caps are less legible than sentence case.

image
image

Dropping three variations here, curious what people think... My lean is towards the "header" style b/c it’s sentence case and creates hierarchy.

image