Improvement/scroll fade table#1072
Draft
JeanMarcMilletScality wants to merge 7 commits intodevelopment/1.0from
Draft
Improvement/scroll fade table#1072JeanMarcMilletScality wants to merge 7 commits intodevelopment/1.0from
JeanMarcMilletScality wants to merge 7 commits intodevelopment/1.0from
Conversation
Adds a zero-JS bottom fade effect via CSS Scroll-Driven Animations + mask-image. Applying class="scroll-fade" to any overflow-y: auto/scroll element gives a 2.5rem bottom gradient that auto-hides when the user reaches the end of the list — no React state, no scroll listeners. How it works: • @Property --scroll-fade-bottom (initial-value: 0rem) drives the mask-image gradient stop. • @Keyframes scroll-fade-out animates it 2.5rem → 0rem over the final 2.5rem of the scroll range (animation-range: calc(100% - 2.5rem) 100%). • fill-mode: both keeps the fade visible from scroll-top until near- bottom, then holds it hidden once fully scrolled. • When there is no overflow the scroll timeline is inactive, so the initial-value (0rem = no mask) applies — content is never clipped. Graceful degradation: browsers without scroll-driven animations (Firefox, Safari) get an inactive timeline → initial-value → no fade, no clipping. Requires Chrome/Edge 115+ for the fade effect to be active. Co-Authored-By: Claude Sonnet 4.6 (1M context) <noreply@anthropic.com>
Removes the .scroll-fade utility class in favour of a universal rule: @supports (animation-timeline: scroll()) { * { ... } } The scroll-driven animation is now active on every element, but only produces a visible effect when the element actually overflows — non- scrollable elements have an inactive scroll timeline, so the @Property initial-value (0rem) applies and the mask is a transparent no-op. Also adds animation-duration: 1ms as a workaround for the Gecko activation quirk (Firefox Nightly 136+, targeting stable in Firefox 151 ~May 2026 as part of Interop 2026). The value is ignored by scroll- driven animation progress but required to initialise Firefox's animation sampling loop. Uses individual animation-* longhands (not the shorthand) so that any more-specific component-level animation declaration overrides this rule without conflict. Co-Authored-By: Claude Sonnet 4.6 (1M context) <noreply@anthropic.com>
…orts guard Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Moves scrollbar.stories.tsx into a ScrollbarWrapper/ folder, converts it to typed StoryObj, and adds a guideline MDX covering the component purpose and the scroll-fade utility class. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Contributor
Hello jeanmarcmilletscality,My role is to assist you with the merge of this Available options
Available commands
Status report is not available. |
Contributor
Waiting for approvalThe following approvals are needed before I can proceed with the merge:
Peer approvals must include at least 1 approval from the following list: |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Add scroll fade effect in Table component