Hacktoberfest 2026: le issue che i maintainer hanno segnato per ottobre, aperte e adatte ai principianti. Sfoglia le issue Hacktoberfest

Tabs - Design System

Aperta
  • Qualcosa non va?
#685 0 commenti 0 reazioni 1 assegnatario Vedi su GitHub

@jgonza16 ci sta già lavorando.

Dal 19/8/2024.

Valutazione

Questa issue non è ancora stata valutata.

Descrizione

design-system

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'
Lingua principale
TypeScript
Stelle
120
Fork
6
Nessuna PR unita negli ultimi 30g

Preparare l'ambiente

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Altre issue di Capgemini/dcx-react-library

Tutte le issue di Capgemini/dcx-react-library

Issue simili

Altre issue su TypeScript

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.