RFC: Compound Props

[kevinwolfcr]

Is your feature request related to a problem? Please describe.

For the given StyledText component:

const StyledText = styled("p", {
  variants: {
    variant: {
      h1: { fontSize: "$3xl" },
      h2: { fontSize: "$xl" },
      h3: { fontSize: "$xl" },
      h4: { fontSize: "$lg" },
      h5: { fontSize: "$md" },
      h6: { fontSize: "$sm" }
    }
  }
});

Let's say that I want to change the as prop depending on the variant. Right now, I would need to wrap my StyledText with a new component (preferably with forwardRef) and map over the type to get the correct as prop, as well as making some TS tricks or using any to avoid type errors:

const map: Record<string, string> = {
  h1: "h1",
  h2: "h2",
  h3: "h3",
  h4: "h4",
  h5: "h5",
  h6: "h6"
};

const WrappedText: React.FC<StitchesProps<typeof StyledText>> = ({
  variant,
  ...props
}) => {
  return (
    <StyledText
      as={variant && map[variant as any]}
      variant={variant}
      {...props}
    />
  );
};

Describe the solution you'd like

Inspired by the compoundVariant API, it would be nice if a new API could exist: compoundProp, which can take as a first argument any combination of variants and return new props that can be passed to the StyledText:

StyledText.compoundProp({ variant: "h1" }, { as: "h1" });
StyledText.compoundProp({ variant: "h2" }, { as: "h2" });
StyledText.compoundProp({ variant: "h3" }, { as: "h3" });
StyledText.compoundProp({ variant: "h4" }, { as: "h4" });
StyledText.compoundProp({ variant: "h5" }, { as: "h5" });
StyledText.compoundProp({ variant: "h6" }, { as: "h6" });

Describe alternatives you've considered

Wrapping StyledText with other component.

Additional context

By doing this, we could map any combination of variants to any combination of props we want, the possibilities are endless.

Also, I think the change can be a seamless change according to the current implementation, because the compoundVariant(compoundVariantsObject, compoundVariantStyles), could be changed to just call compoundProp(compoundVariantsObject, { css: compoundVariantStyles }).

SandBox: https://codesandbox.io/s/gracious-heyrovsky-9pbxo?file=/src/App.tsx

[peduarte]

@kevinwolfdev thanks so much <3

I converted this from an issue to a discussion

[kevinwolfcr]

Thank you! Changing the title to RFC: Compound Props.