polymerelements / paper-checkbox Goto Github PK
View Code? Open in Web Editor NEWA Material Design checkbox
Home Page: https://www.webcomponents.org/element/PolymerElements/paper-checkbox
A Material Design checkbox
Home Page: https://www.webcomponents.org/element/PolymerElements/paper-checkbox
The documentation for paper-checkbox
says that the toggles
flag has a default of false, however this does not appear to be the case:
Due to Polymer/polymer#1812 it is impossible to use the following markup to clear the toggles
flag:
<paper-checkbox toggles="false>
What is the recommended way to set this property in markup?
For our work on Chrome History UI we need to make paper-checkbox slightly smaller (16x16). It would be good to be able to change the width and height with css variables as in iron-icon (--paper-checkbox-width
).
Note: Please note that the first rounds of accessibility testing / issue reporting were done using Chrome on Mac with VoiceOver enabled, as well as Chrome on Chrome OS with ChromeVox enabled. This next round was done on the Windows platform, on both Chrome and Firefox with the NVDA screen reader enabled. Once the team addresses the issues across platforms and screen readers, we will also do a final test using Windows and the JAWS screen reader, a heavily used combo that certainly needs to work smoothly.
Issues:
Firefox / NVDA:
When navigating between checkboxes, I hear ""blank"" as if NVDA is identifying that the white space is an item that should be read aloud. This occurs after reading the longer checkbox descriptions (e.g. ""notify me about updates to apps""). This does not occur at the bottom of the page on the checkboxes without sub descriptions.
"
Links within the checkbox label don't receive a click events. Instead, any interaction with the checkbox only toggles the checked state.
Clicked links should follow the href, not to toggle the checked property.
Clicking a link within the checkbox label doesn't follow the link. It just toggles the checked state.
<paper-checkbox>This is the label <a href="http://google.com">with a link</a>.</paper-checkbox>
Error: Uncaught TypeError: this._ripple.uiDownAction is not a function
The issue here is a bit difficult to track down but essentially I'm using paper-checkbox and paper-behaviors. The issue only shows up on first click of each instantiated item after that its fine. The checkbox has behaviors and doesn't act like its broken, but there is a console error. I included an image of the console. Using newest version of chrome, serving with gulp.
my use:
paper-checkbox checked="{{task.completed}}"></paper-checkbox
my imports:
paper-behaviors/paper-button-behavior
paper-behaviors/paper-inky-focus-behavior
paper-behaviors/paper-ripple-behavior
paper-checkbox/paper-checkbox
paper-behaviors/paper-checked-element-behavior
paper-checkbox sets the aria-pressed attribute on itself, in addition to the aria-checked attribute (-pressed mirrors -checked). This causes screen readers (at least ChromeVox) to announce that it's pressed (or not pressed) in addition to announcing that it's checked.
This is redundant/verbose, and I think not the intended use of aria-pressed (only for toggle buttons, see: http://www.w3.org/TR/wai-aria/states_and_properties#aria-pressed).
The element works very well on Safari/iPhone however behavior is slightly lagging on Chrome/Android, when multiple checkboxes are visible below each other and quickly toggling the items, not every tap is registered properly.
When a checkbox with the noink attribute is right-clicked, it should not show any ripple effect at all.
The checkbox has a circle appear when right-clicked.
paper-checkbox
element in the page.paper-checkbox
element.This seemed to fix the problem for me:
paper-checkbox {
--paper-checkbox-unchecked-ink-color: transparent;
--paper-checkbox-checked-ink-color: transparent;
}
Hello!
In my app developed in Ruby on Rails, rel import for css not work, I like to know why use import instead a rel="stylesheet", because I changed this and worked.
Thanks, and sorry for bad english =/
If you put anchor in checkbox it is not possible to navigate to it. For example:
<paper-checkbox>I accept <a href="#">Terms and Conditions</a></paper-checkbox>
<paper-checkbox noripple></paper-checkbox>
This can be useful when the checkbox is inside an element which also has a ripple.
Hey all,
Sorry if this has been brought up before, but I was not able to find an answer to my question. Basically, I would like to switch the label and checkbox positions for our system, but I haven't found a way to do this. This is what it looks like currently.
I quickly photoshopped what I want it to look like. Is it possible to do this under the current version?
Thanks!
Not sure if this is the proper place to report this or if it should be an issue with webcomponents.js or vulcanize.
In the Safari Browser, a non-vulcanized paper-checkbox works perfectly. Once vulcanize takes place the actual checkbox does not render (only the label is visible) and the paper-ripple covers everything above paper-checkbox which results in a ripple no matter where on the page above the checkbox a click occurs.
Investigation into this shows that the styles for the "paper-checkbox #checkbox.paper-checkbox" are not present in Safari for a vulcanized paper-checkbox. I did not compare styles going up the DOM tree so not sure if something is missing there or not.
UPDATE 1:
Don't know if this helps or just clutters this issue. But, if I include these styles in my CSS it fixes the issue I described above (copied from Chrome Developer Tools and pasted into stylesheet):
paper-checkbox {
display: inline-block;
white-space: nowrap;
}
background-color: @default-primary-color;
border-color: @default-primary-color;
}
display: inline-block;
position: relative;
width: 18px;
height: 18px;
cursor: pointer;
-webkit-transform: translateZ(0);
transform: translateZ(0);
vertical-align: middle;
}
position: relative;
display: inline-block;
vertical-align: middle;
padding-left: 8px;
white-space: normal;
pointer-events: none;
}
position: relative;
box-sizing: border-box;
height: 100%;
border: solid 2px;
border-radius: 2px;
pointer-events: none;
-webkit-transition: background-color 140ms, border-color 140ms;
transition: background-color 140ms, border-color 140ms;
}
-webkit-animation: checkmark-expand 140ms ease-out forwards;
animation: checkmark-expand 140ms ease-out forwards;
}
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
position: absolute;
top: -1px;
left: 4px;
width: 5px;
height: 10px;
border-style: solid;
border-top: none;
border-left: none;
border-right-width: 2px;
border-bottom-width: 2px;
border-color: white;
}
Sizing the paper-checkbox
element in any way such that the label starts to need to wrap causes the label to flow outside of the width of the element. The label appears to not wrap for a width that of the checkbox div outside of the entire element. In other words, getting rid of the checkbox div fixes the issue.
Below is the usage of the checkbox in my app (excuse the label 😝):
And here is a reduced test case.
The issue is present in latest Firefox security release (44.0), as well as Chrome 50.0.2633.3. I don't have access to others.
Using paper-checkboxes, I've hit a scenario where I would like to sometimes ignore all user-input sent to a paper-checkbox.
Reading the docs, toggles=false
sounds like it might be what I'm looking for. However, I cannot get toggles to do anything most of the time. I'm able to prevent the user from checking an unchecked box (over in iron-button-state, active is always set to "false" whenever toggles is false) - inconsistently.
Is this how the toggles attribute should work?
disabled
might really be what I'm looking for, instead... I just wanted some clarification on toggles
:host-context([dir="rtl"]) #ink
should be
#ink:dir(rtl)
I think?
:host-context and attribute selectors will be expensive.
I have some issues like this
testChecked = false;
i use this attribute checked="{{testChecked}}" but its not working, this checkbox always checked.
As per title, when I place a <paper-checkbox>
inside a <template>
it will trigger the _forwardInstanceProp
with initialized checked
state, whilst other elements do not do this. When I tried reproducing this in a simple scenario (with Templatizr
) both seemed to behave exactly the same way (triggering listeners and the like at the same points), however in conjuction with Templatizr
there is a difference somewhere.
I've added styling for the paper-checkbox, but the --paper-checkbox-label-spacing attribute seems to be ignored. I've tried setting it to different values, but the spacing between the box and label is always 8px. Modifying other attributes, such as --paper-checkbox-checked-color, works as expected.
on paper-checkbox (v1.0.5) demo page:
tab
key to focus one of the checkboxenter
/spacebar
to toggle the checkbox (works fine as expected)tab
key to focus the next checkboxenter
/spacebar
again to toggle the checkbox (not working!)Since the latest update (1.0.6) my labels are not visible on paper-checkbox.
It appears to be related to the addition of a trim() call on line 113 of paper-checkbox.html.
Once the label has been hidden, changes to <content></content>
do not show the label again.
It only affects labels that have a binding as text labels have a value when the paper-checkbox is attached.
<dom-module id="polymer-test">
<template>
<paper-checkbox>{{label}}</paper-checkbox>
</template>
</dom-module>
<script>
Polymer({
is: 'polymer-test',
ready: function () {
this.label = 'Label Value';
}
});
</script>
<polymer-test></polymer-test>
An indeterminate state would be very useful, and in fact necessary in my case, which is that of a treeview of checkable items.
An idea for an API: an indeterminate
property that when set interprets the checked
property as true
for checked, false
for unchecked and null
or undefined
as indeterminate.
Code:
<div style="-webkit-column-count:4;">
<paper-checkbox>Checkbox</paper-checkbox>
<paper-checkbox>Checkbox</paper-checkbox>
<paper-checkbox>Checkbox</paper-checkbox>
<paper-checkbox>Checkbox</paper-checkbox>
<paper-checkbox>Checkbox</paper-checkbox>
<paper-checkbox>Checkbox</paper-checkbox>
<paper-checkbox>Checkbox</paper-checkbox>
<paper-checkbox>Checkbox</paper-checkbox>
<paper-checkbox>Checkbox</paper-checkbox>
<paper-checkbox>Checkbox</paper-checkbox>
</div>
Click some checkboxes to turn them on, and observe and for some reason the white checkmark is only visible in the first column, the rest show a solid square when checked
At https://www.polymer-project.org/1.0/components/paper-elements/demo.html#paper-checkbox, if you tab among checkboxes, there's no indication which one has focus.
See also thomaspark/bootswatch#505 (comment)
Right now, the checkbox size is hardcoded to 18px.
It would be nice to expose a size variable somehow, maybe with calc
for the other elements that comprise the checkbox to adjust to user given sizes.
Using paper-checkbox
in a nested dom-if
template is causing more than one checkbox to change state when I interact with one.
<template is='dom-bind'>
<table>
<template is="dom-repeat" items="[[true, false, true],[false, false, true],[true, false, true]]" as="row">
<tr>
<template is="dom-repeat" items="[[row]]" as="col">
<td><paper-checkbox checked="{{col}}">{{col}}</paper-checkbox>
</td>
</template>
</tr>
</template>
</table>
</template>
Only one checkbox would change at a time
More than one checkbox changes
https://jsbin.com/hidaridoja/edit?html,output
Click multiple times in the checkboxes in the middle column. Eventually you will see how more than one checkbox changes state.
Since users often create many instances of this element, it will especially benefit from performance optimization. Consider lazily creating optional or user initiated functionality (e.g. paper-ripple), leveraging behaviors over composition (e.g. paper-material), streamlining styling, and eliminating or simplifying features (e.g. behaviors)
Is it possible to extend this element? I have seen the docs for 0.5 but that is outdated and doesn't support this version. Any other link to doc that tells how to extend this 1.0?
Btw. if you use native HTML input
element like it's used in paper-input
with base element paper-input-container
then it will be much easy to bind it with other libraries like AngularJS.
Go to
Click a checkbox.
Switch to another tab.
Switch back.
The checkbox ripples for no reason.
Clicking in the URL bar and then back into the webcontents instead of switching tabs also exhibits this behavior.
Hello,
it seems paper-checkbox (and paper-toggle) doesn't implement Polymer.IronFormElementBehavior, so it's not handled by the iron-form element (at least the .serialize() output)
Anthony
For lists with a "Select All" checkbox, or for displays like this compatibility matrix, an in-between (commonly called indeterminate
) state is necessary. Here are some examples:
I propose the following addition:
<paper-checkbox indeterminate> label</paper-checkbox>
Where this will always give the checkbox an indeterminate state. This might override the checked state, so the following:
<paper-checkbox indeterminate> label</paper-checkbox>
<paper-checkbox checked indeterminate> label</paper-checkbox>
<paper-checkbox indeterminate checked> label</paper-checkbox>
would all render exactly the same way.
Currently <paper-checkbox>Foo</paper-checkbox
will set foo
as the value for aria-label
.
If, however, the text content is passed to paper-checkbox
via a content element, it will set aria-label
to empty space, which forces the screen reader to read (silence), unchecked, checkbox
.
ex:
<!-- todo-item.html -->
<template>
<paper-checkbox>
<content></content>
</paper-checkbox>
</template>
<!-- todo-list.html -->
<template>
<template is="dom-repeat" items="{{todos}}">
<todo-item>
<span>{{item.title}}</span>
</todo-item>
</template>
</template>
It seems that I have to wrap the item.title
in a span because just doing <todo-item>{{item.title}}</todo-item>
renders {{item.title}}
on screen.
In paper-checkbox, one can style pair: unchecked-background-color
and unchecked-color
Unfortunately for checked
style there is only checked-color
attribute.
Could you please add --paper-checkbox-checked-background-color
style attribute in order to complement the functionality of styling?
Thank you in advance
Here are the a11y developer tools audit results:
[Warning] Text elements should have a reasonable contrast ratio (1)
See AX_COLOR_01 for more information.
Not applicable tests (7)
Passing tests (7)
For the most part, the contrast looks good to me. The only item that is too light is the disabled unchecked checkbox, which I understand is light intentionally. If we can make that just slightly more visible, that would be great.
Hello,
is there any reason to have a translateZ(0) on the checkbox container ? It creates a layer that needs compositing and might affect our goal of 60 fps on mobile devices.
Thanks
Could you add Indeterminate state just like element tristate-checkbox?
I have an object from firebase-document with booleans inside it and am using two way databinding to update them. If the object changes the checkmark and its value change accordingly but the background-color of the checkbox is never changed.
#94 fixed misused comparison operators in a few assertions, revealing that the tests they were part of actually failed.
Demo code in: https://github.com/PolymerElements/paper-checkbox/blob/master/demo/index.html
does no reflect what we see in: https://elements.polymer-project.org/elements/paper-checkbox?view=demo:demo/index.html&active=paper-checkbox
See https://github.com/PolymerElements/paper-checkbox/blob/03efcd3/paper-checkbox.html#L268.
PaperInkyFocusBehaviorImpl should only be referenced internally by PaperInkyFocusBehavior.
Could you please add style variables to #checkbox background-color
and #checkmark border-color
?
Thank you in advance
Would also be nice to be able to set the checked label color.
I'm plugging this with !important style in my CSS - maybe there is a better way?
paper-checkbox[checked] div {
color: green !important;
}
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.