Specify props with the styled function

[rafgraph]

I often run into these two scenarios when working with the styled function:

DOM elements that require a type prop:

const TextInput = styled('input', { ... });
// but the <input> element should to be paired with a type prop
// so everywhere I use <TextInput> I have to write it like this (which makes it prone to bugs):
<TextInput type="text" {...props} />

Composing styled components that need to select an active variant:

const ButtonBase = styled('button', {
  // styles...
  variants: {
    focus: {
      outline: {
        outline: '2px solid green',
      },
      boxShadow: {
        boxShadow: '0 0 0 2px green',
      },
    },
  },
});

const RoundedButton = styled(ButtonBase, {
  borderRadius: '1000px',
  // etc...
});
// but <RoundedButton> should always use the variant focus="boxShadow"
// so whenever I use <RoundedButton> I have write it like this (which makes it prone to bugs):
<RoundedButton focus="boxShadow" {...props}>Priority Tag</RoundedButton>
// (or wrap it in another React component)

Possible solution: add a 3rd argument to the styled function for props:

This would essentially be a default props object, but added through composition, and not as a property on the component like React's to be deprecated defaultProps.

const TextInput = styled('input', { ... }, { type: 'text' });
// now I can use <TextInput> like this (and don't have to worry about specifying the type):
<TextInput {...props} />

const RoundedButton = styled(
  ButtonBase,
  { borderRadius: '1000px', etc... },
  { focus: 'boxShadow' },
);
// now I can use <RoundedButton> like this (and don't have to worry about specifying the focus variant):
<RoundedButton {...props}>Priority Tag</RoundedButton>

Current alternatives:

For repeated use of <TextInput> or <RoundedButton> the current solution is to wrap them in another React component like const TextInputWithType = (props) => <TextInput type="text" {...props} />. But this becomes very verbose after adding TypeScript types and ref forwarding, and seems unnecessarily cumbersome for just specifying a prop without adding any logic.

[peduarte]

I like this, and we're considering it here #688

[rafgraph]

#688 was not implemented, so a solution for this is still needed.

[rafgraph]

@peduarte any thoughts on a new solution?

[peduarte]

I have to think. For now it's to just do it in React. One thing we could consider is an extendComponent prop, similar to what we had in Radix. That would only allow users to set default props. But its outside of the styled function. I need to think more.