polymerelements / paper-button Goto Github PK

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.

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.

Changing on-tap to on-click resolves the problem though. Should I use on-click for paper-buttons?

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').

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.

Any idea why I keep getting this error?

Current bower.json dependencies:

I'm using bower version 1.5.2.

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.

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.

Run the demo on Safari and if you tap on one of the button you will see the ripple effect is not contained inside the button.

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.

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

Current paper-button code:

...
<dom-module>
   ...
</dom-module>
<script>
   ...
</script>

Expected:

...
<dom-module>
   ...
   <script>
      ...
   </script>
</dom-module>

Left: IE 11.0.10240.16431 is left
Right: Chrome 46.0.2490.71 m (64-bit)
Both on Windows 10.

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?

I feel like paper-button should use paper-styles/typography.html and its --paper-font-button mixin for font.

Expected outcome

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

Actual outcome

Paper button uses default font size with default font-weight (400 - Roboto Regular).

Image: paper-card demo

I have:

<style is="custom-style">
.button {
    padding-right: 10px;
    background-color: #4285f4;
    color: #fff;
    height: 30px;
  }
</style>

and <paper-button class="button" raised>eeeek</paper-button> just dumped in the body, and this ends up looking like 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

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.

Why paper-button not extends button native element?

Sample code:

<div class="horizontal layout">
  <paper-input></paper-input>
  <paper-button id="b" raised>REPLY</paper-button>
</div>

Screenshot while clicking:

• Typography seems like it might be off - font too large and/or not the right roboto? This might just be in the demo but should be right.
• Pressed state might have to be a little higher.
• Decision handed down from design: button should NOT stay focused after press, unless it was focused prior to press.
• Pressed state height should be 2x the focus state height. We should exaggerate both if needed for a11y.

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.

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>

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)

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.

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

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

Looking at the demo the second button in the Color-block has noink as text, but it doesn't have the noink attribute.

<paper-button thin>hi</paper-button>

See a thin button here:
https://www.google.com/design/spec/components/buttons.html#buttons-usage

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>

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?

Element doc should include an example of wrapping the button in an anchor so it can be used as a link.

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.

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.

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)

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).

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

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.

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.

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?

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

Expected Result

Proper working of paper-button element display on google chrome and firefox with webcomponents enabled...

This output is taken from firefox

(without web components enabled) and working as expected..

Actual outcome

This output is taken from google chrome

(failed to work properly , * just displaying text* )

and

This output is taken from firefox (with webcomponents flag enabled)

Steps to reproduce

<!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>

1. This is html markup i used
2. Run this in firefox (works fine)

3 Run inside google chrome or firefox with wecomponents enabled(failed to work properly)

My Thought About This Issue

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

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.

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.

Clicking the Polymer.PaperButtonBehavior at the bottom of the paper-button docs gives the message

No documentation available for Polymer.PaperButtonBehavior

<paper-ripple> fires the event but the paper-button docs never mention it.

The button no longer becomes bold or applies --paper-button-{flat,raised}-keyboard-focus on keyboard focus. This is a recent regression.

http://jsfiddle.net/s6f029j3/2/

We should move away from ::shadow:

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.

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.

• IronControlState review: PolymerElements/iron-behaviors#27
• IronButtonState review: PolymerElements/iron-behaviors#28
• _computed... methods should have ternary ifs
• elevation could have a computed method
• calcElevation should be stateless and shouldn't use this

/cc @frankiefu @cdata @sorvell @kevinpschaaf