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

DetailsList: selected row border now clearly visible when focused in High Contrast Mode #17504

Merged
merged 2 commits into from
Mar 29, 2021
Merged

DetailsList: selected row border now clearly visible when focused in High Contrast Mode #17504

merged 2 commits into from
Mar 29, 2021

Conversation

TristanWatanabe
Copy link
Member

Pull request checklist

  • Addresses an existing issue: Fixes bug 10795
  • Include a change request file using $ yarn change

Description of changes

  • Offsetted white border of selected row when focused in High Contrast Mode in order to improve visibility and ensure users are aware of which row is in focus.

Issue:
issue
Fix:
fix

@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 9cd19c1:

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

@size-auditor
Copy link

size-auditor bot commented Mar 19, 2021

Asset size changes

Project Bundle Baseline Size New Size Difference
office-ui-fabric-react fluentui-react-DetailsList 206.334 kB 206.384 kB ExceedsBaseline     50 bytes
office-ui-fabric-react fluentui-react-ShimmeredDetailsList 217.298 kB 217.348 kB ExceedsBaseline     50 bytes

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

Baseline commit: a1783edc2e8bbc515ad332327f4cb4440b31eea6 (build)

@fabricteam
Copy link
Collaborator

Perf Analysis

No significant results to display.

All results

Scenario Render type Master Ticks PR Ticks Iterations Status
Avatar mount 1224 1219 5000
BaseButton mount 1002 1000 5000
Breadcrumb mount 45434 45635 5000
ButtonNext mount 1303 1319 5000
Checkbox mount 1659 1683 5000
CheckboxBase mount 1439 1416 5000
ChoiceGroup mount 5182 5235 5000
ComboBox mount 1056 1076 1000
CommandBar mount 10700 10442 1000
ContextualMenu mount 6784 6565 1000
DefaultButton mount 1200 1235 5000
DetailsRow mount 3866 3903 5000
DetailsRowFast mount 3789 3860 5000
DetailsRowNoStyles mount 3643 3586 5000
Dialog mount 1566 1579 1000
DocumentCardTitle mount 1881 1897 1000
Dropdown mount 3544 3544 5000
FocusTrapZone mount 1952 1923 5000
FocusZone mount 1856 1856 5000
IconButton mount 1914 1895 5000
Label mount 341 367 5000
Layer mount 1916 1922 5000
Link mount 528 506 5000
MakeStyles mount 2094 2010 50000
MenuButton mount 1594 1554 5000
MessageBar mount 2081 2084 5000
Nav mount 3518 3517 1000
OverflowSet mount 1079 1108 5000
Panel mount 1477 1485 1000
Persona mount 889 856 1000
Pivot mount 1472 1474 1000
PrimaryButton mount 1353 1357 5000
Rating mount 8340 8334 5000
SearchBox mount 1454 1404 5000
Shimmer mount 2744 2701 5000
Slider mount 2092 2110 5000
SpinButton mount 5283 5306 5000
Spinner mount 442 434 5000
SplitButton mount 3351 3384 5000
Stack mount 540 555 5000
StackWithIntrinsicChildren mount 1641 1630 5000
StackWithTextChildren mount 4988 4965 5000
SwatchColorPicker mount 10809 10679 5000
Tabs mount 1476 1456 1000
TagPicker mount 2980 2994 5000
TeachingBubble mount 11997 12033 5000
Text mount 465 454 5000
TextField mount 1498 1487 5000
ThemeProvider mount 1223 1241 5000
ThemeProvider virtual-rerender 618 606 5000
ThemeProviderNext mount 15721 15699 5000
Toggle mount 844 868 5000
buttonNative mount 114 112 5000

Perf Analysis (Fluent)

Perf comparison
Status Scenario Fluent TPI Fabric TPI Ratio Iterations Ticks
🦄 Avatar.Fluent 0.2 0.53 0.38:1 2000 393
🦄 Button.Fluent 0.13 0.22 0.59:1 5000 666
🔧 Checkbox.Fluent 0.7 0.4 1.75:1 1000 696
🎯 Dialog.Fluent 0.18 0.23 0.78:1 5000 891
🔧 Dropdown.Fluent 3.27 0.46 7.11:1 1000 3273
🔧 Icon.Fluent 0.16 0.07 2.29:1 5000 785
🦄 Image.Fluent 0.09 0.14 0.64:1 5000 474
🔧 Slider.Fluent 1.64 0.47 3.49:1 1000 1637
🔧 Text.Fluent 0.08 0.04 2:1 5000 418
🦄 Tooltip.Fluent 0.16 0.95 0.17:1 5000 785

🔧 Needs work     🎯 On target     🦄 Amazing

Perf tests with no regressions
Scenario Current PR Ticks Baseline Ticks Ratio
TreeWith60ListItems.default 232 203 1.14:1
AccordionMinimalPerf.default 195 175 1.11:1
PortalMinimalPerf.default 186 171 1.09:1
BoxMinimalPerf.default 464 432 1.07:1
AttachmentMinimalPerf.default 201 190 1.06:1
GridMinimalPerf.default 420 397 1.06:1
FlexMinimalPerf.default 363 346 1.05:1
ImageMinimalPerf.default 487 464 1.05:1
MenuMinimalPerf.default 1044 992 1.05:1
Image.Fluent 474 451 1.05:1
AvatarMinimalPerf.default 235 227 1.04:1
ButtonSlotsPerf.default 675 646 1.04:1
ChatWithPopoverPerf.default 435 418 1.04:1
DividerMinimalPerf.default 453 436 1.04:1
RadioGroupMinimalPerf.default 538 515 1.04:1
SliderMinimalPerf.default 1680 1622 1.04:1
Text.Fluent 418 403 1.04:1
ButtonMinimalPerf.default 221 215 1.03:1
CarouselMinimalPerf.default 555 540 1.03:1
ChatDuplicateMessagesPerf.default 325 317 1.03:1
DatepickerMinimalPerf.default 50162 48655 1.03:1
DialogMinimalPerf.default 885 859 1.03:1
ListMinimalPerf.default 593 576 1.03:1
ListNestedPerf.default 675 656 1.03:1
RefMinimalPerf.default 254 247 1.03:1
SegmentMinimalPerf.default 439 427 1.03:1
IconMinimalPerf.default 784 759 1.03:1
TableMinimalPerf.default 493 479 1.03:1
TextAreaMinimalPerf.default 599 584 1.03:1
Icon.Fluent 785 760 1.03:1
AttachmentSlotsPerf.default 1332 1306 1.02:1
InputMinimalPerf.default 1396 1372 1.02:1
LabelMinimalPerf.default 492 481 1.02:1
LoaderMinimalPerf.default 797 784 1.02:1
MenuButtonMinimalPerf.default 1761 1733 1.02:1
RosterPerf.default 1336 1311 1.02:1
PopupMinimalPerf.default 775 759 1.02:1
ProviderMinimalPerf.default 1001 979 1.02:1
TableManyItemsPerf.default 2424 2373 1.02:1
ButtonUseCssNestingPerf.default 1186 1175 1.01:1
CardMinimalPerf.default 668 663 1.01:1
ChatMinimalPerf.default 716 706 1.01:1
DropdownManyItemsPerf.default 823 814 1.01:1
EmbedMinimalPerf.default 4674 4626 1.01:1
HeaderSlotsPerf.default 937 930 1.01:1
StatusMinimalPerf.default 857 850 1.01:1
TooltipMinimalPerf.default 1042 1032 1.01:1
Avatar.Fluent 393 391 1.01:1
Checkbox.Fluent 696 687 1.01:1
AlertMinimalPerf.default 355 354 1:1
CheckboxMinimalPerf.default 3098 3113 1:1
DropdownMinimalPerf.default 3351 3361 1:1
LayoutMinimalPerf.default 480 478 1:1
ListCommonPerf.default 755 754 1:1
SplitButtonMinimalPerf.default 4097 4117 1:1
CustomToolbarPrototype.default 3946 3964 1:1
Dialog.Fluent 891 888 1:1
AnimationMinimalPerf.default 457 460 0.99:1
ButtonOverridesMissPerf.default 1845 1855 0.99:1
ButtonUseCssPerf.default 905 910 0.99:1
ItemLayoutMinimalPerf.default 1380 1400 0.99:1
ListWith60ListItems.default 692 702 0.99:1
ReactionMinimalPerf.default 470 475 0.99:1
SkeletonMinimalPerf.default 425 428 0.99:1
ToolbarMinimalPerf.default 1103 1117 0.99:1
Dropdown.Fluent 3273 3310 0.99:1
Tooltip.Fluent 785 793 0.99:1
ProviderMergeThemesPerf.default 1597 1631 0.98:1
TextMinimalPerf.default 429 436 0.98:1
TreeMinimalPerf.default 900 921 0.98:1
Button.Fluent 666 682 0.98:1
VideoMinimalPerf.default 729 748 0.97:1
Slider.Fluent 1637 1679 0.97:1
FormMinimalPerf.default 486 507 0.96:1
HeaderMinimalPerf.default 442 462 0.96:1

@TristanWatanabe TristanWatanabe merged commit 7d25180 into microsoft:master Mar 29, 2021
@TristanWatanabe TristanWatanabe deleted the bug-10795 branch March 29, 2021 22:17
@msft-fluent-ui-bot
Copy link
Collaborator

🎉@fluentui/react@v8.7.0 has been released which incorporates this pull request.:tada:

Handy links:

@TristanWatanabe TristanWatanabe mentioned this pull request Mar 30, 2021
Merged
2 tasks
miroslavstastny pushed a commit to miroslavstastny/fluentui that referenced this pull request May 5, 2021
@TristanWatanabe @miroslavstastny
DetailsList: selected row border now clearly visible when focused in …
cd0c5c0 
…High Contrast Mode (microsoft#17504)

* added high contrast focus styling to detailsrow

* Change files
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@smhigley smhigley smhigley approved these changes

@ThomasMichon ThomasMichon ThomasMichon approved these changes

Assignees

@khmakoto khmakoto

Labels
Component: DetailsList
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

None yet
6 participants
@TristanWatanabe @fabricteam @msft-fluent-ui-bot @smhigley @ThomasMichon @khmakoto