search

helpscout / hsds-react

Help Scout Design System (HSDS) — React Component Library
MIT License
86 stars 17 forks source link

Extract RateAction css animation into Emoticon #1053

Closed plbabin closed 2 years ago

plbabin commented 2 years ago

Feature

CleanShot 2022-04-20 at 11 32 08

For some CSAT stuff we are working on, we though it would be nice to animate Emotion just like we do in RateAction.

We extracted the animation code into a css snippet that can be include anywhere when needed

https://github.com/helpscout/hsds-react/blob/eb95abd915327f549a499cd64ff045ca1caca8f6/src/components/Emoticon/Emoticon.css.js#L20-L54

We also add a prop (withAnimation) that will wrap the Emotion with an animation container, but the animation can be attach to any parent that contain an Emoticon component through the css snippet

Popover

CleanShot 2022-04-20 at 12 49 22

We also add a new renderAnimation prop to Popover that would allow us to change the wrapper element around Popover to customize the animation

cloudflare-pages[bot] commented 2 years ago

Deploying with  Cloudflare Pages  Cloudflare Pages

Latest commit: 3ef0568
Status: ✅  Deploy successful!
Preview URL: https://379507d0.hsds-react.pages.dev

View logs