Modal flexibility #6455
Replies: 9 comments 1 reply
-
|
@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. |
Beta Was this translation helpful? Give feedback.
-
|
One confusing thing I have noticed is that Modals props 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. |
Beta Was this translation helpful? Give feedback.
-
|
@alex-page That explains why this modal has duplicated CTAs inside the modal and in the modal footer. |
Beta Was this translation helpful? Give feedback.
-
|
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. |
Beta Was this translation helpful? Give feedback.
-
|
On my end, working on media and file mgmt, I found the following:
|
Beta Was this translation helpful? Give feedback.
-
|
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. |
Beta Was this translation helpful? Give feedback.
-
|
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.
|
Beta Was this translation helpful? Give feedback.
-
|
Often, the title for modals with less content gets repeated in the context of the modal and offers little value. See example:
|
Beta Was this translation helpful? Give feedback.
-
|
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. |
Beta Was this translation helpful? Give feedback.
-
|
Capturing another thread on modals— Came upon the In a quick push to suggest an improvement, noticed discrepancies in the type styles used for section labels.
Dropping three variations here, curious what people think… My lean is towards the “header” style b/c it’s sentence case and creates hierarchy.
|
Beta Was this translation helpful? Give feedback.
Uh oh!
There was an error while loading. Please reload this page.
-
The Modal component is used heavily in admin and we frequently get questions about it.
Usage
The Modal component is used 1,208 times in admin. Additionally there's 34 modals in
/web/components, 23 not "on mainline," and 1 paged modal in/polaris-next.Issues:
The modal component doesn't work for the range of use cases needed
Polaris users have asked for:
Opportunities:
I'd like to use this discussion to collect other issues, opportunities, and ideas to improve the Modal component.
Beta Was this translation helpful? Give feedback.
All reactions