Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add support for sticky items #55

Merged
merged 1 commit into from Jul 31, 2018
Merged

Add support for sticky items #55

merged 1 commit into from Jul 31, 2018

Conversation

clauderic
Copy link
Owner

@clauderic clauderic commented Jun 24, 2018

This PR adds a stickyIndices prop to add support for sticky headers:

The prop accepts an array of indices that should be made sticky (eg, stickyIndices={[0, 20, 50, 100]})

The solution relies on position: sticky, so it will only work in browsers that support that feature, but will degrade gracefully for other browsers.

It also works with horizontal lists:

How to test locally

Clone the project and check out this branch. Run yarn followed by npm start.

To-do

  • Update documentation
  • Add test coverage for stickyIndices
  • Update demo site

@codecov
Copy link

codecov bot commented Jun 24, 2018

Codecov Report

Merging #55 into master will increase coverage by 0.12%.
The diff coverage is 100%.

Impacted file tree graph

@@            Coverage Diff             @@
##           master      #55      +/-   ##
==========================================
+ Coverage   94.16%   94.28%   +0.12%     
==========================================
  Files           3        3              
  Lines         137      140       +3     
  Branches       17       17              
==========================================
+ Hits          129      132       +3     
  Misses          8        8
Impacted Files Coverage Δ
src/index.tsx 100% <100%> (ø) ⬆️
src/constants.ts 100% <100%> (ø) ⬆️

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 6d3e8a3...e881d57. Read the comment docs.

@jeroenransijn
Copy link

Would be awesome to get this PR in, let me know if I can help at all.

@jeroenransijn
Copy link

@clauderic do you need any help getting this over the finish line? I would love to move this in the Evergreen component library.

@clauderic clauderic merged commit cd80df3 into master Jul 31, 2018
@clauderic clauderic deleted the sticky-headers branch July 31, 2018 00:32
@jeroenransijn
Copy link

👍 Thanks @clauderic!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

2 participants