Feature/DetailsList scrollbars only appear onHover #1023
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
acchiang
requested review from
adhiambovivian,
ddyett,
ElinorW,
millicentachieng and
thewahome
as code owners
|
I also found a custom useHover hook I could build instead of using useState in multiple places, let me know if I should update with this custom hook instead: https://usehooks.com/useHover/ |
thewahome
approved these changes
Jul 23, 2021
acchiang
deleted the
interns/acchiang/38891-detailslist-scrollbars-appear-onhover
branch
thewahome
added a commit
that referenced
this pull request
Aug 3, 2021
* Task: Add chat-id & membership-id (#1024) * Fix: query link parsing with trailing '.' (#1033) * Feature: DetailsList scrollbars only appear onHover (#1023) * Feature: automatic dark light mode (#1019) * Task: add translated aria labels (#1040) * Task: remove sandbox api test (#1042) * Fix: change hover scroll behaviour (#1043) * Fix: Accessibility bugs - Aug (#1041) * Feature: Add Expanding Query Input Field (#1020)
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Overview
The existing DetailsList scrollbars are the default Edge light mode scrollbars that appear when there is overflow (see right of screenshot below), and they are jarring to the user especially if they are on dark mode.
https://dev.azure.com/microsoftgarage/Intern%20GitHub/_sprints/taskboard/GI21%20-%20Graph%20Explorer/Intern%20GitHub/Y21-S/06?workitem=38891
Demo
The changes in this PR will hide the scrollbars until the user hovers over a DetailsList with overflow, then the scrollbars will appear.
https://gyazo.com/ceaaa8648891cd6e7b672bac68b775d8
Notes
Four scrollbars have been changed:
History list, Sample Queries list, Permissions (panel tab) list, and Request Headers (panel tab) list.
Testing Instructions