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

optimizing Teams theme font stack #13273

Merged
merged 3 commits into from
May 27, 2020
Merged

optimizing Teams theme font stack #13273

merged 3 commits into from
May 27, 2020

Conversation

notandrew
Copy link
Member

Minor update to font stack to ensure uniformity across Teams.

@msft-github-bot msft-github-bot added the Fluent UI react-northstar (v0) Work related to Fluent UI V0 label May 21, 2020
@msft-github-bot
Copy link
Contributor

msft-github-bot commented May 21, 2020 •
edited

Perf Analysis

No significant results to display.

All results

Scenario Master Ticks PR Ticks Iterations Status
BaseButton 831 798 5000
ButtonNext 459 461 5000
Checkbox 1532 1633 5000
CheckboxBase 1328 1273 5000
CheckboxNext 1552 1542 5000
ChoiceGroup 5069 4969 5000
ComboBox 918 920 1000
CommandBar 7882 7892 1000
ContextualMenu 12937 13032 1000
DefaultButton 1051 1084 5000
DetailsRow 3486 3420 5000
DetailsRow (fast icons) 3521 3500 5000
DetailsRow without styles 3268 3259 5000
Dialog 1491 1503 1000
DocumentCardTitle with truncation 1967 2006 1000
Dropdown 2451 2402 5000
FocusZone 1812 1761 5000
IconButton 1720 1697 5000
Label 319 328 5000
Link 455 451 5000
LinkNext 457 453 5000
MenuButton 1390 1408 5000
Nav 3245 3216 1000
Panel 1450 1468 1000
Persona 862 845 1000
Pivot 1390 1411 1000
PrimaryButton 1237 1211 5000
SearchBox 1264 1247 5000
Slider 1526 1478 5000
SliderNext 1915 1870 5000
Spinner 389 405 5000
SplitButton 3115 3101 5000
Stack 486 480 5000
Stack with Intrinsic children 1836 1853 5000
Stack with Text children 4882 4938 5000
TagPicker 2836 2813 5000
Text 380 404 5000
TextField 1449 1378 5000
Toggle 865 870 5000
ToggleNext 861 862 5000
button 85 77 5000

Perf Analysis (Fluent)

Perf comparison
Status Scenario Fluent TPI Fabric TPI Ratio Iterations Ticks
🔧 Avatar.Fluent 0.69 0.5 1.38:1 2000 1386
🦄 Button.Fluent 0.11 0.19 0.58:1 5000 540
🔧 Checkbox.Fluent 1.12 0.36 3.11:1 1000 1115
🔧 Dialog.Fluent 0.56 0.22 2.55:1 5000 2825
🔧 Dropdown.Fluent 6.32 0.44 14.36:1 1000 6318
🔧 Icon.Fluent 0.13 0.05 2.6:1 5000 662
🦄 Image.Fluent 0.07 0.11 0.64:1 5000 360
🔧 Slider.Fluent 2.94 0.37 7.95:1 1000 2938
🔧 Text.Fluent 0.07 0.02 3.5:1 5000 346
🦄 Tooltip.Fluent 0.1 17.72 0.01:1 5000 491

🔧 Needs work     🎯 On target     🦄 Amazing

Perf tests with no regressions
Scenario Current PR Ticks Baseline Ticks Ratio
AccordionMinimalPerf.default 142 133 1.07:1
PortalMinimalPerf.default 112 105 1.07:1
IconMinimalPerf.default 701 655 1.07:1
Text.Fluent 346 325 1.06:1
ListNestedPerf.default 1141 1083 1.05:1
RefMinimalPerf.default 209 200 1.05:1
HeaderSlotsPerf.default 765 737 1.04:1
AttachmentMinimalPerf.default 156 152 1.03:1
CardMinimalPerf.default 539 522 1.03:1
ButtonMinimalPerf.default 172 168 1.02:1
FlexMinimalPerf.default 284 278 1.02:1
HeaderMinimalPerf.default 342 336 1.02:1
HierarchicalTreeMinimalPerf.default 395 387 1.02:1
ListMinimalPerf.default 462 453 1.02:1
ListWith60ListItems.default 1619 1590 1.02:1
TextMinimalPerf.default 341 333 1.02:1
Checkbox.Fluent 1115 1092 1.02:1
Image.Fluent 360 353 1.02:1
Tooltip.Fluent 491 480 1.02:1
AttachmentSlotsPerf.default 1244 1232 1.01:1
DropdownManyItemsPerf.default 2180 2155 1.01:1
FormMinimalPerf.default 373 370 1.01:1
LabelMinimalPerf.default 391 389 1.01:1
ProviderMinimalPerf.default 846 839 1.01:1
SegmentMinimalPerf.default 327 324 1.01:1
StatusMinimalPerf.default 669 665 1.01:1
CustomToolbarPrototype.default 4929 4866 1.01:1
ToolbarMinimalPerf.default 832 821 1.01:1
AlertMinimalPerf.default 320 321 1:1
BoxMinimalPerf.default 319 319 1:1
CheckboxMinimalPerf.default 5206 5185 1:1
DialogMinimalPerf.default 2807 2801 1:1
ImageMinimalPerf.default 348 347 1:1
InputMinimalPerf.default 1599 1603 1:1
ListCommonPerf.default 1142 1140 1:1
MenuButtonMinimalPerf.default 1692 1691 1:1
ReactionMinimalPerf.default 372 373 1:1
SplitButtonMinimalPerf.default 3977 3960 1:1
TooltipMinimalPerf.default 737 737 1:1
TreeMinimalPerf.default 1279 1285 1:1
Button.Fluent 540 540 1:1
Slider.Fluent 2938 2930 1:1
AnimationMinimalPerf.default 710 714 0.99:1
CarouselMinimalPerf.default 513 516 0.99:1
ChatMinimalPerf.default 580 585 0.99:1
DropdownMinimalPerf.default 6395 6431 0.99:1
LayoutMinimalPerf.default 396 398 0.99:1
LoaderMinimalPerf.default 1130 1139 0.99:1
MenuMinimalPerf.default 830 837 0.99:1
ProviderMergeThemesPerf.default 1920 1936 0.99:1
RadioGroupMinimalPerf.default 383 388 0.99:1
VideoMinimalPerf.default 604 608 0.99:1
Dropdown.Fluent 6318 6387 0.99:1
AvatarMinimalPerf.default 729 743 0.98:1
ChatDuplicateMessagesPerf.default 536 547 0.98:1
ChatWithPopoverPerf.default 667 679 0.98:1
EmbedMinimalPerf.default 3384 3453 0.98:1
GridMinimalPerf.default 1340 1362 0.98:1
PopupMinimalPerf.default 262 266 0.98:1
SliderMinimalPerf.default 2850 2905 0.98:1
TableMinimalPerf.default 369 376 0.98:1
Avatar.Fluent 1386 1410 0.98:1
Dialog.Fluent 2825 2880 0.98:1
ItemLayoutMinimalPerf.default 2244 2307 0.97:1
TextAreaMinimalPerf.default 449 465 0.97:1
TreeWith60ListItems.default 268 275 0.97:1
ButtonSlotsPerf.default 743 774 0.96:1
Icon.Fluent 662 699 0.95:1
DividerMinimalPerf.default 347 460 0.75:1

@size-auditor
Copy link

size-auditor bot commented May 21, 2020 •
edited

Asset size changes

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

Baseline commit: 841a10671ccbb61d7803e2931f257c0c6393623b (build)

@notandrew notandrew changed the title optimizing the font stack to use standard fonts optimizing Teams theme font stack May 22, 2020
@notandrew notandrew merged commit 72cd52e into microsoft:master May 27, 2020
@notandrew notandrew deleted the fix/fontstack branch May 27, 2020 22:23
miroslavstastny pushed a commit to levithomason/fluentui that referenced this pull request Jun 8, 2020
@notandrew @miroslavstastny
optimizing Teams theme font stack (microsoft#13273)
bccd8da 
* optimizing the font stack to use what TMP/Teamspace Web use
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@layershifter layershifter layershifter approved these changes

@dvdzkwsk dvdzkwsk Awaiting requested review from dvdzkwsk

@dzearing dzearing Awaiting requested review from dzearing

@jurokapsiar jurokapsiar Awaiting requested review from jurokapsiar

@levithomason levithomason Awaiting requested review from levithomason

@miroslavstastny miroslavstastny Awaiting requested review from miroslavstastny

@mnajdova mnajdova Awaiting requested review from mnajdova

@pompomon pompomon Awaiting requested review from pompomon

Assignees

@ecraig12345 ecraig12345

Labels
Fluent UI react-northstar (v0) Work related to Fluent UI V0
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

None yet
4 participants
@notandrew @msft-github-bot @layershifter @ecraig12345