storybook: Improve the doc blocks proptable with CSS-grid
We have this code right here: https://github.com/storybookjs/storybook/blob/992c98edd70b1bf536bf5ce69f796aad2d82bad5/lib/components/src/blocks/PropsTable/PropsTable.tsx#L11-L140
Which is used in the addon-docs to display the components metadata (propTypes) in a beautiful and useful way.
The component is currently a <table> with some styles.
But the widths and stylings of these elements is cumbersome and specifically the widths of the columns are not really what we want, and really hard to control.
We should change this component so it uses CSS-grid instead, so it becomes trivial to align columns correctly.
I asked for help on this issue on twitter: https://twitter.com/NorbertdeLangen/status/1220665994789736449
and I got replies from: @thefrontendwizard @codemacabre @maddesigns @alolalo 🙏 🙇
Let’s chat about the possible solutions, and divide up the work?
About this issue
- Original URL
- State: closed
- Created 4 years ago
- Reactions: 3
- Comments: 15 (7 by maintainers)
I’ve tried to create a date-selection poll here: https://doodle.com/poll/5yhfimzek4uhfadz
If interested in a meeting about this, and also just learn a bit from each other, please cast a vote on when a meeting would be possible for you. 🙇 @thefrontendwizard @codemacabre @maddesigns @alolalo
I’ve got a WIP fork of this (haven’t had much time this week): https://github.com/codemacabre/storybook
I’m still getting used to emotion, but a rudimentary replacement of table (
<td>,<tr>, etc.) elements with<div>elements structured with CSS grid appears to work fairly well.One potential issue, though, is the nested grid items not inheriting the column widths of the parents. This would be solved by CSS Subgrid, but browser support is in it early stages.
I’ll keep at it.
could help with the grid implementation if it’s still needed
Thanks for sorting this @ndelangen, I’ve got a few things scheduled that I can potentially move around if my availability doesn’t align with others’.
I’m happy to host a online meeting, if desired?