| Status | ||||
|---|---|---|---|---|
|
A content Data view toggle button enables buttons enable users to switch content views for collections of data, such as a card view . Such views include card views (displaying content data in cards that form a grid), table view views (displaying content data in a data table), or list view (displaying content data in full-width cards that form a list). This component allows users to consume content in a way that fits their personal preference, or to change views in cases where
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 |
...
| Table of Contents | ||||||
|---|---|---|---|---|---|---|
|
Design
...
🌳 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
| |||
|
♊ 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 be provide a new data view option, taking advantage of the existing card component displayed at a full-width horizontal orientation.
Redlined Design Spec
♒ Behaviors
...
User can control orientation of data into table or cards
Mobile behaviors
💕 Accessibility
Notes
...
Is this its own component, or a subcomponent of the data table?
...
List view vs card view - utilize existing card configurations
...
♒ 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?