Skip to content

Button: Adding SPEC.md and MIGRATION.md and updating README.md#17192

Merged
msft-fluent-ui-bot merged 14 commits intomicrosoft:masterfrom
khmakoto:buttonSpec
Mar 24, 2021
Merged

Button: Adding SPEC.md and MIGRATION.md and updating README.md#17192
msft-fluent-ui-bot merged 14 commits intomicrosoft:masterfrom
khmakoto:buttonSpec

Conversation

@khmakoto
Copy link
Member

@khmakoto khmakoto commented Feb 26, 2021

Pull request checklist

Description of changes

This PR adds the initial SPEC and MIGRATION guide for the button component and updates the README to correctly refer this.

This PR also removes any reference to component tokens in @fluentui/react-link until we decide what to do with them and adds the secondary prop that was missing into the API.

@codesandbox-ci
Copy link

codesandbox-ci bot commented Feb 26, 2021

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 81b0586:

Sandbox Source
Fluent UI Button Configuration
codesandbox-react-template Configuration
codesandbox-react-northstar-template Configuration
Align Buttons Middle (forked) Issue #16607

@size-auditor
Copy link

size-auditor bot commented Feb 26, 2021

Asset size changes

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

Baseline commit: b8e8697d9f3ff285687b7cba27b9ac037a0cb727 (build)

@fabricteam
Copy link
Collaborator

fabricteam commented Feb 26, 2021

Perf Analysis

No significant results to display.

All results

Scenario Render type Master Ticks PR Ticks Iterations Status
Avatar mount 1044 1055 5000
BaseButton mount 1037 1041 5000
Breadcrumb mount 41998 43434 5000
ButtonNext mount 1342 1355 5000
Checkbox mount 1642 1671 5000
CheckboxBase mount 1367 1353 5000
ChoiceGroup mount 5086 5012 5000
ComboBox mount 1014 1000 1000
CommandBar mount 9988 10135 1000
ContextualMenu mount 6241 5980 1000
DefaultButton mount 1230 1199 5000
DetailsRow mount 3664 3838 5000
DetailsRowFast mount 3643 3765 5000
DetailsRowNoStyles mount 3572 3403 5000
Dialog mount 1440 1509 1000
DocumentCardTitle mount 1734 1727 1000
Dropdown mount 3356 3308 5000
FocusTrapZone mount 1758 1760 5000
FocusZone mount 1753 1725 5000
IconButton mount 1788 1846 5000
Label mount 338 353 5000
Layer mount 1799 1815 5000
Link mount 470 475 5000
MakeStyles mount 1688 1657 50000
MenuButton mount 1488 1505 5000
MessageBar mount 1933 2007 5000
Nav mount 3286 3292 1000
OverflowSet mount 1024 1009 5000
Panel mount 1399 1390 1000
Persona mount 842 816 1000
Pivot mount 1416 1419 1000
PrimaryButton mount 1328 1299 5000
Rating mount 7905 7870 5000
SearchBox mount 1340 1384 5000
Shimmer mount 2623 2636 5000
Slider mount 1968 1976 5000
SpinButton mount 5145 5036 5000
Spinner mount 407 417 5000
SplitButton mount 3178 3257 5000
Stack mount 501 516 5000
StackWithIntrinsicChildren mount 1537 1548 5000
StackWithTextChildren mount 4676 4727 5000
SwatchColorPicker mount 10220 10225 5000
Tabs mount 1388 1439 1000
TagPicker mount 2872 2921 5000
TeachingBubble mount 11295 11356 5000
Text mount 420 433 5000
TextField mount 1436 1412 5000
ThemeProvider mount 1161 1149 5000
ThemeProvider virtual-rerender 593 570 5000
ThemeProviderNext mount 14617 14676 5000
Toggle mount 825 822 5000
buttonNative mount 110 101 5000

Perf Analysis (Fluent)

Perf comparison
Status Scenario Fluent TPI Fabric TPI Ratio Iterations Ticks
🦄 Avatar.Fluent 0.19 0.53 0.36:1 2000 389
🦄 Button.Fluent 0.14 0.22 0.64:1 5000 685
🔧 Checkbox.Fluent 0.69 0.41 1.68:1 1000 689
🎯 Dialog.Fluent 0.17 0.24 0.71:1 5000 868
🔧 Dropdown.Fluent 3.34 0.44 7.59:1 1000 3336
🔧 Icon.Fluent 0.15 0.06 2.5:1 5000 774
🎯 Image.Fluent 0.1 0.14 0.71:1 5000 483
🔧 Slider.Fluent 1.68 0.49 3.43:1 1000 1681
🔧 Text.Fluent 0.09 0.04 2.25:1 5000 428
🦄 Tooltip.Fluent 0.15 0.95 0.16:1 5000 766

🔧 Needs work     🎯 On target     🦄 Amazing

Perf tests with no regressions
Scenario Current PR Ticks Baseline Ticks Ratio
ButtonMinimalPerf.default 230 205 1.12:1
BoxMinimalPerf.default 460 431 1.07:1
IconMinimalPerf.default 797 749 1.06:1
ChatMinimalPerf.default 735 703 1.05:1
FlexMinimalPerf.default 357 341 1.05:1
ProviderMinimalPerf.default 1068 1019 1.05:1
ChatDuplicateMessagesPerf.default 324 311 1.04:1
SegmentMinimalPerf.default 438 422 1.04:1
Button.Fluent 685 658 1.04:1
AttachmentSlotsPerf.default 1359 1325 1.03:1
AvatarMinimalPerf.default 240 234 1.03:1
ButtonSlotsPerf.default 688 667 1.03:1
ButtonUseCssPerf.default 947 920 1.03:1
HeaderMinimalPerf.default 463 448 1.03:1
LayoutMinimalPerf.default 491 479 1.03:1
RadioGroupMinimalPerf.default 527 514 1.03:1
TextMinimalPerf.default 434 420 1.03:1
AnimationMinimalPerf.default 475 464 1.02:1
AttachmentMinimalPerf.default 201 198 1.02:1
CheckboxMinimalPerf.default 3125 3061 1.02:1
DatepickerMinimalPerf.default 50175 49209 1.02:1
DividerMinimalPerf.default 449 441 1.02:1
FormMinimalPerf.default 527 517 1.02:1
GridMinimalPerf.default 423 414 1.02:1
InputMinimalPerf.default 1434 1403 1.02:1
LabelMinimalPerf.default 508 499 1.02:1
ListCommonPerf.default 778 765 1.02:1
ListMinimalPerf.default 598 585 1.02:1
ListNestedPerf.default 670 660 1.02:1
SkeletonMinimalPerf.default 445 437 1.02:1
SplitButtonMinimalPerf.default 4265 4168 1.02:1
StatusMinimalPerf.default 865 851 1.02:1
TooltipMinimalPerf.default 1071 1054 1.02:1
CarouselMinimalPerf.default 552 546 1.01:1
DialogMinimalPerf.default 887 879 1.01:1
EmbedMinimalPerf.default 4654 4594 1.01:1
MenuMinimalPerf.default 1036 1025 1.01:1
PopupMinimalPerf.default 777 770 1.01:1
SliderMinimalPerf.default 1700 1687 1.01:1
TableMinimalPerf.default 486 482 1.01:1
Avatar.Fluent 389 387 1.01:1
Dropdown.Fluent 3336 3310 1.01:1
Image.Fluent 483 476 1.01:1
ButtonOverridesMissPerf.default 1859 1861 1:1
DropdownMinimalPerf.default 3307 3313 1:1
ItemLayoutMinimalPerf.default 1418 1415 1:1
LoaderMinimalPerf.default 806 808 1:1
RosterPerf.default 1322 1322 1:1
CustomToolbarPrototype.default 3995 3981 1:1
ToolbarMinimalPerf.default 1111 1114 1:1
VideoMinimalPerf.default 743 743 1:1
Dialog.Fluent 868 870 1:1
Text.Fluent 428 426 1:1
Tooltip.Fluent 766 763 1:1
AlertMinimalPerf.default 352 357 0.99:1
ButtonUseCssNestingPerf.default 1177 1188 0.99:1
HeaderSlotsPerf.default 901 913 0.99:1
ListWith60ListItems.default 721 728 0.99:1
MenuButtonMinimalPerf.default 1770 1785 0.99:1
ReactionMinimalPerf.default 487 492 0.99:1
TableManyItemsPerf.default 2375 2400 0.99:1
TextAreaMinimalPerf.default 590 596 0.99:1
TreeMinimalPerf.default 894 899 0.99:1
TreeWith60ListItems.default 203 206 0.99:1
Checkbox.Fluent 689 699 0.99:1
Icon.Fluent 774 779 0.99:1
DropdownManyItemsPerf.default 835 848 0.98:1
ImageMinimalPerf.default 465 474 0.98:1
PortalMinimalPerf.default 177 181 0.98:1
RefMinimalPerf.default 258 262 0.98:1
CardMinimalPerf.default 640 657 0.97:1
ProviderMergeThemesPerf.default 1652 1704 0.97:1
Slider.Fluent 1681 1734 0.97:1
ChatWithPopoverPerf.default 427 445 0.96:1
AccordionMinimalPerf.default 183 199 0.92:1

@khmakoto khmakoto added the Type: Spec Component spec PR label Mar 2, 2021
Comment on lines +270 to +271
| `Enter` | Executes the `Button` action. |
| `Space` | Executes the `Button` action. |
Copy link
Member Author

Choose a reason for hiding this comment

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

Investigate how Enter and Space work with native browser button and have the Button events follow the native events as close as possible.

Possibly want to check with conformance tests.

Open question: Do we really need to do specific checks for the as prop? We need to be clear if and when we deviate because this starts getting into magic handling of props which has other potential drawbacks such as bundle size increases.

@msft-fluent-ui-bot
Copy link
Collaborator

Hello @khmakoto!

Because this pull request has the AutoMerge label, I will be glad to assist with helping to merge this pull request once all check-in policies pass.

p.s. you can customize the way I help with merging this pull request, such as holding this pull request until a specific person approves. Simply @mention me (@msft-fluent-ui-bot) and give me an instruction to get started! Learn more here.

@msft-fluent-ui-bot msft-fluent-ui-bot merged commit f9819c9 into microsoft:master Mar 24, 2021
@khmakoto khmakoto deleted the buttonSpec branch March 24, 2021 23:27
@msft-fluent-ui-bot
Copy link
Collaborator

🎉@fluentui/react-link@v9.0.0-alpha.15 has been released which incorporates this pull request.:tada:

Handy links:

@msft-fluent-ui-bot
Copy link
Collaborator

🎉@fluentui/react-button@v9.0.0-alpha.15 has been released which incorporates this pull request.:tada:

Handy links:

@msft-fluent-ui-bot
Copy link
Collaborator

🎉@fluentui/react-examples@v8.9.1 has been released which incorporates this pull request.:tada:

Handy links:

joshualamusga1 pushed a commit to joshualamusga1/fluentui that referenced this pull request Mar 25, 2021
…soft#17192)

#### Pull request checklist

- [X] Addresses an existing issue: Part of microsoft#16746, fixes microsoft#16607
- [X] Include a change request file using `$ yarn change`

#### Description of changes

This PR adds the initial SPEC and MIGRATION guide for the button component and updates the README to correctly refer this.

This PR also removes any reference to component tokens in `@fluentui/react-link` until we decide what to do with them and adds the `secondary` prop that was missing into the API.
miroslavstastny pushed a commit to miroslavstastny/fluentui that referenced this pull request May 5, 2021
…soft#17192)

#### Pull request checklist

- [X] Addresses an existing issue: Part of microsoft#16746, fixes microsoft#16607
- [X] Include a change request file using `$ yarn change`

#### Description of changes

This PR adds the initial SPEC and MIGRATION guide for the button component and updates the README to correctly refer this.

This PR also removes any reference to component tokens in `@fluentui/react-link` until we decide what to do with them and adds the `secondary` prop that was missing into the API.
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.

Context menu is not showing when MenuButton clicked

6 participants