Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: Display navigation controls within forms #400

Merged
merged 5 commits into from
Feb 19, 2025
Merged

Conversation

evadecker
Copy link
Member

@evadecker evadecker commented Feb 17, 2025

What changed?

Create a new FormNavigation component which displays a next button, previous button, and popover menu with all questions in a form. Resolves #324

CleanShot.2025-02-16.at.20.37.11.mp4

Why?

Make it easy for users to navigate through a form and jump to specific questions.

How was this change made?

Created a new IntersectionObserver to monitor the currently-in-view question and update internal React state and the URL hash. Use that state to populate the menu and the URLs for the next and previous buttons.

How was this tested?

  • Added unit tests
  • Manual testing

Anything else?

Added some basic tests for FormContainer.

Fix before merge:

  • The "back" button on the form (labeled "save and exit") currently cycles through all of the updates to the hash in the URL. We should prevent hash changes from modifying the history of the page.

@evadecker evadecker requested a review from mbbischoff February 17, 2025 02:19
Copy link

changeset-bot bot commented Feb 17, 2025

🦋 Changeset detected

Latest commit: 22bc420

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package
Name Type
namesake Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@github-actions github-actions bot added the frontend CSS, HTML, and JS changes label Feb 17, 2025
@evadecker evadecker changed the title New FormNavigation component feat: Display navigation controls within forms Feb 17, 2025
Copy link
Contributor

github-actions bot commented Feb 17, 2025

Coverage Report

Status Category Percentage Covered / Total
🔵 Lines 54.81%
⬆️ +1.00%
4407 / 8040
🔵 Statements 54.81%
⬆️ +1.00%
4407 / 8040
🔵 Functions 59.93%
⬆️ +1.09%
199 / 332
🔵 Branches 81.91%
⬆️ +1.26%
394 / 481
File Coverage
File Stmts Branches Functions Lines Uncovered Lines
Changed Files
src/components/forms/FormContainer/FormContainer.tsx 90.9%
⬆️ +90.90%
100%
⬆️ +100.00%
50%
⬆️ +50.00%
90.9%
⬆️ +90.90%
27-28
src/components/forms/FormNavigation/FormNavigation.tsx 100% 94.73% 100% 100%
src/components/forms/FormSection/FormSection.tsx 100%
🟰 ±0%
100%
🟰 ±0%
100%
🟰 ±0%
100%
🟰 ±0%
Generated in workflow #385 for commit 22bc420 by the Vitest Coverage Report Action

Copy link

cloudflare-workers-and-pages bot commented Feb 17, 2025

Deploying namesake with  Cloudflare Pages  Cloudflare Pages

Latest commit: 22bc420
Status: ✅  Deploy successful!
Preview URL: https://241971aa.namesake-639.pages.dev
Branch Preview URL: https://form-navigation.namesake-639.pages.dev

View logs

@github-actions github-actions bot added the testing Unit and e2e tests label Feb 17, 2025
@evadecker evadecker added this to the Namesake v1.0 milestone Feb 17, 2025
@mbbischoff
Copy link
Contributor

Looks great. Ideas for design improvements that we might not care about now but might be ncie later:

  • Animate the change to the next / previous question
  • Indicate completed questions in the hamburger menu so you know what you’ve filled out and what you have left

@evadecker evadecker requested a review from mbbischoff February 19, 2025 00:04
@evadecker evadecker merged commit 76e55f5 into main Feb 19, 2025
11 checks passed
@evadecker evadecker deleted the form-navigation branch February 19, 2025 00:28
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
frontend CSS, HTML, and JS changes testing Unit and e2e tests
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Add prev/next navigation to form sections
2 participants