Side Modal trigger from Menu

[andoyle]

Hey, is it okay to open a Side Modal using a Menu item? I see from the docs Side Modal renders a Button so I used variant="reset" size="reset" and added it to my Menu. I got it working in the Prototype kit but want to make sure this is an okay approach.

<SideModalButton variant="reset" size="reset"> View invoice </SideModalButton>

<MenuItem {...menu}> <InvoiceSideModal /> </MenuItem>

Thanks!

[loreina]

Hi @andoyle,

Menu items can trigger an action like opening a side modal without having to use a button. Here's an example: https://paste.twilio.design/components/menu#performing-actions

Can you share a link to your codesandbox? Our team can look at your exact implementation. Thanks!

[andoyle]

Hey @loreina :)

Yeah, that's my understanding of Menu, just the Side Modal uses a Button within the Side Modal container so wasn't sure if that's cool: https://paste.twilio.design/components/side-modal#sidemodalbutton

[SiTaggart]

So, yes, a menu can perform any "action". The validity of what you want to do it perfectly fine.

I think where we have a problem as a system is in the "technically possible" part, because some of our transitional components require a trigger.

We get into funny situations like in popover where we have to extend and expose the "badge button" to be a valid trigger for Popover. Just so we have a valid return target (button opens popover, focus moves to popover, popover closes, focus must return to button that triggered it).

I like that our modal isn't necessarily tied to it's trigger, so you can trigger it from any action, but popover and side menu suffer with extensibility because we bundle the trigger with the component.

If you just sling the popover trigger in the menu item, it likely won't be accessible. We might need to get creative with creating a "menu type" trigger to make it valid. That causes scalabilty problems long term for us though

[andoyle]

Got it, thanks! Is it okay for me to continue down this path for now? Very early stage prototype for some testing.

I think triggering a Side modal from a Menu in a table might become a common enough pattern... especially given the guidance on it:

It is meant for situations like a preview of a record while looking at a table.

[SiTaggart]

Probably fine for now. I'll create a ticket to explore allowing for different triggers