helpscout / hsds-react / 2164

94%

push

travis-ci

Page.Action: Add Sticky Feature (#617)

* Adding IntersectionObserver to Page.Actions

* Add basic styles for Page Actions Sticky Wrapper

* Finish building Page Actions sticky component

* Start re-working Page Actions tests

* Complete tests for Page.Actions

* Add docs for sticky feature in Page Actions

* Fine tune offset for sticky -> not-sticky

* Sticky Actions: Fix implementation for Firefox

This update adjusts the sticky detection by using the `intersectionRatio` prop,
rather than `isIntersecting` prop. This is due to the differences between how
Firefox calculations the intersection value vs. Chrome/Safari.

Firefox also has a strange issue re: horizontal calculation. Once the element
is intersection horizontally (y axis), the IntersectionObserver no longer
detects vertical (x) based intersections.

Because of this, I've hidden the sticky version of the Page Actions element
for Firefox for smaller viewports. The value is determined by the Page's
min media query support.

3408 of 3408 branches covered (100.0%)

Branch coverage included in aggregate %.

10630 of 10630 relevant lines covered (100.0%)

236.56 hits per line