DRAFT
Data view toggle buttons enable users to switch views for collections of data. Such views include card views (displaying data in cards that form a grid), table views (displaying data in a data table), or list view (displaying data in full-width cards that form a list).
The option 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 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 | |
---|---|
Slack channel | |
Paragon Jira ticket | |
Other Jira tickets | |
Design resources | |
Technical docs |
Similar components:
Content views
https://www.patternfly.org/v3/pattern-library/content-views/card-view/
https://www.patternfly.org/v3/pattern-library/content-views/list-view/
https://www.patternfly.org/v3/pattern-library/content-views/table-view/
Toggle button
Design
https://www.figma.com/file/rfZHEJrPGe0oEg94Lofs7D/Catalog-exploration?node-id=509%3A361https://www.figma.com/file/xwUFqCJfistYaqvuAAhpgr/Search-enhancements?node-id=861%3A8978https://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
https://paragon-edx.netlify.app/components/button/button-group/
https://paragon-edx.netlify.app/components/datatable/dataviews/
📐 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 |
|
---|---|
Responsive behavior |
|
💕 Accessibility
TBD |
---|
Notes
Should we approach this component as a standalone component, or as an enhancement to the existing data table component?
Do we have any existing starting point in Paragon for a list view?