polymerelements / paper-button Goto Github PK
View Code? Open in Web Editor NEWA button à la Material Design
Home Page: https://www.webcomponents.org/element/PolymerElements/paper-button
A button à la Material Design
Home Page: https://www.webcomponents.org/element/PolymerElements/paper-button
I can't use bower 1.7.2 to install either paper-button with no version or explicitly 1.0.11, e.g.:
/var/tmp $ mkdir foo
/var/tmp $ cd foo
/var/tmp/foo $ bower install PolymerElements/paper-button
bower cached git://github.com/PolymerElements/paper-button.git#1.0.11
bower validate 1.0.11 against git://github.com/PolymerElements/paper-button.git#*
bower install paper-button#1.0.11
paper-button#1.0.11 components/paper-button
/var/tmp/foo $ ls -al components/paper-button
total 1
drwxr-xr-x 5 roy wheel 170 2016-01-02 13:31 .
drwxr-xr-x 3 roy wheel 102 2016-01-02 13:31 ..
-rw-r--r-- 1 roy wheel 428 2016-01-02 13:31 .bower.json
-rw-r--r-- 1 roy wheel 17 2015-12-09 2015 .gitignore
-rw-r--r-- 1 roy wheel 172 2016-01-02 11:50 .travis.yml
No error is reported from bower but necessary files are missing, e.g. paper-button.html
. It works if I explicitly install PolymerElements/paper-button#1.0.10
.
Here are the results from the accessibility developer tools audit:
[Warning] Text elements should have a reasonable contrast ratio (8)See AX_COLOR_01 for more information.[Warning] These elements are focusable but either invisible or obscured by another element (6)See AX_FOCUS_01 for more information.Not applicable tests (9)Passing tests (6)
Please address the contrast issues, as well as the visibility of the focus state, as it is currently quite difficult to see.
<paper-button thin>hi</paper-button>
See a thin button here:
https://www.google.com/design/spec/components/buttons.html#buttons-usage
Hello,
I'm quite new to Polymer, and I wanted to test the paper-button
element. I already tried the paper-input
element without any problem (Roboto font applied by default).
When initiating a paper-button, it seems that it doesn't take into account any typography. Indeed, I only get the default Times New Roman
font on the button (but the behavior of the button is correct).
Looking at the docs, I see that it's the shared demo-pages-shared-styles
that enables the roboto font.
I don't really know if it's an OK behavior or not, but the fact that paper-input
and paper-button
work differently puzzles me.
Thanks in advance for your answers.
Why paper-button
not extends button
native element?
paper-button does not currently include an actual native button (or <input type=submit>
) element. As a result, simply including a paper-button inside a form is not sufficient for being able to submit the form by pressing enter from one of the inputs. So currently, hooking this default behavior back up has to be done manually. Similarly, the click handler of a paper-button inside a form must currently be bound to the form's submit manually.
What if users could just write something like:
<form>
<!-- behavior 1: pressing enter while the cursor is in this input should submit the form -->
<input name="name" required>
<!-- behavior 2: clicking this button should submit the form -->
<paper-button default-submit>
</form>
and that default-submit
attribute would cause the default behaviors above to just work.
For behavior 1, it looks like simply including a native <input type=submit hidden>
anywhere inside the form would do the trick. So could paper-button just add this element to its dom tree when default-submit
is desired? Then, the paper-button's onclick
could just call click()
on the (hidden) native submit input to take care of behavior 2.
Note, I believe this is orthogonal to (but would nicely complement) PolymerElements/iron-form#46.
I'd be happy to try to work up a PR if there is interest. What do you think?
When you place an on-click handler in a paper-button, like that:
<paper-buton on-click="myHandler">Click</paper-button>
all attributes (srcElement, target, toElement) of MouseEvent point to paper-material.
I believe they would be pointing to paper-button itself.
From @ARMistice on August 14, 2015 15:50
On Windows 10 with InternetExplorer / Edge
https://elements.polymer-project.org/elements/paper-button?view=demo:demo/index.ht
Changeing the frame size or clicking buttons make everything flicker.
Seems to be a problem with the "ripple" effects
Copied from original issue: Polymer/polymer#2275
The focus state is not clear enough. The shadow is too light, and it's even harder to see when focus is on the blue colored button. We need to make this contrast and visibility better.
I think that we can remove the old branches:
keyboard-focus-font
(already closed)revert-20-some-focus-related-cleanup
(already merged)sampleShards
some-focus-related-cleanup
(already merged)This issue happens with paper-button, and some other Polymer elements I've tested - I don't know where I should file this issue, as it seems universal.
A button's action is triggered, after scrolling, which is not intended.
Inside a div with overflow: auto, a tall, scrollable page. Inside the page is a paper-button ( or paper-tabs, or your custom element with internal "click":"function"
event ).
On mobile Safari - when your scroll starts on the button, after the page is scrolled, and finger is lifted, the button activates. This really hinders scrolling the page, as buttons that happen to fall in the path of the scrolling finger are activated.
Strangely, this doesn't seem to happen on elements with onclick="somefunc", or even non-button elements with on-click bindings. This also, doesn't happen if your scrolling is very rapid / flick. To reproduce - finger down on button for 1/2 sec, scroll up/down for 1/2 sec, finger up - seems to make it happen.
Looking at the demo the second button in the Color
-block has noink
as text, but it doesn't have the noink
attribute.
The Paper-button somehow responds with extra padding including ripple in PSK project, will try to reproduce the problem is affected with similar effect. The problem happens when stretch screen width in between 841px and 1280px. Very likely media query issue
EXTRA:
-Similar Behaviour Happens in paper-fab as well
-Seen similar issue fixed in previous version before 1.0 googlearchive/paper-button#38
Hope Helps
Element doc should include an example of wrapping the button in an anchor so it can be used as a link.
I feel like paper-button should use paper-styles/typography.html and its --paper-font-button
mixin for font.
Paper button uses 14px font with font-weight: 500
(Roboto Medium) as mentioned in Google Design Spec's Typography section and is already defined in paper-styles/typography.html.
Image: material-design-lite demo, their CSS implementation here
Paper button uses default font size with default font-weight (400 - Roboto Regular).
Image: paper-card demo
Toggle-style buttons are shown on the demo page but not mentioned in the documentation. What are the properties/attributes/events for toggle-style buttons?
Changing on-tap
to on-click
resolves the problem though. Should I use on-click
for paper-button
s?
The first time a click a <paper-button>
, there is no ripple. The next time I click it there is. It seems this only exists when I use Chrome's native shadow DOM (using ?dom=shadow
).
This can be tested by loading the demo page for this element using the native shadow DOM.
The button no longer becomes bold or applies --paper-button-{flat,raised}-keyboard-focus on keyboard focus. This is a recent regression.
<paper-ripple>
fires the event but the paper-button docs never mention it.
IronControlState
review: PolymerElements/iron-behaviors#27IronButtonState
review: PolymerElements/iron-behaviors#28_computed...
methods should have ternary if
selevation
could have a computed methodcalcElevation
should be stateless and shouldn't use this
Hi,
this breaks the complete rendering in the current version(1.0.4):
paper-button-behavior.html:59 Uncaught TypeError: this._setElevation is not a function
First click/tab is ignored in firefox 41.0.1. See http://jsbin.com/gigako/1/edit?html,output, just a basic button. In ie and chrome wokrs ok.
In paper-ripple
, there is a upAction
method that can end the ripple animation loop.
How can we do that in paper-button
asince there is no upAction
method?
If you click a paper-button, then unfocus and refocus the tab, paper-button receives the keyboard-focus class. It also looks like this happens with other elements (e.g. paper-icon-button), and it leads to a somewhat broken looking experience.
The paper-button
element not working in _Google chrome but works well in Firefox_
_( with *webcomponents flag enabled, failed * to work in firefox also ..) _
I am using firefox 42 and google chrome 46.0.2490.71
Proper working of paper-button element display on google chrome and firefox with webcomponents enabled...
(without web components enabled) and working as expected..
(failed to work properly , * just displaying text* )
and
<!DOCTYPE html>
<html>
<head>
<!-- 1. Load webcomponents-lite.min.js for polyfill support. -->
<script src="bower_components/webcomponentsjs/webcomponents-lite.min.js">
</script>
<!-- 2. Use an HTML Import to bring in some elements. -->
<link rel="import" href="bower_components/paper-button/paper-button.html">
</head>
<body>
<paper-button>link</paper-button>
<paper-button raised>raised</paper-button>
<paper-button toggles raised>toggles</paper-button>
<paper-button disabled>disabled</paper-button>
</body>
</html>
3 Run inside google chrome or firefox with wecomponents enabled(failed to work properly)
I think
paper-button
testing failed in firefox because of web components flag enabled in firefox and also failed in google chrome for the same web components .. But i am not sure about this.. this is just what i thought about this...
Expecting Reason and Best Solution for this Issue to be Resolved and Documentation for Using Polymer elements is Not enough and not clear to try newbies .. please improve it
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:
Chrome / NVDA: When navigating linearly and I reach the row of buttons, NVDA reads all the buttons in the row at once, as opposed to being able to use the arrow key to navigate to each individually.
Firefox / NVDA: When navigating linearly, when I navigate left to right through each button, NVDA announces ""blank"" between each button, as if it's picking up the blank space between the buttons as a separate item. This does not occur when navigating through the headings, only the buttons. This seems to be Firefox specific.
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)
So I am told by the docs here:
https://elements.polymer-project.org/elements/paper-button
The documentation for an element as basic as a button should be at least complete and ideally sprawling, overflowing with examples.
In Chrome 43, sometimes after clicking a button then changing tabs in Chrome or changing to a different application, the button will appear bold until clicked again. This can be seen on the demo page.
When reattaching a paper-button to the DOM, its ripple effect no longer functions when the button is clicked. All other button functionality seems to be okay - in particular, the button itself gets its CSS classes when the mouse is held down.
From @steelbrain on July 21, 2015 1:3
Consider you have the following markup
<form id="form" action="javascript:" method="post">
<input type="text" name="username" />
</form>
<script>
var form = document.getElementById("form")
form.on('submit', function(e){
e.preventDefault()
console.log("Hey")
})
</script>
now if you focus the input element and press enter, the submit event won't be triggered.
Now if you add <button>Something</button>
without the form bounds, pressing enter after focusing the event or clicking the button, both would work.
Now if you replace that button with a paper-button <paper-button raised>Hey</paper-button>
, submit will be impossible again because there's no button
in the form.
Now if you add is="iron-form"
to the tag, and the form will be submitted by the paper-button now but it won't trigger the native submit
event, not even the iron-form-submit
event.
I am using Google Chrome 43.0.2357.134
Copied from original issue: Polymer/polymer#2128
As the title says, when you create a paper-button
programmatically the button does not realize its content. It will not center the text and the iron-icon
rendered inside the paper-button
does not appear.
<!doctype html>
<html lang="">
<head>
<title>sandbox</title>
<link rel="import" href="bower_components/polymer/polymer.html">
<link rel="import" href="bower_components/paper-button/paper-button.html">
<link rel="import" href="bower_components/iron-icon/iron-icon.html">
<link rel="import" href="bower_components/iron-icons/iron-icons.html">
</head>
<body unresolved class="fullbleed">
<paper-button>
<iron-icon icon="send"></iron-icon>
Test
</paper-button>
<script type="text/javascript">
var btn = document.createElement("paper-button");
var icon = document.createElement("iron-icon");
icon.icon = "send";
btn.appendChild(icon);
btn.innerHTML = btn.innerHTML + "new";
document.body.appendChild(btn);
</script>
</body>
</html>
This effect is particularly noticeable if some other element placed after a button.
See http://dzhioev.net:8080/button_width_issue.html for a demo.
This is a particularly nuisance for all Firefox users as it may appear that paper-button elements are broken. A user may not be keen enough to recognize that a double-click is required as a workaround.
This errata began sometime in the last 2 weeks as this was not an issue before pulling in the latest changes from bower late last week for our project.
On Android with Talkback, when I doubletap to press the button, or check the radio button, I don't receive any spoken feedback about this state change. When I place focus on it again though, I do hear the right state read aloud.
paper-button's code is not following the same standards as other elements. paper-button's javascript code is in the <script> ...</script> tag but this <script> section appears after the end of the tag. All other elements have the <script>...</script> before the
...
<dom-module>
...
</dom-module>
<script>
...
</script>
...
<dom-module>
...
<script>
...
</script>
</dom-module>
I think 'noink' should be defined as <paper-button>
's boolean property which is reflected to an attribute.
That'll make 'noink' consistent with other properties/attributes of <paper-button>
(e.g. 'raised', 'disabled').
paper-button
inside a paper-toolbar
doesn't work correctly on IE10.
Example code:
<html>
<head>
<script src="../bower_components/webcomponentsjs/webcomponents.min.js"></script>
<link rel="import" href="../bower_components/iron-icons/iron-icons.html">
<link rel="import" href="../bower_components/paper-button/paper-button.html">
<link rel="import" href="../bower_components/paper-toolbar/paper-toolbar.html">
</head>
<body class="fullbleed">
<paper-toolbar>
<paper-button id="button" icon="menu"></paper-button>
</paper-toolbar>
<script>
window.addEventListener('WebComponentsReady', function(e) {
document.querySelector('#button').addEventListener('click',
function(e) {
console.log("button pressed");
});
});
</script>
</body>
</html>
The same issue is present for paper-icon-button
inside a paper-toolbar
(see PolymerElements/paper-icon-button#39).
Clicking the Polymer.PaperButtonBehavior at the bottom of the paper-button docs gives the message
No documentation available for Polymer.PaperButtonBehavior
The paper-button
changes to an elevated style when raised
is changed to true
, but doesn't change back when raised
is changed back to false
. Am I doing something wrong?
http://jsfiddle.net/g5j3gxvs/1/
<paper-button raised="{{raised}}">Button</paper-button>
<paper-toggle-button checked="{{raised}}">raise the button</paper-toggle-button>
I have an element defined like this:
<dom-module
id="my-elem">
<template></template>
<script>
Polymer({
is: "my-elem",
properties: {
},
attached: function () {
alert("blah")
console.log(this.parentNode)
}
})
</script>
</dom-module>
Now if I have markup that uses this tag inside a paper-button
, e.g.:
<paper-button><my-elem></my-elem></paper-button>
The alert in the attached
callback is fired twice. The first time this.parentNode
is the paper-button
while the second time this.parentNode
is a paper-material
which is created by paper-button's template.
Is there a way to only make a callback fire once on initialization and guarantee that the parent node will be paper-button
?
I think this is a more general issue than just a problem specific to paper-button, but I could not make a simpler reproduction. I am happy to move the issue to a different repo / change the title to whatever suits better.
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.