polymerelements / paper-material Goto Github PK

Would love a mixin for paper-material to easily enable changing stuff like background-color globally.

The paper-material element animates the box-shadow attribute, which causes paint. There is a better way to do this:

Explained in more detail

Expected outcome

Create a pseudo-element with the new box-shadow, set it's opacity initially to 0 and animate the opacity to 1, so only have 1 paint at the end of the transition if you want to set the box-shadow of the proper element.

Actual outcome

Actual the animation is hardly running at 60FPS

Live Demo

Demo with actual and expected method

Browsers Affected

According to csstriggers.com this is the case in all common browsers in EdgeHTML the actual method doesn't cause Layout but as well a repaint

I hope you fix this because I think there would be some refactoring needed if you do and I really hope you want to do it. (FOR THE PERFORMANCE :D )

When i use use paper-material in my own element i lost is normal padding. is it normal ? how to restore it please ?

Description

the mixins from paper-styles/shadow.html no longer seems to be applied.

Expected outcome

The box shadow is applied.

Actual outcome

No box shadow is applied.

Browsers Affected

(Only tested on chromium based browser. Opera)

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

A workaround would be to make the paper-styles/shadow.html into a style module and then include that module in the paper-material-shared-styles.

Description

If there are any import after paper-material, anything is rendered. However, if it is the last one, everything is ok. It happens in v2.0-preview

Expected outcome

Actual outcome

Steps to reproduce

1. Import paper-material.
2. Import another component.

Browsers Affected

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

The shadow should not have a transition when animate=false.

For the most part, this is all totally fine! Since this is really just the design / visual effect and not meant to be interactive, the screen reader tests don't apply.

The one piece of feedback I have is that the animations are pretty tough to see, since the gray is so light. Is there anything we can do to make the animation itself a bit more visible?

Description

When placing an object tag directly on a paper-material element it gives the error below. If the object is wrapped in a div there is no error.

"TypeError: Cannot set property 'parentNode' of undefined
at Object.saveChildNodes (https://cdn.rawgit.com/download/polymer-cdn/1.5.0/lib/polymer/polymer-mini.html:486:20)
at HTMLElement._poolContent (https://cdn.rawgit.com/download/polymer-cdn/1.5.0/lib/polymer/polymer-mini.html:1702:17)
at HTMLElement._initFeatures (https://cdn.rawgit.com/download/polymer-cdn/1.5.0/lib/polymer/polymer.html:3574:6)
at HTMLElement.createdCallback (https://cdn.rawgit.com/download/polymer-cdn/1.5.0/lib/polymer/polymer-micro.html:189:6)"

Expected outcome

No Error

Actual outcome

"TypeError: Cannot set property 'parentNode' of undefined
at Object.saveChildNodes (https://cdn.rawgit.com/download/polymer-cdn/1.5.0/lib/polymer/polymer-mini.html:486:20)
at HTMLElement._poolContent (https://cdn.rawgit.com/download/polymer-cdn/1.5.0/lib/polymer/polymer-mini.html:1702:17)
at HTMLElement._initFeatures (https://cdn.rawgit.com/download/polymer-cdn/1.5.0/lib/polymer/polymer.html:3574:6)
at HTMLElement.createdCallback (https://cdn.rawgit.com/download/polymer-cdn/1.5.0/lib/polymer/polymer-micro.html:189:6)"

Live Demo

Error:
https://jsbin.com/bisileliri/edit?html,console,output
Wrapped in div, no Error:
https://jsbin.com/munovituri/edit?html,console,output

Steps to reproduce

1. Place an object tag directly under a paper-material element

Browsers Affected

This may only be an issue in the latest version of chrome as it never seemed to be an issue in the past (Currently running ChromeOS Version 56.0.2924.53 beta (64-bit) )

• Chrome

On a chromebook so I cant check other browsers at the moment

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

Hello,

I am using some paper-material in an app. It looks like this:

<paper-material elevation="2">
  <paper-item>
    Welcome  
    <paper-icon-button on-tap="_onView1Tap"></paper-icon-button>
    <paper-icon-button on-tap="_onView2Tap"></paper-icon-button>
  </paper-item>

  <neon-animated-pages selected="[[ selectedIndex ]]">
    <neon-animatable>
      <div>This is some content. This content will expand and collapse in size.</div>
    </neon-animatable>

    <neon-animatable>
      <div>
        <div>This is some other content. Please notice that there is also animated content here</div>
        <neon-animated-pages selected="[[ index2 ]]">
          <neon-animatable>
            This is page 1
          </neon-animatable>
          <neon-animatable> 
            This is page 2
          </neon-animatable>
        </neon-animated-pages>
      </div>
    </neon-animatable>
  </neon-animated-pages>
</paper-material>

At this time, the paper-material does not expand around the neon-animated-pages content. I understand that its because the neon-animated-pages element has a height of zero. So, I manually set the height at runtime. However, the height of the nested neon-animated-paged element is always zero. I can see the content in the view just fine. However, programmatically, it seems to always be zero.

There seems to be a bug in either a) neon-animated-pages or b) paper-material. Its like paper-material was never intended to have animated content within it.

My code:

<div class="container">
   <paper-material elevation="3" >
      <div class="col-md-6">
          Content
      </div>
   </paper-material>
</div>

.col-md-6 class comes from bootstrap framework, but basically any floated (i.e. in css float:left) div causes the same problem.
I'd appreciate advice on keeping the shadow.

Since the spec specifies elevation in dp, switch to that api?

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

I think that we can remove the old branches:

• iron-flex-layout (already closed)

Hello,

Could I ask for a new release of this element ?

Thank you.