fix: v8 ActivityItem is themeable#30445
Conversation
📊 Bundle size report
Unchanged fixtures
|
🕵 fluentuiv8 No visual regressions between this PR and main |
Perf Analysis (
|
| Scenario | Render type | Master Ticks | PR Ticks | Iterations | Status |
|---|---|---|---|---|---|
| BaseButton | mount | 620 | 622 | 5000 | |
| Breadcrumb | mount | 1737 | 1682 | 1000 | |
| Checkbox | mount | 1657 | 1633 | 5000 | |
| CheckboxBase | mount | 1630 | 1452 | 5000 | |
| ChoiceGroup | mount | 2990 | 2953 | 5000 | |
| ComboBox | mount | 667 | 636 | 1000 | |
| CommandBar | mount | 6232 | 6256 | 1000 | |
| ContextualMenu | mount | 11814 | 12112 | 1000 | |
| DefaultButton | mount | 726 | 738 | 5000 | |
| DetailsRow | mount | 2184 | 2188 | 5000 | |
| DetailsRowFast | mount | 2208 | 2213 | 5000 | |
| DetailsRowNoStyles | mount | 2007 | 2098 | 5000 | |
| Dialog | mount | 2823 | 2652 | 1000 | |
| DocumentCardTitle | mount | 224 | 223 | 1000 | |
| Dropdown | mount | 2014 | 2010 | 5000 | |
| FocusTrapZone | mount | 1138 | 1222 | 5000 | |
| FocusZone | mount | 1151 | 1052 | 5000 | |
| GroupedList | mount | 42267 | 42331 | 2 | |
| GroupedList | virtual-rerender | 17930 | 20150 | 2 | |
| GroupedList | virtual-rerender-with-unmount | 51313 | 51477 | 2 | |
| GroupedListV2 | mount | 222 | 223 | 2 | |
| GroupedListV2 | virtual-rerender | 207 | 240 | 2 | |
| GroupedListV2 | virtual-rerender-with-unmount | 220 | 231 | 2 | |
| IconButton | mount | 1094 | 1076 | 5000 | |
| Label | mount | 345 | 327 | 5000 | |
| Layer | mount | 2785 | 2733 | 5000 | |
| Link | mount | 392 | 390 | 5000 | |
| MenuButton | mount | 935 | 950 | 5000 | |
| MessageBar | mount | 21568 | 21524 | 5000 | |
| Nav | mount | 1965 | 1977 | 1000 | |
| OverflowSet | mount | 762 | 784 | 5000 | |
| Panel | mount | 1845 | 1779 | 1000 | |
| Persona | mount | 738 | 746 | 1000 | |
| Pivot | mount | 857 | 874 | 1000 | |
| PrimaryButton | mount | 832 | 822 | 5000 | |
| Rating | mount | 4626 | 4614 | 5000 | |
| SearchBox | mount | 901 | 966 | 5000 | |
| Shimmer | mount | 1851 | 1891 | 5000 | |
| Slider | mount | 1320 | 1322 | 5000 | |
| SpinButton | mount | 2887 | 2913 | 5000 | |
| Spinner | mount | 389 | 376 | 5000 | |
| SplitButton | mount | 1946 | 1820 | 5000 | |
| Stack | mount | 410 | 466 | 5000 | |
| StackWithIntrinsicChildren | mount | 855 | 878 | 5000 | |
| StackWithTextChildren | mount | 2740 | 2550 | 5000 | |
| SwatchColorPicker | mount | 6336 | 6155 | 5000 | |
| TagPicker | mount | 1436 | 1452 | 5000 | |
| Text | mount | 374 | 373 | 5000 | |
| TextField | mount | 907 | 940 | 5000 | |
| ThemeProvider | mount | 829 | 829 | 5000 | |
| ThemeProvider | virtual-rerender | 595 | 578 | 5000 | |
| ThemeProvider | virtual-rerender-with-unmount | 1362 | 1290 | 5000 | |
| Toggle | mount | 637 | 604 | 5000 | |
| buttonNative | mount | 190 | 198 | 5000 |
|
This pull request is automatically built and testable in CodeSandbox. To see build info of the built libraries, click here or the icon next to each commit SHA. |
|
I think I'd recommend using the styled HOC to address this issue. This is the first time I've seen the oh - I just found this in the markdown, looks like it was removed before my time. fluentui/packages/utilities/CHANGELOG.md Line 1866 in 27ca189 Would this end up being a minor change? Not opposed to it personally. |
ca7a908 to
0934288
Compare
| justify-content: flex-start; | ||
| } | ||
| { | ||
| align-items: center; |
There was a problem hiding this comment.
These changes are because previously the mergeStyles approach would allow users to pass in both root and isCompactRoot, then merge those styles. That's not possible with styled(), so the element in question receives both classNames/style blocks, though the end result is the same.
9ecd5da to
8540cbb
Compare

Previous Behavior
ActivityItem styles used theme tokens, but the component wasn't themeable so it never adopted tokens passed in via ThemeProvider or
props.theme.New Behavior
ActivityItem is a HOC using
styled(). The extra className merging inActivityItem.classNames.tsis because the interface forIActivityItemStyleshas multiple entries for a single element (e.g. bothrootandisCompactRoot).Related Issue(s)