Q: Exposing props to allow for easier UI abstraction

[StuartMorris0]

💬 Questions and Help

Firstly, the project looks awesome, having come from a heavily styled-components and styled-system background.

My first question, is around how you might expose props for creating UI components. Often with projects, we tend to abstract the UI components such as Button, Input and so on, into more reusable components with strict Typescript interfaces.

In essence, we would take something like this....

<x.button
      type="button"
      color="white"
      transition
      bg={{ _: 'emerald-500', hover: 'emerald-800' }}
    >

Into it's own Button component and expose props such as variant which may then further style the component.

This removes the requirement to always pass a bunch of reused props every time the primary button is needed. It also removes the @xstyled... calls from all pages and into less components, should the need to change arise.

Previously with styled-system we used to generate/build prop types (interfaces) so that we could further expose those props should we wish. For the above example, we might want to expose bg but everything else be behind the scenes. What would be the recommended approach for this?

Furthermore, is there any documentation around creating variants? I read that some of the variants part was deprecated as it was confusing. But interested to learn more around what approach might be best. In the above example, just creating variants for buttons that are predefined by the actual Button component, rather than exposing x.button everywhere.

Thanks!

[jguddas]

I'm a big fan of having a utility that behaves similarly to styled(MyComponent) from styled-components.

interface ButtonProps {
  children: React.ReactNode;
}

const Button = styled<ButtonProps>(x.button, {
  type: 'button',
  color: 'white',
  transition: true
  bg: { _: 'emerald-500', hover: 'emerald-800' }
})``;

const DangerButton = styled<ButtonProps>(Button, {
  bg: { _: 'red-500', hover: 'red-800' }
})``;

ps.: You can already use this pattern with defaultProps or .attrs.

[felubra]

@StuartMorris0 maybe the approach in #224 could help you.