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

Remove explicit blocking of Alt key for keytip start sequence #13389

Merged
merged 3 commits into from
Jun 1, 2020

Conversation

kelseyyoung
Copy link
Contributor

@kelseyyoung kelseyyoung commented May 28, 2020

Pull request checklist

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

Description of changes

When writing keytips initially we had blocked the recognition of the "Alt" key because that is reserved for putting focus on the top bar of the browser. However there are users of Keytips that are writing their app in an Electron application that looks and behaves like a native desktop app. In native desktop apps the default key for keytips is just "Alt", and because they don't run in a traditional browser they won't have any issues using it

Focus areas to test

Tested that with removing these lines that you can specify "Alt" to start your keytips. If done in a traditional browser this will "break" in the sense that keytips will appear but focus will also go to the browser top bar, meaning the user can't interact with keytips

@kelseyyoung
Copy link
Contributor Author

When I run "yarn change" from the root it shows that I have changes in like 20 packages, and that there is also already a change file for office-ui-fabric-react. Not sure what I should do here? yarn clean maybe?

@ecraig12345
Copy link
Member

@kelseyyoung You probably need to update the URL for your upstream remote to microsoft/fluentui.

@msft-github-bot
Copy link
Contributor

Perf Analysis

No significant results to display.

All results

Scenario Master Ticks PR Ticks Iterations Status
BaseButton 846 848 5000
ButtonNext 456 459 5000
Checkbox 1578 1561 5000
CheckboxBase 1305 1295 5000
CheckboxNext 1560 1536 5000
ChoiceGroup 5066 5060 5000
ComboBox 950 940 1000
CommandBar 7936 7868 1000
ContextualMenu 13610 13741 1000
DefaultButton 1081 1091 5000
DetailsRow 3437 3473 5000
DetailsRow (fast icons) 3488 3559 5000
DetailsRow without styles 3274 3262 5000
Dialog 1474 1493 1000
DocumentCardTitle with truncation 2001 1947 1000
Dropdown 2400 2437 5000
FocusZone 1811 1779 5000
IconButton 1753 1687 5000
Label 323 310 5000
Link 450 469 5000
LinkNext 453 454 5000
MenuButton 1402 1407 5000
Nav 3227 3243 1000
Panel 1424 1401 1000
Persona 807 806 1000
Pivot 1337 1337 1000
PrimaryButton 1179 1171 5000
SearchBox 1205 1200 5000
Slider 1413 1410 5000
SliderNext 1913 1851 5000
Spinner 375 397 5000
SplitButton 3039 2972 5000
Stack 458 466 5000
Stack with Intrinsic children 1807 1828 5000
Stack with Text children 4745 4739 5000
TagPicker 2650 2697 5000
Text 369 358 5000
TextField 1309 1346 5000
Toggle 854 841 5000
ToggleNext 829 857 5000
button 73 76 5000

Perf Analysis (Fluent)

Perf comparison
Status Scenario Fluent TPI Fabric TPI Ratio Iterations Ticks
🔧 Avatar.Fluent 0.7 0.48 1.46:1 2000 1396
🦄 Button.Fluent 0.11 0.19 0.58:1 5000 540
🔧 Checkbox.Fluent 1.09 0.35 3.11:1 1000 1087
🎯 Dialog.Fluent 0.15 0.21 0.71:1 5000 738
🔧 Dropdown.Fluent 6.47 0.43 15.05:1 1000 6471
🔧 Icon.Fluent 0.14 0.05 2.8:1 5000 677
🦄 Image.Fluent 0.07 0.11 0.64:1 5000 349
🔧 Slider.Fluent 2.89 0.35 8.26:1 1000 2894
🔧 Text.Fluent 0.07 0.03 2.33:1 5000 338
🦄 Tooltip.Fluent 0.1 18.58 0.01:1 5000 504

🔧 Needs work     🎯 On target     🦄 Amazing

Perf tests with no regressions
Scenario Current PR Ticks Baseline Ticks Ratio
VideoMinimalPerf.default 641 567 1.13:1
AttachmentMinimalPerf.default 142 132 1.08:1
ButtonMinimalPerf.default 164 153 1.07:1
ListNestedPerf.default 1062 1006 1.06:1
RadioGroupMinimalPerf.default 406 387 1.05:1
ReactionMinimalPerf.default 385 368 1.05:1
AccordionMinimalPerf.default 129 124 1.04:1
Image.Fluent 349 334 1.04:1
AnimationMinimalPerf.default 691 671 1.03:1
HeaderSlotsPerf.default 733 715 1.03:1
PopupMinimalPerf.default 271 264 1.03:1
RefMinimalPerf.default 209 203 1.03:1
TableMinimalPerf.default 384 372 1.03:1
TextAreaMinimalPerf.default 443 430 1.03:1
Button.Fluent 540 524 1.03:1
Tooltip.Fluent 504 491 1.03:1
DropdownManyItemsPerf.default 2076 2040 1.02:1
HeaderMinimalPerf.default 343 335 1.02:1
ItemLayoutMinimalPerf.default 2254 2207 1.02:1
PortalMinimalPerf.default 115 113 1.02:1
TableManyItemsPerf.default 2365 2319 1.02:1
TreeMinimalPerf.default 1312 1290 1.02:1
AvatarMinimalPerf.default 693 688 1.01:1
CheckboxMinimalPerf.default 5009 4947 1.01:1
DialogMinimalPerf.default 701 692 1.01:1
LabelMinimalPerf.default 391 387 1.01:1
ProviderMergeThemesPerf.default 1937 1918 1.01:1
StatusMinimalPerf.default 653 645 1.01:1
TreeWith60ListItems.default 283 280 1.01:1
Dialog.Fluent 738 728 1.01:1
AlertMinimalPerf.default 310 309 1:1
BoxMinimalPerf.default 314 315 1:1
FormMinimalPerf.default 361 361 1:1
InputMinimalPerf.default 1601 1599 1:1
ListMinimalPerf.default 454 454 1:1
ProviderMinimalPerf.default 872 872 1:1
SplitButtonMinimalPerf.default 3897 3884 1:1
ToolbarMinimalPerf.default 835 833 1:1
TooltipMinimalPerf.default 739 739 1:1
Dropdown.Fluent 6471 6439 1:1
Icon.Fluent 677 680 1:1
ChatDuplicateMessagesPerf.default 513 516 0.99:1
ChatMinimalPerf.default 550 554 0.99:1
ChatWithPopoverPerf.default 501 507 0.99:1
DropdownMinimalPerf.default 6032 6090 0.99:1
EmbedMinimalPerf.default 3252 3276 0.99:1
FlexMinimalPerf.default 264 268 0.99:1
MenuMinimalPerf.default 813 818 0.99:1
SegmentMinimalPerf.default 332 334 0.99:1
SliderMinimalPerf.default 2900 2940 0.99:1
TextMinimalPerf.default 334 338 0.99:1
CustomToolbarPrototype.default 4837 4886 0.99:1
Avatar.Fluent 1396 1408 0.99:1
Slider.Fluent 2894 2936 0.99:1
CarouselMinimalPerf.default 478 489 0.98:1
ImageMinimalPerf.default 340 347 0.98:1
LayoutMinimalPerf.default 363 370 0.98:1
ListCommonPerf.default 1102 1121 0.98:1
AttachmentSlotsPerf.default 1155 1186 0.97:1
CardMinimalPerf.default 513 530 0.97:1
LoaderMinimalPerf.default 1107 1139 0.97:1
MenuButtonMinimalPerf.default 1650 1697 0.97:1
Checkbox.Fluent 1087 1115 0.97:1
Text.Fluent 338 349 0.97:1
HierarchicalTreeMinimalPerf.default 398 416 0.96:1
ListWith60ListItems.default 1524 1588 0.96:1
ButtonSlotsPerf.default 672 715 0.94:1
IconMinimalPerf.default 629 667 0.94:1
GridMinimalPerf.default 1257 1386 0.91:1
DividerMinimalPerf.default 271 311 0.87:1

@size-auditor
Copy link

size-auditor bot commented May 28, 2020

Asset size changes

Project Bundle Baseline Size New Size Difference
office-ui-fabric-react office-ui-fabric-react-KeytipLayer 98.338 kB 98.322 kB BelowBaseline     -16 bytes
office-ui-fabric-react fluentui-react-next-KeytipLayer 98.338 kB 98.322 kB BelowBaseline     -16 bytes

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

Baseline commit: cfcf5178fb8304109274a68121c7762a91f55d5b (build)

@kelseyyoung
Copy link
Contributor Author

@ecraig12345 any chance you could take a look at this?

@ecraig12345 ecraig12345 requested a review from jspurlin May 29, 2020 20:31
@ecraig12345
Copy link
Member

@kelseyyoung I don't really know anything about keytips and their expected behavior--so maybe get @jspurlin to review instead? (looks like he's worked on this in the past)

@jspurlin jspurlin merged commit f9d3cc7 into microsoft:master Jun 1, 2020
@msft-github-bot
Copy link
Contributor

🎉office-ui-fabric-react@v7.117.1 has been released which incorporates this pull request.:tada:

Handy links:

miroslavstastny pushed a commit to levithomason/fluentui that referenced this pull request Jun 8, 2020
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.

None yet

4 participants