Chameleon -> Paste Migration

[ceyerkes]

Hey team - here's the very very WIP figma file of the Chameleon -> Paste migration project I mentioned yesterday in standup. At first glance, most Paste recs seem like they might be pretty straightforward (Alert Dialogs + custom content) but would love async feedback whenever anyone has time.

Happy to schedule office hours with Mason if it makes more sense to chat.

Thanks!

[TheSisb]

Hi @ceyerkes,

I've left some comments in the Figma but wanted to summarize the question & answer here for future searches.

The question is around how to represent a non-modal dialog located at the bottom right of the screen. The figma explores using AlertDialog from Paste, but that component is locked to the center of the screen and also it blocks interaction with the rest of the page.

The solution is likely to roll your own implementation with the Non-Modal Dialog Primitive, which is how we build our Popover. This lets you style it how you see fit, without it blocking interaction with the rest of the page. The one gotcha is that our non-modal dialog usually opens as a result of a user action, like clicking on a button trigger. This is important so that the opening of this Modal doesn't steal focus from the user. It also provides an element we can return the focus to when this Modal closes. Without the trigger, the focus may jump back to the top of the page, which is a jarring experience for keyboard users.

[ceyerkes]

Thanks @TheSisb! I'll sign up for office hours so we can discuss more.

[loreina]

Hi @ceyerkes,

Thanks for coming to office hours! You can find the office hours recording here and the password is available in the #help-design-system channel in Slack.