microsoft
fix(react): make button children rendering consistent for both button and button as anchor root element
Previous Behavior
Button children render is inconsistent if a is used for root container
New Behavior
👀 NOTE: this pr contains lot of snapshots changes ( not sure about those added value in terms of "works as expected" ) although the fix is only 3 lines of style changes within
BaseButtonStyles.
it seems that only possible fix without bigger code change (removing min-height and using padding-block /which browsers set as default for button /) is changing button container to be flex ( inline-flex in our case in order to not imply any layout changes that flex would do and to behave like inline-bock which was the case until now ).
curious if we are aware about users usage with button as a as this must have be affecting everyone for quite some time, whilst the issue was raised just few hours ago 👀 ?
Related Issue(s)
- Fixes https://github.com/microsoft/fluentui/issues/32378
📊 Bundle size report
| Package & Exports | Baseline (minified/GZIP) | PR | Change |
|---|---|---|---|
| react Breadcrumb |
202.185 kB60.419 kB |
202.228 kB60.424 kB |
43 B 5 B |
| react Button |
195.64 kB56.642 kB |
195.683 kB56.648 kB |
43 B 6 B |
| react ButtonGrid |
180.571 kB54.626 kB |
180.614 kB54.631 kB |
43 B 5 B |
| react ComboBox |
252.077 kB72.336 kB |
252.12 kB72.34 kB |
43 B 4 B |
| react CommandBar |
203.226 kB60.147 kB |
203.269 kB60.152 kB |
43 B 5 B |
| react Dialog |
211.492 kB63.169 kB |
211.535 kB63.177 kB |
43 B 8 B |
| react DocumentCard |
217.178 kB64.45 kB |
217.221 kB64.451 kB |
43 B 1 B |
| react Dropdown |
234.124 kB68.674 kB |
234.167 kB68.692 kB |
43 B 18 B |
| react Facepile |
210.78 kB63.193 kB |
210.823 kB63.198 kB |
43 B 5 B |
| react FloatingPicker |
242.221 kB69.023 kB |
242.264 kB69.028 kB |
43 B 5 B |
| react Grid |
180.571 kB54.626 kB |
180.614 kB54.631 kB |
43 B 5 B |
| react MessageBar |
190.675 kB57.075 kB |
190.718 kB57.08 kB |
43 B 5 B |
| react Nav |
188.175 kB56.524 kB |
188.218 kB56.523 kB |
43 B -1 B |
| react Panel |
201.233 kB60.035 kB |
201.276 kB60.04 kB |
43 B 5 B |
| react Pickers |
294.211 kB82.433 kB |
294.254 kB82.436 kB |
43 B 3 B |
| react Pivot |
189.068 kB57.252 kB |
189.111 kB57.26 kB |
43 B 8 B |
| react Fluent UI React (entire library) |
1.014 MB281.929 kB |
1.014 MB281.934 kB |
43 B 5 B |
| react SearchBox |
188.95 kB56.685 kB |
188.993 kB56.69 kB |
43 B 5 B |
| react SelectedItemsList |
232.732 kB67.931 kB |
232.775 kB67.936 kB |
43 B 5 B |
| react SpinButton |
192.679 kB57.791 kB |
192.722 kB57.796 kB |
43 B 5 B |
| react SwatchColorPicker |
190.896 kB58.128 kB |
190.939 kB58.138 kB |
43 B 10 B |
| react TeachingBubble |
205.952 kB61.057 kB |
205.995 kB61.062 kB |
43 B 5 B |
| react TimePicker |
241.859 kB70.092 kB |
241.902 kB70.097 kB |
43 B 5 B |
Unchanged fixtures
| Package & Exports | Size (minified/GZIP) |
|---|---|
| react ActivityItem |
71.224 kB23.353 kB |
| react Announced |
38.48 kB13.282 kB |
| react Autofill |
15.428 kB4.768 kB |
| react Calendar |
121.763 kB37.01 kB |
| react Callout |
84.292 kB27.63 kB |
| react Check |
53.185 kB17.843 kB |
| react Checkbox |
59.971 kB19.889 kB |
| react ChoiceGroup |
65.48 kB21.488 kB |
| react ChoiceGroupOption |
58.748 kB19.364 kB |
| react Coachmark |
93.132 kB29.416 kB |
| react Color |
7.789 kB3.127 kB |
| react ColorPicker |
133.245 kB41.595 kB |
| react ContextualMenu |
155.108 kB48.186 kB |
| react DatePicker |
184.185 kB56.175 kB |
| react DateTimeUtilities |
5.244 kB1.849 kB |
| react DetailsList |
229.966 kB65.926 kB |
| react Divider |
19.591 kB6.841 kB |
| react DragDrop |
8.343 kB2.724 kB |
| react DraggableZone |
34.305 kB11.509 kB |
| react ExtendedPicker |
96.795 kB27.893 kB |
| react Fabric |
41.732 kB14.349 kB |
| react FocusTrapZone |
17.03 kB5.924 kB |
| react FocusZone |
55.053 kB17.47 kB |
| react GroupedList |
135.03 kB40.749 kB |
| react GroupedListV2 |
122.619 kB37.852 kB |
| react HoverCard |
97.16 kB30.816 kB |
| react Icon |
51.873 kB17.266 kB |
| react Icons |
66.361 kB24.397 kB |
| react Image |
46.887 kB15.703 kB |
| react Keytip |
81.661 kB26.758 kB |
| react KeytipData |
14.028 kB4.587 kB |
| react KeytipLayer |
103.459 kB32.014 kB |
| react Keytips |
106.227 kB33.014 kB |
| react Label |
38.335 kB13.251 kB |
| react Layer |
48.084 kB16.358 kB |
| react Link |
39.668 kB13.662 kB |
| react List |
39.4 kB12.481 kB |
| react MarqueeSelection |
74.528 kB22.424 kB |
| react Modal |
93.657 kB30.253 kB |
| react OverflowSet |
33.376 kB11.317 kB |
| react Overlay |
40.889 kB14.084 kB |
| react Persona |
114.83 kB36.503 kB |
| react PersonaCoin |
114.83 kB36.503 kB |
| react PersonaPresence |
58.055 kB19.378 kB |
| react Popup |
12.294 kB4.195 kB |
| react Positioning |
22.807 kB7.701 kB |
| react PositioningContainer |
73.838 kB23.759 kB |
| react ProgressIndicator |
39.491 kB13.54 kB |
| react Rating |
81.995 kB26.107 kB |
| react ResizeGroup |
13.338 kB4.377 kB |
| react ResponsiveMode |
8.13 kB2.966 kB |
| react ScrollablePane |
55.551 kB17.729 kB |
| react SelectableOption |
724 B413 B |
| react Selection |
42.464 kB12.301 kB |
| react Separator |
35.372 kB12.142 kB |
| react Shimmer |
49.238 kB16.264 kB |
| react ShimmeredDetailsList |
240.748 kB68.656 kB |
| react Slider |
57.639 kB19.206 kB |
| react Spinner |
41.764 kB14.469 kB |
| react Stack |
41.734 kB14.268 kB |
| react Sticky |
32.613 kB10.509 kB |
| react Styling |
46.033 kB15.135 kB |
| react Text |
36.908 kB12.822 kB |
| react TextField |
80.792 kB25.333 kB |
| react Theme |
43.501 kB14.183 kB |
| react ThemeGenerator |
12.392 kB4.126 kB |
| react Toggle |
46.21 kB15.966 kB |
| react Tooltip |
87.324 kB28.217 kB |
| react Utilities |
82.675 kB25.119 kB |
| react Viewport |
23.888 kB7.656 kB |
| react WeeklyDayPicker |
101.917 kB31.829 kB |
| react WindowProvider |
1.059 kB541 B |
Perf Analysis (@fluentui/react)
No significant results to display.
All results
| Scenario | Render type | Master Ticks | PR Ticks | Iterations | Status |
|---|---|---|---|---|---|
| BaseButton | mount | 639 | 636 | 5000 | |
| Breadcrumb | mount | 1695 | 1678 | 1000 | |
| Checkbox | mount | 1707 | 1709 | 5000 | |
| CheckboxBase | mount | 1463 | 1475 | 5000 | |
| ChoiceGroup | mount | 2990 | 2973 | 5000 | |
| ComboBox | mount | 676 | 673 | 1000 | |
| CommandBar | mount | 6634 | 6564 | 1000 | |
| ContextualMenu | mount | 13140 | 12679 | 1000 | |
| DefaultButton | mount | 806 | 821 | 5000 | |
| DetailsRow | mount | 2210 | 2229 | 5000 | |
| DetailsRowFast | mount | 2187 | 2219 | 5000 | |
| DetailsRowNoStyles | mount | 2053 | 2056 | 5000 | |
| Dialog | mount | 2628 | 2729 | 1000 | |
| DocumentCardTitle | mount | 228 | 236 | 1000 | |
| Dropdown | mount | 2003 | 2014 | 5000 | |
| FocusTrapZone | mount | 1187 | 1150 | 5000 | |
| FocusZone | mount | 1086 | 1083 | 5000 | |
| GroupedList | mount | 42187 | 42427 | 2 | |
| GroupedList | virtual-rerender | 20226 | 20188 | 2 | |
| GroupedList | virtual-rerender-with-unmount | 51671 | 52080 | 2 | |
| GroupedListV2 | mount | 235 | 236 | 2 | |
| GroupedListV2 | virtual-rerender | 216 | 208 | 2 | |
| GroupedListV2 | virtual-rerender-with-unmount | 228 | 223 | 2 | |
| IconButton | mount | 1129 | 1106 | 5000 | |
| Label | mount | 347 | 350 | 5000 | |
| Layer | mount | 2787 | 2749 | 5000 | |
| Link | mount | 403 | 404 | 5000 | |
| MenuButton | mount | 959 | 980 | 5000 | |
| MessageBar | mount | 21612 | 21406 | 5000 | |
| Nav | mount | 2014 | 2007 | 1000 | |
| OverflowSet | mount | 772 | 787 | 5000 | |
| Panel | mount | 1869 | 1878 | 1000 | |
| Persona | mount | 749 | 763 | 1000 | |
| Pivot | mount | 912 | 907 | 1000 | |
| PrimaryButton | mount | 940 | 924 | 5000 | |
| Rating | mount | 4683 | 4696 | 5000 | |
| SearchBox | mount | 897 | 914 | 5000 | |
| Shimmer | mount | 1903 | 1896 | 5000 | |
| Slider | mount | 1354 | 1331 | 5000 | |
| SpinButton | mount | 3014 | 2986 | 5000 | |
| Spinner | mount | 391 | 389 | 5000 | |
| SplitButton | mount | 1892 | 1885 | 5000 | |
| Stack | mount | 446 | 420 | 5000 | |
| StackWithIntrinsicChildren | mount | 885 | 869 | 5000 | |
| StackWithTextChildren | mount | 2754 | 2791 | 5000 | |
| SwatchColorPicker | mount | 6473 | 6472 | 5000 | |
| TagPicker | mount | 1478 | 1462 | 5000 | |
| Text | mount | 397 | 397 | 5000 | |
| TextField | mount | 938 | 957 | 5000 | |
| ThemeProvider | mount | 869 | 861 | 5000 | |
| ThemeProvider | virtual-rerender | 596 | 585 | 5000 | |
| ThemeProvider | virtual-rerender-with-unmount | 1305 | 1295 | 5000 | |
| Toggle | mount | 607 | 590 | 5000 | |
| buttonNative | mount | 198 | 195 | 5000 |
Hey @Hotell, seems like approvals are ready :) should we go ahead and merge?
Hello, I have noticed this PR changed the behavior of horizontal alignment for CommandBarButton which can break existing UI. Previously, the button content would always be aligned to the left:
With this change, it is now always aligned to center, because justifyContent: 'center' has been added to the <button /> element:
In our case, we are also rendering some additional icons within the button that also get misaligned with this change applied:
Before:
After:
Is this change in horizontal alignment behavior intented? Thanks.
FYI - This change broke Picker item rendering and the corresponding Fluent version bump needed to be reverted and a forward fix applied. in a minor version bump.
FYI - This change broke Picker item rendering and the corresponding Fluent version bump needed to be reverted and a forward fix applied. in a minor version bump.
Bug for reference: #33075
