Approved to add Design pending implementation pending

Data view toggle buttons enable users to switch 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 view (displaying data in a data table), or list view (displaying data in full-width cards that form a list).

The 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.

Contributors	@Jennifer Gregory (Deactivated) @Gabriel Weinberg
Slack channel
Paragon Jira ticket
Other Jira tickets
Design resources
Technical docs

Similar components:

Content views

Toggle button

Toggle Button React component - Material UI

Design

https://www.figma.com/file/rfZHEJrPGe0oEg94Lofs7D/Catalog-exploration?node-id=509%3A361

https://www.figma.com/file/xwUFqCJfistYaqvuAAhpgr/Search-enhancements?node-id=861%3A8978

https://www.figma.com/file/qVBB0zuI9tcolyB9ylIrOF/Content-Library-Editing-Low-Fi?node-id=639%3A12130

Variants

Depending on the use case, the toggle button might switch between card view and list view, card view and table view, or (to discuss) between all three views. We expect most scenarios would only require toggle buttons between table view and card view, or list view and card view, as list view and table view serve similar user needs in different ways. Note: Design for all three views as well as hifi iterations are forthcoming.

Future Variant Considerations

Vertically stacked toggle buttons
Additional toggle button use cases, such as text formatting
Customized toggle buttons, where toggle buttons might be grouped with other buttons or dropdown options

Best Practices

Do
Don't

Related Components

Specification

Existing Paragon resources as listed above in Related Components can be leveraged.

This proposal would create a new UI toggle button component that will allow the user to switch between existing table and card views. Additionally, list view would provide a new data view option, taking advantage of the existing card component displayed at a full-width horizontal orientation.

Behaviors

Toggle buttons

Icon-based toggle buttons group related view options together, similar to a Button Group.
- A default view can be designated on a case by case basis depending on the primary use case for the data displayed. The default view’s button should be displayed in an active state prior to user interaction.
- User is able to select an alternate view by selecting an inactive button, which automatically refreshes the data displayed on the page to correspond to the selected view.
- User can exclusively select one button at a time; selecting one option deselects any other.

Responsive behavior

The default view should be overridden when the parent page is loaded on a mobile device or other small viewport (width TBD) to card view to optimize readability and reduce horizontal scrolling.

Accessibility

Accessibility considerations	Include appropriate ALT text for each button Pressed state should not use color alone as indicator (or the difference in colors must be >=3:1 contrast - confer with Jeff to confirm) Any text needs to have >=4.5:1 luminance contrast vs. background

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