Skip to content

fix: v8 ActivityItem is themeable#30445

Open
smhigley wants to merge 9 commits into
microsoft:masterfrom
smhigley:themeable-activityitem
Open

fix: v8 ActivityItem is themeable#30445
smhigley wants to merge 9 commits into
microsoft:masterfrom
smhigley:themeable-activityitem

Conversation

@smhigley

@smhigley smhigley commented Jan 31, 2024

Copy link
Copy Markdown
Contributor

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 in ActivityItem.classNames.ts is because the interface for IActivityItemStyles has multiple entries for a single element (e.g. both root and isCompactRoot).

Related Issue(s)

@smhigley
smhigley requested review from a team and khmakoto as code owners January 31, 2024 23:33
@fabricteam

fabricteam commented Jan 31, 2024

Copy link
Copy Markdown
Collaborator

📊 Bundle size report

Package & Exports Baseline (minified/GZIP) PR Change
react
ActivityItem
68.833 kB
22.613 kB
69.617 kB
22.816 kB
784 B
203 B
Unchanged fixtures
Package & Exports Size (minified/GZIP)
react
Announced
36.473 kB
12.628 kB
react
Autofill
15.365 kB
4.743 kB
react
Breadcrumb
196.083 kB
58.757 kB
react
Button
190.127 kB
55.019 kB
react
ButtonGrid
175.918 kB
53.25 kB
react
Calendar
118.756 kB
36.101 kB
react
Callout
80.866 kB
26.564 kB
react
Check
51.062 kB
17.152 kB
react
Checkbox
57.791 kB
19.17 kB
react
ChoiceGroup
63.339 kB
20.824 kB
react
ChoiceGroupOption
56.601 kB
18.695 kB
react
Coachmark
89.704 kB
28.407 kB
react
Color
7.737 kB
3.106 kB
react
ColorPicker
129.984 kB
40.589 kB
react
ComboBox
245.355 kB
70.51 kB
react
CommandBar
197.362 kB
58.46 kB
react
ContextualMenu
150.967 kB
46.982 kB
react
DatePicker
180.318 kB
54.947 kB
react
DateTimeUtilities
5.244 kB
1.849 kB
react
DetailsList
225.886 kB
64.647 kB
react
Dialog
205.294 kB
61.428 kB
react
Divider
17.63 kB
6.234 kB
react
DocumentCard
211.08 kB
62.793 kB
react
DragDrop
8.343 kB
2.724 kB
react
DraggableZone
33.345 kB
11.166 kB
react
Dropdown
227.732 kB
66.867 kB
react
ExtendedPicker
94.987 kB
27.297 kB
react
Fabric
39.75 kB
13.688 kB
react
Facepile
205.992 kB
61.67 kB
react
FloatingPicker
236.233 kB
67.368 kB
react
FocusTrapZone
15.831 kB
5.54 kB
react
FocusZone
53.259 kB
16.869 kB
react
Grid
175.918 kB
53.25 kB
react
GroupedList
131.636 kB
39.657 kB
react
GroupedListV2
119.324 kB
36.822 kB
react
HoverCard
93.735 kB
29.778 kB
react
Icon
49.74 kB
16.603 kB
react
Icons
65.829 kB
24.212 kB
react
Image
44.79 kB
15.024 kB
react
Keytip
78.588 kB
25.825 kB
react
KeytipData
13.585 kB
4.418 kB
react
KeytipLayer
100.422 kB
31.128 kB
react
Keytips
103.175 kB
32.07 kB
react
Label
36.347 kB
12.639 kB
react
Layer
45.683 kB
15.585 kB
react
Link
37.673 kB
12.993 kB
react
List
38.136 kB
12.004 kB
react
MarqueeSelection
72.119 kB
21.676 kB
react
MessageBar
184.707 kB
55.523 kB
react
Modal
90.409 kB
29.213 kB
react
Nav
183.442 kB
55.093 kB
react
OverflowSet
31.044 kB
10.593 kB
react
Overlay
38.784 kB
13.401 kB
react
Panel
194.946 kB
58.34 kB
react
Persona
111.705 kB
35.58 kB
react
PersonaCoin
111.705 kB
35.58 kB
react
PersonaPresence
55.928 kB
18.715 kB
react
Pickers
287.603 kB
80.607 kB
react
Pivot
184.252 kB
55.823 kB
react
Popup
12.032 kB
4.114 kB
react
Positioning
21.821 kB
7.334 kB
react
PositioningContainer
70.754 kB
22.84 kB
react
ProgressIndicator
37.498 kB
12.906 kB
react
Rating
78.989 kB
25.18 kB
react
ResizeGroup
13.286 kB
4.365 kB
react
ResponsiveMode
8.078 kB
2.95 kB
react
ScrollablePane
53.538 kB
17.113 kB
react
SearchBox
182.982 kB
55.1 kB
react
SelectableOption
724 B
413 B
react
SelectedItemsList
226.659 kB
66.321 kB
react
Selection
41.202 kB
11.839 kB
react
Separator
33.397 kB
11.529 kB
react
Shimmer
47.265 kB
15.632 kB
react
ShimmeredDetailsList
236.654 kB
67.42 kB
react
Slider
55.575 kB
18.574 kB
react
SpinButton
186.661 kB
56.205 kB
react
Spinner
39.691 kB
13.815 kB
react
Stack
40.761 kB
13.931 kB
react
Sticky
32.064 kB
10.324 kB
react
Styling
44.812 kB
14.688 kB
react
SwatchColorPicker
186.166 kB
56.724 kB
react
TeachingBubble
200.004 kB
59.345 kB
react
Text
35.931 kB
12.486 kB
react
TextField
78.587 kB
24.642 kB
react
Theme
42.456 kB
13.773 kB
react
ThemeGenerator
12.34 kB
4.106 kB
react
TimePicker
235.197 kB
68.29 kB
react
Toggle
44.17 kB
15.346 kB
react
Tooltip
84.225 kB
27.277 kB
react
Utilities
71.851 kB
21.843 kB
react
Viewport
22.945 kB
7.292 kB
react
WeeklyDayPicker
98.762 kB
30.828 kB
react
WindowProvider
1.059 kB
541 B
🤖 This report was generated against 58ccc2f33f85adc0d6992724178e42794ed4916d

@fabricteam

fabricteam commented Jan 31, 2024

Copy link
Copy Markdown
Collaborator

🕵 fluentuiv8 No visual regressions between this PR and main

@fabricteam

fabricteam commented Jan 31, 2024

Copy link
Copy Markdown
Collaborator

Perf Analysis (@fluentui/react)

No significant results to display.

All results

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

@codesandbox-ci

codesandbox-ci Bot commented Feb 1, 2024

Copy link
Copy Markdown

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.

@mltejera

mltejera commented Feb 1, 2024

Copy link
Copy Markdown
Contributor

I think I'd recommend using the styled HOC to address this issue. This is the first time I've seen the @customizeable decorator in my 5 years of theming work with this repo.

oh - I just found this in the markdown, looks like it was removed before my time.

- Removing most `@customizable` decorator usage. This change should reduce extra React dom elements from being created. Also updating `componentRef` resolution to support `React.createRef()` usage.

Would this end up being a minor change? Not opposed to it personally.

justify-content: flex-start;
}
{
align-items: center;

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

@smhigley
smhigley force-pushed the themeable-activityitem branch from 9ecd5da to 8540cbb Compare March 7, 2024 00:06
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants