React children composition

[ericandrewscott]

I'm using 1.2.4.

It's not clear how to compose children into an array of objects and provide that to the parent, or to use Typescript to hoist props to the parent.

I'm working on a Step Indicator component, seen below.

The parent code for the component is like so:

      <StepIndicator
        stepIndicatorSize={stepIndicatorSize}
        activeStep={2} // set actual active step as a number
        labelSize="medium" // set actual label size, "small" | "medium" | "large"
        // convert to array of objects, like steps={[{label: 'Step 1'}, {label: 'Step 2'}]}
        steps={children}
      />

So I've added comments to help for some props that are unavailable on the parent, but the steps prop is the one I'm really trying to solve.

Below is the subcomponent for the horizontal single steps.

And here is the code we've hooked up to that subcomponent:

// Contextual horizontal small subcomponent
figma.connect(
  StepIndicator,
  "https://www.figma.com/design/cwklAvgWpiUVb8cKdhbR1U/Step-Indicator-%5BALPHA%5D?node-id=1140-38832",
  {
    props: {
      label: figma.nestedProps('_ / Step indicator / Label / Text only', {
        text: figma.textContent('✏️ Label'),
      }),
    },
    example: (props) => <>label: {props.label.text} </>,
  },
);

So this emits: <>label: Label </> for each step, but we'd like it to emit { label: "Label }...

• without the <> React fragment
• in curlies
• with the value of the label in ""

Is that even possible? So currently, the output for the whole thing is:

<StepIndicator activeStep={2} // set actual active step as a number
 labelSize="medium" // set actual label size, "small" | "medium" | "large"
 
// convert to array of objects, like steps={[{label: 'Step 1'}, {label: 'Step 2'}]}
steps=<>label: Label </><>label: Label </><>label: Label </>/>

But we'd like it to be:

<StepIndicator
    activeStep={2} // set actual active step as a number
    labelSize="medium" // set actual label size, "small" | "medium" | "large"
    steps={[
        { label: "Label" },
        { label: "Label" },
        { label: "Label" },

Is that possible?

Additionally, if we could:

• Look into the children and see which on is the Current variant to return the activeStep to the parent
• Look at the Label size prop on the first child to return the value to the labelSize prop on the parent

Totally opening to writing this in a more efficient/different way!

[slees-figma]

Hey @ericandrewscott, thanks for the question!

We don't have anything in the API to allow you to dynamically execute code to create some output, so as you explored already the way to do this today would be to return some JSX and allow code connect to map the children.

We're exploring APIs that'll let you do more freeform transformations like this - will keep you posted if we decide to move forward with these.