Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat: add appearance stylesheet behavior #17516

Merged
merged 25 commits into from
Mar 23, 2021
Merged

feat: add appearance stylesheet behavior #17516

merged 25 commits into from
Mar 23, 2021
+35 −91

Conversation

eljefe223
Copy link
Contributor

Pull request checklist

  • Addresses an existing issue: Fixes #0000
  • Include a change request file using $ yarn change

Description of changes

Adds an appearance stylesheet behavior to dynamically load and unload needed styles

Focus areas to test

(optional)

eljefe223 and others added 23 commits September 17, 2020 15:03
@eljefe223
Merge pull request #1 from microsoft/master
8912d32 
Updating my fork with changes
@eljefe223
Merge branch 'master' of https://github.com/microsoft/fluentui
7f2afc9 
Wanted latest master
@eljefe223
Merge branch 'master' of https://github.com/microsoft/fluentui
b97a477
@eljefe223
Merge branch 'master' of https://github.com/microsoft/fluentui
1d450b7
@eljefe223
Merge branch 'master' of https://github.com/microsoft/fluentui
abc1aac
@eljefe223
Merge branch 'master' of https://github.com/microsoft/fluentui
f40c04e 
rt
@eljefe223
Merge branch 'master' of https://github.com/microsoft/fluentui
57d97a5
@eljefe223
Merge branch 'master' of https://github.com/microsoft/fluentui
82b70f4
@eljefe223
Merge branch 'master' of https://github.com/microsoft/fluentui
c67924a
@eljefe223
Merge branch 'master' of https://github.com/microsoft/fluentui
937ab9e
@eljefe223
Merge branch 'master' of https://github.com/microsoft/fluentui
204c744
@eljefe223
Merge branch 'master' of https://github.com/microsoft/fluentui
cfdf698
@eljefe223
Merge branch 'master' of https://github.com/microsoft/fluentui
4d62088
@eljefe223
Merge branch 'master' of https://github.com/microsoft/fluentui
ac92354
@eljefe223
Merge branch 'master' of https://github.com/microsoft/fluentui
8b1e138
@eljefe223
Merge branch 'master' of https://github.com/microsoft/fluentui
1cd5f4c
@eljefe223
Merge branch 'master' of https://github.com/microsoft/fluentui
600c579
@eljefe223
Merge branch 'master' of https://github.com/microsoft/fluentui
068690c
@eljefe223
Merge branch 'master' of https://github.com/microsoft/fluentui
e8f4ac4
@eljefe223
Merge branch 'master' of https://github.com/microsoft/fluentui
a8bdc9f
@eljefe223
Merge branch 'master' of https://github.com/microsoft/fluentui
e547034
@eljefe223
feat: add appearance style sheet behavior
fee1431
@eljefe223
Change files
16f7bb5
@eljefe223 eljefe223 requested a review from chrisdholt March 22, 2021 21:48
@codesandbox-ci
Copy link

codesandbox-ci bot commented Mar 22, 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 bfa3f9a:

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

@chrisdholt chrisdholt assigned chrisdholt and unassigned khmakoto Mar 22, 2021
@fabricteam
Copy link
Collaborator

fabricteam commented Mar 22, 2021 •
edited
Loading

Perf Analysis

No significant results to display.

All results

Scenario Render type Master Ticks PR Ticks Iterations Status
Avatar mount 1115 1143 5000
BaseButton mount 893 893 5000
Breadcrumb mount 43455 43467 5000
ButtonNext mount 1180 1212 5000
Checkbox mount 1531 1491 5000
CheckboxBase mount 1257 1287 5000
ChoiceGroup mount 4681 4639 5000
ComboBox mount 936 965 1000
CommandBar mount 10041 10433 1000
ContextualMenu mount 6123 6192 1000
DefaultButton mount 1105 1107 5000
DetailsRow mount 3552 3544 5000
DetailsRowFast mount 3530 3589 5000
DetailsRowNoStyles mount 3288 3370 5000
Dialog mount 1424 1409 1000
DocumentCardTitle mount 1793 1798 1000
Dropdown mount 3251 3306 5000
FocusTrapZone mount 1769 1721 5000
FocusZone mount 1796 1811 5000
IconButton mount 1728 1690 5000
Label mount 320 344 5000
Layer mount 1807 1752 5000
Link mount 454 454 5000
MakeStyles mount 1929 1919 50000
MenuButton mount 1426 1428 5000
MessageBar mount 1965 1993 5000
Nav mount 3181 3180 1000
OverflowSet mount 1031 1031 5000
Panel mount 1389 1385 1000
Persona mount 804 795 1000
Pivot mount 1364 1362 1000
PrimaryButton mount 1254 1256 5000
Rating mount 7371 7527 5000
SearchBox mount 1288 1273 5000
Shimmer mount 2518 2493 5000
Slider mount 1934 1933 5000
SpinButton mount 4845 4794 5000
Spinner mount 415 408 5000
SplitButton mount 3091 3061 5000
Stack mount 482 482 5000
StackWithIntrinsicChildren mount 1505 1527 5000
StackWithTextChildren mount 4464 4460 5000
SwatchColorPicker mount 10000 10017 5000
Tabs mount 1353 1367 1000
TagPicker mount 2726 2717 5000
TeachingBubble mount 11373 11478 5000
Text mount 424 410 5000
TextField mount 1325 1327 5000
ThemeProvider mount 1162 1168 5000
ThemeProvider virtual-rerender 595 595 5000
ThemeProviderNext mount 15853 15776 5000
Toggle mount 797 797 5000
buttonNative mount 98 105 5000

Perf Analysis (Fluent)

Perf comparison
Status Scenario Fluent TPI Fabric TPI Ratio Iterations Ticks
🦄 Avatar.Fluent 0.18 0.47 0.38:1 2000 356
🦄 Button.Fluent 0.11 0.2 0.55:1 5000 572
🔧 Checkbox.Fluent 0.63 0.33 1.91:1 1000 629
🎯 Dialog.Fluent 0.16 0.21 0.76:1 5000 792
🔧 Dropdown.Fluent 3.11 0.39 7.97:1 1000 3106
🔧 Icon.Fluent 0.14 0.05 2.8:1 5000 690
🦄 Image.Fluent 0.08 0.13 0.62:1 5000 400
🔧 Slider.Fluent 1.58 0.45 3.51:1 1000 1576
🔧 Text.Fluent 0.07 0.03 2.33:1 5000 374
🦄 Tooltip.Fluent 0.14 0.89 0.16:1 5000 701

🔧 Needs work     🎯 On target     🦄 Amazing

Perf tests with no regressions
Scenario Current PR Ticks Baseline Ticks Ratio
ButtonMinimalPerf.default 205 180 1.14:1
SegmentMinimalPerf.default 394 365 1.08:1
ChatDuplicateMessagesPerf.default 308 294 1.05:1
TreeWith60ListItems.default 190 181 1.05:1
FlexMinimalPerf.default 327 313 1.04:1
FormMinimalPerf.default 431 416 1.04:1
PortalMinimalPerf.default 171 165 1.04:1
TableMinimalPerf.default 446 430 1.04:1
Avatar.Fluent 356 342 1.04:1
Image.Fluent 400 386 1.04:1
CarouselMinimalPerf.default 496 483 1.03:1
ChatWithPopoverPerf.default 418 404 1.03:1
DialogMinimalPerf.default 807 780 1.03:1
DividerMinimalPerf.default 389 378 1.03:1
GridMinimalPerf.default 372 361 1.03:1
HeaderSlotsPerf.default 803 783 1.03:1
ListCommonPerf.default 679 662 1.03:1
ListNestedPerf.default 610 594 1.03:1
Icon.Fluent 690 669 1.03:1
AnimationMinimalPerf.default 418 410 1.02:1
AttachmentMinimalPerf.default 169 165 1.02:1
AttachmentSlotsPerf.default 1201 1180 1.02:1
BoxMinimalPerf.default 374 366 1.02:1
CardMinimalPerf.default 575 561 1.02:1
ChatMinimalPerf.default 640 625 1.02:1
DropdownMinimalPerf.default 3154 3106 1.02:1
ItemLayoutMinimalPerf.default 1242 1216 1.02:1
ReactionMinimalPerf.default 423 416 1.02:1
TextAreaMinimalPerf.default 512 501 1.02:1
CustomToolbarPrototype.default 3824 3748 1.02:1
ButtonSlotsPerf.default 592 586 1.01:1
EmbedMinimalPerf.default 4314 4252 1.01:1
HeaderMinimalPerf.default 399 397 1.01:1
LoaderMinimalPerf.default 745 740 1.01:1
MenuButtonMinimalPerf.default 1592 1576 1.01:1
ProviderMinimalPerf.default 984 971 1.01:1
StatusMinimalPerf.default 737 730 1.01:1
IconMinimalPerf.default 699 693 1.01:1
VideoMinimalPerf.default 646 639 1.01:1
Button.Fluent 572 568 1.01:1
Tooltip.Fluent 701 697 1.01:1
ButtonOverridesMissPerf.default 1719 1722 1:1
ButtonUseCssNestingPerf.default 1105 1106 1:1
CheckboxMinimalPerf.default 2873 2865 1:1
DatepickerMinimalPerf.default 46667 46658 1:1
DropdownManyItemsPerf.default 739 740 1:1
InputMinimalPerf.default 1298 1302 1:1
ListMinimalPerf.default 525 525 1:1
ListWith60ListItems.default 637 634 1:1
MenuMinimalPerf.default 897 900 1:1
PopupMinimalPerf.default 716 715 1:1
RadioGroupMinimalPerf.default 456 456 1:1
RefMinimalPerf.default 249 250 1:1
SliderMinimalPerf.default 1598 1605 1:1
SplitButtonMinimalPerf.default 3758 3750 1:1
TreeMinimalPerf.default 820 817 1:1
Dropdown.Fluent 3106 3095 1:1
RosterPerf.default 1141 1148 0.99:1
ProviderMergeThemesPerf.default 1633 1647 0.99:1
SkeletonMinimalPerf.default 384 387 0.99:1
TableManyItemsPerf.default 2020 2045 0.99:1
ToolbarMinimalPerf.default 970 977 0.99:1
TooltipMinimalPerf.default 957 963 0.99:1
Checkbox.Fluent 629 636 0.99:1
Dialog.Fluent 792 802 0.99:1
Slider.Fluent 1576 1588 0.99:1
ButtonUseCssPerf.default 819 835 0.98:1
ImageMinimalPerf.default 404 412 0.98:1
TextMinimalPerf.default 368 377 0.98:1
Text.Fluent 374 381 0.98:1
AvatarMinimalPerf.default 204 210 0.97:1
LabelMinimalPerf.default 429 443 0.97:1
LayoutMinimalPerf.default 418 429 0.97:1
AccordionMinimalPerf.default 165 173 0.95:1
AlertMinimalPerf.default 298 314 0.95:1

@size-auditor
Copy link

size-auditor bot commented Mar 22, 2021 •
edited
Loading

Asset size changes

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

Baseline commit: fc0d87258337229e59ec1c1fec87dc91193858f1 (build)

@eljefe223 @chrisdholt
Update change/@fluentui-web-components-c5450e83-2cfb-4d5f-ada1-28d5a0…
af7dde6 
…fd584e.json

Co-authored-by: Chris Holt <chhol@microsoft.com>
@chrisdholt chrisdholt merged commit 46aa082 into microsoft:master Mar 23, 2021
@msft-fluent-ui-bot
Copy link
Collaborator

🎉@fluentui/web-components@v0.19.0 has been released which incorporates this pull request.:tada:

Handy links:

joshualamusga1 pushed a commit to joshualamusga1/fluentui that referenced this pull request Mar 25, 2021
@eljefe223 @chrisdholt @joshualamusga1
feat: add appearance stylesheet behavior (microsoft#17516)
d987b6d 
* feat: add appearance style sheet behavior

* Change files

* Update change/@fluentui-web-components-c5450e83-2cfb-4d5f-ada1-28d5a0fd584e.json

Co-authored-by: Chris Holt <chhol@microsoft.com>

* Apply suggestions from code review (chrisdholt)

Co-authored-by: Chris Holt <chhol@microsoft.com>
miroslavstastny pushed a commit to miroslavstastny/fluentui that referenced this pull request May 5, 2021
@eljefe223 @chrisdholt @miroslavstastny
feat: add appearance stylesheet behavior (microsoft#17516)
58b0002 
* feat: add appearance style sheet behavior

* Change files

* Update change/@fluentui-web-components-c5450e83-2cfb-4d5f-ada1-28d5a0fd584e.json

Co-authored-by: Chris Holt <chhol@microsoft.com>

* Apply suggestions from code review (chrisdholt)

Co-authored-by: Chris Holt <chhol@microsoft.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@chrisdholt chrisdholt chrisdholt approved these changes

@EisenbergEffect EisenbergEffect Awaiting requested review from EisenbergEffect

@nicholasrice nicholasrice Awaiting requested review from nicholasrice

Assignees

@chrisdholt chrisdholt

Labels
web-components
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
5 participants
@eljefe223 @fabricteam @msft-fluent-ui-bot @chrisdholt @khmakoto