Use the :parts and :theme system for all existing components #352
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