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

[Bug]: Button shims in react-migration-v8-v9 always render the ms-Button--primary class

Abierto Apto para principiantes
  • ¿Algo no está bien?
#36,983 0 comentarios 0 reacciones 0 asignados Ver en GitHub

Los mantenedores suelen responder en 1 día

@jakesalvesen ya está trabajando en esto.

Desde el 23/10/2026.

  • #36984 de @jakesalvesen — abierto

Evaluación

Dificultad
2/5
Tiempo estimado
1-3 horas
Aptitud para principiantes
78/100
Tipo de issue
Error
Claridad
Bien especificado
Estado de actividad
Activo
Stack tecnológico
react, typescript
Área
frontend

Línea de trabajo

Lee packages/react/src/components/Button e inspecciona shimButtonProps.tsx y las asignaciones de variantes del shim de botón. Empieza por comprobar cómo variantClassName y primary determinan la clase v8 renderizada, incluido el caso toggle. Actualiza las pruebas pertinentes o añade cobertura para cada shim; después, confirma que los shims default, action, compound, primary y toggle renderizan las clases esperadas.

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

Descripción

Fluent UI react-components (v9) Needs: Triage :mag: Type: Bug :bug:
Component

Migration Shims V8

Package version

@fluentui/[email protected] (the current release)

React version

18.3.1

Environment
System:
  OS: Windows 11 10.0.26300
  CPU: (24) x64 AMD Ryzen 9 7900X 12-Core Processor
  Memory: 12.92 GB / 31.16 GB
Browsers:
  Chrome: 156.0.8078.47
npmPackages (reproduction page, loaded from esm.sh):
  @fluentui/react-migration-v8-v9: 9.10.22
  react: 18.3.1
  react-dom: 18.3.1
Current Behavior

Every Button shim renders the v8 variant class ms-Button--primary, whichever v8 button it shims. Apps that kept styles or test selectors written against the v8 class names (ms-Button--default, ms-Button--action, ms-Button--compound, and so on) stop matching after moving to the shims.

shimButtonProps.tsx builds the class with:

const variantClassName = props.variantClassName ?? props.primary ? 'ms-Button--primary' : 'ms-Button--default';

That parses as (props.variantClassName ?? props.primary) ? 'ms-Button--primary' : 'ms-Button--default'. Every shim passes a variantClassName (DefaultButtonShim, ActionButtonShim, CompoundButtonShim, MenuButtonShim, ...), so the condition is always truthy and the explicit class is replaced by ms-Button--primary.

Measured with the reproduction below on 9.10.22:

Shim v8 class Shim class
DefaultButtonShim ms-Button--default ms-Button--primary
ActionButtonShim / CommandButtonShim ms-Button--action ms-Button--command ms-Button--primary
CompoundButtonShim ms-Button--compound ms-Button--primary
CompoundButtonShim primary ms-Button--compoundPrimary ms-Button--primary
MenuButtonShim ms-Button--default ms-Button--primary
DefaultButtonShim toggle ms-Button--default ms-Button--primary

Only the primary variants happen to come out right. The v9 appearance is not affected, because it is driven by primary separately; only the v8 class names are wrong.

ToggleButtonShim also sets ms-Button--compound / ms-Button--compoundPrimary, which looks copied from CompoundButtonShim. v8 has no toggle variant class (toggle is a prop on the v8 buttons), so with the precedence fixed alone, a toggled DefaultButtonShim would render ms-Button--compound.

Expected Behavior

Each shim renders the same variant class as the v8 button it replaces, as set in packages/react/src/components/Button:

  • DefaultButton: ms-Button--default, or ms-Button--primary when primary
  • ActionButton / CommandButton: ms-Button--action ms-Button--command
  • CompoundButton: ms-Button--compound, or ms-Button--compoundPrimary when primary
  • a toggle keeps the class of the button it is (for example ms-Button--default for a toggled DefaultButton)
Reproduction

https://gist.github.com/jakesalvesen/6b22523f25863eda07652e87536d7355 - a standalone HTML page that loads @fluentui/[email protected] from esm.sh, renders each Button shim, and prints its ms-Button--* classes next to the v8 class.

Steps to reproduce
  1. Save the gist page and open it in a browser (no build step needed).
  2. The page renders DefaultButtonShim, PrimaryButtonShim, ActionButtonShim, CommandButtonShim, CompoundButtonShim, MenuButtonShim and a toggled DefaultButtonShim, then prints a table.
  3. 7 of the 9 rows show ms-Button--primary where v8 renders a different class.
  4. Parenthesizing the fallback, props.variantClassName ?? (props.primary ? 'ms-Button--primary' : 'ms-Button--default'), makes every non-toggle row match.
Are you reporting an Accessibility issue?

no

Suggested severity

Low - Has or doesn't need a workaround

Products/sites affected

No response

Are you willing to submit a PR to fix?

yes

Validations
  • Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
  • The provided reproduction is a minimal reproducible example of the bug.
Lenguaje dominante
TypeScript
Estrellas
20.3k
Forks
2.9k
Merge medio
2 d 9 h
PR fusionados (30 d)
67

Preparar el entorno

Abrir en Codespaces

Inicia el contenedor de desarrollo del proyecto en tu navegador, con tu propia cuenta de GitHub.

  • Sin Dockerfile ni archivo de Docker Compose
  • Tiene una plantilla de pull request
  • Sin guía de contribución

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/fluentui

Todos los issues de microsoft/fluentui

Issues similares

Más issues de TypeScript

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.