enum + nestedProps to return children or textContent

[ericandrewscott]

Our Toolbar component has a region for title and subtitle/rating and an enum to help set that up.

This maps to two separate coded props like so:

figma.connect(Toolbar, 'https://www.figma.com/design/<OBFUSC>', {
  props: {
    ...
    ...titleProps,
  },
  example: ({ ..., title, subtitle }) => (
    <Toolbar
      ...
      toolbarTitle={TITLE_HERE}
      toolbarSubtitle={SUBTITLE HERE}
    />
  ),
});

For our first iteration of Code Connect, we statically connected those props. Our props const for the title area looks like:

const titleProps = {
  title: figma.nestedProps("✏️ Title area", {
    text: figma.textContent("✏️ Title"),
  }),
  subtitle: figma.enum('Title type', {
    'Title + Subtitle': "{'INSERT_SUBTITLE'}",
    'Title + Rating': <EGDSRating rating={'INSERT_RATING'} />, // figma.children("⚙️ Rating"),
  }),
};

This renders correctly, but we'd like to hook up the dynamic Subtitle and the Rating, which is already connected as you can see below.

I tried the following for the subtitle props:

const titlePropsRedux = {
  title: figma.nestedProps("✏️ Title area", {
    text: figma.textContent("✏️ Title"),
  }),
  subtitle: figma.enum('Title type', {
    'Title + Subtitle': figma.nestedProps('✏️ Title area', {
      content: figma.textContent('✏️ Subtitle'),
    }),
    'Title + Rating': figma.nestedProps('✏️ Title area', {
      content: figma.children("⚙️ Rating"),
    }),
  }),
};

and then of course making the example be {subtitle.content}, but that gives me the error:

I also tried hooking them all up to the same figma.enum, since they all come from the same design prop, like so:

const titleProps = {
  titleContent: figma.enum('Title type', {
    'Title': figma.nestedProps("✏️ Title area", {
      title: figma.textContent("✏️ Title"),
      subtitle: undefined, // or false
    }),
    'Title + Subtitle': figma.nestedProps("✏️ Title area", {
      title: figma.textContent("✏️ Title"),
      subtitle: figma.textContent("✏️ Subtitle"),
    }),
    'Title + Rating': figma.nestedProps("✏️ Title area", {
      title: figma.textContent("✏️ Title"),
      subtitle: figma.children("⚙️ Rating"),
    }),
  }),
};

And then using {titleContent.title} and {titleContent.subtitle}, but that gives me the same intrinsic error as above.

Am I thinking about this wrong? Is there a way to do this?

• Code Connect CLI version 1.1.3
• Operating system OSX