polymerelements / paper-item Goto Github PK

From @prudhvit on November 4, 2016 6:23

Description

Click on disabled paper-item in paper-menu it closes the paper-menu dropdown please refer the code

Code

<paper-header-panel id ="coreHeaderPanel" mode="standard"> <paper-toolbar id="controls" class="horizontal-section"> <paper-menu-button vertical-align="top" horizontal-align="left" title="Main menu" id="mainMenu"> <paper-icon-button icon="menu" class="dropdown-trigger" alt="menu"></paper-icon-button> <paper-menu class="dropdown-content"> <paper-item id="1">1</paper-item> <paper-item id="2"disabled="true">2</paper-item> <paper-item id="3"disabled="true">3</paper-item> <paper-item id="4">3</paper-item> <paper-item id="5" disabled="true">4</paper-item> </paper-menu> </paper-menu-button> </paper-toolbar> </paper-header-panel>

Steps to Reproduce

1. click on menu icon (it opens menu dropdown).
2. click on any disabled menu item.

Expected Results

Drop down menu should not close when click on disabled menu item

Actual Results

Drop down menu is closing when click on disabled menu item

Browsers Affected

• [x ] Chrome
• Firefox
• Edge
• Safari 9
• Safari 8
• IE 11

Versions

• Polymer: v1.X.X

Copied from original issue: Polymer/polymer#4130

Description

Add an href property and bind it to an anchor tag.

If no href is specified, the anchor tag will be no link, it will not influence the behavior of the paper-item.
If a href is specified, the anchor tag will be a link, making custom <a href="..." tabindex="-1"><pap... build unnecessary.

https://www.w3schools.com/tags/tag_a.asp

if it has no href attribute, it is only a placeholder for a hyperlink

The anchor can be styled to fill the paper-item, get its own mixin, and other anchor attributes could be optionally bound to the properties, tabindex could be handled by the element.

The change could also be made in all potential linkable elements (iron-linkable-behavior, iron-anchor-behavior?), giving an consistent way of linking elements. For example linking an paper-tab is completly different from linking an paper-item now.

Polymer 2.0 is not stable yet, so it could be introduced.
I could draft an PR if desired.

Proposal

paper-item-behavior.html

    ...
    properties: {
      href: {
        type: String,
        notify: true
      }
    }
    ...

paper-item.html

    ...
    <a href$="[[href]]">
      <slot></slot>
    </a>
    ...

Useage

<!-- The change does not effect an normal paper-item. -->
<paper-item>Some normal item</paper-item>
<!-- But it gives the possibility to be linked. -->
<paper-item href="/some/link.html">Some linked item</paper-item>

Items that could use this behavior:

• paper-item
• paper-icon-item
• paper-button
• paper-icon-button
• paper-fab
• paper-tab

Description

For material design, I'm using position:absolute; right: 0; to place "secondary actions" within an item. The actions have a background to ensure they obscure the text behind. The :focus shade appears under the action elements.

One solution would be to use :after for the shade instead of :before (see live demo). Is there any reason why this would be a bad idea?

I currently solve it with z-index, but I would prefer not having to override that. It creates an encapsulation leak since it seems my parent elements have to be aware of the z-index used.

Another solution is for paper-item to provide an extension point for secondary action elements.

Expected outcome

The secondary actions element becomes shaded just like the rest of the item. (Red shade in the live demo.)

Actual outcome

Everything except the secondary actions element gets a shade.

Live Demo

https://jsbin.com/cawomiboqo/edit?html,css,output

Steps to reproduce

Click to focus each item and look at the box to the right.

Browsers Affected

At least Chrome. Probably all.

The default paper-item stylesheet contains align-items: center which aligns the content vertically centered. This does not work in IE 11:

A solution is described in http://stackoverflow.com/questions/19371626/flexbox-not-centering-vertically-in-ie. In addition to min-height an attribute height should be added.
Could you please fix this in the paper-item stylesheet?

Here it is: https://github.com/PolymerElements/paper-item/blob/master/demo/index.html#L91

What should it be replaced with?

Why two elements? You do not believe it would be better if merge paper-item-icon into paper-item?

And the paper-item would have the paper-item-icon behavior.

Description

The paper-item element does not align its children properly in the vertical direction on IE11. Browser specs:

Version: 11.162.10586.0
Update version: 11.0.29 (KB3139929)
OS: Windows 10, VM running in Parallells

Expected outcome

paper-item should look similar on IE11 as on other supported browsers

Actual outcome

paper-item looks different. See attached screenshots taken from the Polymer Elements catalog:

Live Demo

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

Browsers Affected

IE 11

I think that we can remove the old branches:

• paper-styles-fix (already closed)

Description

With the typography.html, loads Roboto font.
PolymerElements/paper-item/paper-item-shared-styles.html#L14

Expected outcome

Not load Roboto font, like other elements.
Example: PolymerElements/paper-toast#58

Actual outcome

Loads Roboto font.

Description

When running my unit test to check if my custom element is displaying the expected text inside paper-item, the test fails because textContent of element is prefixed and postfixed with \n

Expected outcome

textContent should not be prefixed and postfixed with \n.

Actual outcome

textContent is prefixed and postfixed with \n. Unit Test error messageexpected '\n \n \n\n My Text\n ' to equal 'My Text'

Live Demo

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

Steps to reproduce

1. Open developer console.
2. Run $('paper-item').textContent
3. textContent returns Item that is prefixed/postfixed with \n

Browsers Affected

• [* ] Chrome (dom=shady)
• [ *] Firefox
• [* ] Safari 9

Run the paper-menu demo with

Polymer = { dom: "shadow" };

If you focus any of the paper-item's they go completely grey

Seems to be being addressed by PR #33

I have a recurrence of issue #28, where a paper-input element located inside a paper-item does not accept the space character.

The reason that the fix for the linked issue does not work in my case is that the paper-input element is added via the insertion point.

<paper-item>
    <content></content>
</paper-item>

From what I have gathered the cause of the problems is that due to using the content element the paper-input is part of the shadow dom.

I have seen that the spaceKeyDownHandler(), which paper-item inherits from the iron-button-state behavior tries to detect whether the target of the keyboard event handles the input itself. But it assumes that children located inside the shadow dom don't do this.

At the moment it is unclear to me whether this is a bug or working as intended, but to me it seems like adding a paper-input through the content element should work correctly.

Today, tapping a paper-item or paper-icon-item directly flips the background color to grey.
It would be more natural if tapping a paper-item would play the ripple animation.

See https://github.com/PolymerElements/paper-behaviors/blob/master/paper-ripple-behavior.html

https://github.com/PolymerElements/paper-item/blob/master/paper-item-shared-styles.html#L51 uses background: currentColor to create ::before content on focus.

Unfortunately, there's two problems with this.

1. it overwrites our .iron-selected color
2. The ::before content is rendering above the item's text. I think it needs a z-index: -1;:

Should be:

<paper-item>
  <paper-item-body on-tap="_tap1">
    <div>
      <span>[[myVar]]</span>
    </div>
   </paper-item-body>
  <div id="divTap2" on-tap="_tap2">
    <paper-icon-button icon="refresh"></paper-icon-button>
  </div>
</paper-item>

Expected outcome

_tap1 function and _tap2 function are launched when I click respectively on paper-item-body and on div#divTap2.

Actual outcome

Only the _tap2 function is fired.

Steps to reproduce

1. Put a paper-item-body element in a paper-item.
2. Add on tap listener on paper-item-body.
3. Click the paper-item-body.
4. The _tap1 function is never called.

When the problem occurred

This problems appears since the 1.0.4 with this commit.

Quick fix

Set position: relative; to the paper-item-body.

Question

We want to use several actions in a list of paper-item like it's described in the md specs.

Maybe we use the bad paper-element ?

It would be nice to be able to apply a custom CSS variable to the paper-items so when hovering it would be a hand as opposed to a text selector.

I think it might be useful to have a label String property on paper-item so you could set a label to be displayed in a paper-dropdown-menu instead of the full trimmed text content.
For example, you could use it like this:

<paper-dropdown-menu>
    <paper-menu class="dropdown-content">
        <paper-item label="item 1">Item 1 - short description</paper-item>
        <paper-item label="item 2">Item 2 - short description</paper-item>
        <paper-item label="item 3">Item 3 - short description</paper-item>
    </paper-menu>
</paper-dropdown-menu>

and when you select the first item from the paper-menu you will have "item 1" displayed in the paper-dropdown-menu instead of "Item 1 - short description".
Note that paper-dropdown-menu already try to read the label property of the selected item, so it not require any change and will continue to show the trimmed text content of the paper-item if no label is specified.

paper-item-shared-styles.html applies a margin-right of 16-px to all middle content items:

      :host > ::content > *:not(:first-child):not(:last-child) {
        margin-right: 16px;
      }

This is weird because the first or last item may be conditionally hidden, causing there to be a 16-px margin between the last visible item and the right border of the paper-item.

http://jsfiddle.net/8rkvb5jf/

Can we come up with a better way to provide this spacing?

Description

The user has no feedback when hovering an item in a dropdown-menu (it's an example)
It could be a google idea to add custom property --paper-item-hovered.

Expected outcome

Changing color when hovering item, --paper-grey-200 by default as in others Google Applications

Actual outcome

Item color is the same as when not hovering

Live Demo

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

Expected : http://jsfiddle.net/aperrad/3auxtxds/

Steps to reproduce

1. Open dropdown menu
2. Hover an item

Browsers Affected

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

When using the Polymer Starter Kit I followed the demo on the element catalog page.
https://elements.polymer-project.org/elements/paper-item

I assumed that paper-item-body is part of the paper-item element.
Perhaps this was a wrong assumption but I found it odd that paper-item-body had to be imported separately.

Same goes for the paper-item-icon, but this is already an issue.
#44

Reference: Material Design lists spec

Three-line list

When the second and the third line is the same element/paragraph.

The top right text

Polymer version : 1.0.1
The ripple effect affect all the parent content because the position of items is unset.
Example Code :

<paper-header-panel mode="waterfall">
    <paper-toolbar>
        <div class="appname">App name</div>
    </paper-toolbar>
    <paper-icon-item>
        <paper-ripple></paper-ripple>
        <iron-icon icon="home" item-icon></iron-icon>
        Home
    </paper-icon-item>
    <paper-icon-item>
        <paper-ripple></paper-ripple>
        <iron-icon icon="home" item-icon></iron-icon>
        Home
    </paper-icon-item>
</paper-header-panel>

All the paper header panel content is rippled but only the clicked item need to be rippled.

I fix it by myself but I think it will be better if that's already include in paper-item's css rules.

Fix it with "paper-icon-item{position: relative;}"
(Sorry for my English which is not very good)

In Firefox i got the problem that the first click on the text or the icon of an paper-icon-item highlights the item, but does not fire "tap", and the parent paper element does not get a "iron-select".

If the tap goes to a blank space of the paper-icon-item (where no child content like icon or text is present), events are fired. If the paper-icon-item is already highlighted, iron-select or tap get fired too.

This problem does not occur in chrome.

                <paper-menu on-iron-select="functionWithSomeConsole">

                    <paper-icon-item on-tap="functionWithSomeConsole">
                        <iron-icon icon="favorite" item-icon></iron-icon>
                        <span>[[ someI18nDynamicTextBinding ]]</span>
                    </paper-icon-item>

                    <paper-icon-item on-tap="functionWithSomeConsole">
                        <iron-icon icon="favorite" item-icon></iron-icon>
                        <span>[[ someI18nDynamicTextBinding ]]</span>
                    </paper-icon-item>

                </paper-menu>

This issue is really annoying me. A menu with links is a fairly common use case and as such I hope this gets fixed soon. I'm just posting a link to the issue on the old repo so you guys are aware that it's still not fixed.

googlearchive/paper-item#14

From @peteblois on June 8, 2016 18:14

Description

Background of selected item in dropdowns which result in horizontal scrolling do not fill full width

Expected outcome

Selected background spans the entire row.

Actual outcome

When horizontal scrolling, selected background only covers a portion of the selected row.

Live Demo

http://jsbin.com/qomojadebo/edit?html,js,output

Steps to reproduce

1. Open menu
2. Scroll horizontally

Browsers Affected

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

Copied from original issue: PolymerElements/paper-dropdown-menu#161

There are two demos titled, "Avatar with text and icon", but the first one doesn't actually show an icon.

I have run into a bizarre issue with paper-item and paper-input. When nesting a paper-input element underneath a paper-item element, the paper-input will not register the spacebar.

Example:

<template>
    <paper-item class="to-do-item">
        <paper-checkbox active="{{done}}"></paper-checkbox>
        <paper-input id="test1" value="Test1"></paper-input>
    </paper-item>
    <paper-input id="test2" value="Test2"></paper-input>
</template>

In this example, both test1 and test2 will take input, but I can not enter spaces in test1 whereas I can enter spaces in test2. If I copy and paste a space character, it works in either input. The issue is consistent across devices and browsers, desktop and mobile. Bizarre. Anyone know what's going on?

I tried to set up a jsfiddle, but can't find polymer on a reliable CDN. If someone can point me in the right direction on that front, I'd be happy to put a jsfiddle up.

StackOverflow: http://stackoverflow.com/questions/33258752/polymer-nesting-paper-input-under-paper-item-disables-spacebar

fiddle: http://jsfiddle.net/mgiuffrida/n9v06Law/

If a paper-icon-item has enough content to wrap, the content squishes up against the .item-icon and doesn't align with other paper-icon-items that don't wrap.

One possible fix may be to set flex-shrink: 0 on the #contentIcon: http://jsfiddle.net/mgiuffrida/n9v06Law/1/

As the title says upgrading element to the newest version breaks showing/hiding the element.

Status

bower.json contains information package is MIT licensed

Expected change

bower.json should contain link to correct license (http://polymer.github.io/LICENSE.txt like rest of PolymerElements) instead of MIT

Line in bower.json

"license": "MIT",

should be changed to

"license": "http://polymer.github.io/LICENSE.txt",

From @viridium on August 26, 2015 21:56

The icon and the checkbox both align to the right in the drawer, but they are misaligned.

Here is the example:

<paper-drawer-panel>
  <paper-header-panel drawer>
    <paper-toolbar class="top-toolbar">
      <paper-item>Options</paper-item>
    </paper-toolbar>
    <div>
      <!-- Example taken from the paper-item documentation. -->
      <paper-item>
        <paper-item-body two-line>
          <div>Show your status</div>
          <div secondary>You are visible to everyone</div>
        </paper-item-body>
        <iron-icon icon="warning" class="small"></iron-icon>
      </paper-item>
      <!-- Example taken from the paper-item documentation. -->
      <paper-item role="menuitemcheckbox">
        <paper-item-body>
          <div>Show your status</div>
        </paper-item-body>
        <paper-checkbox></paper-checkbox>
      </paper-item>
    </div>
  </paper-header-panel>
  <paper-header-panel main>
    <paper-toolbar class="top-toolbar">Hello</paper-toolbar>
  </paper-header-panel>
</paper-drawer-panel>

Copied from original issue: Polymer/polymer#2377

Across screen readers: this is mostly fine, the only thing is that the little star icons in the bottom left avatar with text and icon and the little chat icons that appear to the right of the names within avatar with text and icon and control with text and icon are not accessible with the screen reader. Do you think these convey important info? Should the person be able to know that there is a star there? If so, we should make them accessible with labels.

Why paper-item has the Polymer.IronButtonState behavior if there is a "non-interactive list item"?

Description

paper-item derivates appear to draw above the app-drawer layout element.

Expected Outcome

items draw under app-drawer overlay

Actual outcome

they do not.

Live Demo

https://jsbin.com/niduzoxasi/edit?html,output

Steps to reproduce

1. place any paper-item in a layout with app-drawer

<app-drawer id="startDrawer"></app-drawer>
  <div class="content">
    asd
    <paper-item>item</paper-item>
  </div>

Browsers Affected

• Chrome
• Firefox
• Safari 10
• Safari 9

Drawer closed

Drawer open

From @azumbrunnen on December 18, 2015 11:4

Icons get cut off. I suggest you add whitespace:pre in the paper-item CSS definition.

Then you can refine the calculation of the width of the component. Let me know what you think.

Copied from original issue: PolymerElements/paper-menu-button#50

paper-item-shared-styles.html uses :host to apply styles, which means any custom element with <style include="paper-item-shared-styles"> will have these styles applied to it. This breaks the use case of including paper-item-shared-styles in order to create light-weight <button class="paper-item"> elements.

One fix would be to change :host to :host(paper-item), :host(paper-icon-item) for selectors which include :host. (You'll also have to add (paper-icon-item) to the :host in paper-icon-item.html so it has sufficient specificity.)

But that currently won't work in the custom style shim due to Polymer/polymer/issues/3610.

Description

I'd like to add css apply rules to a number of things that cannot currently be overridden.

Expected outcome

I'd like to be able to, for example, optionally override these properties so I can have multiple lines of text if I want to.

There may be other properties as well, but those are the ones I'm certain I'd like to modify at the moment.

I'm happy to submit a PR if you're alright with this change.

Actual outcome

Currently there is no way to override those properties.

Browsers Affected

All of them.

Hi,

While using Meteor with Iron-router or Flow-router, I am experiencing rendering issues with the paper-icon-item.

When I simply try to render the following in my global layout

        paper-icon-item
            iron-icon(icon="social:group" item-icon) inbox

it doesnt show anything, except for when I catch the WebComponentsReady event and only render the paper-icon-item in Meteor when this event has fired.

However, then the icon is not rendered within the content select="[item-icon]' area, but outside:

<paper-icon-item role="listitem" class="x-scope paper-icon-item-0">
    <div id="contentIcon" class="content-icon layout horizontal center style-scope paper-icon-item">

    </div>

  <iron-icon icon="social:group" item-icon="" class="x-scope iron-icon-0"><svg viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet" class="style-scope iron-icon" style="pointer-events: none; display: block; width: 100%; height: 100%;"><g class="style-scope iron-icon"><path d="M16 11c1.66 0 2.99-1.34 2.99-3S17.66 5 16 5c-1.66 0-3 1.34-3 3s1.34 3 3 3zm-8 0c1.66 0 2.99-1.34 2.99-3S9.66 5 8 5C6.34 5 5 6.34 5 8s1.34 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V19h14v-2.5c0-2.33-4.67-3.5-7-3.5zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 1.97 1.97 3.45V19h6v-2.5c0-2.33-4.67-3.5-7-3.5z" class="style-scope iron-icon"></path></g></svg>
    <iron-meta id="meta" type="iconset" class="style-scope iron-icon"></iron-meta>
  inbox</iron-icon></paper-icon-item>

When I manually edit the source in Chromes Dev Tools and add another paper-icon-item below the broken one, will it render correctly.

I realise this issue is related to Meteor, however all the scripts should be loaded in correct order and I only render the template part after WebComponentsReady fired.
I can work around with a separate iron-icon in a paper-item, that works fine.

Hello,
I'm not sure if the problem is about paper-item or paper-input, but if I use a paper-input inside a paper-icon-item the input doesn't accept space character.
It's a new problem, from the last few days... Can please help me? I've an application in beta testing and my client ask me for a solution.
Thanks!
-g

,

Description

Styles are not applied to the paper-item.

Expected outcome

Style to be applied as in other browsers.

Actual outcome

No styles get applied.

Live Demo

The paper-item demo page on WebComponents.org: https://www.webcomponents.org/element/PolymerElements/paper-item/demo/demo/index.html

Steps to reproduce

1. Put a paper-item element in the page.
2. Open the page in a Edge 40+ (EdgeHTML 15).

Browsers Affected

• Chrome
• Firefox
• Safari 9
• Safari 8
• Safari 7
• Edge 40+ (EdgeHTML 15)
• IE 11
• IE 10

On Mouse-Over of any paper-items the 'text'-cursor is shown.
I would expect the regular cursor or even the 'pointer' cursor.
This happens on our own page as well as the demo pages of polymer

From @ebidel on November 21, 2015 1:55

26215b1 removed paper-styles/color.html from the imports. The element still uses --dark-divider-opacity, which was defined in color.html.

Now, when you don't import colors.html somewhere in your app (we weren't), the opacity value isn't applied and you get dark selected items:

Copied from original issue: PolymerElements/paper-styles#78

https://elements.polymer-project.org/elements/iron-list?view=demo:demo/selection.html&active=iron-list.

On safari you have to tap twice to delete item (right panel), not on chrome.

Something like this breaks the paper-buttons behavior, including event listeners on the button.

https://gist.github.com/AndreasGalster/19177c15ffd0bf55e793

Description

Adding "justify-content: space-between" to a paper-item causes alignment issues on focus.

Expected outcome

paper-item focus should keep the elements in place

Actual outcome

paper-item focus in Firefox moves the left element to the middle (caused by ::before appearing on focus)

Live Demo

Try this in Chrome and Firefox to compare: https://jsfiddle.net/2jggc1n7/3/

Steps to reproduce

1. Open the link in Firefox and give paper-item focus

Contrast: the contrast on the toggle sliders is really low - it's very difficult to see the button to slide it. Also, is the gray focus state a lighter shade of gray on the toggle buttons than when it's on the checkboxes, or am I just seeing it differently? It appears lighter to my eyes, which makes it harder to see.

Also, the contrast is poor in the second lines of text, e.g. where it says "Change your Google+ Profile Photo" under Profile Photo. Any chance we can make that text slightly darker? It's very difficult to see.

I am not able to hear spoken feedback for the avatars or icons. If they don't contain useful information, that's fine. Will you be giving developers the ability to add labels to these if they would like though?

Accessibility Dev Tools audit results:
[Warning] These elements are focusable but either invisible or obscured by another element (4)
Not applicable tests (7)
Passing tests (7)

Description

Getting an error in console upon importing paper-item in polymer 1.4.0

[paper-item::_flattenBehaviorsList]: behavior is null, check for missing or 404 import

Expected outcome

There should be no error logged in the console

Actual outcome

Getting this console warning from polymer-micro.html:383

[paper-item::_flattenBehaviorsList]: behavior is null, check for missing or 404 import

Live Demo

N/A

Steps to reproduce

1. Put a paper-item element in the page.
2. Open the page in a web browser.

code used:

<paper-dropdown-menu label="Country"> <paper-listbox class="dropdown-content" selected="0"> <paper-item>USA</paper-item> </paper-listbox> </paper-dropdown-menu>

Browsers Affected

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

I've needed to add position: relative; to paper-item so the ripples behave correctly. Without it, the ripples tend to no radiate outwards correctly. It's applied when the element is focused, but that looks like it's too late.

https://github.com/PolymerElements/paper-item/blob/master/paper-item-shared-styles.html#L31