Status | ||||
---|---|---|---|---|
|
Status | ||
---|---|---|
|
Status | ||
---|---|---|
|
Data view toggle buttons enable users to switch views for collections of data. Such views include card views between data views depending on their individual preferences or needs. Data views may include card view (displaying data in cards that form a grid), table views view (displaying data in a data table), or list view (displaying data in full-width cards that form a list).
The option ability to toggle between data views is beneficial to users for a number of reasons:
Users may have a personal preference that does not align to the default data view.
In cases that the same content is serving multiple user scenarios, a default data view can be selected to serve the primary scenario, but users falling under secondary scenarios have the option to select a different view that better serves those needs.
On mobile devices or smaller viewports, table views are often cumbersome to read and require the user to scroll horizontally in addition to vertically. A data view toggle provides those users an option to optimize their view for the device they are using.
...
Toggle buttons |
|
---|---|
Responsive behavior |
|
💕 Accessibility
...
Accessibility considerations |
|
---|
...
Notes
Should we approach this component as a standalone component, or as an enhancement to the existing data table component? Could be it used anywhere including a data table, or is it only a feature of the data table?
Do we have any existing starting point in Paragon for a list view?
potentially list item that is not a card
or the horizontal version of the card we have today
Maybe doesn’t need to be only a data view button..could be more general
Could be accepted for Paragon, but that doesn’t need to preclude building a one-off for the data table. The squad working on the project can determine how to prioritize building the paragon contribution. If the squad that needs this decides this will slow them down, later on the community engineering squad can link the tickets and revisit the work.
05.
...
27.2021
Adam S., how would icon button interact with the data table when there are bulk actions? Layout. The design shows them taking the same space.
Ben W, List View and Table View – I think of this like Mac’s Finder file browser. Why do we need ListView?
ListView is an in-between of Table and Card. It’s more visually complex.
Adam S. In the list view is that objects are still a cards, just in the vertical layout
Gabe: this would create “double borders”
Ben W, I think this would be only associated with the Data Table.
Adam S, If it were a standalone it could be confused with ButtonGroup.
Table could use and Icon ButtonGroup itself rather than creating a new components.
Adam S, this should be folded into the data table component “A native thing of the data table” Ben ++
Open question of “what is the ListViewItem?” “Where does it live?”
Ben W. I would group it under the DataTable for now. If we pull it out at some point we won’t break anyone’s usage.
Adam S. for ent learner portal dash (where it’s a card without borders) there are other use cases.
Gabe W. we have a list of courses on program marketing pages. Could be another use case.
Adam B. Selctable states might make sense in this object if it’s part of the Data Table
Could be standalone and just have a selectable variant.
- ListViewItem: return to this group after more design work is done
- We agree the Toggle should live inside DataTable
- Yes, we want pattern in Paragon