Skip to content

feat(#662): replace tooltips in maps with dialog#737

Merged
latin-panda merged 16 commits intomainfrom
info-dialog-map
Mar 20, 2026
Merged

feat(#662): replace tooltips in maps with dialog#737
latin-panda merged 16 commits intomainfrom
info-dialog-map

Conversation

@latin-panda
Copy link
Collaborator

@latin-panda latin-panda commented Mar 16, 2026

Closes #662

I have verified this PR works in these browsers (latest versions):

  • Chrome
  • Firefox
  • Safari (macOS)
  • Safari (iOS)
  • Chrome for Android
  • Not applicable

What else has been done to verify that this works as intended?

Select one from map Screenshot 2026-03-16 at 6 23 52 PM
Geopoint with maps appearance Screenshot 2026-03-16 at 6 23 43 PM
Geotrace Screenshot 2026-03-16 at 9 14 28 PM Screenshot 2026-03-16 at 6 26 06 PM Screenshot 2026-03-16 at 6 26 21 PM Screenshot 2026-03-16 at 6 25 22 PM Screenshot 2026-03-16 at 6 25 33 PM Screenshot 2026-03-16 at 9 14 44 PM
Phone lanscape - info icon is hidden to not cover zoom buttons Screenshot 2026-03-16 at 9 14 07 PM Screenshot 2026-03-16 at 9 14 14 PM

Why is this the best possible solution? Were any other approaches considered?

How does this change affect users? Describe intentional changes to behavior and behavior that could have accidentally been affected by code changes. In other words, what are the regression risks?

Do we need any specific form for testing your changes? If so, please attach one.

What's changed

  • Removes all tooltips in maps
  • Adds a dialog to explain actions in the map
    • Shows description of advanced button only when mobile
  • Adds a help text under input in the edit coordinates feature
  • Adds style variables for commonly used spacing
  • Hides info button in landscape to not cover zoom buttons - we don't have full support in landscape yet, but this makes it usable.

@changeset-bot
Copy link

changeset-bot bot commented Mar 16, 2026

🦋 Changeset detected

Latest commit: 7b9be23

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

This PR includes changesets to release 1 package
Name Type
@getodk/web-forms Patch

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

@latin-panda latin-panda requested a review from garethbowen March 16, 2026 16:57
@latin-panda
Copy link
Collaborator Author

@garethbowen Could you please review when you have a chance? Tomorrow, I will make it available on a test server so Aly can share her feedback too.

Copy link
Collaborator

@garethbowen garethbowen left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Works well for me (Firefox desktop).

A few suggestions inline...

--odk-spacing-m: 10px;
--odk-spacing-l: 15px;
--odk-spacing-xl: 20px;
--odk-spacing-xxl: 30px;
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ooh I need this one! :)

}

@mixin map-block-sm {
@container map-block (max-height: 333px) {
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

CSS doesn't support CSS variables in media or container queries. Instead of adding SASS variables, we try to avoid doing so. I considered using mixins instead.

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If you're on board with using mixins for media or container queries, I'd be happy to open a follow-up PR for that small refactor :)

@latin-panda latin-panda requested a review from garethbowen March 19, 2026 17:42
Copy link
Collaborator

@garethbowen garethbowen left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Great work!

@latin-panda latin-panda merged commit dabf273 into main Mar 20, 2026
54 checks passed
@latin-panda latin-panda deleted the info-dialog-map branch March 20, 2026 05:16
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.

Improve tooltip responsiveness and mobile accessibility

3 participants