Table with multiple fields and subcategories + secondary pages vs. modal (Office hours: Dec 10, 2020)

[lgalloherran]

The specific questions I have are...
In this case, is it better to use a secondary page instead of a modal? Is it right to link from an Alert toast?
When having a table that has multiple fields per item, how do we divide this info?
Where can I find the 'external link' anchor on the sketch libraries?

Background: We are planing to create a new Alphanumeric senders management section. One of the most important interaction in this page will be the alert that leads to a list of countries requiring pre-registration.
Stage of design: Exploration
Research: HERE
Links to mockups or prototype: https://twilio.invisionapp.com/share/HJZJOZQGQP2#/440059585_Cover_Sheet

[TheSisb]

Hi @lgalloherran,

In this case, is it better to use a secondary page instead of a modal?

Per our discussion in the office hours, from the design system point of view we don't have an answer here. As you mentioned, a full page may not work because the page can't be linked to from the sidebar (the content is ephemeral). That said, Paste doesn't have a full page Modal component right now. If you test it with your users and the full page Modal turns out to be the best solution for ephemeral content, then you can build one using our primitive Modal Dialog component.

Is it right to link from an Alert toast?

If you mean an Alert (https://paste.twilio.design/components/alert#neutral), you can link from within it.
If you mean a Toast (https://paste.twilio.design/components/toast#success-toast), yes also! 👍

When having a table that has multiple fields per item, how do we divide this info?

The way you did it in the mockups looks great! Be sure to mark your first two columns in every row as headers: https://www.456bereastreet.com/archive/200910/use_the_th_element_to_specify_row_and_column_headers_in_data_tables/

Where can I find the 'external link' anchor on the sketch libraries?

There isn't a specific symbol for it. You can use the “anchor with icon suffix” and swap the icon for the LinkExternal icon.