artsy / palette

Artsy's design system
https://palette-storybook.artsy.net/
MIT License
214 stars 45 forks source link

POC: Spike on doing <Collapse/> with a <details> element #1338

Closed erikdstock closed 10 months ago

erikdstock commented 10 months ago

In spired by a random question I asked in #web-practice yesterday... I thought this would be much easier, and by the end I'm not sure if this was any improvement over what Collapse already does.

I basically ported the implementation from this article to a react FC. lots of type errors but it seems to work, both as a details element (click on summary) and with an external control. I don't know if this would work in React Native. I didn't bother with the article's little carat animation or substituting my own icon in, but that would obviously be possible.

Not assigning so I don't create extra noise.

minor

Example: external controls via prop ![2023-12-07 15 23 17](https://github.com/artsy/palette/assets/9088720/fcf9699d-f76c-4eb6-91f6-b5a3fb6ba7fe)
Example: click-summary controls ![2023-12-07 15 23 34](https://github.com/artsy/palette/assets/9088720/cdaaa3cc-6ae8-44c8-ba44-b696e553bb63)
erikdstock commented 10 months ago

Closing, thanks all for the discussion in slacc