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

fix(CarouselNavigation): enable back focus zone in carousel navigation #13086

Merged
merged 32 commits into from
May 11, 2020
Merged

fix(CarouselNavigation): enable back focus zone in carousel navigation #13086

merged 32 commits into from
May 11, 2020

Conversation

kolaps33
Copy link
Contributor

@kolaps33 kolaps33 commented May 11, 2020

Arrow keys navigation in the carousel navigation list stops to work.

Description of changes

Root cause was that focus zone was not adding to the tablist after convert to FC
Adding function which will allow it.

Focus areas to test

Navigate under the carousel into the navigation tablist
Use left/right arrow keys
Expected Result
Left/Right arrow keys navigate to previous/next tab element (bullet)

Microsoft Reviewers: Open in CodeFlow

Milan Turon added 30 commits April 3, 2020 14:52
@msft-github-bot msft-github-bot added the Fluent UI react-northstar (v0) Work related to Fluent UI V0 label May 11, 2020
@kolaps33 kolaps33 changed the title fix(CarouselNavigation): improvement to highlight first item when open #12856 fix(CarouselNavigation): improvement to highlight first item when open May 11, 2020
@kolaps33 kolaps33 changed the title fix(CarouselNavigation): improvement to highlight first item when open fix(CarouselNavigation): enable back focus zone in carousel navigation May 11, 2020
@msft-github-bot
Copy link
Contributor

msft-github-bot commented May 11, 2020

Perf Analysis

No significant results to display.

All results

Scenario Master Ticks PR Ticks Iterations Status
BaseButton 758 789 5000
Checkbox 1521 1489 5000
CheckboxBase 1220 1239 5000
CheckboxNext 1520 1517 5000
ChoiceGroup 4755 4743 5000
ComboBox 861 897 1000
CommandBar 7573 7568 1000
ContextualMenu 15209 14751 1000
DefaultButton 1012 1040 5000
DetailsRow 3332 3292 5000
DetailsRow (fast icons) 3275 3264 5000
DetailsRow without styles 3045 3081 5000
Dialog 1427 1404 1000
DocumentCardTitle with truncation 1627 1607 1000
Dropdown 2292 2263 5000
FocusZone 1536 1563 5000
IconButton 1584 1610 5000
Label 289 290 5000
Link 432 440 5000
MenuButton 1367 1340 5000
Nav 2991 3004 1000
Panel 1400 1342 1000
Persona 805 798 1000
Pivot 1260 1271 1000
PrimaryButton 1157 1150 5000
SearchBox 1197 1193 5000
Slider 1393 1453 5000
Spinner 377 370 5000
SplitButton 2858 2887 5000
Stack 431 451 5000
Stack with Intrinsic children 1080 1071 5000
Stack with Text children 3915 3876 5000
TagPicker 2539 2596 5000
Text 358 354 5000
TextField 1270 1298 5000
Toggle 835 834 5000
button 68 60 5000

Perf Analysis (Fluent)

Perf comparison
Status Scenario Fluent TPI Fabric TPI Ratio Iterations Ticks
🎯 Avatar.Fluent 0.45 0.46 0.98:1 2000 909
🦄 Button.Fluent 0.1 0.18 0.56:1 5000 489
🔧 Checkbox.Fluent 0.65 0.33 1.97:1 1000 645
🔧 Dialog.Fluent 0.34 0.2 1.7:1 5000 1685
🔧 Dropdown.Fluent 3.26 0.4 8.15:1 1000 3260
🔧 Icon.Fluent 0.13 0.05 2.6:1 5000 654
🎯 Image.Fluent 0.07 0.1 0.7:1 5000 345
🔧 Slider.Fluent 1.4 0.34 4.12:1 1000 1398
🔧 Text.Fluent 0.07 0.02 3.5:1 5000 330
🦄 Tooltip.Fluent 0.09 17.5 0.01:1 5000 448

🔧 Needs work     🎯 On target     🦄 Amazing

Perf tests with no regressions
Scenario Current PR Ticks Baseline Ticks Ratio
ChatWithPopoverPerf.default 600 550 1.09:1
ImageMinimalPerf.default 357 330 1.08:1
ItemLayoutMinimalPerf.default 1601 1501 1.07:1
ListMinimalPerf.default 459 430 1.07:1
FormMinimalPerf.default 738 697 1.06:1
IconMinimalPerf.default 650 616 1.06:1
TreeWith60ListItems.default 222 209 1.06:1
Image.Fluent 345 326 1.06:1
AlertMinimalPerf.default 299 285 1.05:1
ChatMinimalPerf.default 609 581 1.05:1
FlexMinimalPerf.default 286 272 1.05:1
TextMinimalPerf.default 318 302 1.05:1
ButtonSlotsPerf.default 605 581 1.04:1
InputMinimalPerf.default 967 933 1.04:1
RadioGroupMinimalPerf.default 556 537 1.04:1
CheckboxMinimalPerf.default 2933 2847 1.03:1
ProviderMergeThemesPerf.default 1699 1647 1.03:1
ReactionMinimalPerf.default 1854 1798 1.03:1
RefMinimalPerf.default 201 196 1.03:1
Tooltip.Fluent 448 433 1.03:1
DropdownManyItemsPerf.default 1323 1297 1.02:1
HeaderSlotsPerf.default 1436 1401 1.02:1
HierarchicalTreeMinimalPerf.default 952 936 1.02:1
ProviderMinimalPerf.default 664 649 1.02:1
SplitButtonMinimalPerf.default 3338 3268 1.02:1
ToolbarMinimalPerf.default 774 762 1.02:1
TooltipMinimalPerf.default 710 695 1.02:1
Checkbox.Fluent 645 634 1.02:1
Dialog.Fluent 1685 1659 1.02:1
AnimationMinimalPerf.default 611 607 1.01:1
CarouselMinimalPerf.default 452 449 1.01:1
DialogMinimalPerf.default 1689 1667 1.01:1
HeaderMinimalPerf.default 470 467 1.01:1
LoaderMinimalPerf.default 753 746 1.01:1
PopupMinimalPerf.default 249 246 1.01:1
PortalMinimalPerf.default 292 290 1.01:1
TreeMinimalPerf.default 1138 1122 1.01:1
Slider.Fluent 1398 1386 1.01:1
BoxMinimalPerf.default 313 312 1:1
ButtonMinimalPerf.default 164 164 1:1
EmbedMinimalPerf.default 2014 2011 1:1
ListWith60ListItems.default 1132 1135 1:1
MenuMinimalPerf.default 1801 1794 1:1
StatusMinimalPerf.default 624 624 1:1
CustomToolbarPrototype.default 3612 3601 1:1
Dropdown.Fluent 3260 3271 1:1
AttachmentMinimalPerf.default 135 137 0.99:1
AttachmentSlotsPerf.default 1095 1103 0.99:1
DividerMinimalPerf.default 321 323 0.99:1
MenuButtonMinimalPerf.default 1494 1507 0.99:1
SliderMinimalPerf.default 1385 1392 0.99:1
TextAreaMinimalPerf.default 432 437 0.99:1
VideoMinimalPerf.default 586 591 0.99:1
Avatar.Fluent 909 915 0.99:1
Text.Fluent 330 334 0.99:1
ChatDuplicateMessagesPerf.default 404 412 0.98:1
DropdownMinimalPerf.default 3200 3254 0.98:1
GridMinimalPerf.default 626 641 0.98:1
LabelMinimalPerf.default 372 379 0.98:1
LayoutMinimalPerf.default 523 533 0.98:1
ListCommonPerf.default 948 967 0.98:1
ListNestedPerf.default 852 871 0.98:1
SegmentMinimalPerf.default 871 886 0.98:1
Button.Fluent 489 498 0.98:1
TableMinimalPerf.default 364 374 0.97:1
Icon.Fluent 654 671 0.97:1
AvatarMinimalPerf.default 489 512 0.96:1
AccordionMinimalPerf.default 130 138 0.94:1
CardMinimalPerf.default 503 542 0.93:1

@size-auditor
Copy link

size-auditor bot commented May 11, 2020

Asset size changes

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

Baseline commit: 88f4e59ffac3a6b070a1ed34ef2f26509e688f22 (build)

@kolaps33 kolaps33 merged commit 3cc0967 into microsoft:master May 11, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Fluent UI react-northstar (v0) Work related to Fluent UI V0
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

6 participants