slots not working with prop as a component pattern

[samiresua]

I know slots are not officially released, but thought i would share this finding incase you were not already aware. Are there plans to support this pattern?

The below works as expected:

type ButtonProps = {
  icon: ReactElement<IconProps>;
};

export const ButtonWithIconElement = ({
  icon,
}: ButtonProps) => {
  return (
    <button>
      {icon}
    </button>
  );
};

However, the when using the below pattern slots throw an error

type ButtonProps = {
  Icon: ComponentType<IconProps>;
};

export const ButtonWithIconComponent = ({
  Icon,
}: ButtonProps) => {
  return (
    <button>
      // our Icon is a component
      // its name starts with a capital letter to signal that
      // so we can just render it here as any other component
      <Icon />
    </button>
  );
};

[primeinteger]

Hi @samiresua - apologies for the delayed response to your question. We have released the Multiple Slots feature so you may find that pattern to be useful for development. There is documentation for that at the bottom of this page in the Dev docs: https://www.contentful.com/developers/docs/experiences/layout-structures/

Currently Studio Experience components utilize props for all the component variables, and we don't currently have a variable type that would allow a prop to be a React or HTML Element. You could create a list of strings for a variable that are the names of different icons, and then in your Button component you could map the icon name variable to the related Icon component.

I'll raise your feedback to the team internally and see if would consider adding support for this pattern in the future. Thanks!