Skip to content

chore: rework Avatar to use makeStyles()#16793

Merged
layershifter merged 48 commits intomasterfrom
feat/avatar-styles
Feb 18, 2021
Merged

chore: rework Avatar to use makeStyles()#16793
layershifter merged 48 commits intomasterfrom
feat/avatar-styles

Conversation

@layershifter
Copy link
Member

@layershifter layershifter commented Feb 3, 2021 •
edited
Loading

Description of changes

This PR replaces SCSS stylesheets with makeStyles() implementation. Stories for tokens were temporary removed and will be restored once we will figure out a story for component tokens on Theme objects.

Also performs a small cleanup of types.

@size-auditor
Copy link

size-auditor bot commented Feb 3, 2021 •
edited
Loading

Asset size changes

Size Auditor did not detect a change in bundle size for any component!

Baseline commit: 28cd71a2a8ce9cf2398b45335a49621507b8c55d (build)

@codesandbox-ci
Copy link

codesandbox-ci bot commented Feb 3, 2021 •
edited
Loading

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.

Latest deployment of this branch, based on commit 31e1201:

Sandbox Source
Fluent UI Button Configuration
codesandbox-react-template Configuration
codesandbox-react-northstar-template Configuration

@fabricteam
Copy link
Collaborator

fabricteam commented Feb 3, 2021 •
edited
Loading

Perf Analysis

Scenario Render type Master Ticks PR Ticks Iterations Status
Avatar mount 835 1092 5000 Possible regression
buttonNative mount 113 114 5000 Possible regression
All results

Scenario Render type Master Ticks PR Ticks Iterations Status
Avatar mount 835 1092 5000 Possible regression
BaseButton mount 880 896 5000
Breadcrumb mount 43598 43363 5000
ButtonNext mount 665 685 5000
Checkbox mount 1489 1472 5000
CheckboxBase mount 1234 1204 5000
ChoiceGroup mount 4690 4723 5000
ComboBox mount 967 957 1000
CommandBar mount 10067 10105 1000
ContextualMenu mount 6163 6167 1000
DefaultButton mount 1105 1118 5000
DetailsRow mount 3504 3585 5000
DetailsRowFast mount 3539 3540 5000
DetailsRowNoStyles mount 3396 3371 5000
Dialog mount 1427 1433 1000
DocumentCardTitle mount 1851 1820 1000
Dropdown mount 3316 3279 5000
FocusTrapZone mount 1752 1754 5000
FocusZone mount 1786 1814 5000
IconButton mount 1699 1695 5000
Label mount 327 331 5000
Layer mount 1748 1781 5000
Link mount 464 461 5000
MakeStyles mount 1951 2026 50000
MenuButton mount 1419 1434 5000
MessageBar mount 2013 2027 5000
Nav mount 3207 3232 1000
OverflowSet mount 1045 1024 5000
Panel mount 1410 1365 1000
Persona mount 819 823 1000
Pivot mount 1366 1366 1000
PrimaryButton mount 1277 1262 5000
Rating mount 7376 7345 5000
SearchBox mount 1273 1299 5000
Shimmer mount 2526 2489 5000
Slider mount 1880 1883 5000
SpinButton mount 4956 4976 5000
Spinner mount 402 419 5000
SplitButton mount 3138 3090 5000
Stack mount 502 493 5000
StackWithIntrinsicChildren mount 1506 1556 5000
StackWithTextChildren mount 4423 4430 5000
SwatchColorPicker mount 10020 10166 5000
Tabs mount 1397 1396 1000
TagPicker mount 2764 2818 5000
TeachingBubble mount 11513 11461 5000
Text mount 405 414 5000
TextField mount 1360 1345 5000
ThemeProvider mount 1189 1182 5000
ThemeProvider virtual-rerender 594 609 5000
ThemeProviderNext mount 1964 1963 5000
Toggle mount 783 794 5000
buttonNative mount 113 114 5000 Possible regression

Perf Analysis (Fluent)

Perf comparison
Status Scenario Fluent TPI Fabric TPI Ratio Iterations Ticks
🦄 Avatar.Fluent 0.18 0.47 0.38:1 2000 359
🦄 Button.Fluent 0.11 0.19 0.58:1 5000 570
🔧 Checkbox.Fluent 0.65 0.33 1.97:1 1000 653
🎯 Dialog.Fluent 0.16 0.21 0.76:1 5000 801
🔧 Dropdown.Fluent 3.11 0.39 7.97:1 1000 3114
🔧 Icon.Fluent 0.14 0.06 2.33:1 5000 693
🦄 Image.Fluent 0.08 0.13 0.62:1 5000 402
🔧 Slider.Fluent 1.64 0.44 3.73:1 1000 1637
🔧 Text.Fluent 0.07 0.03 2.33:1 5000 369
🦄 Tooltip.Fluent 0.12 0.88 0.14:1 5000 581

🔧 Needs work     🎯 On target     🦄 Amazing

Perf tests with no regressions
Scenario Current PR Ticks Baseline Ticks Ratio
PortalMinimalPerf.default 184 172 1.07:1
CarouselMinimalPerf.default 509 482 1.06:1
ListMinimalPerf.default 537 509 1.06:1
SegmentMinimalPerf.default 388 367 1.06:1
TextAreaMinimalPerf.default 511 483 1.06:1
TreeWith60ListItems.default 193 182 1.06:1
Avatar.Fluent 359 338 1.06:1
BoxMinimalPerf.default 387 369 1.05:1
ButtonMinimalPerf.default 192 185 1.04:1
HeaderSlotsPerf.default 817 782 1.04:1
IconMinimalPerf.default 693 669 1.04:1
DialogMinimalPerf.default 817 792 1.03:1
InputMinimalPerf.default 1339 1303 1.03:1
ListCommonPerf.default 676 658 1.03:1
ListNestedPerf.default 595 575 1.03:1
ListWith60ListItems.default 650 629 1.03:1
Image.Fluent 402 389 1.03:1
AnimationMinimalPerf.default 420 410 1.02:1
ButtonUseCssPerf.default 836 816 1.02:1
CardMinimalPerf.default 568 559 1.02:1
HeaderMinimalPerf.default 381 372 1.02:1
ImageMinimalPerf.default 409 401 1.02:1
MenuMinimalPerf.default 911 893 1.02:1
MenuButtonMinimalPerf.default 1595 1559 1.02:1
RadioGroupMinimalPerf.default 468 459 1.02:1
ReactionMinimalPerf.default 412 403 1.02:1
RefMinimalPerf.default 258 252 1.02:1
SkeletonMinimalPerf.default 392 386 1.02:1
TableMinimalPerf.default 433 425 1.02:1
ToolbarMinimalPerf.default 1002 982 1.02:1
TooltipMinimalPerf.default 841 822 1.02:1
Checkbox.Fluent 653 642 1.02:1
Dialog.Fluent 801 788 1.02:1
ButtonOverridesMissPerf.default 1742 1733 1.01:1
ChatMinimalPerf.default 639 630 1.01:1
ChatWithPopoverPerf.default 460 455 1.01:1
DatepickerMinimalPerf.default 47797 47292 1.01:1
LayoutMinimalPerf.default 430 426 1.01:1
LoaderMinimalPerf.default 745 737 1.01:1
TableManyItemsPerf.default 2039 2022 1.01:1
TextMinimalPerf.default 371 367 1.01:1
Tooltip.Fluent 581 578 1.01:1
AccordionMinimalPerf.default 169 169 1:1
AvatarMinimalPerf.default 208 209 1:1
ButtonSlotsPerf.default 595 595 1:1
CheckboxMinimalPerf.default 2853 2849 1:1
DividerMinimalPerf.default 386 385 1:1
EmbedMinimalPerf.default 4272 4252 1:1
ItemLayoutMinimalPerf.default 1240 1234 1:1
LabelMinimalPerf.default 433 434 1:1
PopupMinimalPerf.default 713 714 1:1
ProviderMinimalPerf.default 993 994 1:1
SliderMinimalPerf.default 1618 1619 1:1
SplitButtonMinimalPerf.default 3779 3769 1:1
CustomToolbarPrototype.default 3820 3823 1:1
TreeMinimalPerf.default 798 799 1:1
VideoMinimalPerf.default 638 641 1:1
Dropdown.Fluent 3114 3113 1:1
Slider.Fluent 1637 1638 1:1
AttachmentSlotsPerf.default 1208 1218 0.99:1
ButtonUseCssNestingPerf.default 1086 1100 0.99:1
ChatDuplicateMessagesPerf.default 375 379 0.99:1
DropdownManyItemsPerf.default 732 739 0.99:1
DropdownMinimalPerf.default 3091 3129 0.99:1
FormMinimalPerf.default 413 416 0.99:1
GridMinimalPerf.default 361 365 0.99:1
ProviderMergeThemesPerf.default 1625 1639 0.99:1
StatusMinimalPerf.default 726 736 0.99:1
Icon.Fluent 693 702 0.99:1
AttachmentMinimalPerf.default 165 170 0.97:1
RosterPerf.default 1164 1203 0.97:1
Button.Fluent 570 587 0.97:1
AlertMinimalPerf.default 303 316 0.96:1
FlexMinimalPerf.default 314 328 0.96:1
Text.Fluent 369 386 0.96:1

miroslavstastny
miroslavstastny reviewed Feb 4, 2021
View reviewed changes
@khmakoto khmakoto mentioned this pull request Feb 4, 2021
Closed
@layershifter
Copy link
Member Author

layershifter commented Feb 5, 2021

/azp run

@azure-pipelines
Copy link

azure-pipelines bot commented Feb 5, 2021

Azure Pipelines successfully started running 3 pipeline(s).

khmakoto
khmakoto reviewed Feb 6, 2021
View reviewed changes
khmakoto
khmakoto reviewed Feb 6, 2021
View reviewed changes
@layershifter layershifter mentioned this pull request Feb 8, 2021
Merged
layershifter
layershifter commented Feb 8, 2021
View reviewed changes
@layershifter
fix decorator
d2a80d6
@layershifter
fix VR tests
8cd9156
@layershifter
Merge branch 'master' of https://github.com/microsoft/fluentui into f…
046c389 
…eat/avatar-styles

� Conflicts:
�	apps/perf-test/package.json
�	apps/vr-tests/package.json
�	packages/react-avatar/package.json
@layershifter
fix deps
ac33dd3
@layershifter
Merge branch 'master' of https://github.com/microsoft/fluentui into f…
534ebd3 
…eat/avatar-styles

� Conflicts:
�	apps/perf-test/package.json
�	apps/vr-tests/package.json
@layershifter
fix typings
5d9e748
@layershifter
use proper color for shadow
9732cf6
@layershifter
remove tokens related stories
a95c401
@layershifter
Change files
7a5e76c
layershifter
layershifter commented Feb 9, 2021
View reviewed changes
layershifter
layershifter commented Feb 9, 2021
View reviewed changes
layershifter
layershifter commented Feb 9, 2021
View reviewed changes
@layershifter
Copy link
Member Author

layershifter commented Feb 9, 2021

/azp run

layershifter
layershifter commented Feb 16, 2021
View reviewed changes
layershifter
layershifter commented Feb 16, 2021
View reviewed changes
@layershifter
Merge branch 'master' of https://github.com/microsoft/fluentui into f…
6d17ced 
…eat/avatar-styles

� Conflicts:
�	apps/perf-test/package.json
�	apps/vr-tests/package.json
�	packages/react-avatar/package.json
�	packages/react-examples/package.json
�	packages/react-menu/package.json
@layershifter
fix versions
77969b0
@layershifter
Merge branch 'feat/avatar-styles' of https://github.com/microsoft/flu…
d770965 
…entui into feat/avatar-styles

� Conflicts:
�	apps/vr-tests/package.json
@layershifter
Change files
a41e918
@layershifter
fix versions
b53d2b6
@layershifter
Merge branch 'master' of https://github.com/microsoft/fluentui into f…
e8d1b4e 
…eat/avatar-styles
@layershifter
remove obsolete change file
a3b3fb5
@layershifter
Update apps/vr-tests/src/stories/Avatar.stories.tsx
487050e
@layershifter layershifter dismissed behowell’s stale review February 17, 2021 10:54

The last blocking issue were shadow definitions, they have been changed by design and now implementation is aligned to the spec.

layershifter and others added 10 commits February 17, 2021 13:00
@layershifter
Merge branch 'master' of https://github.com/microsoft/fluentui into f…
aafefdd 
…eat/avatar-styles

� Conflicts:
�	packages/react-examples/.storybook/preview.js
@layershifter
Merge branch 'master' of https://github.com/microsoft/fluentui into f…
657fbe9 
…eat/avatar-styles

� Conflicts:
�	apps/perf-test/package.json
�	apps/vr-tests/package.json
@layershifter
Merge branch 'master' of https://github.com/microsoft/fluentui into f…
ef80530 
…eat/avatar-styles

� Conflicts:
�	packages/react-avatar/src/components/Avatar/Avatar.tsx
�	packages/react-avatar/src/components/Avatar/useAvatar.tsx
�	packages/react-avatar/src/components/Badge/useBadge.tsx
@layershifter
fix imports
c165912
@behowell
Clean up and export useAvatarStyles
7e1af2d
@behowell
Update robot example in storybook, and remove robot example from scre…
bfac7ac 
…ener tests
@behowell
Clean up robot example
ed5dd3f
@behowell
Merge branch 'feat/avatar-styles' of https://github.com/microsoft/flu…
169cbd0 
…entui into feat/avatar-styles
@layershifter
Merge branch 'master' of https://github.com/microsoft/fluentui into f…
c816c0a 
…eat/avatar-styles

� Conflicts:
�	packages/react-examples/.storybook/preview.js
@layershifter
remove unused import
31e1201
@layershifter layershifter merged commit b649627 into master Feb 18, 2021
@layershifter layershifter deleted the feat/avatar-styles branch February 18, 2021 10:54
@msft-fluent-ui-bot
Copy link
Collaborator

msft-fluent-ui-bot commented Feb 18, 2021

🎉@fluentui/react-avatar@v0.11.0 has been released which incorporates this pull request.:tada:

Handy links:

@msft-fluent-ui-bot
Copy link
Collaborator

msft-fluent-ui-bot commented Feb 18, 2021

🎉@fluentui/react-examples@v8.0.0-beta.4 has been released which incorporates this pull request.:tada:

Handy links:

joshualamusga1 pushed a commit to joshualamusga1/fluentui that referenced this pull request Feb 25, 2021
@layershifter @xugao
@behowell @joshualamusga1
chore: rework Avatar to use makeStyles() (microsoft#16793)
29bc91c 
* chore: rework Avatar to use makeStyles()

* move out styles to a separate file

* fix decorator

* fix VR tests

* fix deps

* fix typings

* use proper color for shadow

* remove tokens related stories

* Change files

* fix lint errors

* fix versions

* Update change/@fluentui-react-avatar-3e5903f1-93cd-453b-9960-73bf323c5b9e.json

Co-authored-by: Xu Gao <xugao0131@hotmail.com>

* Update change/@fluentui-react-avatar-3e5903f1-93cd-453b-9960-73bf323c5b9e.json

Co-authored-by: Xu Gao <xugao0131@hotmail.com>

* Update apps/perf-test/src/index.scenarios.tsx

Co-authored-by: Xu Gao <xugao0131@hotmail.com>

* rename decorator

* fix typings for useImage()

* remove test for `tokens`

* fix changefile

* fix dependencies

* restore changes

* restore changes

* Update packages/react-avatar/src/components/Avatar/useAvatarStyles.ts

* restore hexagonal avatar

* Update avatar styles

* Add back custom size tests and examples

* fix versions

* Change files

* fix versions

* remove obsolete change file

* Update apps/vr-tests/src/stories/Avatar.stories.tsx

* fix imports

* Clean up and export useAvatarStyles

* Update robot example in storybook, and remove robot example from screener tests

* Clean up robot example

* remove unused import

Co-authored-by: Xu Gao <xugao0131@hotmail.com>
Co-authored-by: Ben Howell <behowell@microsoft.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@ecraig12345 ecraig12345 ecraig12345 left review comments

@khmakoto khmakoto khmakoto left review comments

@miroslavstastny miroslavstastny miroslavstastny approved these changes

@dzearing dzearing Awaiting requested review from dzearing

@JasonGore JasonGore Awaiting requested review from JasonGore

@JustSlone JustSlone Awaiting requested review from JustSlone

@ling1726 ling1726 Awaiting requested review from ling1726

+2 more reviewers

@behowell behowell behowell left review comments

@xugao xugao xugao approved these changes

Reviewers whose approvals may not affect merge requirements

Assignees

@joschect joschect

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

9 participants

@layershifter @fabricteam @msft-fluent-ui-bot @xugao @ecraig12345 @khmakoto @miroslavstastny @behowell @joschect