Skip to content
This repository has been archived by the owner on Feb 1, 2024. It is now read-only.

Use popovers for help text and match PPE checkbox style to contributor overlap #1059

Merged
merged 3 commits into from Jul 23, 2020

Conversation

jwalgran
Copy link
Contributor

@jwalgran jwalgran commented Jul 22, 2020

Overview

Replace the Tooltip on the search sidebar with a Popover to avoid problems on mobile, add a Popover for PPE help, and match the PPE checkbox style to contributor overlap checkbox style.

Connects #1047

Demo

Screen Shot 2020-07-22 at 3 40 46 PM

Screen Shot 2020-07-22 at 3 41 54 PM

Screen Shot 2020-07-22 at 3 20 31 PM

Testing Instructions

  • Verify both popovers can be opened and closed on desktop and mobile

Checklist

  • fixup! commits have been squashed
  • CI passes after rebase
  • CHANGELOG.md updated with summary of features or fixes, following Keep a Changelog guidelines

The Tooltip could not be easily closed on a phone-size screen. The new
Popover-based implementation is based on the Popover documentation

https://v3.material-ui.com/utils/popover/

We reduced the font size in the popover so it would fit comfortable in a 240x320
screen.
We add an info button with explanatory text for the PPE checkbox and we restyle
and relabel the checkbox to match the contributor overlap checkbox.
Copy link

@mmcfarland mmcfarland left a comment

Choose a reason for hiding this comment

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

I was only able to use the dev tools simulators to test this, and for screens larger than the iPhone 5 it fit nicely. I'm not sure if my attempts to use BrowserStack and ngrok for my local device failed due to the way I am using port forwarding to access a remote workstation on my development laptop, or if it has to do with the project setup.

@mmcfarland mmcfarland assigned jwalgran and unassigned mmcfarland Jul 22, 2020
@jwalgran
Copy link
Contributor Author

Thanks for the review.

@jwalgran jwalgran merged commit 67c0d3a into develop Jul 23, 2020
@jwalgran jwalgran deleted the feature/jcw/ppe-text-changes branch July 23, 2020 15:32
@jwalgran
Copy link
Contributor Author

@designmatty Thanks for suggesting switching the OAR "more information" feature from Tooltips to Popovers. It worked out well.

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

2 participants