-
-
Notifications
You must be signed in to change notification settings - Fork 142
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
- tag-dropdown
- text
- throbber
- tour
- tree-select
- v-table
- simple-v-table
- nested-grid
- nested-v-grid