Add ids to component containers

[n1313]

I would like to ask you to add unique ids to component containers, something like <div id={ name + '-container' }>. It would help me have better CSS selectors in my visual testing suite: #ComponentName-container .ReactStyleguidist-Playground__preview instead of using :nth-of-type().

I understand that I can do it by having a custom component like https://github.com/sapegin/react-styleguidist/blob/master/examples/customised/styleguide/components/ReactComponent/index.jsx, but it will make updating styleguidist more difficult: I don't want to monitor upstream for changes in that file.

I also understand that isolated view exists but I can't use it for my task because I'm not using a webserver to host my docs for phantomjs, but feed them directly as file:/// which makes navigating to #!/ComponentName a bit complicated.

(I can make the change myself and send a PR later if you so prefer)

[sapegin]

PR would be great! But please check #207, you may need to change your code after I finish it.

[n1313]

Any time estimates on that change?

[sapegin]

As soon as I can ;-) The JSS migration is almost finished (will push tonight probably) but there are more changes planned for the next major release — #223.

I’d suggest adding IDs to container and preview so you won’t use any class names in your queries. In that case JSS won’t break your code and I could merge your PR earlier. Would that solve your problem?

[n1313]

Hmm... My suite does the following: it iterates over every component, and then takes screenshots of every code block in the examples section of that component. The screenshots are then compared with baseline screenshots. I would like to have a consistent class name on the preview containers.

[sapegin]

Then maybe ID for each component and generic class name like rsg--preview for each preview?

[n1313]

That would be perfect, yes.

[sapegin]

Then I’ll be happy to merge you PR! 💥