Skip to content

Dropdown item: fix for checkable indicator when using keyboard navigation - #20629

Merged
Oleksandr Fediashov (layershifter) merged 13 commits into
microsoft:masterfrom
annabratseiko:an/hc_dropdown_check_indicator
Nov 23, 2021
Merged

Oleksandr Fediashov (layershifter) merged 13 commits into
microsoft:masterfrom
annabratseiko:an/hc_dropdown_check_indicator

Conversation

@annabratseiko

Copy link
Copy Markdown
Contributor

Pull request checklist

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

Description of changes

Before:
image

After:
image

Focus areas to test

(optional)

@codesandbox-ci

codesandbox-ci Bot commented Nov 16, 2021 •

Copy link
Copy Markdown

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 1993b0e:

Sandbox Source
@fluentui/react 8 starter Configuration
@fluentui/react-components 9 starter Configuration

@size-auditor

size-auditor Bot commented Nov 16, 2021 •

Copy link
Copy Markdown

Asset size changes

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

Baseline commit: 6140f2fbb98ba56a330339324b5f144c99797d7a (build)

@fabricteam

Fluent UI Team (fabricteam) commented Nov 16, 2021 •

Copy link
Copy Markdown

📊 Bundle size report

🤖 This report was generated against 6140f2fbb98ba56a330339324b5f144c99797d7a

@fabricteam

Fluent UI Team (fabricteam) commented Nov 16, 2021 •

Copy link
Copy Markdown

Perf Analysis (@fluentui/react)

No significant results to display.

All results

Scenario Render type Master Ticks PR Ticks Iterations Status
Avatar mount 981 960 5000
BaseButton mount 986 910 5000
Breadcrumb mount 2680 2709 1000
ButtonNext mount 538 534 5000
Checkbox mount 1558 1558 5000
CheckboxBase mount 1377 1350 5000
ChoiceGroup mount 4869 4898 5000
ComboBox mount 998 982 1000
CommandBar mount 10510 10544 1000
ContextualMenu mount 8662 8735 1000
DefaultButton mount 1148 1176 5000
DetailsRow mount 3951 3906 5000
DetailsRowFast mount 3948 3911 5000
DetailsRowNoStyles mount 3696 3726 5000
Dialog mount 2704 2659 1000
DocumentCardTitle mount 181 173 1000
Dropdown mount 3332 3292 5000
FluentProviderNext mount 4241 4197 5000
FluentProviderWithTheme mount 245 248 10
FluentProviderWithTheme virtual-rerender 103 110 10
FluentProviderWithTheme virtual-rerender-with-unmount 292 281 10
FocusTrapZone mount 1893 1799 5000
FocusZone mount 1852 1895 5000
IconButton mount 1824 1805 5000
Label mount 383 361 5000
Layer mount 3053 3171 5000
Link mount 501 482 5000
MakeStyles mount 1916 1910 50000
MenuButton mount 1493 1515 5000
MessageBar mount 2050 2081 5000
Nav mount 3462 3393 1000
OverflowSet mount 1197 1159 5000
Panel mount 2587 2579 1000
Persona mount 880 879 1000
Pivot mount 1545 1523 1000
PrimaryButton mount 1393 1342 5000
Rating mount 7819 7804 5000
SearchBox mount 1408 1395 5000
Shimmer mount 2607 2615 5000
Slider mount 2044 2001 5000
SpinButton mount 5199 5138 5000
Spinner mount 450 457 5000
SplitButton mount 3336 3353 5000
Stack mount 520 542 5000
StackWithIntrinsicChildren mount 1749 1773 5000
StackWithTextChildren mount 4790 4801 5000
SwatchColorPicker mount 10671 10476 5000
TagPicker mount 2727 2681 5000
TeachingBubble mount 13634 13507 5000
Text mount 440 464 5000
TextField mount 1376 1431 5000
ThemeProvider mount 1245 1253 5000
ThemeProvider virtual-rerender 646 639 5000
ThemeProvider virtual-rerender-with-unmount 1936 1925 5000
Toggle mount 857 830 5000
buttonNative mount 134 139 5000

Perf Analysis (@fluentui/react-northstar)

Perf tests with no regressions
Scenario Current PR Ticks Baseline Ticks Ratio
AttachmentMinimalPerf.default 175 156 1.12:1
AvatarMinimalPerf.default 220 198 1.11:1
RefMinimalPerf.default 272 244 1.11:1
BoxMinimalPerf.default 380 352 1.08:1
TableMinimalPerf.default 422 393 1.07:1
CarouselMinimalPerf.default 495 467 1.06:1
HeaderSlotsPerf.default 789 743 1.06:1
ListWith60ListItems.default 720 682 1.06:1
SkeletonMinimalPerf.default 367 346 1.06:1
TextAreaMinimalPerf.default 528 497 1.06:1
LayoutMinimalPerf.default 370 354 1.05:1
ListCommonPerf.default 660 626 1.05:1
PortalMinimalPerf.default 195 186 1.05:1
IconMinimalPerf.default 619 591 1.05:1
AnimationMinimalPerf.default 425 410 1.04:1
TableManyItemsPerf.default 1985 1909 1.04:1
DropdownManyItemsPerf.default 715 694 1.03:1
DropdownMinimalPerf.default 3123 3044 1.03:1
ItemLayoutMinimalPerf.default 1254 1218 1.03:1
SliderMinimalPerf.default 1721 1665 1.03:1
CardMinimalPerf.default 565 556 1.02:1
ChatWithPopoverPerf.default 395 387 1.02:1
DialogMinimalPerf.default 765 752 1.02:1
HeaderMinimalPerf.default 366 360 1.02:1
ProviderMergeThemesPerf.default 1791 1760 1.02:1
RadioGroupMinimalPerf.default 477 468 1.02:1
TextMinimalPerf.default 362 356 1.02:1
TreeWith60ListItems.default 185 182 1.02:1
ButtonMinimalPerf.default 176 174 1.01:1
ButtonOverridesMissPerf.default 1726 1701 1.01:1
FlexMinimalPerf.default 294 290 1.01:1
GridMinimalPerf.default 345 341 1.01:1
ImageMinimalPerf.default 361 358 1.01:1
ListNestedPerf.default 562 559 1.01:1
PopupMinimalPerf.default 633 627 1.01:1
ProviderMinimalPerf.default 1169 1152 1.01:1
StatusMinimalPerf.default 678 673 1.01:1
TooltipMinimalPerf.default 1067 1058 1.01:1
AttachmentSlotsPerf.default 1108 1110 1:1
ChatDuplicateMessagesPerf.default 316 316 1:1
ChatMinimalPerf.default 665 663 1:1
InputMinimalPerf.default 1323 1320 1:1
ReactionMinimalPerf.default 391 391 1:1
CheckboxMinimalPerf.default 2748 2772 0.99:1
DatepickerMinimalPerf.default 5600 5685 0.99:1
EmbedMinimalPerf.default 4210 4237 0.99:1
LabelMinimalPerf.default 390 392 0.99:1
ListMinimalPerf.default 528 532 0.99:1
MenuMinimalPerf.default 859 866 0.99:1
MenuButtonMinimalPerf.default 1740 1765 0.99:1
SegmentMinimalPerf.default 359 364 0.99:1
SplitButtonMinimalPerf.default 4286 4349 0.99:1
CustomToolbarPrototype.default 4112 4162 0.99:1
ButtonSlotsPerf.default 546 558 0.98:1
LoaderMinimalPerf.default 699 716 0.98:1
TreeMinimalPerf.default 824 840 0.98:1
DividerMinimalPerf.default 354 368 0.96:1
FormMinimalPerf.default 399 419 0.95:1
RosterPerf.default 1173 1240 0.95:1
ToolbarMinimalPerf.default 940 987 0.95:1
VideoMinimalPerf.default 624 659 0.95:1
AlertMinimalPerf.default 265 296 0.9:1
AccordionMinimalPerf.default 151 177 0.85:1

@annabratseiko Anna Kellerstein (annabratseiko) changed the title Dropdown item: fix for checkable indicator when using keyboard navigation [DO NOT MERGE] Dropdown item: fix for checkable indicator when using keyboard navigation Nov 16, 2021
@annabratseiko Anna Kellerstein (annabratseiko) changed the title [DO NOT MERGE] Dropdown item: fix for checkable indicator when using keyboard navigation Dropdown item: fix for checkable indicator when using keyboard navigation Nov 18, 2021
@annabratseiko Anna Kellerstein (annabratseiko) changed the title Dropdown item: fix for checkable indicator when using keyboard navigation [DO NOT MERGE] Dropdown item: fix for checkable indicator when using keyboard navigation Nov 18, 2021
@annabratseiko Anna Kellerstein (annabratseiko) changed the title [DO NOT MERGE] Dropdown item: fix for checkable indicator when using keyboard navigation Dropdown item: fix for checkable indicator when using keyboard navigation Nov 18, 2021
@DustyTheBot

DustyTheBot commented Nov 18, 2021 •

Copy link
Copy Markdown
Warnings
⚠️ There are no updates provided to CHANGELOG. Ensure there are no publicly visible changes introduced by this PR.

Generated by 🚫 dangerJS against 1993b0e

Comment thread packages/fluentui/CHANGELOG.md Outdated
- Fix `Avatar` Components to properly pass ref to root slots @chpalac ([#20588](https://github.com/microsoft/fluentui/pull/20588))
- Fix `ButtonGroup` comoponent to properly pass ref to root slots @chpalac ([#20595](https://github.com/microsoft/fluentui/pull/20595))
- Fix color of `Dropdown` checkable indicator on hover in high contrast theme @annabratseiko ([#20621](https://github.com/microsoft/fluentui/pull/20621))
- Fix color of `Dropdown` checkable indicator on hover in high contrast theme @annabratseiko ([#20621](https://github.com/microsoft/fluentui/pull/20621), [#20629](https://github.com/microsoft/fluentui/pull/20629))

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Suggested change
- Fix color of `Dropdown` checkable indicator on hover in high contrast theme @annabratseiko ([#20621](https://github.com/microsoft/fluentui/pull/20621), [#20629](https://github.com/microsoft/fluentui/pull/20629))
- Fix color of `Dropdown` checkable indicator on hover in high contrast theme @annabratseiko ([#20621](https://github.com/microsoft/fluentui/pull/20621)

Such entries are not handled, please add a second one or simply remove second link

@layershifter
Oleksandr Fediashov (layershifter) merged commit 225eb40 into microsoft:master Nov 23, 2021
@annabratseiko
Anna Kellerstein (annabratseiko) deleted the an/hc_dropdown_check_indicator branch November 23, 2021 12:00
Marion Hauff (mlp73) pushed a commit to mlp73/fluentui that referenced this pull request Jan 17, 2022
…tion (microsoft#20629)

* fix color for dropdown checkable indicator for hc theme

* update changelog

* update changelog

* update dropdown styles

* fix color of checkable indicator for key navigation

* change color only on hover

* uodate changelog

* remove unused param

* return to prev state

* fix changelog

Co-authored-by: Anna Kellerstein <annkelle@microsoft.com>
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.

7 participants