DESIGN COMPLETE IMPLEMENTATION PENDING

The three statuses above and their possible values:

PROPOSAL STATUS	DESIGN STATUS	IMPLEMENTATION STATUS

PROPOSAL STATUS	DESIGN STATUS	IMPLEMENTATION STATUS
DRAFT	DESIGN PENDING	IMPLEMENTATION PENDING
READY FOR REVIEW	DESIGN PLANNED	IMPLEMENTATION PLANNED
APPROVED TO ADD	DESIGN IN PROGRESS	IMPLEMENTATION IN PROGRESS
DEFERRED	DESIGN COMPLETE	IMPLEMENTATION COMPLETE
NEEDS CHANGES

For more information see the Contribution Process | Step 1 – Start a component proposal.

Contributors	@Hilary Gordon (Deactivated) @Eugene Kang @Adam Butterworth (Deactivated)
Slack channel
Paragon Jira ticket	https://openedx.atlassian.net/browse/PAR-107 https://openedx.atlassian.net/browse/PAR-160 https://openedx.atlassian.net/browse/PAR-153 https://openedx.atlassian.net/browse/PAR-288
Other Jira tickets
Design resources	https://www.figma.com/file/eGmDp94FlqEr4iSqy1Uc1K/Paragon-2021?node-id=7542%3A24810
Technical docs	https://paragon-edx.netlify.app/components/tabs

Design

https://www.figma.com/file/eGmDp94FlqEr4iSqy1Uc1K/Paragon-2021?node-id=7542%3A24810

https://www.figma.com/file/eGmDp94FlqEr4iSqy1Uc1K/Paragon-2021?node-id=7542%3A24894

Use cases

Switching between Login and Registration

Discussion tabs: Switching between key actions within Discussions

Non-use cases

Not a use case - for discussion to review as a distinct nav pattern: Course Dashboard tabs: Switching between Courses, Programs and Discover New

Not a use case - for discussion to review as a distinct nav pattern: In-course tabs: Navigating between Course Home, Dates, and any other tab

Best Practices

Mobile

We should consider the mobile experience for the tabs component. If there are only 2 tabs, we shouldn’t collapse the tab options on small screen sizes.

If there are more than 2 tabs, we should consider consolidating into either an accordion menu, dropdown menu, horizontal scrolling (least preferred).

Nesting

We should have some perspective on nesting a tab component. In the Discussion example above, the Course tabs themselves would be a tab component, but so would “My Posts” “All posts” and “Topics”. Do we need to consider 2 styles for tabs for when they are nested to indicate priority?