PolymerElements / paper-checkbox

A Material Design checkbox
https://www.webcomponents.org/element/PolymerElements/paper-checkbox
58 stars 62 forks source link

Using calc() on --paper-checkbox-size throws error and no ink effect #181

Open MrPhishfood opened 7 years ago

MrPhishfood commented 7 years ago

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