feat: add scroll-to-top button (001-scroll-to-top)#41
Merged
remarkablemark merged 15 commits intomasterfrom Mar 7, 2026
Merged
feat: add scroll-to-top button (001-scroll-to-top)#41remarkablemark merged 15 commits intomasterfrom
remarkablemark merged 15 commits intomasterfrom
Conversation
- Create feature spec for scroll-to-top button fixed to bottom-right - Define 3 user stories with prioritized user journeys - Specify 7 functional requirements for visibility and behavior - Add 5 measurable success criteria for performance and usability - Document edge cases for responsive behavior and accessibility - Include quality validation checklist Co-authored-by: Qwen-Coder <qwen-coder@alibabacloud.com>
- Document button content: upward arrow icon (Unicode/HTML entity) - Define scroll threshold: 50vh (half viewport height) for responsive behavior - Update FR-001 and add FR-008 with clarified requirements - Update Key Entities section with threshold specification - Add edge case for dynamic threshold recalculation on resize Co-authored-by: Qwen-Coder <qwen-coder@alibabacloud.com>
…spacing - Define button shape: circular (40-48px diameter) - Define accessibility: WCAG 2.1 AA (keyboard, focus, ARIA, screen reader) - Define button offset: 16px from bottom and right edges - Update FR-004 with spacing specification - Add FR-009 for circular shape requirement - Add FR-010 for WCAG 2.1 AA accessibility requirement Co-authored-by: Qwen-Coder <qwen-coder@alibabacloud.com>
- Add clarification: cursor pointer and hover background color change - Update FR-006 with explicit hover behavior specification Co-authored-by: Qwen-Coder <qwen-coder@alibabacloud.com>
- Create implementation plan with technical context and constitution check - Add research document: scroll handling, smooth scroll API, WCAG 2.1 AA, Tailwind - Add quickstart guide with implementation steps - Update QWEN.md agent context with feature technologies - All constitution gates pass (client-side, test coverage, accessibility, types, simplicity) Co-authored-by: Qwen-Coder <qwen-coder@alibabacloud.com>
- Remove duplicate technology entries from multiple features - Consolidate Active Technologies to single canonical list - Update Recent Changes with concise feature summary - Update last modified date Co-authored-by: Qwen-Coder <qwen-coder@alibabacloud.com>
- Generate 27 tasks organized by user story (US1, US2, US3) - Phase 1: Setup (2 tasks) - verify project structure - Phase 2: Foundational (2 tasks) - create useScrollPosition hook + test - Phase 3: User Story 1 (5 tasks) - core scroll-to-top functionality - Phase 4: User Story 2 (2 tasks) - responsive visibility at XL breakpoint - Phase 5: User Story 3 (10 tasks) - fixed positioning + WCAG 2.1 AA accessibility - Phase 6: Polish (6 tasks) - quality gates and validation - Include parallel execution opportunities and MVP scope Co-authored-by: Qwen-Coder <qwen-coder@alibabacloud.com>
- Standardize button size to 48px across clarifications and FR-009 - Remove vague 'design system' phrasing from FR-009 - Reframe SC-004 as testable interaction criterion Co-authored-by: Qwen-Coder <qwen-coder@alibabacloud.com>
- Create useScrollPosition hook using useSyncExternalStore pattern - Create ScrollToTop component with fixed bottom-right positioning - Button appears when scrolled past 50vh on screens ≥1280px (XL) - WCAG 2.1 AA accessible: keyboard support, ARIA label, focus ring - Respects prefers-reduced-motion for scroll animation - 100% test coverage with 25 new tests Co-authored-by: Qwen-Coder <qwen-coder@alibabacloud.com>
- Native <button> element already handles Enter/Space automatically - Removed unnecessary onKeyDown handler and related tests - Keyboard accessibility works by default with semantic HTML Co-authored-by: Qwen-Coder <qwen-coder@alibabacloud.com>
- Match bg-gray-100 with other buttons (ViewToggle, DiffMethodToggle) - Add border for better visibility - Hover changes to blue (bg-blue-500) matching active button state - Dark mode: blue hover on dark gray background Co-authored-by: Qwen-Coder <qwen-coder@alibabacloud.com>
- ViewToggle: unified and side-by-side buttons - DiffMethodToggle: characters, words, and lines buttons - Consistent with ScrollToTop button styling Co-authored-by: Qwen-Coder <qwen-coder@alibabacloud.com>
- Remove ScrollToTopProps interface (component has no props) - Remove UseScrollPositionOptions export (internal only) - Remove UseScrollPositionReturn export (internal only) Co-authored-by: Qwen-Coder <qwen-coder@alibabacloud.com>
- useScrollPosition: remove 3 redundant threshold tests, keep numeric threshold and default options tests for coverage - getDiffLineClasses: remove 2 repetitive CSS assertion tests - useDiff: remove 5 tests (redundant null checks, detects added/removed, unicode); consolidate lines array tests Result: 135 → 127 tests, maintains 100% coverage Co-authored-by: Qwen-Coder <qwen-coder@alibabacloud.com>
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## master #41 +/- ##
=========================================
Coverage 100.00% 100.00%
=========================================
Files 12 14 +2
Lines 186 217 +31
Branches 59 67 +8
=========================================
+ Hits 186 217 +31 ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
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
1 participant
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.
What is the motivation for this pull request?
feat: add scroll-to-top button (
001-scroll-to-top)Checklist: