Skip to content

Use the :parts and :theme system for all existing components #352

@kimo-k

Description

@kimo-k

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

Sub-issues

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions