-
[OPIK-7437] [FE] feat: mobile onboarding swipe navigation and bigger CTAs (#7577)
frostbyte_neo 发布于
2026-07-23 13:22:35 +00:00 - [OPIK-7437] [FE] feat: mobile onboarding swipe navigation and bigger CTAs
- Allow swiping between onboarding steps: panels are laid out in a native
CSS scroll-snap container (snap-x mandatory), so drag/momentum/snapping
are handled by the browser; JS only syncs the step state and drives
button navigation via smooth scrollTo. - Guard scroll-state sync while a button-driven smooth scroll is in
flight so the stepper doesn't flicker between steps. - On step change the outgoing panel replays its staggered slide-fade
entrance in reverse (elements cascade out) while the incoming panel
staggers in, reusing the existing keyframes via animation-direction. - Bump onboarding CTAs to the lg size (44px hit area) per ticket.
Co-Authored-By: Claude Fable 5 noreply@anthropic.com
- [OPIK-7437] [FE] fix: address review on mobile onboarding swipe
- Clear the programmatic-scroll lock on wheel/pointer interactions too,
so a trackpad interruption can't leave step syncing suppressed. - Pause WelcomeStep's typing loop while its panel is offscreen.
- Rename the reverse-animation class to comet-onboarding-anim-reverse
per the frontend CSS naming convention. - Extract stepFromScroll/scrollPanelIntoView helpers out of the shell
component for readability.
Co-Authored-By: Claude Fable 5 noreply@anthropic.com
- [OPIK-7437] [FE] fix: make offscreen onboarding panels inert
Offscreen step panels stay mounted for native snap scrolling, so mark
them inert — out of the tab order, accessibility tree and pointer
events — to keep keyboard and screen-reader focus on the current step.Co-Authored-By: Claude Fable 5 noreply@anthropic.com
- [OPIK-7437] [FE] fix: final review findings on onboarding swipe
- Restore the departed panel's content after its reverse cascade
finishes (the reversed fill-mode parked it at opacity 0), so peeking
back mid-swipe never reveals a blank page. - Lift ConnectStep email/emailSent state to MobileOnboarding so the
animation-driven panel remounts can't wipe a typed address or
re-enable a duplicate send. - Clear the typing demo's pending start timer on visibility changes to
prevent a second concurrent tick chain.
Co-Authored-By: Claude Fable 5 noreply@anthropic.com
- [OPIK-7437] [FE] fix: address second review round on onboarding swipe
- Restore the departed panel via animationend debounce instead of a
fixed 800ms timer — TraceStep's cascade runs past 1700ms and the
early reset flickered it; a fallback cap covers reduced-motion where
no animation events fire. Also restore straggler "out" panels on
rapid navigation so a cancelled timer can't park one hidden. - Guard the prefers-reduced-motion matchMedia access with optional
chaining so environments without matchMedia can't throw. - Fall back to aria-hidden + disabled pointer events on browsers
without HTMLElement.inert support. - Add unit tests for the TypingText timer lifecycle (typing cadence,
inactive gating, visibility pause/resume, single-chain guarantee).
Co-Authored-By: Claude Fable 5 noreply@anthropic.com
- [OPIK-7437] [FE] refactor: simplify email prefill and panel-anim mapper
- Replace the prop-to-state sync effect for the ConnectStep email with a
derived value: store only what the user typed (null = untouched) and
fall back to the store's email, which may resolve after mount. - Extract the nested-ternary panelAnim mapper into a named
panelAnimForStepChange helper with early returns.
Co-Authored-By: Claude Fable 5 noreply@anthropic.com
- [OPIK-7437] [FE] refactor: extract swipe/animation logic into useSwipeableSteps hook
MobileOnboardingShell is now pure markup: the scroll/step sync state
machine, entrance/reverse animation sequencing, restore timers and the
inert handling live in useSwipeableSteps, consumed via three prop
getters (scrollerProps, getPanelProps, getContentProps).Co-Authored-By: Claude Fable 5 noreply@anthropic.com
Co-authored-by: Claude Fable 5 noreply@anthropic.com
下载附件