Description
Setting the --paper-checkbox-size custom property to calc( anything ) will flag up an error but the result of the CSS calc() function will still show correctly on the checkbox. However there will be no ink effect when pressed.
--paper-checkbox-ink-size can be set directly to restore the ink effect and no error will be thrown.
Perhaps it would be better to throw a warning telling users to set --paper-checkbox-ink-size directly if they wish to use calc() on --paper-checkbox-size
First time reporting an error on Github, I'm not a really techy guy, How'd I do?
Expected outcome
No error message on console. paper-checkbox has ink effect.
Actual outcome
The paper-checkbox has no ink effect
on console:
"TypeError: Cannot read property '0' of null
at HTMLElement.<anonymous> (https://polygit.org/components/paper-checkbox/paper-checkbox.html:279:61)
at callMethod (https://polygit.org/components/polymer/lib/utils/render-status.html:51:16)
at runQueue (https://polygit.org/components/polymer/lib/utils/render-status.html:42:7)
at https://polygit.org/components/polymer/lib/utils/render-status.html:29:9"
When calculating the value of --paper-checkbox-ink-size on line 279
var units = checkboxSizeText.match(/[A-Za-z]+$/)[0] || 'px';
It looks for the CSS measurement unit on --paper-checkbox-size but when a bracket is encountered it'll throw the error.
Live Demo
https://jsbin.com/piholapude/1/edit?html,console,output
Steps to reproduce
set --paper-checkbox-size custom property to calc( 10px * 3)
Browsers Affected
Description
Setting the
--paper-checkbox-sizecustom property tocalc( anything )will flag up an error but the result of the CSScalc()function will still show correctly on the checkbox. However there will be no ink effect when pressed.--paper-checkbox-ink-sizecan be set directly to restore the ink effect and no error will be thrown.Perhaps it would be better to throw a warning telling users to set
--paper-checkbox-ink-sizedirectly if they wish to usecalc()on--paper-checkbox-sizeFirst time reporting an error on Github, I'm not a really techy guy, How'd I do?
Expected outcome
No error message on console.
paper-checkboxhas ink effect.Actual outcome
The
paper-checkboxhas no ink effecton console:
When calculating the value of
--paper-checkbox-ink-sizeon line 279var units = checkboxSizeText.match(/[A-Za-z]+$/)[0] || 'px';It looks for the CSS measurement unit on
--paper-checkbox-sizebut when a bracket is encountered it'll throw the error.Live Demo
https://jsbin.com/piholapude/1/edit?html,console,output
Steps to reproduce
set
--paper-checkbox-sizecustom property tocalc( 10px * 3)Browsers Affected