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: should render as anchor when href is passed #14941

Merged
merged 4 commits into from
Sep 9, 2020
Merged

react-button: should render as anchor when href is passed #14941

merged 4 commits into from
Sep 9, 2020

Conversation

xugao
Copy link
Contributor

@xugao xugao commented Sep 8, 2020

Pull request checklist

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

Description of changes

Fix rendering as anchor when href is passed

Related issue: #14693

Focus areas to test

(optional)

@xugao xugao requested a review from khmakoto September 8, 2020 23:40
@codesandbox-ci
Copy link

codesandbox-ci bot commented Sep 8, 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 d232025:

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

@xugao xugao force-pushed the xgao/button-ff-href branch from 832e61a to 11ce3ec Compare September 9, 2020 00:10
@size-auditor
Copy link

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

Asset size changes

Project Bundle Baseline Size New Size Difference
office-ui-fabric-react fluentui-react-next-SplitButton 169.004 kB 169.037 kB ExceedsBaseline     33 bytes
office-ui-fabric-react fluentui-react-next-ToggleButton 31.026 kB 31.059 kB ExceedsBaseline     33 bytes
office-ui-fabric-react fluentui-react-next-Button 28.159 kB 28.192 kB ExceedsBaseline     33 bytes
office-ui-fabric-react fluentui-react-next-MenuButton 166.433 kB 166.455 kB ExceedsBaseline     22 bytes

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

Baseline commit: 0d0c48f6cfb2eb9dd22f62a56f11a1d2120257ab (build)

@msft-github-bot
Copy link
Contributor

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

Perf Analysis

No significant results to display.

All results

Scenario Render type Master Ticks PR Ticks Iterations Status
BaseButton mount 879 881 5000
ButtonNext mount 677 664 5000
Checkbox mount 1594 1599 5000
CheckboxBase mount 1322 1341 5000
CheckboxNext mount 1522 1502 5000
ChoiceGroup mount 4972 4922 5000
ChoiceGroupNext mount 4922 4894 5000
ComboBox mount 877 871 1000
CommandBar mount 7208 7222 1000
ContextualMenu mount 12125 12323 1000
DefaultButton mount 1061 1122 5000
DetailsRow mount 3483 3439 5000
DetailsRowFast mount 3456 3477 5000
DetailsRowNoStyles mount 3287 3327 5000
Dialog mount 1481 1449 1000
DocumentCardTitle mount 1712 1682 1000
Dropdown mount 2562 2572 5000
FocusZone mount 1734 1682 5000
IconButton mount 1739 1740 5000
Label mount 323 325 5000
Link mount 450 432 5000
LinkNext mount 462 456 5000
MenuButton mount 1441 1463 5000
MessageBar mount 2011 1980 5000
MessageBarNext mount 1995 1975 5000
Nav mount 3158 3203 1000
OverflowSet mount 1364 1394 5000
OverflowSetNext mount 995 1004 5000
Panel mount 1441 1400 1000
Persona mount 807 790 1000
Pivot mount 1387 1372 1000
PivotNext mount 1356 1346 1000
PrimaryButton mount 1241 1203 5000
SearchBox mount 1320 1295 5000
SearchBoxNext mount 1337 1325 5000
Shimmer mount 2602 2554 5000
ShimmerNext mount 2512 2568 5000
Slider mount 1502 1471 5000
SliderNext mount 1835 1846 5000
SpinButton mount 4857 4939 5000
SpinButtonNext mount 4949 5033 5000
Spinner mount 400 399 5000
SplitButton mount 3019 3049 5000
Stack mount 522 524 5000
StackWithIntrinsicChildren mount 1885 1868 5000
StackWithTextChildren mount 5116 5074 5000
SwatchColorPicker mount 10116 10034 5000
SwatchColorPickerNext mount 9953 9920 5000
TagPicker mount 2726 2689 5000
TeachingBubble mount 46852 46542 5000
TeachingBubbleNext mount 46551 46557 5000
Text mount 416 429 5000
TextField mount 1360 1359 5000
ThemeProvider mount 4208 4189 5000
ThemeProvider virtual-rerender 427 424 5000
Toggle mount 820 816 5000
ToggleNext mount 786 764 5000
button mount 116 117 5000

Perf Analysis (Fluent)

⚠️ 5 potential perf regressions detected

Potential regressions comparing to master

Scenario Current PR Ticks Baseline Ticks Ratio Regression Analysis
ButtonOverridesMissPerf.default 1654 42 39.38:1 analysis
ButtonUseCssNestingPerf.default 1101 45 24.47:1 analysis
ButtonUseCssPerf.default 838 44 19.05:1 analysis
ChatWithPopoverPerf.default 469 450 1.04:1 analysis
ListCommonPerf.default 692 956 0.72:1 analysis
Perf comparison
Status Scenario Fluent TPI Fabric TPI Ratio Iterations Ticks
🎯 Avatar.Fluent 0.45 0.47 0.96:1 2000 908
🦄 Button.Fluent 0.12 0.19 0.63:1 5000 604
🔧 Checkbox.Fluent 0.62 0.36 1.72:1 1000 621
🎯 Dialog.Fluent 0.16 0.21 0.76:1 5000 812
🔧 Dropdown.Fluent 2.85 0.49 5.82:1 1000 2851
🔧 Icon.Fluent 0.16 0.06 2.67:1 5000 783
🎯 Image.Fluent 0.09 0.12 0.75:1 5000 452
🔧 Slider.Fluent 1.51 0.36 4.19:1 1000 1508
🔧 Text.Fluent 0.08 0.03 2.67:1 5000 401
🦄 Tooltip.Fluent 0.11 14.31 0.01:1 5000 547

🔧 Needs work     🎯 On target     🦄 Amazing

Perf tests with no regressions
Scenario Current PR Ticks Baseline Ticks Ratio
PortalMinimalPerf.default 161 111 1.45:1
AttachmentMinimalPerf.default 189 143 1.32:1
AccordionMinimalPerf.default 178 144 1.24:1
GridMinimalPerf.default 402 323 1.24:1
ButtonMinimalPerf.default 198 164 1.21:1
HeaderMinimalPerf.default 422 349 1.21:1
Image.Fluent 452 373 1.21:1
BoxMinimalPerf.default 406 339 1.2:1
SegmentMinimalPerf.default 395 329 1.2:1
DividerMinimalPerf.default 429 363 1.18:1
LayoutMinimalPerf.default 452 382 1.18:1
RefMinimalPerf.default 227 192 1.18:1
SkeletonMinimalPerf.default 457 387 1.18:1
RadioGroupMinimalPerf.default 471 404 1.17:1
Text.Fluent 401 342 1.17:1
AnimationMinimalPerf.default 427 372 1.15:1
ChatDuplicateMessagesPerf.default 443 390 1.14:1
FlexMinimalPerf.default 325 284 1.14:1
TextMinimalPerf.default 385 338 1.14:1
StatusMinimalPerf.default 785 696 1.13:1
TableMinimalPerf.default 448 396 1.13:1
FormMinimalPerf.default 471 421 1.12:1
ImageMinimalPerf.default 427 382 1.12:1
LabelMinimalPerf.default 452 403 1.12:1
ReactionMinimalPerf.default 442 393 1.12:1
Tooltip.Fluent 547 489 1.12:1
TextAreaMinimalPerf.default 528 476 1.11:1
TooltipMinimalPerf.default 808 731 1.11:1
PopupMinimalPerf.default 701 641 1.09:1
Dialog.Fluent 812 744 1.09:1
HeaderSlotsPerf.default 865 802 1.08:1
ListMinimalPerf.default 506 469 1.08:1
VideoMinimalPerf.default 657 607 1.08:1
CarouselMinimalPerf.default 481 448 1.07:1
DialogMinimalPerf.default 807 751 1.07:1
MenuMinimalPerf.default 901 841 1.07:1
AttachmentSlotsPerf.default 1186 1120 1.06:1
ChatMinimalPerf.default 648 611 1.06:1
ItemLayoutMinimalPerf.default 1329 1259 1.06:1
ProviderMergeThemesPerf.default 1865 1752 1.06:1
ProviderMinimalPerf.default 894 840 1.06:1
ToolbarMinimalPerf.default 980 922 1.06:1
TreeMinimalPerf.default 923 867 1.06:1
ButtonSlotsPerf.default 625 598 1.05:1
MenuButtonMinimalPerf.default 1606 1526 1.05:1
IconMinimalPerf.default 736 698 1.05:1
Checkbox.Fluent 621 592 1.05:1
CardMinimalPerf.default 582 562 1.04:1
EmbedMinimalPerf.default 1973 1901 1.04:1
Button.Fluent 604 579 1.04:1
InputMinimalPerf.default 1290 1254 1.03:1
SliderMinimalPerf.default 1535 1491 1.03:1
CustomToolbarPrototype.default 3619 3515 1.03:1
TreeWith60ListItems.default 214 208 1.03:1
Avatar.Fluent 908 884 1.03:1
AvatarMinimalPerf.default 487 476 1.02:1
CheckboxMinimalPerf.default 2805 2745 1.02:1
SplitButtonMinimalPerf.default 3776 3698 1.02:1
TableManyItemsPerf.default 2283 2230 1.02:1
AlertMinimalPerf.default 311 307 1.01:1
Dropdown.Fluent 2851 2814 1.01:1
Slider.Fluent 1508 1490 1.01:1
DropdownManyItemsPerf.default 756 755 1:1
DropdownMinimalPerf.default 2805 2801 1:1
LoaderMinimalPerf.default 727 725 1:1
Icon.Fluent 783 800 0.98:1
ListWith60ListItems.default 976 1092 0.89:1
ListNestedPerf.default 609 876 0.7:1

@xugao xugao force-pushed the xgao/button-ff-href branch from 11ce3ec to 66b82a2 Compare September 9, 2020 01:30
@xugao xugao merged commit f8910a6 into microsoft:master Sep 9, 2020
@msft-github-bot
Copy link
Contributor

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

Handy links:

hutchcodes pushed a commit to hutchcodes/fluentui that referenced this pull request Sep 10, 2020
@xugao @hutchcodes
react-button: should render as anchor when href is passed (microsoft#…
6b1a79b 
…14941)

* fix href

* fix text underline

* Change files

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

@khmakoto khmakoto khmakoto approved these changes

Assignees
No one assigned
Labels
Component: Button
Projects
None yet
Milestone
No milestone
Development

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