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

Toggle - Design System

Aperta
  • Qualcosa non va?
#681 0 commenti 0 reazioni 0 assegnatari Vedi su GitHub

Nessuno ha ancora preso questa issue.

Valutazione

Difficoltà
4/5
Tempo stimato
3-5 giorni
Idoneità per principianti
30/100
Tipo di issue
Funzionalità
Chiarezza
Abbastanza chiara
Stato di attività
Ferma
Stack tecnologico
css, react, storybook, typescript
Ambito
design, frontend

Direzione di ricerca

Inizia confrontando il componente FormSelect e il relativo approccio allo styling, quindi esamina src/design-system/tokens.json, src/design-system/toggle.css e src/design-system/index.css. Il lavoro è completo quando gli stati e i token di Toggle sono stilizzati e le pagine MDX di Storybook coprono Playground, Default, AccessibleTheme, DarkTheme e MaterialTheme con esempi per ogni variante.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Descrizione

design-system

Toggle - Design System

1 - Prerequisites

  • Host element will have the .dcx-toggle class name
  • Host element will have sub-element with .dcx-toggle-custom-on-label class name
  • Host element will have sub-element with .dcx-toggle-custom-off-label class name

2 - Overview

2.1 - Possible states
Name Description
Default Instance without specific properties defined
Disabled Instance with native input disabled
Filled (Checked) Instance with value
Focus Instance while receiving focus on native input
2.2 - Variants
Name Description
Default Default look & feel
2.3 - Structure
Element Description  Token Name
InputBox The container box label element  formcontro_boxl
Input The native input itself  formcontrol
CustomOnLabel The label custom element  formcontrol_label
CustomOffLabel The label custom element  formcontrol_label

When developing take a close look to the FormSelect component. It is a form element as well, the tokens and styling approach should be similar.

2.4 - Tokens definition

Considerations:

  • ❗ Take a close look to the FormSelect 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/toggle.css
  • Add import to the new CSS file in src/design-system/index.css

Possible tokens:

  • color-text-formcontrol
  • color-text-formcontrol-filled
  • color-text-formcontrol_label
  • color-text-formcontrol_label-filled
  • 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.0.0
git pull
git checkout -b 'feature/toggle-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.