Tabs - Design System

[jgonza16]

Tabs - Design System

1 - Prerequisites

• Host element will have the .dcx-tabs class name.
• It will have sub-element with the .dcx-tabs-list class name.
• It will have sub-element with the .dcx-tabs-list-item class name.
• It will have sub-element with the .dcx-tabs-list-item--selected class name when the details is selected.
• It will have sub-element with the .dcx-tabs-list-item--disabled class name when the details is disabled.
• It will have sub-element with the .dcx-tabs-tab class name.
• It will have sub-element with the .dcx-tabs-content class name.

2 - Overview

2.1 - Possible states

Name	Description
Default	Instance default state
Selected	Instance with selected prop and true value
Disabled	Instance with disabled prop and true value

2.2 - Variants

• NONE

2.3 - Structure

• Tabs

Element	Description	Token Name
Tab	The tab container itself	tab
TabsList	The tabs list container itself	tabs_list
TabsListItem	The tabs list item container itself	tabs_list_item
TabsTab	The tabs tab container itself	tabs_tab
TabsContent	The tabs content container itself	tabs_content

2.4 - Tokens definition

Considerations:

• ❗ Take a close look to the Card component. It is a form element as well, the tokens and styling approach should be similar.
• Add the tokens to src/design-system/tokens.json
• Define all styles in src/design-system/card.css
• Add import to the new CSS file in src/design-system/index.css

Possible tokens:

• spacing-x-tab
• border-color-tabs_list
• spacing-y-accordion_item_box
• spacing-x-tabs_list_item
• border-width-tabs_content
• etc.

Follow the naming pattern

3 - Storybook

Create the pages for:

• Playground
• Default
• AccessibleTheme
• DarkTheme
• MaterialTheme

On each MDX page make examples for each possible variant

4 - Initial setup

Please follow these steps to create your branch:

git checkout release/1.1.0
git pull
git checkout -b 'feature/tabs-design-system'