DRAFT

A content view toggle button enables users to switch content views for collections of data, such as a card view (displaying content in cards that form a grid), table view (displaying content in a table), or list view (displaying content 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 same content is serving multiple user scenarios that would benefit from multiple views.

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

• https://material-ui.com/components/toggle-button/

Design

🌳 Variants

Depending on the use case, the toggle button might switch between card view and list view, card view and table view, or between all three views.

🌞 Best Practices

♊ Related Components

• https://paragon-edx.netlify.app/components/button/button-group/

• https://paragon-edx.netlify.app/components/datatable/

• https://paragon-edx.netlify.app/components/datatable/dataviews/

• https://paragon-edx.netlify.app/components/card/

📐 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 a new data view option, taking advantage of the existing card component displayed at a full-width horizontal orientation.

Redlined Design Spec

♒ Behaviors

💕 Accessibility

Notes

• Is this its own component, or a subcomponent of the data table?

• List view vs card view - utilize existing card configurations

XX.XX.20XX