React-styleguidist: Wrong union description with TypeScript

[alextewpin]

Current behavior
When using TypeScript unions, react-styleguidist isn't providing any description. Moreover, is shows annoying empty div.

To reproduce
Use TypeScript and add description to any union field. Demo: https://codesandbox.io/s/goofy-forest-zmeiy

Expected behavior
Unwrapped union description or at least no empty div.

Version
11.0.8

[mitsuruog]

You can hover your mouse over the field for a few seconds to see the actual value, but I can understand the fact that more people don't realize it.

So... we can change this, but first, we need to decide what kind of UI we want.
Here's my idea. Does anyone have any other good ideas?

1. Show the actual value instead
   

2. Show the actual value below the description
   

FYI @sapegin what do you think?

[alextewpin]

Yeah, I know that I can hover on union, that's a cool feature. I'm actually bothered with ugly empty space between table rows. As far as I know, when parsing prop-types union there is actual description, like One of: red, blue. But not in this case.

Pic. 2 is fine I guess. Union description could be quite long, so putting it in type column may look sloppy.

[sapegin]

I think unions can be very very long, and improving tooltips could be a better solution in general — showing a nice HTML tooltip where we can format code on multiple lines, instead of a title, which, I agree, isn't the best and easily discoverable UI pattern.

[sapegin]

There are many places that could be improved with tooltips:

[mitsuruog]

here is my design idea.
to solve the un-discoverable UI, I would like to put an icon next to the property.
what do you think?

[sapegin]

This looks good!

A couple of comments:

1. I think we don't need an underline anymore, an icon is enough to show that this thing is interactive.
2. The whole thing (text + icon) should be hoverable, otherwise, the hoverable area would be too small and too difficult to use for some folks.

[mitsuruog]

sounds good!
if we were to implement this tooltip, do you have any preferred libraries? or would you prefer to implement it from scratch?

[sapegin]

Nope, but I'd prefer a library if it won't bring too many dependencies (like another CSS in JS library ;-) and it must be accessible with a keyboard and a screen reader.

[styleguidist-bot]

:tada: This issue has been resolved in version 11.0.9 :tada:

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot :package::rocket: