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

react-button: fix styles to align with v7 buttons #14972

Merged
merged 9 commits into from
Sep 17, 2020
Merged

react-button: fix styles to align with v7 buttons #14972

merged 9 commits into from
Sep 17, 2020

Conversation

xugao
Copy link
Contributor

@xugao xugao commented Sep 10, 2020 •
edited
Loading

Pull request checklist

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

Description of changes

Fit finishing styles to align with v7 button.
Key changes are:

  • Default button height to be 32px
  • Fix spacing between content
  • Update menuIcon (chevron) size to be 12px
    - Set flex-grow: 1 in button text content so icons will be left/right aligned when it's fluid.
  • Fix ghost font weight
  • Fix ghost background color
  • Fix compound button: Icon size, spacing between text
  • Fix split button divider to have the right length by default and made sure dividerLength token is working correctly

Focus areas to test

Do expect a lot of updates in screener tests

@codesandbox-ci
Copy link

codesandbox-ci bot commented Sep 10, 2020 •
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 74b7b40:

Sandbox Source
Fluent UI Button Configuration
microsoft/fluentui: codesandbox-react-template Configuration
microsoft/fluentui: codesandbox-react-next-template Configuration
microsoft/fluentui: codesandbox-react-northstar-template Configuration

@msft-github-bot
Copy link
Contributor

msft-github-bot commented Sep 10, 2020 •
edited
Loading

Perf Analysis

No significant results to display.

All results

Scenario Render type Master Ticks PR Ticks Iterations Status
BaseButton mount 899 919 5000
Breadcrumb mount 38945 39319 5000
BreadcrumbNext mount 148792 151029 5000
ButtonNext mount 568 596 5000
Checkbox mount 1606 1620 5000
CheckboxBase mount 1359 1381 5000
CheckboxNext mount 1542 1559 5000
ChoiceGroup mount 5052 4971 5000
ChoiceGroupNext mount 5001 5071 5000
ComboBox mount 924 926 1000
CommandBar mount 7391 7280 1000
ContextualMenu mount 12385 12220 1000
DefaultButton mount 1121 1123 5000
DetailsRow mount 3560 3601 5000
DetailsRowFast mount 3541 3575 5000
DetailsRowNoStyles mount 3374 3395 5000
Dialog mount 1528 1526 1000
DocumentCardTitle mount 1722 1766 1000
Dropdown mount 2604 2621 5000
FocusZone mount 1718 1729 5000
IconButton mount 1807 1813 5000
Label mount 340 327 5000
Link mount 450 447 5000
LinkNext mount 475 484 5000
MenuButton mount 1485 1473 5000
MessageBar mount 1994 2070 5000
MessageBarNext mount 1968 2011 5000
Nav mount 3218 3227 1000
OverflowSet mount 1379 1395 5000
OverflowSetNext mount 1045 1042 5000
Panel mount 1448 1438 1000
Persona mount 840 841 1000
Pivot mount 1407 1461 1000
PivotNext mount 1405 1416 1000
PrimaryButton mount 1278 1303 5000
Rating mount 7823 7762 5000
RatingNext mount 7639 7635 5000
SearchBox mount 1328 1323 5000
SearchBoxNext mount 1346 1377 5000
Shimmer mount 2647 2674 5000
ShimmerNext mount 2553 2599 5000
Slider mount 1490 1524 5000
SliderNext mount 1927 1898 5000
SpinButton mount 4942 4929 5000
SpinButtonNext mount 5019 5030 5000
Spinner mount 403 414 5000
SplitButton mount 3226 3172 5000
Stack mount 544 532 5000
StackWithIntrinsicChildren mount 1879 1861 5000
StackWithTextChildren mount 5118 5031 5000
SwatchColorPicker mount 10168 10217 5000
SwatchColorPickerNext mount 10250 10191 5000
TagPicker mount 2713 2740 5000
TeachingBubble mount 47556 47623 5000
TeachingBubbleNext mount 50253 50723 5000
Text mount 450 457 5000
TextField mount 1478 1500 5000
ThemeProvider mount 5051 5211 5000
ThemeProvider virtual-rerender 632 609 5000
Toggle mount 931 920 5000
ToggleNext mount 895 867 5000
button mount 123 123 5000

Perf Analysis (Fluent)

⚠️ 6 potential perf regressions detected

Potential regressions comparing to master

Scenario Current PR Ticks Baseline Ticks Ratio Regression Analysis
ButtonOverridesMissPerf.default 1660 42 39.52:1 analysis
ButtonUseCssNestingPerf.default 1087 43 25.28:1 analysis
ButtonUseCssPerf.default 850 45 18.89:1 analysis
ChatWithPopoverPerf.default 470 467 1.01:1 analysis
ListCommonPerf.default 684 954 0.72:1 analysis
ListNestedPerf.default 619 890 0.7:1 analysis
Perf comparison
Status Scenario Fluent TPI Fabric TPI Ratio Iterations Ticks
🎯 Avatar.Fluent 0.46 0.49 0.94:1 2000 911
🦄 Button.Fluent 0.12 0.19 0.63:1 5000 603
🔧 Checkbox.Fluent 0.64 0.37 1.73:1 1000 640
🎯 Dialog.Fluent 0.16 0.22 0.73:1 5000 821
🔧 Dropdown.Fluent 2.82 0.49 5.76:1 1000 2824
🔧 Icon.Fluent 0.15 0.06 2.5:1 5000 756
🎯 Image.Fluent 0.09 0.11 0.82:1 5000 441
🔧 Slider.Fluent 1.55 0.37 4.19:1 1000 1546
🔧 Text.Fluent 0.08 0.03 2.67:1 5000 393
🦄 Tooltip.Fluent 0.11 14.86 0.01:1 5000 551

🔧 Needs work     🎯 On target     🦄 Amazing

Perf tests with no regressions
Scenario Current PR Ticks Baseline Ticks Ratio
PortalMinimalPerf.default 152 112 1.36:1
RefMinimalPerf.default 233 189 1.23:1
Image.Fluent 441 362 1.22:1
FlexMinimalPerf.default 329 272 1.21:1
SegmentMinimalPerf.default 399 330 1.21:1
ImageMinimalPerf.default 437 366 1.19:1
SkeletonMinimalPerf.default 470 396 1.19:1
AttachmentMinimalPerf.default 182 154 1.18:1
DividerMinimalPerf.default 408 348 1.17:1
RadioGroupMinimalPerf.default 480 410 1.17:1
Text.Fluent 393 337 1.17:1
LayoutMinimalPerf.default 446 384 1.16:1
ReactionMinimalPerf.default 449 386 1.16:1
TextMinimalPerf.default 391 336 1.16:1
TextAreaMinimalPerf.default 555 484 1.15:1
ButtonMinimalPerf.default 194 170 1.14:1
GridMinimalPerf.default 376 330 1.14:1
AlertMinimalPerf.default 337 299 1.13:1
AnimationMinimalPerf.default 433 384 1.13:1
BoxMinimalPerf.default 386 343 1.13:1
TableMinimalPerf.default 450 399 1.13:1
Tooltip.Fluent 551 487 1.13:1
HeaderMinimalPerf.default 396 354 1.12:1
HeaderSlotsPerf.default 876 785 1.12:1
ListMinimalPerf.default 531 474 1.12:1
LabelMinimalPerf.default 451 405 1.11:1
PopupMinimalPerf.default 709 636 1.11:1
Button.Fluent 603 545 1.11:1
Dialog.Fluent 821 737 1.11:1
StatusMinimalPerf.default 771 702 1.1:1
Icon.Fluent 756 688 1.1:1
AvatarMinimalPerf.default 509 466 1.09:1
ChatMinimalPerf.default 646 597 1.08:1
FormMinimalPerf.default 456 423 1.08:1
ToolbarMinimalPerf.default 1005 927 1.08:1
VideoMinimalPerf.default 677 628 1.08:1
AccordionMinimalPerf.default 161 150 1.07:1
AttachmentSlotsPerf.default 1182 1101 1.07:1
CardMinimalPerf.default 612 571 1.07:1
ProviderMinimalPerf.default 916 856 1.07:1
IconMinimalPerf.default 689 644 1.07:1
TooltipMinimalPerf.default 819 763 1.07:1
ChatDuplicateMessagesPerf.default 434 408 1.06:1
DialogMinimalPerf.default 815 769 1.06:1
ItemLayoutMinimalPerf.default 1350 1268 1.06:1
MenuMinimalPerf.default 905 853 1.06:1
MenuButtonMinimalPerf.default 1622 1529 1.06:1
TreeMinimalPerf.default 931 876 1.06:1
TreeWith60ListItems.default 207 195 1.06:1
Avatar.Fluent 911 862 1.06:1
LoaderMinimalPerf.default 748 714 1.05:1
ProviderMergeThemesPerf.default 1850 1759 1.05:1
Checkbox.Fluent 640 607 1.05:1
CarouselMinimalPerf.default 469 451 1.04:1
EmbedMinimalPerf.default 2005 1930 1.04:1
CustomToolbarPrototype.default 3661 3506 1.04:1
InputMinimalPerf.default 1304 1266 1.03:1
SplitButtonMinimalPerf.default 3896 3776 1.03:1
Slider.Fluent 1546 1501 1.03:1
CheckboxMinimalPerf.default 2836 2776 1.02:1
DropdownManyItemsPerf.default 764 751 1.02:1
Dropdown.Fluent 2824 2795 1.01:1
ButtonSlotsPerf.default 618 615 1:1
DropdownMinimalPerf.default 2835 2828 1:1
SliderMinimalPerf.default 1510 1506 1:1
TableManyItemsPerf.default 2282 2273 1:1
ListWith60ListItems.default 930 1070 0.87:1

@size-auditor
Copy link

size-auditor bot commented Sep 10, 2020 •
edited
Loading

Asset size changes

Project Bundle Baseline Size New Size Difference
office-ui-fabric-react fluentui-react-next-MenuButton 166.944 kB 167.479 kB ExceedsBaseline     535 bytes
office-ui-fabric-react fluentui-react-next-SplitButton 169.577 kB 170.088 kB ExceedsBaseline     511 bytes
office-ui-fabric-react fluentui-react-next-ToggleButton 22.125 kB 22.622 kB ExceedsBaseline     497 bytes
office-ui-fabric-react fluentui-react-next-Button 20.026 kB 20.523 kB ExceedsBaseline     497 bytes
office-ui-fabric-react fluentui-react-next-Styling 67.104 kB 66.783 kB BelowBaseline     -321 bytes

ExceedsTolerance Over Tolerance (1024 B) ExceedsBaseline Over Baseline BelowBaseline Below Baseline New New Deleted  Removed 1 kB = 1000 B

Baseline commit: 730c61559ee97a7cfc2f84d40c96fab3077e5fb0 (build)

@xugao xugao requested a review from dzearing September 15, 2020 21:54
dzearing
dzearing approved these changes Sep 16, 2020
View reviewed changes
Copy link
Member

@dzearing dzearing left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

check the comment first. I think there might be a snafu with menubutton.

@xugao xugao force-pushed the xgao/button-ff-styling branch 3 times, most recently from df0a43d to fef649f Compare September 16, 2020 21:47
@xugao xugao merged commit 70025f8 into microsoft:master Sep 17, 2020
@xugao xugao mentioned this pull request Sep 17, 2020
Closed
@msft-github-bot
Copy link
Contributor

🎉@fluentui/[email protected] has been released which incorporates this pull request.:tada:

Handy links:

@msft-github-bot
Copy link
Contributor

🎉@fluentui/[email protected] has been released which incorporates this pull request.:tada:

Handy links:

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@dzearing dzearing dzearing approved these changes

@khmakoto khmakoto Awaiting requested review from khmakoto

Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
3 participants
@xugao @msft-github-bot @dzearing