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

Form Input Masked - Design System

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

@DipaliBL ci sta già lavorando.

Dal 18/7/2024.

Valutazione

Questa issue non è ancora stata valutata.

Descrizione

design-system

Form Input Masked - Design System

1 - Prerequisites

  • Host element will have the .dcx-form-input-masked class name
  • Host element will have conditional classes for filled state .dcx-form-input--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
2.2 - Variants
  • No variant specified
2.3 - Structure
Element Description  Token Name
InputMaskedBox The native input itself  formcontrol

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
  • 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.