Recently I started to experiment with the CLI preview feature and notice it can only receive props that belong strictly to the component.
Often my team designers share components that rely on nested instances. See in the image below the "Assistive text" nested component:
As you can see in the image below, the nested component value is a relevant prop for the component code:
When I run the preview command with the --inspect flag, Assistive text is represented as a boolean, which is not the case - it's a nested component.
● components.figma.batch.json (198:33673)
Name Type Options Default
------------------------ ------- ------------------------------------------- ---------
[𝐓] Label Text "Label"
Trailing label (Default) Boolean true | false true
Assistive text Boolean true | false false
Leading label Boolean true | false false
Selection Variant None | Selected | Partial "None"
State Variant Default | Hover | Active | Focus | Disabled "Default"
Error Variant True | False "False"
Similar output is generated with --output json:
[
{
"filePath": "components.figma.batch.json",
"nodeId": "198:33673",
"availableProperties": [
{
"name": "[𝐓] Label",
"type": "TEXT",
"default": "Label"
},
{
"name": "Trailing label (Default)",
"type": "BOOLEAN",
"default": true
},
{
"name": "Assistive text",
"type": "BOOLEAN",
"default": false
},
{
"name": "Leading label",
"type": "BOOLEAN",
"default": false
},
{
"name": "Selection",
"type": "VARIANT",
"variantOptions": [
"None", "Selected",
"Partial"
],
"default": "None"
},
{
"name": "State",
"type": "VARIANT",
"variantOptions": [
"Default",
"Hover",
"Active",
"Focus",
"Disabled"
],
"default": "Default"
},
{
"name": "Error",
"type": "VARIANT",
"variantOptions": [
"True",
"False"
],
"default": "False"
} ]
}
]
Being able to test the templates with the nested component values is quite relevant for our team to ensure these are working as we designed them.
Recently I started to experiment with the CLI preview feature and notice it can only receive props that belong strictly to the component.
Often my team designers share components that rely on nested instances. See in the image below the "Assistive text" nested component:
As you can see in the image below, the nested component value is a relevant prop for the component code:
When I run the preview command with the
--inspectflag,Assistive textis represented as a boolean, which is not the case - it's a nested component.Similar output is generated with
--output json:Being able to test the templates with the nested component values is quite relevant for our team to ensure these are working as we designed them.