argTypes in nested object for controls

Question

I'm trying to migrate from Knobs to Controls and I am having trouble with nested objects.

As an example, lets say I have an object like this as props for a Component...

object : {
 properties: {
   color: 'black',
   size: '1'
 }
}

The project uses .tsx extensions for story files, no MDX as of now. I've tried accessing the nested properties like this to customize their Control...

Card.argTypes = {
 object: {
  properties: {
   color: {control: {type: 'color'}},
   size: {control: {type: 'range', options:{min:1,max:5,step:1}}}
  }
 }
}

But the control remains an object field with the entirety of the JSON right in there, which is not user friendly, you might agree.

Is there a way to access objects to give control over their nested properties? Given the size of the project, I can't go around flattening all the objects and their props in the components.

Thanks!

Answer 1

Not at present.

There's an open issue about it currently aimed at the 6.2 release.