feat(ui): group overloaded functions into tabs - #1047
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
You can view the changes from here: vercel-preview |
|
It's an interesting idea, but I think it makes searching harder, e.g. if I want to search for |
|
Oddly enough, I'm fine with the showing of multiple overloads in our current state, and consumers can reformat their docs how they like. Thanks for this demo, however :-)! |
|
Hmm, fair enough! Thanks for your time 🤍 |
|
I actually have a different opinion and was thinking of this differently. Instead of the simple 1, 2 on the Overload headers which makes distinction hard, I feel that it could look like Code Tabs; So it becomes pretty apparent that there are more versions of this method. What it means is that the main method signature is always the same (the initial tiny snippet box under the header) and only the attributes and descriptions/etc are under "codetabs" I still feel that this would be much simpler.
Well I do feel our web generator could have a default stance on overloads, as it is already an opinionated style. |
That much I agree. I think that anchorinhg can be solved with the tab being switched to the right one based on the click... For pure command+f/ctrl+f searches, I'm unsure of either, we could either think a bit more about this or keep the current status quo. My goal was to make overloads simpler to identify / consume less vertical space and be better organized. |
|
I initially thought about using the signatures/parameters as the tab titles, but I hit two major edge cases:
That's why I retreated to indexes, and to make clear that tabs are for overloads, I've placed a header before the component itself (above indexes) contains "Overloads". After Aviv's comment, I searched about it and found that the web standard solution is using |
Description
This PR introduces a new tabbed UI for overloaded functions. This implementation is a direct result of the discussions in #1038. It updates the MDX AST to group overloads into
OverloadTabscomponent(usingtabs&react-tabs), utilizing CSS Grid stacking to prevent layout shifts; as it takes fixed height from the longest one.Note: Using AI to write JSDocs & traverse some errors ;)
Validation
Add tests, and there are visual results:
Before:
After:
Related Issues
None
Check List
node --run testand all tests passed.node --run format:check&node --run lint.