[COMPASS-5597] Remove or improve global scrollbar styling in Compass Created: 16/Mar/22  Updated: 15/Dec/22  Resolved: 07/Dec/22

Status: Closed
Project: Compass
Component/s: Tech debt, UI / UX
Affects Version/s: None
Fix Version/s: 1.35.0

Type: Task Priority: Major - P3
Reporter: Rhys Howell Assignee: Rhys Howell
Resolution: Done Votes: 0
Labels: milestone-3
Remaining Estimate: Not Specified
Time Spent: Not Specified
Original Estimate: Not Specified

Attachments: PNG File Screenshot 2022-08-17 at 15.09.57.png    
Issue Links:
Duplicate
is duplicated by COMPASS-5660 Compass collections scrollbar invisib... Closed
Epic Link: COMPASS-5388
Story Points: 5
Documentation Changes: Not Needed
Sprint: Iteration Lobster, Iteration Manatee, Iteration Narwhal, Iteration Porpoise, Iteration Quahog

 Description   

Global scrollbar styles are here: https://github.com/mongodb-js/compass/blob/main/packages/compass-home/src/index.less#L71
We should remove them as they can negatively impact a number of scrolling views in Compass, especially dark theme. If there are places where we want this previous scrollbar styling behavior we should target them specifically (probably sync with claudia.deangelis here if there are any places we don't want the default web scrollbar styles).

Once we've removed those we can look into the places in Compass where we're setting the scrollbar explicitly as it may be places where we were adjusting as a result of those global styles.
https://github.com/mongodb-js/compass/blob/main/packages/compass-shell/src/components/compass-shell/compass-shell.jsx#L26 is an example of this

Somethings to consider:

  • Should the scrollbar always be shown or only on content hover (see vscode as an example of this behavior).
  • Should we keep the border radius of the scrollbar
  • How does the scrollbar look on different color backgrounds


 Comments   
Comment by Githook User [ 15/Dec/22 ]

Author:

{'name': 'Rhys', 'email': 'Anemy@users.noreply.github.com', 'username': 'Anemy'}

Message: feat(compass): update scrollbar styles COMPASS-5597 (#3851)
Branch: 1.35-releases
https://github.com/mongodb-js/compass/commit/bb23d76b0f7a6ea686f4b402f3a0bd0079d1960e

Comment by Githook User [ 12/Dec/22 ]

Author:

{'name': 'Rhys', 'email': 'Anemy@users.noreply.github.com', 'username': 'Anemy'}

Message: feat(compass): update scrollbar styles COMPASS-5597 (#3851)
Branch: aggregations-stage-components
https://github.com/mongodb-js/compass/commit/bb23d76b0f7a6ea686f4b402f3a0bd0079d1960e

Comment by Githook User [ 08/Dec/22 ]

Author:

{'name': 'Rhys', 'email': 'Anemy@users.noreply.github.com', 'username': 'Anemy'}

Message: feat(compass): update scrollbar styles COMPASS-5597 (#3851)
Branch: counts
https://github.com/mongodb-js/compass/commit/bb23d76b0f7a6ea686f4b402f3a0bd0079d1960e

Comment by Githook User [ 07/Dec/22 ]

Author:

{'name': 'Rhys', 'email': 'Anemy@users.noreply.github.com', 'username': 'Anemy'}

Message: feat(compass): update scrollbar styles COMPASS-5597 (#3851)
Branch: main
https://github.com/mongodb-js/compass/commit/bb23d76b0f7a6ea686f4b402f3a0bd0079d1960e

Comment by Githook User [ 07/Dec/22 ]

Author:

{'name': 'Rhys', 'email': 'Anemy@users.noreply.github.com', 'username': 'Anemy'}

Message: Merge branch 'main' into COMPASS-5597-scrollbars
Branch: COMPASS-5597-scrollbars
https://github.com/mongodb-js/compass/commit/92027076d33a5a80572328526c75d2dc66bc80e6

Comment by Githook User [ 06/Dec/22 ]

Author:

{'name': 'Rhys', 'email': 'Anemy@users.noreply.github.com', 'username': 'Anemy'}

Message: Merge branch 'main' into COMPASS-5597-scrollbars
Branch: COMPASS-5597-scrollbars
https://github.com/mongodb-js/compass/commit/27440bb0bf945f73f195a06fecdbda4258a83e47

Comment by Githook User [ 30/Nov/22 ]

Author:

{'name': 'Rhys Howell', 'email': 'rhysh@live.com', 'username': 'Anemy'}

Message: Merge branch 'main' into COMPASS-5597-scrollbars
Branch: COMPASS-5597-scrollbars
https://github.com/mongodb-js/compass/commit/1899908aaf5655de2043be6ffb84d7eb5e7cd4a4

Generated at Wed Feb 07 22:40:09 UTC 2024 using Jira 9.7.1#970001-sha1:2222b88b221c4928ef0de3161136cc90c8356a66.