day8 / day8/re-com

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

Open
#326 0 comments 0 reactions 0 assignees View on GitHub

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

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.