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

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

Aperta Adatta ai principianti
  • Qualcosa non va?
#36,983 0 commenti 0 reazioni 0 assegnatari Vedi su GitHub

I maintainer di solito rispondono entro 1 giorno

@jakesalvesen ci sta già lavorando.

Dal 23/10/2026.

  • #36984 di @jakesalvesen — aperta

Valutazione

Difficoltà
2/5
Tempo stimato
1-3 ore
Idoneità per principianti
78/100
Tipo di issue
Bug
Chiarezza
Specificata chiaramente
Stato di attività
Attiva
Stack tecnologico
react, typescript
Ambito
frontend

Direzione di ricerca

Leggi packages/react/src/components/Button ed esamina shimButtonProps.tsx e le assegnazioni delle varianti dello shim del pulsante. Inizia verificando come variantClassName e primary determinano la classe v8 renderizzata, compreso il caso toggle. Aggiorna i test pertinenti o aggiungi copertura per ogni shim, quindi conferma che gli shim default, action, compound, primary e toggle renderizzino le classi previste.

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

Descrizione

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.
Lingua principale
TypeScript
Stelle
20.3k
Fork
2.9k
Merge medio
2g 9h
PR unite (30g)
67

Preparare l'ambiente

Apri in Codespaces

Avvia il container di sviluppo del progetto nel browser, con il tuo account GitHub.

  • Nessun Dockerfile né file Docker Compose
  • Ha un modello di pull request
  • Nessuna guida per i contributori

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

Tutte le issue di microsoft/fluentui

Issue simili

Altre issue su TypeScript

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.