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

fix(react-examples): Add focus to DatePicker examples when clicking the Clear button #16430

Merged
merged 1 commit into from
Jan 22, 2021
Merged

fix(react-examples): Add focus to DatePicker examples when clicking the Clear button #16430

merged 1 commit into from
Jan 22, 2021

Conversation

andrefcdias
Copy link
Contributor

@andrefcdias andrefcdias commented Jan 11, 2021 •
edited by ecraig12345
Loading

Pull request checklist

Description of changes

Pressing the Clear button will now also focus the DatePicker input, so that user can know that the date has been cleared, when navigating with the Narrator.
Applied this to both DatePicker allows input date string and DatePicker allows dates to be formatted examples, as they both contain the Clear button

@andrefcdias
fix(react-examples): Add focus to DatePicker examples when clicking t…
468ab73 
…he Clear button

(microsoftdesign/fluentui#10249)
@andrefcdias
Copy link
Contributor Author

Couldn't find any unit tests for this, let me know if I missed something.

@fabricteam
Copy link
Collaborator

Perf Analysis

No significant results to display.

All results

Scenario Render type Master Ticks PR Ticks Iterations Status
Avatar mount 821 826 5000
BaseButtonCompat mount 948 957 5000
Breadcrumb mount 43208 43471 5000
Checkbox mount 1487 1520 5000
CheckboxBase mount 1301 1296 5000
ChoiceGroup mount 4649 4675 5000
ComboBox mount 995 991 1000
CommandBar mount 10355 10347 1000
ContextualMenu mount 6144 6212 1000
DefaultButtonCompat mount 1105 1170 5000
DetailsRow mount 3676 3762 5000
DetailsRowFast mount 3710 3707 5000
DetailsRowNoStyles mount 3589 3620 5000
Dialog mount 1525 1545 1000
DocumentCardTitle mount 1819 1855 1000
Dropdown mount 3423 3412 5000
FocusTrapZone mount 1880 1880 5000
FocusZone mount 1807 1859 5000
IconButtonCompat mount 1735 1773 5000
Label mount 343 334 5000
Layer mount 1785 1807 5000
Link mount 461 448 5000
MakeStyles mount 1967 1957 50000
MenuButtonCompat mount 1482 1445 5000
MessageBar mount 2048 2124 5000
Nav mount 3295 3320 1000
OverflowSet mount 1037 1021 5000
Panel mount 1442 1412 1000
Persona mount 863 886 1000
Pivot mount 1373 1413 1000
PrimaryButtonCompat mount 1304 1268 5000
Rating mount 7648 7523 5000
SearchBox mount 1307 1361 5000
Shimmer mount 2495 2508 5000
Slider mount 1951 1887 5000
SpinButton mount 4989 5293 5000
Spinner mount 437 440 5000
SplitButtonCompat mount 3156 3175 5000
Stack mount 497 485 5000
StackWithIntrinsicChildren mount 1530 1521 5000
StackWithTextChildren mount 4518 4551 5000
SwatchColorPicker mount 10245 10211 5000
Tabs mount 1416 1398 1000
TagPicker mount 2864 2887 5000
TeachingBubble mount 11700 11799 5000
Text mount 411 404 5000
TextField mount 1367 1364 5000
ThemeProvider mount 2206 2169 5000
ThemeProvider virtual-rerender 639 635 5000
Toggle mount 791 796 5000
button mount 647 673 5000
buttonNative mount 114 118 5000

Perf Analysis (Fluent)

Perf comparison
Status Scenario Fluent TPI Fabric TPI Ratio Iterations Ticks
🦄 Avatar.Fluent 0.17 0.51 0.33:1 2000 348
🦄 Button.Fluent 0.12 0.2 0.6:1 5000 582
🔧 Checkbox.Fluent 0.65 0.34 1.91:1 1000 650
🎯 Dialog.Fluent 0.16 0.22 0.73:1 5000 811
🔧 Dropdown.Fluent 2.99 0.42 7.12:1 1000 2988
🔧 Icon.Fluent 0.14 0.06 2.33:1 5000 709
🦄 Image.Fluent 0.08 0.13 0.62:1 5000 391
🔧 Slider.Fluent 1.6 0.47 3.4:1 1000 1603
🔧 Text.Fluent 0.07 0.03 2.33:1 5000 373
🦄 Tooltip.Fluent 0.12 0.9 0.13:1 5000 588

🔧 Needs work     🎯 On target     🦄 Amazing

Perf tests with no regressions
Scenario Current PR Ticks Baseline Ticks Ratio
FlexMinimalPerf.default 341 307 1.11:1
BoxMinimalPerf.default 408 371 1.1:1
SliderMinimalPerf.default 1672 1569 1.07:1
AlertMinimalPerf.default 310 293 1.06:1
AvatarMinimalPerf.default 215 203 1.06:1
DropdownManyItemsPerf.default 758 715 1.06:1
LayoutMinimalPerf.default 440 415 1.06:1
ToolbarMinimalPerf.default 996 942 1.06:1
AttachmentMinimalPerf.default 176 167 1.05:1
ButtonSlotsPerf.default 621 592 1.05:1
CarouselMinimalPerf.default 464 443 1.05:1
ChatWithPopoverPerf.default 479 456 1.05:1
FormMinimalPerf.default 443 423 1.05:1
LabelMinimalPerf.default 446 423 1.05:1
VideoMinimalPerf.default 668 639 1.05:1
ChatMinimalPerf.default 653 627 1.04:1
ListMinimalPerf.default 522 502 1.04:1
SkeletonMinimalPerf.default 399 383 1.04:1
Icon.Fluent 709 680 1.04:1
LoaderMinimalPerf.default 727 708 1.03:1
PortalMinimalPerf.default 183 178 1.03:1
IconMinimalPerf.default 680 663 1.03:1
AnimationMinimalPerf.default 433 423 1.02:1
ButtonMinimalPerf.default 187 183 1.02:1
ButtonOverridesMissPerf.default 1749 1709 1.02:1
ButtonUseCssPerf.default 836 820 1.02:1
CardMinimalPerf.default 569 556 1.02:1
DialogMinimalPerf.default 815 799 1.02:1
PopupMinimalPerf.default 754 740 1.02:1
ProviderMinimalPerf.default 979 963 1.02:1
TableManyItemsPerf.default 2060 2018 1.02:1
TextMinimalPerf.default 376 367 1.02:1
Button.Fluent 582 568 1.02:1
Tooltip.Fluent 588 574 1.02:1
DatepickerMinimalPerf.default 47487 47188 1.01:1
DropdownMinimalPerf.default 3076 3060 1.01:1
EmbedMinimalPerf.default 4249 4223 1.01:1
GridMinimalPerf.default 359 355 1.01:1
HeaderMinimalPerf.default 382 380 1.01:1
MenuButtonMinimalPerf.default 1616 1602 1.01:1
SplitButtonMinimalPerf.default 3831 3805 1.01:1
StatusMinimalPerf.default 757 753 1.01:1
TextAreaMinimalPerf.default 499 494 1.01:1
CustomToolbarPrototype.default 3819 3771 1.01:1
TooltipMinimalPerf.default 857 849 1.01:1
Dialog.Fluent 811 801 1.01:1
Slider.Fluent 1603 1591 1.01:1
CheckboxMinimalPerf.default 2873 2869 1:1
DividerMinimalPerf.default 382 381 1:1
ItemLayoutMinimalPerf.default 1259 1263 1:1
ProviderMergeThemesPerf.default 1660 1652 1:1
Avatar.Fluent 348 349 1:1
Dropdown.Fluent 2988 2998 1:1
Text.Fluent 373 374 1:1
AccordionMinimalPerf.default 161 163 0.99:1
AttachmentSlotsPerf.default 1226 1238 0.99:1
ChatDuplicateMessagesPerf.default 367 369 0.99:1
ImageMinimalPerf.default 401 404 0.99:1
ListNestedPerf.default 585 593 0.99:1
TableMinimalPerf.default 424 428 0.99:1
TreeWith60ListItems.default 188 190 0.99:1
ButtonUseCssNestingPerf.default 1121 1143 0.98:1
InputMinimalPerf.default 1357 1378 0.98:1
RadioGroupMinimalPerf.default 460 469 0.98:1
SegmentMinimalPerf.default 370 376 0.98:1
HeaderSlotsPerf.default 785 807 0.97:1
ListWith60ListItems.default 657 678 0.97:1
MenuMinimalPerf.default 887 914 0.97:1
RefMinimalPerf.default 258 265 0.97:1
Image.Fluent 391 403 0.97:1
ListCommonPerf.default 651 678 0.96:1
TreeMinimalPerf.default 793 822 0.96:1
Checkbox.Fluent 650 674 0.96:1
ReactionMinimalPerf.default 417 439 0.95:1

@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 468ab73:

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

@size-auditor
Copy link

size-auditor bot commented Jan 11, 2021

Asset size changes

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

Baseline commit: 77c4f820c52723e8a8b5d179e1d39871b03dba44 (build)

@andrefcdias andrefcdias merged commit cef2cd0 into microsoft:master Jan 22, 2021
@andrefcdias andrefcdias mentioned this pull request Jan 27, 2021
Merged
10 tasks
msft-fluent-ui-bot pushed a commit that referenced this pull request Feb 2, 2021
@andrefcdias
Batch cherry-pick of react-example fixes (#16677)
e404ed7 
#### Pull request checklist

- [x] Include a change request file using `$ yarn change`

#### Description of changes

Aggregate cherry-picking for all my contributions for the `react-examples` package

#### Focus areas to test

- [x] #16497
- [x] #16496
- [x] #16494
- [x] #16479
- [x] #16430
- [x] #16475
- [x] #16463
- [x] #16495
- [x] #16481
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@ecraig12345 ecraig12345 ecraig12345 approved these changes

Assignees

@layershifter layershifter

Labels
Area: Website
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
5 participants
@andrefcdias @fabricteam @ecraig12345 @layershifter @msft-fluent-ui-bot