When you expect the parameter to receive number or boolean, confusions occur in WebComponents

[matuzalemsteles]

Hey guys,

I'm joking a bit with WebComponents in Clay Components and I've been experiencing some difficulties in passing the parameters in some use cases at deprecate/metal-clay-components#139.

Current behavior

number

When expected is a number and I try to pass in single or double quotation marks simply returns the following message:

Warning: Error: Warning: Invalid state passed to 'minValue'. Expected type 'number', but received type 'string'. Passed to 'ClayProgressBar'. 

This is stranger when in the component itself I pass a number to value="40" is passed as number and no error is returned. 😧

string

But when expected is a string and I want to pass a number as string is returned error.
The way I found to mock it, was by passing single quotes inside double quotes. for example label = '"10"'.

Warning: Error: Warning: Invalid state passed to 'label'. Expected type 'string', but received type 'number'. Passed to 'ClayBadge'.

boolean

When expected is boolean passed to paramerts visible='false' is return:

Warning: Error: Warning: Invalid state passed to 'visible'. Expected type 'boolean', but received type 'string'. Passed to 'ClayModal'. 

Expected behavior

Expected is matched to the cases above.

number

Pass the values as number.

minValue='10'

string

When I pass a 10 value that is passed as a string. How could we distinguish this?

boolean

When passing false value, it is like boolean.

[diegonvs]

I'd like to take this issue to enhance knowledge in WebComponents

[jbalsas]

Hey @diegonvs, you're free to try, but this will have more to do with how Metal.js defines STATE and passes it down than with CustomElements at all. Just FYI 😉

@Robert-Frampton had some ideas about how this should be addressed and we weren't contemplating working on this for a while. If you do take a look, comment first here to agree on the strategy before putting it too much work into it.