Some code component questions

Developer Support
1

I have this code component "ColorComponent" that acts as a swatch:

import * as React from "react";

export function ColorComponent({className,color}:{className:string,color:string}) {
    return <div className={className} style={{height:"24px",width:"24px",backgroundColor:color}}> </div>
}

I’d like to change the color prop value as it maps through the data, in the same way I do with tokenName, textValue and description, within the parent component DesignTokenItem.

  1. Do I use “Link to a prop for component DesignTokenItem”
  2. And select add “color”?
    Also, how do I removed “ColorSwatch” and “colorSwatch” after accidentally creating them as props.

My registerColorComponet.ts is:

import { ColorComponent } from "./ColorComponent";
import { registerComponent } from "@plasmicapp/host";


export function registerColorComponent() {
registerComponent(ColorComponent, {
name:"ColorComponent",
 importPath: "./ColorComponent",
    props: {
        color:{
            type: 'string',
            defaultValue: "red",
        },
    }
})
}

image.png

2

For a complete picture.:
ChakraDoc.tsx component imports the
DesignTokenItem.tsx component which imports the
PlasmicDesignTokenItem.tsx (which is synced).

image.png

3

Do I need to name the ColorComponent “color” ?

image.png

4

Sounds like link to prop is what you want

5

Good to hear I am on the right track. I tried that before, so maybe I did something wrong, will look again.

6

OK. Set to Color with default value #FF00FF. But see no color, not even the default color on my list of colors.

If I change colorSwatch2 to color in PlasmicDesignToken.tsx, then I see red appear for all colors.
(Not sure what this code is, why its set to colorSwatch2 and not color)

const args = React.useMemo(
    () =>
      Object.assign(
        {
          //colorSwatch2: "red" as const
          color: "red" as const        },
        props.args
      ),
    [props.args]
  );

image.png

image.png

image.png

7

But I see args.color used for color, should it be overrides.color?

      <ColorComponent
        data-plasmic-name={"color"}
        data-plasmic-override={overrides.color}
        className={classNames("__wab_instance", sty.color)}
        color={args.color}
      />
8

As this is Token related. Is it something that you’d like to help with @samuel?

9

As ultimately, one day, I’d love this all to be registered tokens that are editable in Plasmic back to the original json. But I think this would require another Style dictionary transform to work with Theo.

10

args.color is correct (it is passing the color prop that it receives into the color prop for ColorComponent). Can you print and see what props are being passed into your ColorComponent?

11

I know how to console.log. But you mean print in dev tools console, how do you do that again?
Anyway, this console.log returns “blue”.)

import * as React from "react";

export function ColorComponent({className,color}:{className:string,color:string}) {
    console.log("color: "+color)
    return <div className={className} style={{height:"24px",width:"24px",backgroundColor:color}}> </div>
}
12

is that what you expect?

13

no. I wanted all the color values from my data

14

I have all the text values change just not the color

15

where is “blue” coming from?

16 
 const args = React.useMemo(
    () =>
      Object.assign(
        {
          color: "blue" as const,
          colorSwatch2: "red" as const
        },
        props.args
      ),
    [props.args]
  );
17

“blue” is the default value for the color prop?

18

Its the default via link prop

19

what component is the above code snippet from?

20

image.png
image.png1026×304 24.5 KB