Provide way to document complex props, types, or add examples for React components

[joshblack]

For DataTable, there are certain props where it would be great to provide additional documentation for them as the type itself may be too complicated to show inline. For example, columns is currently only represented as Array<Column<Data>> and it would be helpful to document the interior type, Column, along with its descriptions of fields. For an overview of this type, visit the code here.

One alternative could be to allow for extension of the specific prop sections in order to further document a component and it's props. This shows up in sites like:

• https://reach.tech/accordion#accordion-props
• https://www.radix-ui.com/themes/docs/components/scroll-area, really only in the context of examples

Or it could show up as a popup similar to sites like:

• https://react-spectrum.adobe.com/react-spectrum/ComboBox.html#props

Finally, additional information could live in the description for the prop (however this would mean descriptions would be longer as in: https://mui.com/material-ui/api/pagination/)

[lesliecdubs]

👋 @joshblack am I correct in assuming this is a feature request for https://primer.style? If so, does it seem reasonable to assume the first step would be seeking design input on how to represent complex props/types there?

Trying to figure out the best place to triage this to 🤔

[joshblack]

@lesliecdubs definitely! Seems reasonable to me 👍

[tallys]

@mperrotti could you take a look at this and connect with @joshblack or would you like to bring this to Primer Patterns?

[mperrotti]

@tallys - I'm already in touch with @joshblack about this. I don't think it needs a Primer patterns session.