Skip to content

Comments

refactor: clean up onboarding scroll, props, and magic values#4154

Closed
devin-ai-integration[bot] wants to merge 1 commit intoc-branch-2from
devin/1771745575-refactor-onboarding
Closed

refactor: clean up onboarding scroll, props, and magic values#4154
devin-ai-integration[bot] wants to merge 1 commit intoc-branch-2from
devin/1771745575-refactor-onboarding

Conversation

@devin-ai-integration
Copy link
Contributor

refactor: clean up onboarding scroll, props, and magic values

Summary

Refactors the onboarding improvements from #4153 to reduce fragility and hardcoding while keeping the same UX behavior:

  • Self-contained scroll: Moved scroll-to-active-step logic from the parent (TabContentOnboarding) into OnboardingSection itself. Each section now owns a useRef and scrolls itself into view when it becomes active. This eliminates the scrollRef + querySelector('[data-step="..."]') pattern and the stepId / data-step coupling between parent and child.
  • Named constants: Extracted SCROLL_DELAY_MS (350) and DEFAULT_ICON_SIZE (14) to replace magic numbers.
  • BeforeLogin cleanup: Removed the unused onContinue prop (was aliased to _onContinue and never used). Renamed triggeredautoSignInCompleted for clarity.
  • Icon size default: Social icon entries use a shared DEFAULT_ICON_SIZE instead of repeating size: 14 on each item; only overrides where needed (X icon at 10).

Review & Testing Checklist for Human

  • Scroll behavior on step transitions: The scroll logic now lives inside OnboardingSection and fires via useEffect when isActive becomes true. Verify that smooth scrolling still works correctly when advancing/going back through steps — especially the transition from "upcoming" (component returns null, no DOM) to "active" (component renders, ref attaches, effect fires after render with 350ms delay).
  • Hook ordering before early return in OnboardingSection: useRef and useEffect are called before the if (!status || status === "upcoming") return null guard. This is required by React's rules of hooks but worth confirming there are no edge-case issues on mount/unmount cycles.
  • Icon size ...rest spread pattern in final.tsx: The "size" in rest ? rest.size : DEFAULT_ICON_SIZE approach works with as const but is slightly unconventional — confirm it reads well and TypeScript is happy with it in CI.

Notes

- Move scroll-to-active logic into OnboardingSection via useRef + useEffect (self-contained)
- Remove stepId prop, data-step attribute, and querySelector pattern from parent
- Extract SCROLL_DELAY_MS and DEFAULT_ICON_SIZE named constants
- Remove unused onContinue prop from BeforeLogin
- Rename 'triggered' to 'autoSignInCompleted' for clarity

Co-Authored-By: yujonglee <yujonglee.dev@gmail.com>
@devin-ai-integration
Copy link
Contributor Author

🤖 Devin AI Engineer

I'll be helping with this pull request! Here's what you should know:

✅ I will automatically:

  • Address comments on this PR that start with 'DevinAI' or '@devin'.
  • Look at CI failures and help fix them

Note: I can only respond to comments from users who have write access to this repository.

⚙️ Control Options:

  • Disable automatic comment and CI monitoring

@yujonglee yujonglee closed this Feb 22, 2026
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.

1 participant