I had a Base variant with several elements, who’s visibility was set to their related prop. Now I would like to use more than 1 variant for each of the items. How best to approach this?
Previously, my component code was:
<DesignTokenItem
...
color ={variant === "color" ? value : undefined}
sizing ={variant === "sizing" ? value : undefined}
borderRadius ={variant === "borderRadius" ? value : undefined}
So now I think it just needs to be:
<DesignTokenItem
variant={variant}
But how does this change in Plasmic Studio, so that I can sync the correct code for my local component to use? Like for the color item:
What do I name the variant for color? as there is a variable called color, so it gets called color2 if I name it color.
Link component prop to color ?
Set visibility to “not rendered” as the variant will now show/hide?
In addition, the generated file on sync has colorSwatch appended to sizing, border and other type. So I’m obviously doing something wrong:
not sure what you mean. In your wrapper component for DesignTokenItem, you can take the variant prop, and pass it to PlasmicDesignTokenItem, activating whichever variant is appropriate in Plasmic. DesignTokenItem and PlasmicDesignTokenItem don’t have to have the exact same props
DesignTokenItem has not been edited after it was generated. It just imports props from PlasmicDesignTokenItem as is.
I haven’t needed to edit this when I was show hiding elements on just one base variant.
Are you saying I need to edit this file now to get it to show hide all variants?
// This is a skeleton starter React component generated by Plasmic.
// This file is owned by you, feel free to edit as you see fit.
import * as React from "react";
import {
PlasmicDesignTokenItem,
DefaultDesignTokenItemProps
} from "../../../components/plasmic/plasmic_poc/PlasmicDesignTokenItem";
import { HTMLElementRefOf } from "@plasmicapp/react-web";
export interface DesignTokenItemProps extends DefaultDesignTokenItemProps {}
function DesignTokenItem_(
props: DesignTokenItemProps,
ref: HTMLElementRefOf<"div">
) {
return (<div>
<PlasmicDesignTokenItem root={{ ref }} {...props} />
</div>
);
}
const DesignTokenItem = React.forwardRef(DesignTokenItem_);
export default DesignTokenItem;
I just created a fresh test project and noticed that I can now select “Use dynamic value” via Variant props. And in my actual project, if I place DesignTokenItem on the canvas, I can equally select Use dynamic value". Great!
But as I never will use DesignTokenItem on the canvas. I need to “Use dynamic value” via code. And have each DesignTokenItem appear within the parent component called ChakraDocs (a list of DesignTokenItems).
Maybe I should be using “Single Select” variant (horizontal) as I currently have them appearing vertically after clicking base variant then “New variant” button.
Hi @political_magpie, sorry I think we are just having some trouble understanding this particular question - would it be possible for you to maybe share a video showing the issue going on?
