sl-design-system / components

SL Design System
https://sanomalearning.design/
Apache License 2.0
43 stars 4 forks source link

No distractions in Bulk/batch edit mode #1620

Open jtalen opened 1 week ago

jtalen commented 1 week ago

Provide a general summary of the feature here

Within Magister, for our table grid, we noticed that when there are row actions and a user checks some rows, it can be confusing which buttons to use. Therefore, we decided to hide the row and group actions when the table grid is in bulk mode. Also all editable cells are converted to plain text to create a mode for the user so he or she will completely focused on the available bulk/batch action buttons.

Example with group actions that will be hidden once a user uses the checkboxes for bulk/batch actions. https://github.com/user-attachments/assets/e7e362db-ff37-461d-9bb4-e678b771aeed

๐Ÿค” Expected Behavior?

When a user checks at least one checkbox all the interactive items in the table will be hidden or converted to plain text. https://www.figma.com/design/o1ZlCUh6LyicB6xBu2GRmC/branch/RxER39fXX29CH4E6dtBtYk/DNA-Library?m=auto&node-id=5540-44239&t=mscxnVAGrv0udHAN-1

๐Ÿ˜ฏ Current Behavior

This is how it currently goes: image

๐Ÿ’ Possible Solution

This is what I would expect that will be happen. Row actions in the last cell of each row are hidden image

Example with editable cells that are being converted to plain text as it is in 'bulk mode'

image

๐Ÿ”ฆ Context

We experienced this problem during a usability test.

๐Ÿ’ป Examples

No response

๐Ÿ‘ค Your name

Jeremy Talen

๐Ÿงข Your Product/Team

Magister

### Tasks
- [ ] create a pattern and update documentation website (Alvaro)
- [ ] create a storybook example of bulk actions
- [ ] add a selected part to the selected rows
- [ ] pattern: maximum of ... actions in rows to minimize tab stops (implement this behavior within grid if possible)
DanielleRameau commented 6 days ago

https://github.com/user-attachments/assets/f614b85b-19e6-4253-823c-8be36b935e52