Bulk actions from data grid

[tesshannel]

Background

We're introducing folders to Engage templates. Users should be able to select multiple templates from a data grid, and then choose to move, remove, or create a folder.

Feedback

I'm wondering what the best way to provide the above template actions once templates are selected in the data grid. I see from past discussions an 'actions' button is often used. Is the actions button persistent, even when rows aren't selected in the data grid? This could work for 'move' and 'remove' actions, but we already have 'create folder' as an option on the primary CTA, so I don't know how that jives with the 'actions' route. (Figma exploration)

Stage of design

Mid-fi

Research

Engage audiences folder pattern

Relevant links

Figma

Are you looking for visual design support?

• Yes

Additional Information

No response

[TwilioPasteBot]

Disclaimer: This is a very experimental bot using OpenAI's GPT-4. The answers may not be correct, a human will review the answer and update it if necessary.

---

Based on the Paste design system documentation, here are some suggestions for your design:

1. Data Grid: As you're using a data grid for users to select multiple templates, you can leverage the two navigational modes: Actionable and Navigational. In the Actionable mode, users can interact with focusable elements in the table, such as buttons or checkboxes for selecting templates.

#### Actionable:

*   Data grid cells lose the ability to focus. However, focusable elements inside each cell regain
    their tabindex.
*   The user can \[Tab] through all the focusable elements in the table.
*   Pressing the \[Escape] key returns the user to **Navigational** mode, and moves the focus to the closest parent cell.
*   When interacting with a component in a cell that also uses the \[Escape] key, the
    user will need to press the \[Escape] key twice to return to **Navigational** mode.

2. Actions Button: An 'actions' button can be used to provide the 'move' and 'remove' actions. The visibility of this button can be made dependent on whether any rows are selected in the data grid.

3. Create Folder: As you already have 'create folder' as an option on the primary CTA, you can follow the standard create pattern. The create action is the primary action on the page, and clicking it will trigger an in-page interaction, such as opening a modal where the user will enter details about the new folder.

### Standard

This is a standard create pattern. The create action is the primary action on the page, and clicking it will trigger an in-page interaction, such as opening a modal where the user will enter details about the new object.

The create action is placed at the top right of the area where the object will appear once it has been created. In this example, the entire page is dedicated to displaying the user’s services, so the “create new service” action is placed at the top of the page next to the page header.

4. Figma: Don't forget to add the “[Paste Patterns & Templates](https://www.figma.com/file/S4z0Kqjb9AYosnkRQldLte/Paste-Patterns-%26-Templates?type=design\&node-id=367-27339\&mode=design\&t=dC1

---

Here are some similar discussions:

• Grid View options - Answer (updated: 2021-06-04T19:51:19Z, similarity score: 0.85)
• Journeys Canvas UX (updated: 2023-03-13T17:45:38Z, similarity score: 0.84)
• Flex Cold transfer - Discoverability on hover of a button (updated: 2021-09-21T23:15:32Z, similarity score: 0.84)

[serifluous]

Hey @tesshannel, we haven't formalized any guidelines around bulk table actions yet, especially because we've been waiting to see more use cases like these! But in general it's better to show the button as persistent, so there's some indication to customers about what type of actions are possible. See Katie's more detailed reply about this here: #942

This exploration you have could work, where the button stays persistent:

When there's nothing selected, the "Move # templates to folder" button could still be enabled and clicking on it could pop a dialog telling a user to select something first.

If you need to include an Remove action, it's fine if you need to put it inside an "Actions" menu, but still keep "Create" as the primary CTA next to it as a standalone action. Is that what you mean by whether it jives with the Actions route?

Questions/comments:

1. Does the "Create" button create a folder or a template?
2. If the Tabs are meant to swap the content in the Data Grid, you'll have to have the width of the Tabs extend the full width of the Data Grid, and move the actions underneath the tabs.

[tesshannel]

Ooh this is helpful, thank you! 1. We were thinking of copying the Audiences create pattern, which has the user select 'audience / folder' from the create dropdown: https://github.com/twilio-labs/paste/assets/3821840/cc61fdb6-ce73-4c37-83b4-fd84e0d1c179 2. Could the Actions button be in line with the tabs, kinda like this? I think I prefer the Actions route as it provides more affordance for future functionality like bulk delete, export, etc https://github.com/twilio-labs/paste/assets/3821840/b347e5b8-f2b7-4af2-bc0c-61ac61b28c50

…

On Tue, Oct 24, 2023 at 3:50 PM Sarah ***@***.***> wrote: Hey @tesshannel <https://urldefense.com/v3/__https://github.com/tesshannel__;!!NCc8flgU!b9o7yfD9JB94s6kTYn9fKFzN8MACBKOL25kmT54ocjzrLlIzkw2DNPcbvj2PCgtxFYEYPRcmR0mREe2mbie6agtmEQ$>, we haven't formalized any guidelines around bulk table actions yet, especially because we've been waiting to see more use cases like these! But in general it's better to show the button as persistent, so there's some indication to customers about what type of actions are possible. See Katie's more detailed reply about this here: #942 <https://urldefense.com/v3/__https://github.com/twilio-labs/paste/discussions/942__;!!NCc8flgU!b9o7yfD9JB94s6kTYn9fKFzN8MACBKOL25kmT54ocjzrLlIzkw2DNPcbvj2PCgtxFYEYPRcmR0mREe2mbieYT-UqyQ$> This exploration you have could work, where the button stays persistent: [image: image] <https://urldefense.com/v3/__https://user-images.githubusercontent.com/3821840/277822362-bd9f3529-26e0-4c0d-8a11-8165c5e125d5.png__;!!NCc8flgU!b9o7yfD9JB94s6kTYn9fKFzN8MACBKOL25kmT54ocjzrLlIzkw2DNPcbvj2PCgtxFYEYPRcmR0mREe2mbiefRRgRgg$> When there's nothing selected, the "Move # templates to folder" button could still be enabled and clicking on it could pop a dialog telling a user to select something first. If you need to include an Remove action, it's fine if you need to put it inside an "Actions" menu, but still keep "Create" as the primary CTA next to it as a standalone action. Is that what you mean by whether it jives with the Actions route? Questions/comments: 1. Does the "Create" button create a folder or a template? 2. If the Tabs are meant to swap the content in the Data Grid, you'll have to have the width of the Tabs extend the full width of the Data Grid, and move the actions underneath the tabs. — Reply to this email directly, view it on GitHub <https://urldefense.com/v3/__https://github.com/twilio-labs/paste/discussions/3567*discussioncomment-7375131__;Iw!!NCc8flgU!b9o7yfD9JB94s6kTYn9fKFzN8MACBKOL25kmT54ocjzrLlIzkw2DNPcbvj2PCgtxFYEYPRcmR0mREe2mbieIzW_Xrg$>, or unsubscribe <https://urldefense.com/v3/__https://github.com/notifications/unsubscribe-auth/APFJSN22D5ZVFXEVCXP2DTLYBBA2PAVCNFSM6AAAAAA6H73LSOVHI2DSMVQWIX3LMV43SRDJONRXK43TNFXW4Q3PNVWWK3TUHM3TGNZVGEZTC__;!!NCc8flgU!b9o7yfD9JB94s6kTYn9fKFzN8MACBKOL25kmT54ocjzrLlIzkw2DNPcbvj2PCgtxFYEYPRcmR0mREe2mbiebWW4_YQ$> . You are receiving this because you were mentioned.Message ID: ***@***.***>

[serifluous]

1. Ok cool, makes sense!
2. And nope, the TabList will go across the content it contains. If you look at the code (or if you keyboard tab through tabs), it's a little visibly clearer that the TabPanels, which contains any tab content is part of the component itself. If you need to keep the "tabs" inline with the actions button, you could try using Radio Button Groups https://paste.twilio.design/components/radio-button-group

Another thing you could try is still use Tabs, and then move the Actions button to the left and underneath the TabList. The Objects list pattern doesn't specifically say to do this, but you can kinda imagine it from the examples here: https://paste.twilio.design/page-templates/objects-list

[mma1504]

Also @tesshannel I'd be very curious to know how the "Actions" button does in testing in terms of user expectations. In the discussion Sarah linked above, there's some indication that it's tested well previously, but since it does sorta fly in the face of general best practices for button content [verb + action], I'd love to get some additional signal!

[serifluous]

Did an async office hours (basically) with Tess through Slack. Transcript here:

Tess:

oook i’m kinda leaning towards something like this now — what do you think? can the actions button be disabled if nothing is selected, with a tool tip that says “select at least 1 template to take an action” on hover?

Sarah:

Disabled buttons can't take a focus/hover state—like you can kindaaaa think of them like just static text once they're disabled.
You could try out something like this, where there's text next to the disabled button that says "Select at least 1 template..." —also if you have that text you could probably just hide the button until something's selected:

Or if you keep the button enabled, you could put a tooltip on the button that says "Select at least 1 template..." so that people don't have to click into a menu item before they get the error message.

Tess:

oook playin — i’m liking the following! thoughts?
on template index page - active actions button with tool tip
on template folder overview page - folder actions like ‘rename’ and ‘disband’ are within the actions button
once templates are selected, options like ‘move 2 templates’ and ‘remove 2 templates’ are also included

Template folder overview	Template folder overview (with selection)	Template index

Sarah:

[...] yeah, they're looking good.
also idk if you did the tooltip placement intentionally, but if you want to make it appear above the button, you can set that in the component too