day8 / re-com

A ClojureScript library of reusable components for Reagent
https://re-com.day8.com.au
MIT License
796 stars 147 forks source link

v-table scrollbar thumb colors are hardcoded (potential PR) #326

Open ryrobes opened 1 year ago

ryrobes commented 1 year ago

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!