Conditional parent wrapper components

[siddharthkul]

Hello 👋 ,

Our ProgressBar component in Figma is actually composed of 2 components ProgressBar and ProgressFloatingLabel in code.

In figma we have a boolean to control show/hide FloatingLabel, how do we achieve conditional rendering of a parent with Code-Connect.

// with FloatingLabel
<ProgressBarWithFloatLabel
label={75}
labelPlacement="above"
progress={0}
>
  <ProgressBar weight="heavy" progress={0} />
</ProgressBarWithFloatLabel>

// without FloatingLabel
<ProgressBar weight="heavy" progress={0} />

[lauthieb]

+1 !

[tomduncalf-figma]

Hey, if I understand correctly, you'd need to use variant restrictions to handle this, and have two separate examples, like:

figma.connect(ProgressBar, 'https://...', {
  variant: { "Has Label": false },
  props: { weight: figma...., progress: ... },
  example: (props) => <ProgressBar weight={props.weight} progress={props.progress} />
})

figma.connect(ProgressBar, 'https://...', {
  variant: { "Has Label": true },
  props: { weight: figma...., progress: ... },
  example: (props) => <ProgressBarWithFloatLabel...>
    <ProgressBar weight={props.weight} progress={props.progress} />
  </ProgressBarWithFloatLabel>
})

We'll have a think about if there are more ergonomic ways to handle this – if you have any thoughts, please feel free to share them!