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

Add custom KeyUp support to Group Header #15478

Merged
merged 11 commits into from
Oct 15, 2020
Merged

Conversation

bcoard
Copy link
Contributor

@bcoard bcoard commented Oct 12, 2020

Pull request checklist

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

Description of changes

Give the user the ability to override what happens with KeyUp. Currently it is only used with Right/Left to expand and collapse the group.

Focus areas to test

Ensure that Right/Left to expand and collapse still works.

@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 861894f:

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

@codesandbox-ci
Copy link

codesandbox-ci bot commented Oct 12, 2020

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 33a6732:

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

@msft-github-bot
Copy link
Contributor

msft-github-bot commented Oct 12, 2020

Perf Analysis

No significant results to display.

All results

Scenario Render type 7.0 Ticks PR Ticks Iterations Status
Avatar mount 958 927 5000
BaseButton mount 1064 1013 5000
Breadcrumb mount 43843 44110 5000
ButtonNext mount 732 736 5000
Checkbox mount 1756 1781 5000
CheckboxBase mount 1439 1497 5000
ChoiceGroup mount 5463 5479 5000
ComboBox mount 1038 1031 1000
CommandBar mount 8290 8301 1000
ContextualMenu mount 14264 14248 1000
DefaultButton mount 1282 1251 5000
DetailsRow mount 4049 4026 5000
DetailsRowFast mount 3991 3976 5000
DetailsRowNoStyles mount 3831 3761 5000
Dialog mount 1641 1637 1000
DocumentCardTitle mount 1910 1962 1000
Dropdown mount 2939 2879 5000
FocusTrapZone mount 1813 1833 5000
FocusZone mount 1946 1976 5000
IconButton mount 1982 2000 5000
Label mount 360 399 5000
Layer mount 2158 2176 5000
Link mount 492 499 5000
MenuButton mount 1689 1665 5000
MessageBar mount 2188 2224 5000
Nav mount 3566 3599 1000
OverflowSet mount 1555 1590 5000
Panel mount 1582 1604 1000
Persona mount 928 919 1000
Pivot mount 1553 1590 1000
PrimaryButton mount 1436 1431 5000
Rating mount 8733 8596 5000
SearchBox mount 1460 1446 5000
Shimmer mount 2984 2876 5000
Slider mount 1649 1653 5000
SpinButton mount 5524 5530 5000
Spinner mount 462 466 5000
SplitButton mount 3505 3482 5000
Stack mount 555 559 5000
StackWithIntrinsicChildren mount 1683 1688 5000
StackWithTextChildren mount 5315 5252 5000
SwatchColorPicker mount 11343 11500 5000
TagPicker mount 3065 3038 5000
TeachingBubble mount 53591 53590 5000
Text mount 478 484 5000
TextField mount 1618 1611 5000
ThemeProvider mount 1823 1820 5000
ThemeProvider virtual-rerender 674 667 5000
Toggle mount 922 941 5000
button mount 123 115 5000

Perf Analysis (Fluent)

Perf comparison
Status Scenario Fluent TPI Fabric TPI Ratio Iterations Ticks
🎯 Avatar.Fluent 0.51 0.54 0.94:1 2000 1015
🦄 Button.Fluent 0.14 0.23 0.61:1 5000 691
🔧 Checkbox.Fluent 0.71 0.41 1.73:1 1000 712
🎯 Dialog.Fluent 0.18 0.25 0.72:1 5000 909
🔧 Dropdown.Fluent 3.22 0.51 6.31:1 1000 3219
🔧 Icon.Fluent 0.17 0.07 2.43:1 5000 837
🎯 Image.Fluent 0.1 0.14 0.71:1 5000 490
🔧 Slider.Fluent 1.75 0.42 4.17:1 1000 1751
🔧 Text.Fluent 0.09 0.04 2.25:1 5000 456
🦄 Tooltip.Fluent 0.12 16.73 0.01:1 5000 619

🔧 Needs work     🎯 On target     🦄 Amazing

Perf tests with no regressions
Scenario Current PR Ticks Baseline Ticks Ratio
AccordionMinimalPerf.default 174 0 Infinity:1
AlertMinimalPerf.default 362 0 Infinity:1
AnimationMinimalPerf.default 468 0 Infinity:1
AttachmentMinimalPerf.default 236 0 Infinity:1
AttachmentSlotsPerf.default 1273 0 Infinity:1
AvatarMinimalPerf.default 563 0 Infinity:1
BoxMinimalPerf.default 458 0 Infinity:1
ButtonMinimalPerf.default 215 0 Infinity:1
ButtonSlotsPerf.default 693 0 Infinity:1
ButtonUseCssPerf.default 947 0 Infinity:1
ButtonUseCssNestingPerf.default 1266 0 Infinity:1
CardMinimalPerf.default 679 0 Infinity:1
ChatDuplicateMessagesPerf.default 476 0 Infinity:1
ChatMinimalPerf.default 722 0 Infinity:1
ChatWithPopoverPerf.default 522 0 Infinity:1
CheckboxMinimalPerf.default 3144 0 Infinity:1
DialogMinimalPerf.default 897 0 Infinity:1
DividerMinimalPerf.default 483 0 Infinity:1
DropdownManyItemsPerf.default 879 0 Infinity:1
DropdownMinimalPerf.default 3203 0 Infinity:1
EmbedMinimalPerf.default 2212 0 Infinity:1
FlexMinimalPerf.default 362 0 Infinity:1
FormMinimalPerf.default 530 0 Infinity:1
GridMinimalPerf.default 434 0 Infinity:1
HeaderMinimalPerf.default 448 0 Infinity:1
HeaderSlotsPerf.default 950 0 Infinity:1
InputMinimalPerf.default 1471 0 Infinity:1
ItemLayoutMinimalPerf.default 1477 0 Infinity:1
LabelMinimalPerf.default 522 0 Infinity:1
LayoutMinimalPerf.default 504 0 Infinity:1
ListCommonPerf.default 746 0 Infinity:1
ListMinimalPerf.default 577 0 Infinity:1
ListNestedPerf.default 693 0 Infinity:1
ListWith60ListItems.default 1067 0 Infinity:1
LoaderMinimalPerf.default 827 0 Infinity:1
MenuMinimalPerf.default 1002 0 Infinity:1
MenuButtonMinimalPerf.default 1814 0 Infinity:1
PopupMinimalPerf.default 797 0 Infinity:1
PortalMinimalPerf.default 191 0 Infinity:1
ProviderMergeThemesPerf.default 2213 0 Infinity:1
ProviderMinimalPerf.default 1123 0 Infinity:1
RadioGroupMinimalPerf.default 545 0 Infinity:1
ReactionMinimalPerf.default 503 0 Infinity:1
RefMinimalPerf.default 272 0 Infinity:1
SkeletonMinimalPerf.default 521 0 Infinity:1
SliderMinimalPerf.default 1719 0 Infinity:1
SplitButtonMinimalPerf.default 4272 0 Infinity:1
IconMinimalPerf.default 817 0 Infinity:1
TableManyItemsPerf.default 2567 0 Infinity:1
TableMinimalPerf.default 489 0 Infinity:1
TextMinimalPerf.default 441 0 Infinity:1
TextAreaMinimalPerf.default 596 0 Infinity:1
ToolbarMinimalPerf.default 1104 0 Infinity:1
TooltipMinimalPerf.default 914 0 Infinity:1
TreeWith60ListItems.default 248 0 Infinity:1
VideoMinimalPerf.default 743 0 Infinity:1
Avatar.Fluent 1015 0 Infinity:1
Button.Fluent 691 0 Infinity:1
Checkbox.Fluent 712 0 Infinity:1
Dialog.Fluent 909 0 Infinity:1
Dropdown.Fluent 3219 0 Infinity:1
Icon.Fluent 837 0 Infinity:1
Image.Fluent 490 0 Infinity:1
Slider.Fluent 1751 0 Infinity:1
Tooltip.Fluent 619 0 Infinity:1
CustomToolbarPrototype.default 4218 1 4218:1
ButtonOverridesMissPerf.default 1862 1 1862:1
TreeMinimalPerf.default 1067 1 1067:1
StatusMinimalPerf.default 873 1 873:1
CarouselMinimalPerf.default 533 1 533:1
ImageMinimalPerf.default 493 1 493:1
Text.Fluent 456 1 456:1
SegmentMinimalPerf.default 436 1 436:1

@size-auditor
Copy link

size-auditor bot commented Oct 12, 2020

Asset size changes

Project Bundle Baseline Size New Size Difference
office-ui-fabric-react office-ui-fabric-react-DetailsList 215.051 kB 215.133 kB ExceedsBaseline     82 bytes
office-ui-fabric-react office-ui-fabric-react-GroupedList 121.499 kB 121.581 kB ExceedsBaseline     82 bytes
office-ui-fabric-react office-ui-fabric-react-ShimmeredDetailsList 225.459 kB 225.541 kB ExceedsBaseline     82 bytes

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

Baseline commit: 172f3340317a7f3d434d82334716db24b3b63ede (build)

@bcoard
Copy link
Contributor Author

bcoard commented Oct 12, 2020

Asset size changes

Project Bundle Baseline Size New Size Difference
office-ui-fabric-react office-ui-fabric-react-DetailsList 215.051 kB 215.113 kB ExceedsBaseline     62 bytes
office-ui-fabric-react office-ui-fabric-react-GroupedList 121.499 kB 121.561 kB ExceedsBaseline     62 bytes
office-ui-fabric-react office-ui-fabric-react-ShimmeredDetailsList 225.459 kB 225.521 kB ExceedsBaseline     62 bytes
ExceedsTolerance Over Tolerance (1024 B) ExceedsBaseline Over Baseline BelowBaseline Below Baseline New New Deleted  Removed 1 kB = 1000 B

Baseline commit: 48eec32af2e31947e90b3324f81e2d8a3dbc003d (build)

Is there something that I should be doing about this?

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.

Thanks!

@msft-github-bot
Copy link
Contributor

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-github-bot) and give me an instruction to get started! Learn more here.

@msft-github-bot msft-github-bot merged commit a729bb3 into microsoft:7.0 Oct 15, 2020
@bcoard bcoard deleted the 7.0 branch October 15, 2020 23:17
@msft-github-bot
Copy link
Contributor

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

Handy links:

msft-github-bot pushed a commit that referenced this pull request Oct 20, 2020
…15624)

<!--
!!!!!!! IMPORTANT !!!!!!!

Due to work we're currently doing to prepare master branch for our version 8 beta release,
please hold-off submitting the PR until around October 12 if it's not urgent.
If it is urgent, please submit the PR targeting the 7.0 branch.

This change does not apply to react-northstar contributors.

See #15222 for more details. Sorry for the inconvenience and short notice.
-->

#### Pull request checklist

- [ ] Addresses an existing issue: Fixes #0000
- [x] Include a change request file using `$ yarn change`

#### Description of changes

_Cherry-pick of #15478._

_Original PR description:_

Give the user the ability to override what happens with KeyUp. Currently it is only used with Right/Left to expand and collapse the group.

#### Focus areas to test

Ensure that Right/Left to expand and collapse still works.
SethDonohue pushed a commit to SethDonohue/fluentui that referenced this pull request Nov 2, 2020
…icrosoft#15624)

<!--
!!!!!!! IMPORTANT !!!!!!!

Due to work we're currently doing to prepare master branch for our version 8 beta release,
please hold-off submitting the PR until around October 12 if it's not urgent.
If it is urgent, please submit the PR targeting the 7.0 branch.

This change does not apply to react-northstar contributors.

See microsoft#15222 for more details. Sorry for the inconvenience and short notice.
-->

#### Pull request checklist

- [ ] Addresses an existing issue: Fixes #0000
- [x] Include a change request file using `$ yarn change`

#### Description of changes

_Cherry-pick of microsoft#15478._

_Original PR description:_

Give the user the ability to override what happens with KeyUp. Currently it is only used with Right/Left to expand and collapse the group.

#### Focus areas to test

Ensure that Right/Left to expand and collapse still works.
@ecraig12345 ecraig12345 removed the needs cherry-pick Temporary label for PRs which may need to be cherry-picked to master label Jan 26, 2021
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