Compound atomic recipes (JSX)

[wrux]

Description

It would be nice to have an option to define the output tag when rendering the component in JSX as we would do in Chakra.

Given the following example:

const textVariants = cva({
  base: {},
  variants: {
    size: {
      h1: { textStyle: 'h1' },
      h2: { textStyle: 'h2' },
      h3: { textStyle: 'h3' },
      h4: { textStyle: 'h4' },
      sm: { textStyle: 'sm' },
      md: { textStyle: 'md' },
      lg: { textStyle: 'lg' },
    },
  },
  defaultVariants: {
    size: 'md',
  },
})

const Text = styled('p', textVariants)

The <Text> component will always render a <p> tag. It would be great if we can somehow specify the output tag when rendering the recipe component like so:

function Test() {
  return (
    <Text as="h2" size="lg">...</Text>
  );
}

Problem Statement/Justification

Simplifies custom recipes and would likely allow an as="section" option to default recipes.

Proposed Solution or API

I haven't looked at the source yet so don't know

Alternatives

No response

Additional Information

No response

[astahmer]

there was a discussion related on panda's discord, here's the thread content:

---

MaveriX89 — 07/13/2023 4:52 AM
So are there really no plans to support an “as” prop with the auto-generated Box component from PandaCSS? 😢
I think it would really be the cherry on top for PandaCSS if that was possible to support.
I think I’m basically forced to have to do my own version of what Panda is doing with the styledFn closure.

I’m using SolidJS in my case and with the current API, I have to supply my “as” component as the argument to get back a StyledComponent version that can receive all the JSX style props
Are there any gotchas that I need to be aware of when attempting to redo the Box implementation myself?
SolidJS already has a Dynamic component which can mimic any component.

I just need to process all the CSS related things beforehand and supply my “as” to the component prop of

<Dynamic component={props.as} {…asCompHTMLProps} {…processedCSSProps} />

Any guidance/help will be greatly appreciated because I want to make sure I account for everything that’s happening inside of factory.js

---

freddie — 07/13/2023 11:08 AM
yeah I agree, it’s annoying that to render any jsx component as another tag requires black magic. They have it hardcoded right there as styled.div!
can you file a feature request on the repo and gather some upvotes?
and if you can, have a look at the source code for panda, you might be able to contribute with the as prop yourself

---

katabsi - Ivica Batinić — 07/13/2023 11:53 AM
there is a standalone lib for as prop https://github.com/chakra-ui/polymorphic
I'm using it like this

export const Text = panda(poly('p'), {
  base: {},
  variants: {}
});

<Text as="span" />

as is not something panda should take care of. It's the React concept and it doesn't apply well to other frameworks (panda is framework agnostic)
Also asChild pattern is more performant in terms of TS type resolution https://twitter.com/jjenzz/status/1423766700885954562

---

freddie — 07/13/2023 11:59 AM
I understand this but this will come A LOT

---

katabsi - Ivica Batinić — 07/13/2023 12:00 PM
maybe we can add a chapter in the documentation addressing this problem and suggesting a solution

---

freddie — 07/13/2023 12:01 PM
yeah I think that'd be a great addition. Even more so that polymorphic is a product from the Chakra team
this breaks the generic props btw, poly has to be the outermost call otherwise you lose the default JSX props

here’s a working example:

import { Box } from "styled-system/jsx";
import { polymorphicFactory } from "@polymorphic-factory/react";

const poly = polymorphicFactory();
const Text = poly(Box);

const  = <Text as="a" href="/" />

If you'd want to control the default tag it becomes slightly more complex:

import { polymorphicFactory } from "@polymorphic-factory/react";
import { BoxProps, styled } from "styled-system/jsx";

const poly = polymorphicFactory<BoxProps>({
  styled: (component) => (props) => {
    const Component = styled(props.as || component);
    return <Component {...props} />;
  },
});

export const Text = poly("p");

---

katabsi - Ivica Batinić — 07/13/2023 12:42 PM
there is also factory from Ark UI but it's not yet exposed https://github.com/chakra-ui/ark/blob/main/packages/react/src/factory.tsx

ti would look like this
export const Text = panda(factory('p'), {
  base: {},
  variants: {}
});

<Text fontSize="2xl" asChild>
  <span>Text</span>
</Text>

---

freddie — 07/13/2023 12:43 PM
oh cool! I dont like the output of asChild for base layout components because it promotes laziness and makes the JSX output too different from the HTML output
the average developer will use div for everything unless VERY EASY not to
i love asChild but would use it for actual components, not basic layout comps

---

MaveriX89 — 07/14/2023 5:20 AM
I never even thought about runtime polymorphism! Wow, I’m actually convinced of the argument against the as prop because I was experiencing that very degradation in TypeScript as I got the runtime polymorphism working

[anulman]

+1 for recommending the asChild pattern to developers looking for as props moving forward. Is there a reasonably-trivial example implementation published in the wild somewhere? Thinking it would be nice to add this to the docs for each of the major frameworks.