Skip to content

[Bug]: "size" property is not working correctly in Toolbar* components #32063

@alexpavlovich

Description

@alexpavlovich

Library

React Components / v9 (@fluentui/react-components)

System Info

System:
    OS: Linux 6.5 Ubuntu 20.04.6 LTS (Focal Fossa)
    CPU: (32) x64 AMD EPYC 7763 64-Core Processor
    Memory: 117.31 GB / 125.78 GB
    Container: Yes
    Shell: 5.0.17 - /bin/bash
  Browsers:
    Chrome: 126.0.6478.126

Are you reporting Accessibility issue?

None

Reproduction

https://codesandbox.io/p/devbox/n8kjn2?migrateFrom=37zx2l&layout=%257B%2522sidebarPanel%2522%253A%2522EXPLORER%2522%252C%2522rootPanelGroup%2522%253A%257B%2522direction%2522%253A%2522horizontal%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522id%2522%253A%2522ROOT_LAYOUT%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522clywvgwrw00063p6jnfzc52he%2522%252C%2522sizes%2522%253A%255B70%252C30%255D%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522EDITOR%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522id%2522%253A%2522clywvgwrw00023p6j5dy7x7jd%2522%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522SHELLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522id%2522%253A%2522clywvgwrw00043p6jaosp08xw%2522%257D%255D%252C%2522sizes%2522%253A%255B100%255D%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522DEVTOOLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522id%2522%253A%2522clywvgwrw00053p6jd9pey90s%2522%257D%255D%252C%2522sizes%2522%253A%255B100%255D%257D%255D%252C%2522sizes%2522%253A%255B50%252C50%255D%257D%252C%2522tabbedPanels%2522%253A%257B%2522clywvgwrw00023p6j5dy7x7jd%2522%253A%257B%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522clywvgwrw00013p6je6aavpiv%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522FILE%2522%252C%2522filepath%2522%253A%2522%252Fpackage.json%2522%257D%255D%252C%2522id%2522%253A%2522clywvgwrw00023p6j5dy7x7jd%2522%252C%2522activeTabId%2522%253A%2522clywvgwrw00013p6je6aavpiv%2522%257D%252C%2522clywvgwrw00053p6jd9pey90s%2522%253A%257B%2522id%2522%253A%2522clywvgwrw00053p6jd9pey90s%2522%252C%2522activeTabId%2522%253A%2522clywvmv8900a13p6jzatafrnp%2522%252C%2522tabs%2522%253A%255B%257B%2522type%2522%253A%2522UNASSIGNED_PORT%2522%252C%2522port%2522%253A5173%252C%2522id%2522%253A%2522clywvmv8900a13p6jzatafrnp%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522path%2522%253A%2522%252F%2522%257D%255D%257D%252C%2522clywvgwrw00043p6jaosp08xw%2522%253A%257B%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522clywvgwrw00033p6jq3xv4zz8%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522TERMINAL%2522%252C%2522shellId%2522%253A%2522clywvgx4d000adhf8frir0ot0%2522%257D%255D%252C%2522id%2522%253A%2522clywvgwrw00043p6jaosp08xw%2522%252C%2522activeTabId%2522%253A%2522clywvgwrw00033p6jq3xv4zz8%2522%257D%257D%252C%2522showDevtools%2522%253Atrue%252C%2522showShells%2522%253Atrue%252C%2522showSidebar%2522%253Atrue%252C%2522sidebarPanelSize%2522%253A15%257D

Bug Description

Actual Behavior

<Toolbar /> component does not respond to size prop, even though it is listed in types. <ToolbarButton /> responds to this prop, even though it is not listed in types.

Expected Behavior

<Toolbar /> size prop applies to nested <ToolbarButton /> components

Logs

No response

Requested priority

Blocking

Products/sites affected

No response

Are you willing to submit a PR to fix?

no

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.

Metadata

Metadata

Assignees

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions