feat(ui): animate the date switch in the meeting week navigator - #5327
feat(ui): animate the date switch in the meeting week navigator#5327ux-git wants to merge 1 commit into
Conversation
The week label in the midweek editor swapped instantly, giving no sense of which way the schedule moved. Extract the arrow switcher into a shared DateNavigator component whose label slides and fades toward the clicked arrow, the same directional swap the clicker mode uses for its counts. - reusable global component for any date, week or month switcher - 320ms travel with a soft ease-out, mirrored in RTL - gradient mask only during the swap, so the resting label stays crisp - arrows are now icon buttons: focusable, labelled, with press feedback - honours prefers-reduced-motion
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
Warning Review limit reached
Next review available in: 33 minutes Enable usage-based reviews in Billing to review now. Otherwise, wait until the next included review is available. How can I continue?After more reviews become available, a review can be triggered using the To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based reviews. How do review limits work?CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan review availability. For paid Pro and Pro+ PR reviews, CodeRabbit uses adaptive limits for sustained high-volume activity. When a developer's recent PR review activity reaches the 95th percentile or higher among CodeRabbit users, additional reviews become available more gradually as earlier reviews age out of the rolling window. Please refer docs for additional details. Review details⚙️ Run configurationConfiguration used: Repository UI Review profile: CHILL Plan: Pro Plus Run ID: 📒 Files selected for processing (4)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
|
1 participant
Description
The
< week >switcher above the midweek meeting editor replaced its label instantly, so nothing told you which way the schedule had moved.This extracts that switcher into a shared
DateNavigatorcomponent in@components/, and gives the label a directional swap: clicking next pushes the current week out to the left while the new one arrives from the right, and back reverses it. It is the same directional swap the clicker mode uses when switching between the online and present counts, so the two read as one motion language.Details:
cubic-bezier(0.22, 1, 0.36, 1)), with the direction mirrored in RTL layouts.ButtonIcons — focusable, keyboard-operable, with translatedaria-labels and a visible focus ring. The outgoing label isaria-hidden.prefers-reduced-motiondisables the animation entirely.white-space: nowrapand centred, and a long locale simply fades toward the arrows instead of wrapping mid-flight.No new dependencies, no schema changes, no new translation keys — the arrow labels reuse the existing
tr_backandtr_next.Type of change
Checklist: