Composition of styles and behavior

[NicholasBoll]

Problem

We are inconsistent with how we compose styles and behavior. Sometimes we compose behavior in the elemProps hook and sometimes we leave that up to the component. This mixing is partially due to how we styled things using Emotion.

Here's an example: ComboboxCard and MenuCard. I'll simplify components to show render functions and style composition (pretend I'm using create*Component utilities):

// Card.tsx
// style
const StyledCard = styled('div')({});
// component
const Card = (elemProps, Element) => {
  return <StyledCard as={Element} {...elemProps} />
}

// MenuCard.tsx
// style
const StyledCard = styled(Card)({})
// behavior
const useMenuCard = createElemPropsHook(useMenuModel) // ...
// component
const MenuCard = (elemProps, Element) => {
  return <StyleCard {...useMenuCard(model, elemProps)} />
}

// ComboboxMenuCard.tsx
// no style
// behavior
const useComboboxMenuCard = createElemPropsHook(useComboboxModel) // ...
// component
const ComboboxMenuCard = (elemProps, Element) => {
  return <Menu.Card as={Element} />
}

It isn't obvious at first glance, but the ComboboxMenuCard composes styles and behavior in only the render function. useComboboxMenuCard does not compose the behavior of useMenuCard in the hook itself. Meaning if someone wanted the behavior of useComboboxMenuCard, they would need to either use Menu.Card in their render function, or they would need to create a new elemProps hook:

const useMyComboboxMenuCard = composeHooks(useComboboxMenuCard, useMenuCard)

This would be required if an application developer wants the behavior without the styling.

Our decision to compose behaviors in the elemProps hook vs the render function is entirely dependent on if we also want the styling.

The way forward

Now we have a reason to separate style and behavior. Our CSS kit will be composed from our React Kit, but will not have behavior. This means we need to be able to compose styling independent of our render functions. To be consistent, we should also compose behavior separately. Stencils allow us to fully separate style and behavior.

In our above example, const StyledCard = styled(Card), StyledCard has both the styling and behavior of Card. Even if we wanted to compose behavior, a styled component links them together. We now have the ability to completely separate style and behavior.

The Extensions on Stencils discussion starts to outline extension with stencils. Here's my proposal on moving forward with the Card example.

// Card.tsx
// style
const cardStencil = createStencil({})
// component
const Card = (elemProps, Element) => {
  return <Element {...handleCsProps(elemProps, cardStencil({}))} />
}

// MenuCard.tsx
// style
const menuCardStencil = createStencil({
  extends: cardStencil,
  // ...
})
// behavior
const useMenuCard = createElemPropsHook(useMenuModel) // ...
// component
const MenuCard = (elemProps, Element, model) => {
  return <Element {...handleCsProp(useMenuCard(model, elemProps), menuCardStencil({}))} />
}

// ComboboxMenuCard.tsx
// no style
// behavior
const useComboboxMenuCard = composeHooks(useMenuCard, createElemPropsHook(useComboboxModel)) // ...
// component
const ComboboxMenuCard = (elemProps, Element, model) => {
  return <Element {...handleCsProps(useComboboxMenuCard(model, elemProps), menuCardStencil())} />
}

With this, the composition is always consistent. elemProps hooks always compose and stencils always compose. The render function is no longer enforcing the relationship.

Future

I'd like to go one step further eventually to make sure there's no composition in the render function:

// behavior
const useComboboxMenuCard = composeHooks(useMenuCard, createElemPropsHook(useComboboxModel)) // ...

// component
const ComboboxMenuCard = createSubComponent('div')({
  modelHook: useComboboxModel,
  elemPropsHook: useComboboxMenuCard,
  stencil: menuCardStencil,
})((elemProps, Element) => {
  return <Element {...elemProps} /> // handleCsProps is already built in, `elemProps` has stencil stuff stripped already
})

[NicholasBoll]

In the future example, our documentation will know what a stencil is simply by the component.