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.

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

(web-components) update type ramp #16927

Merged

Conversation

bheston
Copy link
Contributor

@bheston bheston commented Feb 10, 2021

Pull request checklist

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

Description of changes

The Fluent type ramp has been updated and this brings the web components into alignment.

Focus areas to test

Web component font size and line height, particularly small and large sizes on the ramp. These are not consumed by the base components currently.

@codesandbox-ci
Copy link

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 bf26a79:

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

@size-auditor
Copy link

size-auditor bot commented Feb 10, 2021

Asset size changes

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

Baseline commit: 42724eecf6ecee9ddc6694f535ece31d5278f979 (build)

@fabricteam
Copy link
Collaborator

Perf Analysis

No significant results to display.

All results

Scenario Render type Master Ticks PR Ticks Iterations Status
Avatar mount 826 831 5000
BaseButton mount 902 861 5000
Breadcrumb mount 43688 43312 5000
ButtonNext mount 644 671 5000
Checkbox mount 1514 1492 5000
CheckboxBase mount 1252 1257 5000
ChoiceGroup mount 4701 4749 5000
ComboBox mount 922 967 1000
CommandBar mount 10120 10081 1000
ContextualMenu mount 6121 6190 1000
DefaultButton mount 1115 1126 5000
DetailsRow mount 3540 3592 5000
DetailsRowFast mount 3635 3598 5000
DetailsRowNoStyles mount 3349 3372 5000
Dialog mount 1454 1432 1000
DocumentCardTitle mount 1810 1810 1000
Dropdown mount 3281 3289 5000
FocusTrapZone mount 1824 1771 5000
FocusZone mount 1759 1806 5000
IconButton mount 1738 1742 5000
Label mount 331 330 5000
Layer mount 1751 1751 5000
Link mount 455 458 5000
MakeStyles mount 1928 1950 50000
MenuButton mount 1461 1495 5000
MessageBar mount 1995 2014 5000
Nav mount 3212 3227 1000
OverflowSet mount 1024 1035 5000
Panel mount 1413 1434 1000
Persona mount 881 877 1000
Pivot mount 1402 1385 1000
PrimaryButton mount 1283 1268 5000
Rating mount 7423 7329 5000
SearchBox mount 1306 1306 5000
Shimmer mount 2503 2516 5000
Slider mount 1900 1880 5000
SpinButton mount 4924 5120 5000
Spinner mount 416 452 5000
SplitButton mount 3162 3152 5000
Stack mount 508 496 5000
StackWithIntrinsicChildren mount 1513 1498 5000
StackWithTextChildren mount 4422 4435 5000
SwatchColorPicker mount 10160 10235 5000
Tabs mount 1390 1386 1000
TagPicker mount 2778 2727 5000
TeachingBubble mount 11595 11538 5000
Text mount 414 411 5000
TextField mount 1348 1377 5000
ThemeProvider mount 1403 1433 5000
ThemeProvider virtual-rerender 596 603 5000
ThemeProviderNext mount 2165 2229 5000
Toggle mount 801 790 5000
buttonNative mount 109 115 5000

Perf Analysis (Fluent)

Perf comparison
Status Scenario Fluent TPI Fabric TPI Ratio Iterations Ticks
🦄 Avatar.Fluent 0.18 0.52 0.35:1 2000 357
🦄 Button.Fluent 0.12 0.2 0.6:1 5000 584
🔧 Checkbox.Fluent 0.67 0.37 1.81:1 1000 665
🎯 Dialog.Fluent 0.16 0.22 0.73:1 5000 804
🔧 Dropdown.Fluent 3.15 0.42 7.5:1 1000 3145
🔧 Icon.Fluent 0.14 0.06 2.33:1 5000 716
🦄 Image.Fluent 0.08 0.12 0.67:1 5000 421
🔧 Slider.Fluent 1.59 0.43 3.7:1 1000 1592
🔧 Text.Fluent 0.08 0.03 2.67:1 5000 377
🦄 Tooltip.Fluent 0.12 0.89 0.13:1 5000 605

🔧 Needs work     🎯 On target     🦄 Amazing

Perf tests with no regressions
Scenario Current PR Ticks Baseline Ticks Ratio
PortalMinimalPerf.default 179 166 1.08:1
RadioGroupMinimalPerf.default 478 447 1.07:1
RefMinimalPerf.default 260 242 1.07:1
DividerMinimalPerf.default 412 388 1.06:1
FlexMinimalPerf.default 326 308 1.06:1
LayoutMinimalPerf.default 450 426 1.06:1
Image.Fluent 421 397 1.06:1
AttachmentMinimalPerf.default 177 168 1.05:1
AvatarMinimalPerf.default 214 203 1.05:1
DropdownManyItemsPerf.default 758 725 1.05:1
Avatar.Fluent 357 341 1.05:1
AccordionMinimalPerf.default 166 160 1.04:1
AnimationMinimalPerf.default 430 412 1.04:1
BoxMinimalPerf.default 389 375 1.04:1
HeaderMinimalPerf.default 395 380 1.04:1
SkeletonMinimalPerf.default 389 375 1.04:1
TextAreaMinimalPerf.default 508 489 1.04:1
Icon.Fluent 716 689 1.04:1
ButtonMinimalPerf.default 187 181 1.03:1
Tooltip.Fluent 605 587 1.03:1
ButtonSlotsPerf.default 588 579 1.02:1
ChatDuplicateMessagesPerf.default 383 377 1.02:1
GridMinimalPerf.default 379 370 1.02:1
HeaderSlotsPerf.default 784 769 1.02:1
ItemLayoutMinimalPerf.default 1234 1213 1.02:1
ListNestedPerf.default 597 586 1.02:1
PopupMinimalPerf.default 729 712 1.02:1
SliderMinimalPerf.default 1626 1599 1.02:1
Checkbox.Fluent 665 655 1.02:1
DialogMinimalPerf.default 816 805 1.01:1
FormMinimalPerf.default 425 421 1.01:1
MenuButtonMinimalPerf.default 1586 1567 1.01:1
ProviderMinimalPerf.default 995 982 1.01:1
SplitButtonMinimalPerf.default 3856 3802 1.01:1
TableMinimalPerf.default 447 442 1.01:1
TextMinimalPerf.default 367 363 1.01:1
TooltipMinimalPerf.default 831 825 1.01:1
TreeMinimalPerf.default 821 809 1.01:1
Dialog.Fluent 804 796 1.01:1
Dropdown.Fluent 3145 3102 1.01:1
AttachmentSlotsPerf.default 1207 1205 1:1
ButtonOverridesMissPerf.default 1713 1711 1:1
ButtonUseCssPerf.default 829 833 1:1
EmbedMinimalPerf.default 4269 4285 1:1
InputMinimalPerf.default 1311 1307 1:1
ProviderMergeThemesPerf.default 1630 1622 1:1
ReactionMinimalPerf.default 417 415 1:1
IconMinimalPerf.default 703 705 1:1
CustomToolbarPrototype.default 3778 3791 1:1
Slider.Fluent 1592 1588 1:1
ButtonUseCssNestingPerf.default 1111 1117 0.99:1
CarouselMinimalPerf.default 490 496 0.99:1
ChatMinimalPerf.default 630 635 0.99:1
CheckboxMinimalPerf.default 2833 2853 0.99:1
DropdownMinimalPerf.default 3132 3154 0.99:1
ListCommonPerf.default 658 662 0.99:1
MenuMinimalPerf.default 902 913 0.99:1
StatusMinimalPerf.default 743 752 0.99:1
ToolbarMinimalPerf.default 1005 1012 0.99:1
VideoMinimalPerf.default 670 675 0.99:1
DatepickerMinimalPerf.default 48025 49065 0.98:1
LoaderMinimalPerf.default 744 756 0.98:1
TableManyItemsPerf.default 2065 2108 0.98:1
Button.Fluent 584 593 0.98:1
AlertMinimalPerf.default 310 318 0.97:1
ImageMinimalPerf.default 405 417 0.97:1
CardMinimalPerf.default 561 582 0.96:1
LabelMinimalPerf.default 437 453 0.96:1
ListMinimalPerf.default 517 536 0.96:1
Text.Fluent 377 392 0.96:1
ChatWithPopoverPerf.default 467 491 0.95:1
SegmentMinimalPerf.default 366 387 0.95:1
ListWith60ListItems.default 628 670 0.94:1
RosterPerf.default 1132 1207 0.94:1
TreeWith60ListItems.default 178 194 0.92:1

@bheston
Copy link
Contributor Author

bheston commented Feb 10, 2021

This most noticeably updates the larger sizes in the ramp, which are not commonly used. The common sizes close to the base change line heights only slightly, so this should be safe to take and not break visuals.

@chrisdholt
Copy link
Member

@bheston I'd love to get this into the feature branch - the implementation for the system and the tokens are different there, so I don't think this will 1:1 work. Can you open a new PR against features/web-components-vNext? The tokens all exist, you'll just need to change the default values in design-tokens.ts.

@bheston bheston changed the base branch from master to features/web-components-vNext May 18, 2021 19:59
@bheston bheston changed the title Update type ramp (web-components) update type ramp May 18, 2021
@chrisdholt chrisdholt merged commit beafe2b into microsoft:features/web-components-vNext May 18, 2021
@chrisdholt
Copy link
Member

Thanks @bheston - this is IN!

chrisdholt pushed a commit that referenced this pull request Jun 8, 2021
* Updated type ramp to latest values.

* Change files

* Updated to new design-tokens definition format

Co-authored-by: Brian Heston <brheston@microsoft.com>
@bheston bheston deleted the update-type-ramp branch June 18, 2021 00:16
chrisdholt pushed a commit that referenced this pull request Jul 2, 2021
* Updated type ramp to latest values.

* Change files

* Updated to new design-tokens definition format

Co-authored-by: Brian Heston <brheston@microsoft.com>
chrisdholt pushed a commit that referenced this pull request Jul 2, 2021
* Updated type ramp to latest values.

* Change files

* Updated to new design-tokens definition format

Co-authored-by: Brian Heston <brheston@microsoft.com>
PeterDraex pushed a commit to PeterDraex/fluentui that referenced this pull request Aug 6, 2021
* Updated type ramp to latest values.

* Change files

* Updated to new design-tokens definition format

Co-authored-by: Brian Heston <brheston@microsoft.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

6 participants