day8 / day8/re-com

Use the `:parts` and `:theme` system for all existing components

Open
#352 0 comments 0 reactions 1 assignee View on GitHub

@kimo-k is already working on this.

Since Sep 15, 2025.

Dominant language
Clojure
Stars
823
Forks
142
PR merge metrics
No merged PRs in 30d

Description

Newer re-com components (nested-grid, tree-select, dropdown) can use a :theme prop. :theme expresses an update to a component's props (e.g. style & class), as a function of the current props and a context. The context includes :part and :re-com. :part is a qualified id. :re-com is a map describing global configuration (such as color palettes) and any dynamic state (such as {:drop-down :open}).

As a user, you can write a single :theme function and "register" it once, to apply it to every re-com component. This theme-function can vary its behavior based on the :part (for instance, with a multimethod), gathering together all your visual adjustments for the app.

You can also pass a :theme function to an individual component, conveniently extracting the logic of styling from that component's implementation.

Complementing :theme, I've also expanded the :parts system. Previously, a :parts value could only be a map. Now, newer re-com components support strings, hiccups and functions. Strings & hiccups will replace the entire part, while a function will replace its component function.

The way :theme and :parts works is mostly stable in these newer components, so it would be great to add this feature to all our current components.

  • alert
  • box
  • buttons
  • checkbox
  • close-button
  • datepicker
  • dropdown
  • input-text
  • typeahead
  • input-time
  • splits
  • modal-panel
  • error-modal
  • multi-select
  • popover
  • progress-bar
  • radio-button
  • selection-list
  • slider
  • horizontal-tabs
  • bar-tabs
  • pill-tabs
  • table-filter
  • tag-dropdown
  • text
  • throbber
  • tour
  • tree-select
  • v-table
  • simple-v-table
  • nested-grid

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.

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.