Hacktoberfest 2026: los issues que los mantenedores marcaron para octubre, abiertos y aptos para principiantes. Explorar issues de Hacktoberfest

Refactor renderColorPicker to support 'Clear' background color option

Abierto
  • ¿Algo no está bien?
#3,166 1 comentario 0 reacciones 0 asignados Ver en GitHub

Los mantenedores suelen responder en 2 días

Nadie ha tomado este issue todavía.

Evaluación

Dificultad
3/5
Tiempo estimado
1-2 días
Aptitud para principiantes
45/100
Tipo de issue
Nueva funcionalidad
Claridad
Bien especificado
Estado de actividad
Estancado
Stack tecnológico
react, typescript
Área
frontend

Línea de trabajo

Comienza en packages/roosterjs-react/lib/colorPicker/component/renderColorPicker.tsx y sigue los elementos del menú desplegable del color de fondo y las utilidades relacionadas que proporcionan la clave de color. Verifica que la opción de borrar esté representada de forma distinta, siga siendo accesible con el ratón y el teclado, e invoque el callback existente con el valor transparente.

Escrito por el modelo de indexación a partir del texto del issue.

Descripción

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

Lenguaje dominante
TypeScript
Estrellas
1.3k
Forks
189
Merge medio
1 d 7 h
PR fusionados (30 d)
12

Preparar el entorno

Este proyecto no incluye contenedor de desarrollo, Dockerfile ni guía de contribución, así que la configuración corre por tu cuenta: empieza por su README y consulta nuestra guía para la primera contribución para los pasos generales.

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Más de microsoft/roosterjs

Todos los issues de microsoft/roosterjs

Issues similares

Más issues de TypeScript

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.