I dunno about you guys, but Modals are such a pain to build, and do it consistently. Especially when they involve data. E.g. Create operation via graphql or an Edit operation (with a form) via graphql.
With the concepts in Redwood, I think there is an opportunity where Modals could have first class support that works with Cells and Pages.
Here is what I would like to see for modals and redwood:
Modals have paths defined in routes
Navigate to modal routes to open
Browser history support for modal routes
Full page modal support (click outside to close, or back button etc)
Modal to modal route visits (could be for wizard steps)
Flexible positioning (sidebar slideover, full page modals etc)
It might be a good opportunity for a cookbook or maybe it needs more official support in the framework itself?
Would also love to hear if anyone has come up with a good way to handle Modals in redwood?
I personally like using modals myself as well. I tend to use them for my create and edits, like you mentioned. I’ve been using react-modal or something similar and dropping the cell inside it. This works for me for the most part, but there are certainly some additional considerations.
I agree that something more integrated into RW would be super helpful. Or even an option to choose in the scaffold if you want pages or modals.
When Jonathan laid it out like that, I realized, they were all actually great use cases to solve for a good DX. Since redwood has such a focus on DX and conventions, such as Cells, thought I would propose it.
Didn’t mean to call you out. Just wanted to add some context
I agree that modals are difficult to do well, yet something that’s often used. Which unfortunately means they’re often done not-so-well
Not an expert here but I wanted to raise this question to see if anyone else has thoughts, do you all have any thoughts about how to ensure the modals stay accessible? I know this has been a challenge for some modal designs in the past and w3 has some guidelines for dialog modals and there is a section for dialog modals in the WAI-ARIA authoring practices.
We’ve had accessibility on the roadmap for a while but I don’t think it’s gotten much prioritization, so it would be nice if we could try to have some accessibility baked in to new features and save ourselves the work of having to revisit things like these and make them accessible after the fact.
@Tobbe do you use react-modal and redwood at work? If so, would love to see some real world examples of how to best use together.
@morganmspencer Ah I see. I can see how you approached it. So the cell would handle the CRUD work, inside the modal, but you would open the modal from the parent page. Can you share any patterns that worked well to keep the code clean or re-use?
I was inspired by that tweet.