InsightSoftwareConsortium / InsightSoftwareConsortium/itk-viewer-bootstrap-ui

Toggle Button feedback when clicked

Open
#29 2 comments 0 reactions 0 assignees View on GitHub
Dominant language
JavaScript
Stars
4
Forks
6
PR merge metrics
No merged PRs in 30d

Description

When we click a "toggable" button like "Spin in 3D" the button takes focus, the background is light gray, and the button is toggled. Clicking the button again toggles the button, but the appearance does not change (because we are using dark gray background to indicated "isClicked" and the focus light gray background takes precedence.) Every time a button is clicked, we want the down/up feedback and its "isClicked" state to be visible.

The "annotation" button in commit 08aaa0903493a62eb42b3b04400a5b5f71b222b1 is almost there. 2 issues:
- It is hard to tell if the button is checked when hovering with the mouse. Fix by having hover not change the background, instead show the border like with focus.
- the "is checked" background is subtle. Lets darken the "checked" background style.

Lets make all our buttons constant with slightly modified "annotaiton" button above. Or something different? Open to ideas. Only big divergence from the react-bootstrap ToggleButton feel is the hover effect to avoid interfering with the "is checked" state:
https://react-bootstrap-v4.netlify.app/components/buttons/#checkbox--radio

Contributor guide

No contributing guide indexed for this repository

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.