search

PolymerElements / paper-icon-button

A Material Design icon button
https://www.webcomponents.org/element/PolymerElements/paper-icon-button
42 stars 44 forks source link

`hidden` attribute not working on Chrome #103

Closed andrewspy closed 7 years ago

andrewspy commented 7 years ago

Description

hidden attribute not working on Chrome. Tested working on Firefox/Edge.

Expected outcome

Should be hidden

Actual outcome

Not hidden

Live Demo

<paper-icon-button icon="search" on-tap="searchAction" hidden></paper-icon-button>

Steps to reproduce

  1. Put a paper-icon-button element in the page with hidden attribute.
  2. Open the page in a web browser.

    Browsers Affected

andrewspy commented 7 years ago

It is working now when I unit test it. Probably need to investigate on my app. closing it now. Sorry for the trouble.

andrewspy commented 7 years ago

Just wanted to add that you need to specify a CSS style inside a custom element to properly hide <paper-icon-button> inside the custom element, i.e:-

<style>
paper-icon-button[hidden] {
    display: none;
}
</style>

Took me a while to figure that out. Thanks anyway!

CSchmitz81 commented 7 years ago

Thanks for the tip, although this still sounds like a bug to me. Shouldn't it be possible to do this in the paper-icon-button code so we don't have to keep putting this boiler plate code into the CSS? Is there some reason it's not possible to be built into the component?

CSchmitz81 commented 7 years ago

It looks like the style of the component can be updated in the same way to support this. This probably just wasn't done for paper-icon-button, so I'd definitely consider this a bug still.

Abrahamic-God commented 7 years ago

Bumping this -- is there a good reason why this element does not define its own [hidden] style when so many official Paper elements others do?

EDIT: Sorry, that came off a little aggressive. What I meant to say was "I would happily open a PR to add a [hidden] style for this element if it would be welcome. Thanks!