defineParts Documentation

[asparamancer]

Subject

defineParts and use of it with createAnatomy from Zag

Description

In Ark I can see Panda uses createParts to define styling of different parts, so I'm trying to run up my own example. But the styling of the data-part="X" but isn't applying. any documentation on how its meant to work would be helpful.

eg:

import { defineRecipe, defineParts } from '@pandacss/dev'
import { createAnatomy } from "@zag-js/anatomy"

const anatomy = createAnatomy("blockquote").parts("root", "quotation", "citation", "citationurl")
const parts = defineParts(anatomy.build())

export const blockquote = defineRecipe({
  name: 'blockquote',
  description: 'A blockquote style',
  base: parts({
    root: {
        width: '100%',
    },
    quotation: {
        color: 'rose.800',
        fontStyle: 'italic',
        fontSize: '2xl',
    }
  }),
  variants: {
  },
})

With a basic component like

import { blockquote } from '@/pandas-css/recipes';

const QuotationTest = () => {
  return (
    <figure className={blockquote()}>
      <blockquote>
        <p data-part='quotation'>&quot;Lalallaal&quot;</p>
      </blockquote>
    </figure>
  );
};

[astahmer]

documentation is needed indeed, in the meantime to unlock you:
you need to use data-scope="blockquote" in addition to the data-part="xxx"

[asparamancer]

Ah amazing thank you, do you want me to try and write some documentation as I've been playing around with it?

[astahmer]

that would be very helpful yes ! 🙏

[segunadebayo]

I've just discussed this with @astahmer. We intend to deprecate the defineParts function in favor of a dedicated API for styling component parts. The current approach with defineParts isn't fool-proof and will sometimes not work.

Kindly avoid using it for now until the new API is out.

[asparamancer]

Ah sure thanks for the heads up. I'm in the middle of building some components, anywhere that the new API is used so I could take a look and see if I can use it as it stands?

[anubra266]

@asparamancer It's been merged, should be released soon. But you can use it now if you use the dev release of panda
#1132 (comment)