polymerelements / paper-icon-button Goto Github PK

If I tap a paper-icon-button and then alt+tab or change the navigator tab, whenever I go back to see the page, the ripple effect is on and static. It fades again only after I click anywhere else on the page. You can test this on the demo page - https://elements.polymer-project.org/elements/paper-icon-button?view=demo:demo/index.html

​

Hi,

We try to use paper-icon-button on paper-toolbar. We had a text cursor when the paper-icon-button was disabled but it remains as a text cursor when we overlay closest enabled paper-icon-button.

This css properties might be in conflict with enabled paper-icon-button :

:host([disabled]) {
      color: var(--paper-icon-button-disabled-text, #fff);
      pointer-events: none;
      cursor: auto;
      @apply(--paper-icon-button-disabled);
}

If you are using box-sizing: border-box globally, paper-icon-button icons are tiny.

This fixes it:

--paper-icon-button: {
  box-sizing: content-box;
}

You might want to specify box-sizing explicitly by default, because global border-box is fashionable.

I try to use my web application from my Nexus 5 but clicking on a paper-icon-button does not call my function. This is the code:

<div>
    <paper-icon-button id="createBtn" icon="create"
                       on-tap="_onEditProject"></paper-icon-button>
    <paper-icon-button id="delBtn" icon="delete"
                       on-tap="_onDelete"></paper-icon-button>
    <paper-tooltip for="createBtn">[[i18n.editprj]]</paper-tooltip>
    <paper-tooltip for="delBtn">[[i18n.delprj]]</paper-tooltip>
</div>
...
<script>
  Polymer({
    is: 'aw-project-entry',
    properties: {
      project: {
        type: Object,
        notify: true,
        value: function () { return { }; }
      }
    },

    _onDelete : function (ev) {
      var dialog = this.$.delDlg;
      dialog.toggle();
    },

    _onEditProject : function (ev) {
      var cur = au.projects.current;
      if (this.project.key !== "") {
        cur.setId(this.project.key);
        cur.store.loadFromFB(this.project.data);
        cur.load();
        document.querySelector("#application").route = "project";
        document.querySelector("aw-project-content").route = "sd";
        document.querySelector("aw-project").prj = cur;
        document.querySelector("aw-oertliche-bauueberwachung").prj = cur;
        au.projects.switchProjectPage(cur.sd);
        document.querySelector("aw-project-menu").focus();
      }
    },
...

I've tested it on Android L and now as well on Android M. Non of the both triggers my function _onEditProject or _onDelete.

Using the same application from my Desktop Chrome version 44.0.2403.125 (64-bit) everything works as expected! All functions will be triggered when I press the paper-input-button. Safari works as well!

Did I missed something???

The ripple on paper-icon-button can get all funky with flexbox, and in a number of other contexts:

http://jsbin.com/yihezozaze/1/edit?html,console,output

From @summers173 on August 17, 2015 18:7

Sometimes (not always) when in the documentation example

<paper-menu-button>
  <paper-icon-button icon="menu" class="dropdown-trigger"></paper-icon-button>
  <paper-menu class="dropdown-content">
    <paper-item>Share</paper-item>
    <paper-item>Settings</paper-item>
    <paper-item>Help</paper-item>
  </paper-menu>
</paper-menu-button>

when you tap on paper-icon-button (mobile and desktop) the ink expands but the menu does not open, you have to click right in the middle in order to the event propagate, and sometimes this don't even work.

Thanks in advanced

Copied from original issue: Polymer/polymer#2289

Here are the audit results:

[Warning] Elements with onclick handlers must be focusable (9)
[Warning] Images should have an alt attribute (1)
[Warning] Text elements should have a reasonable contrast ratio (1)
Not applicable tests (8)
Passing tests (4)

The X icon does not have sufficient contrast.

There are issues with keyboard navigation and focus. I am not able to access the icons just using tab, so I'm not able to press enter to activate. I can only activate via the mouse.

The labels need to be more descriptive and clear for screen reader users. The alt text for the hearts, in particular, need to be improved.

On Mac with VoiceOver, I can access the icons fine and hear what the alt text descriptions are. However, on Chrome OS with ChromeVox, it's not possible to access the icons, only the written text.

I think this might be related to issue #16 :
It seems like the --paper-icon-button-disabled Mixin does not work anymore - not sure when my last update was, but it worked before the bower update I did 2 days ago.

I also tried --paper-icon-button-disabled-text that is described as "The color of the disabled button" in the docs, but it also does not seem to work.

http://jsbin.com/terufid/edit?html,output

Just as a workaround for anyone having similar issues :

paper-icon-button {
                color: #03a9f4;
                /* Does not work any more */
                --paper-icon-button-disabled : {
                    color:#bdbdbd;
                }
            }
            /* Workaround for issue : https://github.com/PolymerElements/paper-icon-button/issues/74 */
            paper-icon-button[disabled] {
                color:#bdbdbd;
            }

If you bump the font-size of your paper-icon up to something around 20px it'll crop the keyboard focus state.

This happened to me when I set font-size at the :host level and it cascaded down to the child. You can work around it by setting font-size to something like 15px but that's non-intuitive and kinda wonky.

Right-clicking on an icon button shouldn't show its activation animation. Maybe if it specifically has a long-press handler, it could - but not if it just shows the default browser context menu.

It would be useful if there were an option to have a label for the button. The label would appear to the side of the button. Something like this:

<div>
    <iron-icon icon="create"></iron-icon>
    <span>[[labelText]]</span>
</div>

From @summers173 on August 6, 2015 16:54

You can reproduce this in the start page of polymer-starter-kit-light-1.0.3

The ripple effect on any paper-icon-button is not showing well, or disappears pretty quickly if the layout of the page is in "bigger mode", it only works well i the layout is small (phones), if you expand the browser window thus changing the layout to a bigger mode the ripple effect don't show well.

It´s is strange but actually in Internet Explorer behaves ok.

Regards

Copied from original issue: Polymer/polymer#2217

Description

Click error in the paper-icon-button.
Original issue: Polymer/shop#33

Expected outcome

Normal click. :)

Actual outcome

I record a GIF to show the problem:

Live Demo

https://shop.polymer-project.org

Hello,
in a6041a2 box-sizing of the :host was changed from content-box to border-box and 'width' was increased by the doubled padding, to compensate the box sizing model change.

I have a page which includes . The button has custom padding:

paper-icon-button {
  padding: 0;
}

Before the change, effective CSS applied to :host was:

padding: 0;
width: 24px;

After the change it became:

padding: 0;
width: 40px;

As a result the button became 1.5x larger.

In fact this change affects every existing <paper-icon-button> with customized width and/or padding.

In the example demo. We can change the style on hover with

   paper-icon-button.blue:hover {
    background: var(--paper-light-blue-50);
    border-radius: 50%;
  }

But how to customize with cross scope styling in order to centralize the same behavior ?

My solution

https://github.com/maxiplay/paper-icon-button

On Firefox we encountered that paper-icon-button does not behave correctly on "on-tap" event.
It needs to be tapped twice to fire event.

In contrast to <paper-button>, <paper-icon-button> doesn't have the ripple effect when pressed by "Enter" key.

Native buttons do this by simulating a click when the appropriate keyboard event (enter or space) occurs while the element is focused. paper-button/paper-icon-button could do this, or alternatively could provide an activate event or similar, to be fired under whatever circumstances the element feels like it.

Right now, keyboard event handling is up to the user of the element, who would need to either subclass it to use IronA11yKeysBehavior or else implement their own event listening.

It seems like IronButtonState almost does this, inasmuch as it has a _userActivate method which is fired from tap, click and keyboard events, but this doesn't seem to be part of the API.

Could you remove default-theme.html from paper-icon-button.html? Transfer to demo...

If you tap on the button in the center (within the bounds of the icon) it will return the iron-icon element as the target in the returned event.

Expected Outcome

The on-tap event should always return the paper-icon-button element in the target attribute.

Actual Outcome

on-tap events will return the iron-icon element when tapped within the iron-icon bounds. It will return the paper-icon-button element when tapped within the bounds of the button, but outside the bounds of the icon in the button (along the edges). This creates an issue when attempting to have a reliable method of reading the button's id on an on-tap event.

Steps to Reproduce

1. Put a paper-icon-button element
2. Give it an id
3. Set its on-tap event attribute to a function
4. console.log the value of the function's event.target.id parameter
5. Depending on the location that the on-tap event occurs it will log either the id given to the button, or icon

Description

When a paper-scroll-header-panel does any actions towards condensing, it breaks the ripple effects of all paper-icon-buttons within it. My project is using the polymer-starter-kit as a boilerplate, and I can confirm that on my system, even throwing in a paper-icon-button into the polymer-starter-kit produces the same results.

Expected outcome

paper-icon-button expected to do proper ripple effect.

Actual outcome

paper-icon-buttons within a condensing paper-scroll-header-panel no longer ripple properly after the scroll-header-panel has done any condensing as triggered by a scroll action (this is not caused by the polymer-starter-kit's custom condensing function in app.js, as I commented that out and it still did not work). paper-icon-buttons in fixed/non-condensing paper-scroll-header-panels (like the drawer of the starter kit) do not break when their panel scrolls, which leads me to believe that it is the condensing action itself.

Steps to reproduce

1. Get the starter kit
2. add paper-icon-buttons around the place, especially within scroll header panels (you may want to do some inline styling or change app-theme to try and make the ripple as noticeable as possible)
3. add paper-icon-button import to elements.html
4. gulp vulcanize and gulp serve to serve the starter kit with edits
5. test paper-icon-button before and after scrolling each panel

Browsers Affected

• Chrome
• Firefox
• Safari 9
• Safari 8
• Safari 7
• Edge
• IE 11
• IE 10

When placed inside a horizontal-flex parent, the iron-icon shrinks w/ the content window.

Here is a codepen

A couple workarounds:

• (A) Wrap icon-buttons in a div
• (B) Explicit size on paper-icon-button

Issue #22 seems similar, except the focus was on getting paper-icon-button/its icon to be larger. This issue recommended usage of explicit sizing of the paper-icon-button... maybe workaround (B) is the recommended fix?

Potential patch?

      iron-icon {
        --iron-icon-width: 100%;
        --iron-icon-height: 100%;
+       min-width: var(--iron-icon-width, 24px);
+       min-height: var(--iron-icon-height, 24px);
      }

<paper-icon-button icon="icons:check" title="Confirm" on-tap="IconTapped"></paper-icon-button>
<paper-icon-button icon="icons:help" title="Get Help" on-tap="IconTapped"></paper-icon-button>

The following javascript logs <paper-icon-button> in response to the first mouse click but it logs <paper-ripple> in response to the second and succeeding clicks. As a result, ev.target.icon in IconTapped becomes undefined.

IconTapped:function(ev){
    console.log(ev.target);
    switch(ev.target.icon){
        case "icons:check": //Do real job here.
            break;
        case "icons:help": //Do real job here.
            break;
    }
}

paper-icon-button inside a paper-toolbar are not clickable at all in 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-icon-button/paper-icon-button.html">
    <link rel="import" href="../bower_components/paper-toolbar/paper-toolbar.html">
  </head>
  <body class="fullbleed">
    <paper-toolbar>
      <paper-icon-button id="button" icon="menu"></paper-icon-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-button inside a paper-toolbar (see PolymerElements/paper-button#57).

When toggles is set on a paper-icon-button, IronButtonStateImpl._tapHandler executes twice. I suspect that may be because paper-icon-button includes both PaperButton and PaperRadioButton behaviors? (Commenting out PaperButtonBehavior seems to fix the problem).

behaviors: [
  Polymer.PaperButtonBehavior,
  Polymer.PaperRadioButtonBehavior
],

Description

Need an option to disable circle effect on ripple

Expected outcome

Add property to enable or disable the circle effect, so that we could have paper-icon-button without circle ripple effect
Paper Icon Button without circle effect : <paper-icon-button square></paper-icon-button>

Actual outcome

There is no such option to change or disable the effect. It is hard coded in _createRipple method

Live Demo

Steps to reproduce

1. Put paper-icon-button element in the page
2. Add square attribute in paper-icon-button

Browsers Affected

• Chrome
• Firefox
• Safari 9
• Safari 8
• Safari 7
• Edge
• IE 11
• IE 10

Hello. Thanks for the amazing element, I like it!
But I have an issue, I can't bind dynamic value into <paper-icon-button></paper-icon-button>
Here is my code:

<template is="dom-repeat" items="[[person.socials]]" as="social">
  <a href="[[social.link]]" target="_blank">
    <paper-icon-button icon="[[social.icon]]"></paper-icon-button>
  </a>
</template>

JSON for person object:

{
    "id": 2,
    "name": "Just Name",
    "socials": [{
        "icon": "app-icons:gplus",
        "link": "https://plus.google.com"
    }, {
        "icon": "app-icons:twitter",
        "link": "https://twitter.com"
    }, {
        "icon": "app-icons:facebook",
        "link": "https://facebook.com"
    }]
}

app-icons - it's my custom collection and works without binding,

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 through the buttons, the only spoken feedback I receive is ""clickable", with no other context. I also hear two ""blank"" instances in between the first row of buttons and the heading ""styled"
"

aria-pressed=false implies that it could be true. it's not the same as leaving off that attribute. Screen readers will announce that it's "toggleable" or "unpressed".

If you tap on paper-icon-button on its sides (i.e. not exactly in the centre), it goes into pressed state and "on-tap" event is not fired. This is easily reproducible on chrome browser (My version is 45.0.2454.94) on android devices.

Click on the paper-icon-button on the page below, then switch away to a different tab, then switch back - as a result the button is drawn in the pressed state, i.e. as if it's in the process of being pressed. Simple repro with the following page:

Paper-icon-button stays in tapped state once tapped in ios9.

Picture comes from the Polymer demo page

I can't see ripple effect in version 1.0.4.
It seems that some code <paper-ripple id="ink" class="circle" center></paper-ripple> doesn't present in DOM module

I believe that prevents hovering over it to get a tooltip. I noticed when I tried to use the inspector element picker to observe it and couldn't reach it that way.

pointer-events: none should probably only be used for things that are transparent overlays or purely presentational, not just for real controls that are temporarily in a disabled state.

Expose --iron-icon-width and --iron-icon-height from iron-icon.

https://elements.polymer-project.org/elements/iron-icon

I've had many situations that required a larger icon than paper-icon-button provides. I find myself faking it with a paper-button and an iron-icon.

It would be really handy if, like for the iron-icons page on polymer-project.org, there was a comprehensive list of all available icons for use with the icon=" " attribute.

Thanks.

this behavior doesn't exist in Paper-behaviors and paper-icon-button pointing to it

Description

I've been trying to use paper-icon-button with just standard iron-icons for now, but the ripple effects aren't working. NOTE: This works in firefox for some reason (which is ironic since this is google and it tends to be, in my experience, that in FIREFOX is where things don't work as you expected them to).

Expected outcome

It should be simply that on mousedown, it would ripple out and hold until mouseup, wherein which it woul fade out.

Actual outcome

Most of the time, the ripple only shows up for what's supposed to be the fade-out on the upAction, but the down action causes no ripple to show, and on the rare chance the downAction does cause a ripple it doesn't hold the ripple if I hold the mouse down.

A weird thing I've noticed is, when the ripple does work for downAction, changing the element I'm inspecting in the chrome developer "elements" panel (neither the original nor the new one I clicked have to relate to the paper-icon-button) will allow it to work almost every time directly after this (still not fully work, just as much as it did before), but attempting the same thing by just clicking elements on the page doesn't produce this outcome.

All the appropriate attribute changes seem to take effect on clicks, and I've scoured the computed styles and I'm fairly certain that the color isn't just the same as the background and that there is no inherited styling that could be screwing it up, as I've removed almost all custom styling in order to debug this.

Steps to reproduce

Browsers Affected

• Chrome
• Firefox
• [?] Safari 9
• [?] Safari 8
• [?] Safari 7
• [?] Edge
• [?] IE 11
• [?] IE 10

When the dialog-dismiss attribute is added to a paper-icon-button, clicking the button does not close the paper-dialog.

<paper-dialog>
  <paper-icon-button icon="icons:cancel" title="Close" dialog-dismiss></paper-icon-button>
  ...
</paper-dialog>

Note: Using the Inspector, if I add the dialog-dismiss attribute to the iron-icon in the paper-icon-button's dom then click the button, it will close.

PolymerElements/paper-dialog#87

Steps to reproduce:

1. Create <paper-icon-button>
2. Disable it.
3. Enable it.
   The button has 'tabindex' equal to -1 after that, as a result it is not focusable by Tab.
   Browser: Google Chrome Version 43.0.2357.73 beta (64-bit)
   Demo: http://dzhioev.net:8080/paper_icon_tabindex.html

Description

The alternative button demo doesn't look good.

Expected outcome

Actual outcome

Live Demo

https://elements.polymer-project.org/elements/paper-menu-button?view=demo:demo/index.html&active=paper-menu-button

If I give paper-icon-button a different size than default one by using --paper-icon-button, for example

    paper-icon-button {
      --paper-icon-button: {
        width: 16px;
        height: 16px;
      };
    }

I would expect iron-icon will change its size as well.
But it just overflows the container.

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)

https://github.com/PolymerElements/paper-icon-button/blob/master/paper-icon-button.html#L21

• Ripple should always be centered, regardless of where touch/click occurred.
• Opacity of ripple might be a bit high: http://www.google.com/design/spec/components/selection-controls.html#

The focus state is not visible. We need a clearer way to identify which item is in focus.