googlearchive / paper-item

A simple list/menu item à la Material Design

paper-item

This element is compatible with Polymer 0.5 and lower only, and will be deprecated.
You can check out a similar 0.8-compatible version of this element at https://github.com/polymerelements/paper-item

paper-item's Issues

malformed bower.json

There is an invalid comma after the layout dependency. This prevents bower from installing 0.8-preview and does not give immediate indication what the problem is:

Steps to reproduce:

$ bower install Polymer/paper-item#0.8-preview
bower paper-item#0.8-preview       EMALFORMED Failed to read /tmp/user/bower/paper-item-7336-pqohs4/bower.json

Please review PR #26 as a possible solution.

When clicking on a paper-item that is a child of a core-selector, ripple animation doesn't finish

<core-selector selected="{{selected}}">
  <paper-item>item1</paper-item>
  <paper-item>item2</paper-item>
</core-selector>

Clicking on the paper-items triggers the ripple animation, and then the ripple freezes until you click again.

This applies to core-selector, core-menu, and other subclasses of core-selector.

on-click event not fired when clicking on paper-item inside of paper-menu

Here is a brief structure of the layout codes,

<paper-header-panel class="layout vertical fit" drawer>
     <div class="flex">
         <paper-menu >
             <paper-item onclick="test('a')">A </paper-item>
             <paper-item onclick="test('b')">B </paper-item>
         </paper-menu>
      </div>
      <div class="layout vertical ">
         <paper-menu >
              <template is="dom-repeat" items="{{labels}}">
                     <paper-item  on-click="test">
                           <span>{{item.name}}</span>
                     </paper-item>
              </template>   
         </paper-menu>
      </div>                        
</paper-header-panel>

The list variable labels have a lot of values and this makes the paper-header-panel scrollable. The strange thing is that if load the page , scroll the header-panel, clicking on one of the paper-item in the second paper-menu, clicking event is not fired.

I am wondering if anybody has similar issue.
I think this is happening because the scrollable thing.
It keeps broken for a few times , then it works fine.
So every time, you load the page, then scroll, then click, click event won't fire until you try this for a few times.

linking isn't passing cross-browser test

Issue created as suggested by Rob Donson over here.

I tried various approches to get links in paper-items to work in most browsers.

Links open in Chrome Desktop and Firefox Desktop, but not in Chrome Android:

<paper-item icon="social:post-github" label="Github">
    <a href="https://github.com/hashworks" target="_blank"></a>
</paper-item>

(that's how one should do it accourding to the docu)

Links open in Chrome Desktop, Chrome Android and Firefox Desktop, but Design is messed up in Firefox Desktop (paper-menu-button layer not wide enough):

<paper-item icon="social:post-github">
    <a href="https://github.com/hashworks" target="_blank">Github</a>
</paper-item>

Links open in Chrome Desktop, Chrome Android and Firefox Desktop, but the paper-items look empty in Firefox Desktop:

<a href="https://github.com/hashworks" target="_blank">
    <paper-item icon="social:post-github" label="Github"></paper-item>
</a>

Links open in Chrome Desktop and Chrome Android once, but twice in Firefox Desktop:

<paper-item onclick="this.getElementsByName('a')[0].click()" icon="social:post-github" label="Github">
    <a href="https://github.com/hashworks" target="_blank"></a>
</paper-item>

Paper-items with too long labels

So, when the label get's too long it overflow out of the element, however the ripple doesn't show behind it. Now, as far as I can see there are 3 things the <paper-item> could do:

• Wrap like normal elements
• On the label: overflow:hidden; text-overflow:ellipsis;
• Overflow like now, but make the ripple overflow as well then

The second is what I hacked into my own local application, and might be the cleanest generic solution as well (though the first seems to be the most natural one)

Still wrong height?

Should the CSS rule height: 100% still be there?

polyfill-next-selector { content: '.button-content > a'; }
      ::content > a {
        height: 100%;
        /* flex */
        -ms-flex: 1 1 0.000000001px;
        -webkit-flex: 1;
        flex: 1;
        -webkit-flex-basis: 0.000000001px;
        flex-basis: 0.000000001px;
      }

Remove icon and label from paper-item

Anchor element children click target area

When adding an anchor element inside a paper-item, the entire area of the item should allow for clicking through to the link. Due to padding on .button-content within paper-item's shadow DOM, this is not the case. You can see this issue on the paper-item demo page.

https://www.polymer-project.org/components/paper-item/demo.html

This issue was briefly mentioned in #13, but I didn't want it to get lost in the paper-ripple discussion going on there.

core-selected

We should consider having a default style/color for .core-selected (similar to core-item)

html /deep/ paper-item.core-selected {
  color: #e91e63;
}

maybe?

Opacity of ripple effect

Could you write how to set initialOpacity of paper-ripple?

what happened with the label attribute?

It seemed something changed during the 0.4.x -> 0.5.x upgrade that means that the label attribute doesn't do what it used to do. I eventually found that I needed to make this change to my code in order to get the same behaviour as before :

<paper-item label="this item"></paper-item>

to :

<paper-item>this item</paper-item>

I notice the documentation show an example with the label given as content of the element, while the attribute list still shows the label attribute, which confuses me somewhat.

Am I missing something about how this element needs to be used?

Thanks,

Max.

<paper-item> has 'iconSrc' attribute, should be 'src' like <paper-fab>, <paper-icon-button> and <paper-menu-button>

The element has the mutually exclusive pair of attributes: 'icon' and 'iconSrc'.

Other elements including , and have the same attributes but named: 'icon' and 'src'

Please change the attribute name 'iconSrc' to simply 'src' -- the consistency will reduce errors and make the system easier to learn.

Linking w/ paper-item

The docs mention when linking with paper-item to use noink to prevent the ripple from freezing. This seems to take away one of the primary reasons to use paper-item in the first place. The ripple I think is a pretty significant piece of UX feedback. I'm curious the reason for the change in structure if you lose one of the primary benefits? Is there a better solution here to maintain the polish of the ripple effect?

Additionally, as an FYI placing the link inside the item, as explained in the docs, limits the size of the touch area, making it much smaller than the item itself. I've solved this by wrapping the paper-item with the link instead... although I'm not sure if that creates any issues when using core-selector or any other menu-based components.

user-select vendor prefixes missing

It seems that ms & moz vendor prefixes are required as well

  -webkit-user-select: none;
  -ms-user-select: none;
  -moz-user-select: none;
  user-select: none;  

Add a description in the GitHub repository

Optional layout attributes

It would be nice if "layout horizontal center" wasn't force for the button content here https://github.com/Polymer/paper-item/blob/master/paper-item.html#L102

and instead maybe add layout attribute options to paper-item itself, so for example, you can have left aligned vertical content in an item

Specialisms for list items described in the Material Design spec

I've put together some CSS overrides that make paper-item conform better to the Material Design spec when used for one- and two-line list items with icons, and I think such specialisms may be useful to have upstream, but I'm unsure of how to implement them in a PR that's generally useful and conforms to Polymer's style.

At the moment I've got something like

<paper-item class="two-line">
  <core-icon class="avatar" icon="..."></core-icon>
  <div class="text">
    <div class="primary">...</div>
    <div class="secondary">...</div>
  </div>
  <core-icon icon="..."></core-icon>
</paper-item>

with styling for each of the classes (and a core-icon:first-child to add a right margin).

Should I be using attributes for styling instead of classes (Polymer seems to prefer doing so)? Any other advice?

paper-item should support disabled attribute

It's not uncommon to have a list of options in a menu where one or more need to be disabled to convey a restriction based on the app state. It would be consistent with other types of controls to add a disabled attribute.

layout horizontal/vertical either reversed, unintuitive, or buggy

When using <paper-item> with layout attributes, it seems like the opposite desired behavior occurs; i.e., in order to get a chevron, for example, to appear all the way on the right, you have to use the vertical layout, as opposed to the horizontal layout, contrary to the docs and examples.

In fact, it doesn't even seem reversed, just not working? The vertical div sort of behaves as expected, but if the <paper-item> layout attributes were reversed, with horizontal being vertical behavior, it just seems to do nothing.

I've included a simple set of examples illustrating the problem.

  <paper-item layout vertical>
    <div flex>
      Hello, paper-item vertical
    </div>
    <core-icon icon="chevron-right"></core-icon>
  </paper-item>

  <paper-item layout horizontal>
    <div flex>
      Hello, paper-item horizontal
    </div>
    <core-icon icon="chevron-right"></core-icon>
  </paper-item>

  <div layout vertical>
    <div flex>
      Hello, div vertical
    </div>
    <core-icon icon="chevron-right"></core-icon>
  </div>  

  <div layout horizontal>
    <div flex>
      Hello, div horizontal
    </div>
    <core-icon icon="chevron-right"></core-icon>
  </div>