polymerelements / gold-cc-expiration-input Goto Github PK
View Code? Open in Web Editor NEWAn input element that only allows credit card expiration dates
Home Page: https://webcomponents.org/element/PolymerElements/gold-cc-expiration-input
An input element that only allows credit card expiration dates
Home Page: https://webcomponents.org/element/PolymerElements/gold-cc-expiration-input
Tabbing into this input from another input, first shows focus rectangle around whole control, instead of setting focus into month field.
Tested on Chrome.
(Issue based off Polymer website demo at time of entry)
gold-cc-expiration-input does not accept numbers typed via the numpad as valid.
gold-cc-expiration-input/date-input.html:58:7
Property 'disabled' bound to attribute 'disabled$' not found in 'properties' for element 'date-input'
gold-cc-expiration-input/date-input.html:58:7
Property 'autofocus' bound to attribute 'autofocus$' not found in 'properties' for element 'date-input'
gold-cc-expiration-input/date-input.html:58:7
Property 'inputmode' bound to attribute 'inputmode$' not found in 'properties' for element 'date-input'
gold-cc-expiration-input/date-input.html:58:7
Property 'placeholder' bound to attribute 'placeholder$' not found in 'properties' for element 'date-input'
gold-cc-expiration-input/date-input.html:58:7
Property 'readonly' bound to attribute 'readonly$' not found in 'properties' for element 'date-input'
gold-cc-expiration-input/date-input.html:75:7
Property 'disabled' bound to attribute 'disabled$' not found in 'properties' for element 'date-input'
gold-cc-expiration-input/date-input.html:75:7
Property 'autofocus' bound to attribute 'autofocus$' not found in 'properties' for element 'date-input'
gold-cc-expiration-input/date-input.html:75:7
Property 'inputmode' bound to attribute 'inputmode$' not found in 'properties' for element 'date-input'
gold-cc-expiration-input/date-input.html:75:7
Property 'placeholder' bound to attribute 'placeholder$' not found in 'properties' for element 'date-input'
gold-cc-expiration-input/date-input.html:75:7
Property 'readonly' bound to attribute 'readonly$' not found in 'properties' for element 'date-input'
e.g. 12/15; 11/15 works as expected
In my project on Chrome, version 1.0.3 the bottom line is lower than in other paper-input based elements. This is noticeable when placing gold-cc-expiration-input in the same row as another input. version 1.0.2 looks fine on Chrome. On Firefox both versions have too low bottom line.
In https://github.com/notwaldorf/polymer-gold-elements-demo both versions look fine on Chrome and with too low bottom line on Firefox.
After comparing my project with the gold elements demo it turns out that with paper-input 1.0.0 dependency is what makes gold-cc-expiration-input look fine on Chrome. paper-input 1.0.3 causes the too low bottom line on Chrome. Either way on Firefox this always happens.
It would be great to specify "YY" placeholder for year field, and "MM" for month field.
But currently the same one placeholder is used for both
https://github.com/PolymerElements/gold-cc-expiration-input/blob/master/date-input.html#L72
https://github.com/PolymerElements/gold-cc-expiration-input/blob/master/date-input.html#L90
gold-cc-expiration-input's code is not following the same standards as other elements. gold-cc-expiration-input's javascript code is outside the . All other elements have javascript code inside the tags
...
<dom-module>
...
</dom-module>
<script>
...
</script>
...
<dom-module>
...
<script>
...
</script>
</dom-module>
A similar issue has been fixed for other elements like paper-fab. Please check PolymerElements/paper-fab#53 for details.
When supplying a 'name' attribute to gold-cc-expiration-input, it does not appear to be reflected on any contained html form element. Consequently it is not possible to get a value using form.<element_name>.value
Realise there is some complexity here given that there are actually 2 inputs, but it's a little unintuitive given that other form elements do not have this behaviour/constraint. Perhaps there should be a hidden form element whose name/value achieve the desired outcome?
Issues with the hint text:
On Chrome / Mac / VoiceOver: The hint text for MM / YY is reading as "blank".
On Chrome on Windows with NVDA, it just reads as "edit" without any context of the hint text.
On Firefox with NVDA, the experience is similar and reads as "edit" but also speaks "has auto complete" which I don't think is true.
Please note that Chrome OS + ChromeVox is able to read the hint text MM / YY just fine, but this is not the case on other OS / browser / screen reader combos.
Contrast: the contrast of the hint text for MM / YY is poor. Please make the text a bit darker.
Audit results:
[Severe] Controls and media elements should have labels (8)
[Warning] Text elements should have a reasonable contrast ratio (6)
Not applicable tests (9)
Has this element (or all the Gold elements for that concern) been deprecated?
If not will they be upgraded to Polymer 2?
I don't see any branch letting me suppose so at the moment
When filling out an expiration date it would be nice if typing 1/16
would work just like 1
Tab 16
Here's the PR that turns on shadow dom: #33
Check this jsbin https://jsbin.com/ginujab/edit?html,output
At the beginning input has a value "02/24"
When I erase "4" value becomes "02/2"
When I erase last digit - "2" - input value does not change and remains "02/2"
Even if I delete everything from input, value remains "02/2"
It happens because of this condition in the code https://github.com/PolymerElements/gold-cc-expiration-input/blob/master/gold-cc-expiration-input.html#L151
As a developer, when user deletes some digits, I want to get actual value which is in the input, even if value is invalid.
When user deletes some digits, I get some strange non-actual and invalid value "02/2" even if there's nothing in inputs or only "0" or "02"..
https://jsbin.com/ginujab/edit?html,output
Check this jsbin https://jsbin.com/ginujab/edit?html,output
At the beginning input has a value "02/24"
Erase "4" - value will become "02/2"
Erase last digit - "2" - input value will not change and will remain "02/2"
Even if you delete everything from input, value remains "02/2"
Label is always floating in gold-cc-expiration-input
You can see here in code https://github.com/PolymerElements/gold-cc-expiration-input/blob/master/gold-cc-expiration-input.html#L63 that always-float-label is always set.
<paper-input-container id="container"
always-float-label
attr-for-value="date"
For example, in gold-cc-input everything is OK
https://github.com/PolymerElements/gold-cc-input/blob/master/gold-cc-input.html#L87
<paper-input-container id="container"
disabled$="[[disabled]]"
no-label-float="[[noLabelFloat]]"
always-float-label="[[_computeAlwaysFloatLabel(alwaysFloatLabel,placeholder)]]"
Please, make no-label-float working for gold-cc-expiration-input
All other gold inputs make label floating only when user inputs data, this input label is floating always.
When calling form.reset(), form fields are all visibly cleared, but the actual value of the gold-cc-expiration-input is not.
Related to #23.
Go to component demo page - none of the fields are pre-filled, even though they have value attribute set.
The result of this bug is that on a form, this control has value set, but looks like it needs to be filled out / blank.
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.