v-table scrollbar thumb colors are hardcoded (potential PR)
Nobody has claimed this yet.
- Dominant language
- Clojure
- Stars
- 823
- Forks
- 142
- PR merge metrics
- No merged PRs in 30d
Description
Hello! Judging by the code comments this appears to have been on the TODO list at some point or at least considered (the comments mention a possible :thumb-style explicitly, so I just followed that lead).
Issue: Using [:parts :simple-wrapper :v-scroll/h-scroll :style] the user can change the background of the v-table scroll bar area, but never the thumb color since they are hardcoded and not accessible via parts.
Solution: Since the thumb color is just background-color of regular a re-com/box I had to create "pseudo css keys" to access and replace the various states of it (default, grab, hover).
Diff compare: https://github.com/day8/re-com/compare/master...ryrobes:re-com:master
;; thumb box css map can be accessed via:
[:parts :simple-wrapper :v-scroll/h-scroll :thumb-style]
{:drag-color "#ffffff" ;; gets subbed in as background-color for thumb on drag
:hover-color "#ffffff99" ;; gets subbed in as background-color for thumb on hover
:background-color "#eeeeee" ;; default thumb color
;(plus all regular CSS keys work as intended on the thumb)
}
This works for my use case, and I can now fully style the v-table scrollbars to match my theme.
Not sure if this warrants a PR, but let me know, I can easily send it - since I feel like the core team would have implemented it differently, but figure I'd give a heads up here if anyone else runs into this issue.
Can be tested out via [org.clojars.ryrobes/re-com "2.13.2-122-d2b8d22-SNAPSHOT"].
Cheers!
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start by tracing the v-table scrollbar parts, especially [:parts :simple-wrapper :v-scroll/h-scroll :style], and inspect how the thumb box handles its default, drag, and hover states. The change is done when a :thumb-style part can control those colors while preserving regular CSS keys; validate against the styling example and snapshot dependency mentioned in the issue.
Written by the indexing model from the issue text.
Assessment
- Domain
- frontend
- Issue type
- Feature
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100