New issue
Advanced search Search tips
Note: Color blocks (like or ) mean that a user may not be available. Tooltip shows the reason.

Issue 609922 link

Starred by 7 users

Issue metadata

Status: Fixed
Owner:
Closed: Aug 2016
Cc:
EstimatedDays: ----
NextAction: ----
OS: Linux , Windows , Chrome
Pri: 3
Type: Bug

Blocked on:
issue 630357

Blocking:
issue 571500



Sign in to add a comment

focus state for MD checkboxes

Project Member Reported by est...@chromium.org, May 6 2016

Issue description

what should MD checkboxes look like when checked? Here's the current appearance. Can we just get rid of the dotted line (rely on the blue outline) or do we need to replace the dotted line with something (like a blue roundrect)
 
TdJQoxEBQ9P.png
5.4 KB View Download
s/when checked/when focused/
I haven't design the new checkboxes yet, I'll let you know.
Here's what I specced out, similarly to how I specced the buttons states.
You can also find the .svg for prog rendering attached.I also included the a selected radio and checkbox in .svg so you can grab the stroke spec.

.svg are 2x based, no need for 1x. Simply scale.


radio and checkbox.zip
5.6 KB Download
SPEC-secondary-UI-radio-checkboxes.png
86.5 KB View Download
Labels: -Pri-2 Pri-3

Comment 5 by est...@chromium.org, May 18 2016

are there ripples? A hover state? (including on text next to the radio/checkbox)
So here's the best I can give you right now. Basically take the single tap ripple from core UI and apply it to the on-release state with a fade-in of the final state. Similar to the MDlite implementation you can find here: https://getmdl.io/components/index.html#toggles-section


SPEC-secondary-UI-radio-checkboxes.png
177 KB View Download

Comment 7 by rpop@chromium.org, May 20 2016

Owner: ----
Status: Available (was: Assigned)

Comment 8 by est...@chromium.org, May 31 2016

Owner: est...@chromium.org
Status: Started (was: Available)
Cc: sky@chromium.org
question for sgabriel - I assume, based on the on-release spec, that we don't want to show the focus state (or invisibly take focus) when the user clicks a checkbox or radio button. Is this assumption correct? If so this will be a behavioral change.
Project Member

Comment 10 by bugdroid1@chromium.org, Jun 2 2016

The following revision refers to this bug:
  https://chromium.googlesource.com/chromium/src.git/+/104196ecfadb1982e093752f6b01248b6448157a

commit 104196ecfadb1982e093752f6b01248b6448157a
Author: estade <estade@chromium.org>
Date: Thu Jun 02 01:37:53 2016

MD - update checkbox and radio buttons

TODO: ripples
TODO: animating between states

BUG= 609922 

Review-Url: https://codereview.chromium.org/2026833003
Cr-Commit-Position: refs/heads/master@{#397289}

[modify] https://crrev.com/104196ecfadb1982e093752f6b01248b6448157a/ui/gfx/BUILD.gn
[modify] https://crrev.com/104196ecfadb1982e093752f6b01248b6448157a/ui/gfx/canvas.cc
[modify] https://crrev.com/104196ecfadb1982e093752f6b01248b6448157a/ui/gfx/canvas.h
[add] https://crrev.com/104196ecfadb1982e093752f6b01248b6448157a/ui/gfx/vector_icons/checkbox_active.icon
[add] https://crrev.com/104196ecfadb1982e093752f6b01248b6448157a/ui/gfx/vector_icons/checkbox_normal.icon
[add] https://crrev.com/104196ecfadb1982e093752f6b01248b6448157a/ui/gfx/vector_icons/radio_button_active.icon
[add] https://crrev.com/104196ecfadb1982e093752f6b01248b6448157a/ui/gfx/vector_icons/radio_button_normal.icon
[modify] https://crrev.com/104196ecfadb1982e093752f6b01248b6448157a/ui/views/controls/button/checkbox.cc
[modify] https://crrev.com/104196ecfadb1982e093752f6b01248b6448157a/ui/views/controls/button/checkbox.h
[modify] https://crrev.com/104196ecfadb1982e093752f6b01248b6448157a/ui/views/controls/button/label_button.cc
[modify] https://crrev.com/104196ecfadb1982e093752f6b01248b6448157a/ui/views/controls/button/label_button.h
[modify] https://crrev.com/104196ecfadb1982e093752f6b01248b6448157a/ui/views/controls/button/radio_button.cc
[modify] https://crrev.com/104196ecfadb1982e093752f6b01248b6448157a/ui/views/controls/button/radio_button.h

Labels: -M-53 M-54
Project Member

Comment 12 by bugdroid1@chromium.org, Jul 8 2016

The following revision refers to this bug:
  https://chromium.googlesource.com/chromium/src.git/+/4e38e0aa9cfd669abc777748cc47646d3cb8ea46

commit 4e38e0aa9cfd669abc777748cc47646d3cb8ea46
Author: estade <estade@chromium.org>
Date: Fri Jul 08 17:22:13 2016

Add ripples to md checkboxes/radio buttons

Not entirely sure this is what Sebastien had in mind, but it seems
like a reasonable starting point. Will ping him to test it out after
landing.

BUG= 609922 

Review-Url: https://codereview.chromium.org/2032683003
Cr-Commit-Position: refs/heads/master@{#404426}

[modify] https://crrev.com/4e38e0aa9cfd669abc777748cc47646d3cb8ea46/ui/views/controls/button/checkbox.cc
[modify] https://crrev.com/4e38e0aa9cfd669abc777748cc47646d3cb8ea46/ui/views/controls/button/checkbox.h

Blockedon: 630357
Status: Fixed (was: Started)
rest of the work is tracked by  bug 635156 	
Cc: bettes@chromium.org ranjitkan@chromium.org tapted@chromium.org nyerramilli@chromium.org pkasting@chromium.org msrchandra@chromium.org bsep@chromium.org hwi@chromium.org
 Issue 728988  has been merged into this issue.

Sign in to add a comment