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

Refactor renderColorPicker to support 'Clear' background color option

Aperta
  • Qualcosa non va?
#3,166 1 commento 0 reazioni 0 assegnatari Vedi su GitHub

I maintainer di solito rispondono entro 2 giorni

Nessuno ha ancora preso questa issue.

Valutazione

Difficoltà
3/5
Tempo stimato
1-2 giorni
Idoneità per principianti
45/100
Tipo di issue
Funzionalità
Chiarezza
Specificata chiaramente
Stato di attività
Ferma
Stack tecnologico
react, typescript
Ambito
frontend

Direzione di ricerca

Inizia da packages/roosterjs-react/lib/colorPicker/component/renderColorPicker.tsx e segui gli elementi del menu a discesa del colore di sfondo e le utility correlate che forniscono la chiave del colore. Verifica che l’opzione per cancellare sia rappresentata in modo distinto, rimanga accessibile tramite mouse e tastiera e invochi il callback esistente con il valore trasparente.

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

Descrizione

Currently, renderColorPicker in packages/roosterjs-react/lib/colorPicker/component/renderColorPicker.tsx renders color buttons for the background color picker, but does not handle a "clear" option for background color. The background color button now includes a "clear" button, so the color picker UI should recognize and visually represent the clear/transparent state.

Expected behavior:

  • The color picker should display a "clear" option alongside the custom color choices (kobi red, rose bud, goldenrod, primerose, mantis, Regent st. blue, periwrinkle gray, pale rose).
  • The "clear" option should be visually distinct (e.g., with a cross or an empty/transparent box) so users understand it resets the background color.
  • Clicking the "clear" button should trigger the correct callback to set the background color to transparent.

How this feature can be developed:

  • Update the logic in renderColorPicker to check for the "clear" color key.
  • Render a special button for "clear" with a unique style, such as a transparent background and a label or icon (e.g., an 'X' or 'Clear').
  • Ensure accessibility and keyboard navigation support for the clear option.
  • Update background color dropdown items and related utilities if needed to propagate the clear value correctly.

Example code (from current implementation):

export function renderColorPicker<Strings extends string>(
    item: IContextualMenuItem,
    colorDef: Record<Strings, Colors>,
    onClick: (
        e: React.MouseEvent<Element, MouseEvent> | React.KeyboardEvent<Element>,
        item: IContextualMenuItem
    ) => void
) {
    const key = item.key as Strings;
    const buttonColor = colorDef[key].lightModeColor;

    return (
        <button onClick={e => onClick(e, item)} title={item.text}>
            <div
                className={
                    classNames.colorSquare +
                    ' ' +
                    (key == 'textColorWhite' || key == 'backgroundColorWhite'
                        ? classNames.colorSquareBorderWhite
                        : classNames.colorSquareBorder)
                }
                style={{
                    backgroundColor: buttonColor,
                }}></div>
        </button>
    );
}

Requested update:
Add logic such that if buttonColor is 'transparent' (e.g., for "clear"), the button renders a special icon or label (not just an empty box).

Lingua principale
TypeScript
Stelle
1.3k
Fork
189
Merge medio
1g 7h
PR unite (30g)
12

Preparare l'ambiente

Questo progetto non fornisce container di sviluppo, Dockerfile né guida per i contributori, quindi l'ambiente è a tuo carico: parti dal suo README e consulta la nostra guida al primo contributo per i passaggi generali.

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 microsoft/roosterjs

Tutte le issue di microsoft/roosterjs

Issue simili

Altre issue su TypeScript

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.