search

helpscout / hsds-react

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

FancyAnimationScroller hook improvements #1036

Closed tinkertrain closed 2 years ago

tinkertrain commented 2 years ago

Problem

Previously FancyAnimationScroller required fixed heights to animate the header: "from" and "to". This prevented having a header that could change in size.

Solution

Use a ResizeObserver on the header to detect the "from" height of the header instead of it being fixed. This way it can change at any time and the hook will know what size to use.

We also improve the signature of the hook by removing nested parameters and renaming arguments. It's all documented here.

See this ScrollableContainer story to see an example of its usage.

cloudflare-pages[bot] commented 2 years ago

Deploying with  Cloudflare Pages  Cloudflare Pages

Latest commit: 3d479c4
Status: ✅  Deploy successful!
Preview URL: https://b139e5db.hsds-react.pages.dev

View logs

tinkertrain commented 2 years ago

@luketlancaster It was already reviewed by design, this work doesn't change the interaction only allows you to have a dynamic initial height on the header 👍