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

Dialog visual polish #16528

Merged
merged 3 commits into from
Jan 22, 2021
Merged

Dialog visual polish #16528

merged 3 commits into from
Jan 22, 2021

Conversation

TanelVari
Copy link
Contributor

Pull request checklist

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

Description of changes

Updated root padding for Dialog.

image

@msft-fluent-ui-bot msft-fluent-ui-bot added the Fluent UI react-northstar (v0) Work related to Fluent UI V0 label Jan 19, 2021
@codesandbox-ci
Copy link

codesandbox-ci bot commented Jan 19, 2021 •
edited

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

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

@size-auditor
Copy link

size-auditor bot commented Jan 19, 2021 •
edited

Asset size changes

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

Baseline commit: 6ec85b0bebf2efeb5a48124a69a86aa8283dd1da (build)

@fabricteam
Copy link
Collaborator

fabricteam commented Jan 22, 2021 •
edited

Perf Analysis

No significant results to display.

All results

Scenario Render type Master Ticks PR Ticks Iterations Status
Avatar mount 834 849 5000
BaseButtonCompat mount 961 944 5000
Breadcrumb mount 40924 40886 5000
Checkbox mount 1550 1555 5000
CheckboxBase mount 1282 1323 5000
ChoiceGroup mount 4875 4877 5000
ComboBox mount 955 964 1000
CommandBar mount 9928 9869 1000
ContextualMenu mount 5974 6002 1000
DefaultButtonCompat mount 1186 1137 5000
DetailsRow mount 3695 3687 5000
DetailsRowFast mount 3685 3728 5000
DetailsRowNoStyles mount 3434 3521 5000
Dialog mount 1470 1508 1000
DocumentCardTitle mount 1736 1754 1000
Dropdown mount 3365 3366 5000
FocusTrapZone mount 1764 1759 5000
FocusZone mount 1791 1785 5000
IconButtonCompat mount 1792 1808 5000
Label mount 334 349 5000
Layer mount 1784 1804 5000
Link mount 470 473 5000
MakeStyles mount 1891 1902 50000
MenuButtonCompat mount 1523 1543 5000
MessageBar mount 1972 2053 5000
Nav mount 3297 3276 1000
OverflowSet mount 1029 1021 5000
Panel mount 1457 1438 1000
Persona mount 870 865 1000
Pivot mount 1411 1423 1000
PrimaryButtonCompat mount 1283 1332 5000
Rating mount 7766 7818 5000
SearchBox mount 1405 1380 5000
Shimmer mount 2667 2596 5000
Slider mount 1928 1945 5000
SpinButton mount 5022 5058 5000
Spinner mount 402 404 5000
SplitButtonCompat mount 3208 3199 5000
Stack mount 504 516 5000
StackWithIntrinsicChildren mount 1632 1564 5000
StackWithTextChildren mount 4704 4736 5000
SwatchColorPicker mount 10281 10351 5000
Tabs mount 1405 1419 1000
TagPicker mount 2890 2863 5000
TeachingBubble mount 11409 11528 5000
Text mount 412 425 5000
TextField mount 1437 1371 5000
ThemeProvider mount 2133 2101 5000
ThemeProvider virtual-rerender 634 622 5000
Toggle mount 844 815 5000
button mount 702 704 5000
buttonNative mount 113 111 5000

Perf Analysis (Fluent)

Perf comparison
Status Scenario Fluent TPI Fabric TPI Ratio Iterations Ticks
🦄 Avatar.Fluent 0.18 0.51 0.35:1 2000 360
🦄 Button.Fluent 0.13 0.21 0.62:1 5000 626
🔧 Checkbox.Fluent 0.65 0.37 1.76:1 1000 651
🎯 Dialog.Fluent 0.17 0.23 0.74:1 5000 863
🔧 Dropdown.Fluent 2.98 0.41 7.27:1 1000 2976
🔧 Icon.Fluent 0.15 0.06 2.5:1 5000 726
🦄 Image.Fluent 0.09 0.13 0.69:1 5000 434
🔧 Slider.Fluent 1.61 0.46 3.5:1 1000 1612
🔧 Text.Fluent 0.08 0.03 2.67:1 5000 400
🦄 Tooltip.Fluent 0.12 0.89 0.13:1 5000 577

🔧 Needs work     🎯 On target     🦄 Amazing

Perf tests with no regressions
Scenario Current PR Ticks Baseline Ticks Ratio
HeaderMinimalPerf.default 447 406 1.1:1
ListWith60ListItems.default 689 650 1.06:1
ButtonSlotsPerf.default 636 607 1.05:1
ChatWithPopoverPerf.default 476 452 1.05:1
FlexMinimalPerf.default 334 318 1.05:1
ImageMinimalPerf.default 449 426 1.05:1
LabelMinimalPerf.default 489 465 1.05:1
ReactionMinimalPerf.default 486 464 1.05:1
RefMinimalPerf.default 247 236 1.05:1
AttachmentMinimalPerf.default 185 178 1.04:1
AttachmentSlotsPerf.default 1295 1242 1.04:1
AvatarMinimalPerf.default 216 207 1.04:1
LayoutMinimalPerf.default 454 438 1.04:1
SkeletonMinimalPerf.default 432 417 1.04:1
TextAreaMinimalPerf.default 563 539 1.04:1
Image.Fluent 434 417 1.04:1
AnimationMinimalPerf.default 439 428 1.03:1
ChatMinimalPerf.default 690 667 1.03:1
ListCommonPerf.default 722 703 1.03:1
MenuMinimalPerf.default 944 919 1.03:1
Dialog.Fluent 863 839 1.03:1
CarouselMinimalPerf.default 528 519 1.02:1
DialogMinimalPerf.default 845 825 1.02:1
DividerMinimalPerf.default 414 405 1.02:1
HeaderSlotsPerf.default 867 851 1.02:1
PopupMinimalPerf.default 731 720 1.02:1
RadioGroupMinimalPerf.default 511 499 1.02:1
IconMinimalPerf.default 717 702 1.02:1
CustomToolbarPrototype.default 3767 3681 1.02:1
TooltipMinimalPerf.default 870 857 1.02:1
Dropdown.Fluent 2976 2920 1.02:1
AccordionMinimalPerf.default 178 176 1.01:1
AlertMinimalPerf.default 341 337 1.01:1
BoxMinimalPerf.default 397 392 1.01:1
ChatDuplicateMessagesPerf.default 388 385 1.01:1
CheckboxMinimalPerf.default 2890 2848 1.01:1
InputMinimalPerf.default 1339 1332 1.01:1
ItemLayoutMinimalPerf.default 1339 1324 1.01:1
MenuButtonMinimalPerf.default 1646 1636 1.01:1
ProviderMergeThemesPerf.default 1588 1577 1.01:1
Checkbox.Fluent 651 642 1.01:1
ButtonMinimalPerf.default 210 209 1:1
ButtonUseCssPerf.default 874 871 1:1
ButtonUseCssNestingPerf.default 1120 1124 1:1
CardMinimalPerf.default 619 622 1:1
DatepickerMinimalPerf.default 48241 48214 1:1
DropdownMinimalPerf.default 2923 2925 1:1
EmbedMinimalPerf.default 4226 4237 1:1
ListMinimalPerf.default 538 537 1:1
LoaderMinimalPerf.default 743 744 1:1
PortalMinimalPerf.default 168 168 1:1
SliderMinimalPerf.default 1578 1577 1:1
SplitButtonMinimalPerf.default 3953 3950 1:1
TableManyItemsPerf.default 2209 2210 1:1
TextMinimalPerf.default 394 394 1:1
ToolbarMinimalPerf.default 1027 1029 1:1
Tooltip.Fluent 577 577 1:1
ButtonOverridesMissPerf.default 1780 1789 0.99:1
DropdownManyItemsPerf.default 775 782 0.99:1
FormMinimalPerf.default 482 485 0.99:1
ListNestedPerf.default 616 621 0.99:1
ProviderMinimalPerf.default 1001 1012 0.99:1
StatusMinimalPerf.default 802 807 0.99:1
TreeMinimalPerf.default 854 859 0.99:1
TreeWith60ListItems.default 188 189 0.99:1
Slider.Fluent 1612 1622 0.99:1
TableMinimalPerf.default 457 468 0.98:1
RosterPerf.default 1282 1318 0.97:1
VideoMinimalPerf.default 692 710 0.97:1
Icon.Fluent 726 750 0.97:1
Text.Fluent 400 414 0.97:1
GridMinimalPerf.default 385 399 0.96:1
SegmentMinimalPerf.default 390 407 0.96:1
Button.Fluent 626 650 0.96:1
Avatar.Fluent 360 387 0.93:1

@TanelVari TanelVari merged commit 21e7c94 into microsoft:master Jan 22, 2021
@TanelVari TanelVari deleted the TanelVari/ui-polish-dialog branch January 22, 2021 11:15
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

@assuncaocharles assuncaocharles Awaiting requested review from assuncaocharles

@dzearing dzearing Awaiting requested review from dzearing

@jurokapsiar jurokapsiar Awaiting requested review from jurokapsiar

@ling1726 ling1726 Awaiting requested review from ling1726

@miroslavstastny miroslavstastny Awaiting requested review from miroslavstastny

@pompomon pompomon Awaiting requested review from pompomon

Assignees
No one assigned
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
@TanelVari @fabricteam @layershifter @msft-fluent-ui-bot