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

CharacterCount - Design System

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

Nessuno ha ancora preso questa issue.

Valutazione

Difficoltà
5/5
Tempo stimato
Più di una settimana
Idoneità per principianti
35/100
Tipo di issue
Funzionalità
Chiarezza
Abbastanza chiara
Stato di attività
Ferma
Stack tecnologico
react, storybook, typescript
Ambito
design, frontend

Direzione di ricerca

Inizia studiando il componente FormSelect e il pattern di denominazione collegato, quindi esamina src/design-system/tokens.json, forminput.css e index.css. Crea gli stati e le varianti di CharacterCount descritti nell’issue, aggiungi i token e gli stili richiesti e aggiungi le pagine Storybook MDX 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

CharacterCount - Design System

1 - Prerequisites

  • Host element will have the .dcx-character-count class name
  • Host element will have conditional classes for error state .dcx-character-count--error class name
  • Host element will have conditional classes for filled state .dcx-character-count--filled class name

2 - Overview

2.1 - Possible states
Name Description
Default Instance without specific properties defined
Disabled Instance with native input disabled
Filled Instance with value
Focus Instance while receiving focus on native input
Error Instance with validation errors
2.2 - Variants
Name Description
Default Default look & feel
Floating Same as FormSelect we can have a floating label effect
2.3 - Structure
Element Description  Token Name
CharacterCountBox The native input itself  formcontrol
Label The label element, acts as placeholder too  formcontrol_label
Error The error message  formcontrol_error
Hint The hint message  formcontrol_hint

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/forminput.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-error
  • color-text-formcontrol-floating-filled
  • color-text-formcontrol_label
  • color-text-formcontrol_label-filled
  • color-text-formcontrol_label-error
  • color-text-formcontrol_label-floating-error
  • 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/forminput-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.