extend from paper-button-base

- "disabled" works - use child DOM for content, not label= attribute - core-icon removed from element - add styling for selected item - new demo
googlearchive · Nov 12, 2014 · 60a9bcf · 60a9bcf
1 parent b846c3a
commit 60a9bcf
Show file tree

Hide file tree

Showing 4 changed files with 176 additions and 119 deletions.
diff --git a/bower.json b/bower.json
@@ -4,6 +4,11 @@
   "dependencies": {
     "polymer": "Polymer/polymer#master",
     "core-icon": "Polymer/core-icon#master",
-    "paper-ripple": "Polymer/paper-ripple#master"
+    "core-icons": "Polymer/core-icons#master",
+    "core-selector": "Polymer/core-selector#master",
+    "font-roboto": "Polymer/font-roboto#master",
+    "paper-button": "Polymer/paper-button#master",
+    "paper-ripple": "Polymer/paper-ripple#master",
+    "paper-shadow": "Polymer/paper-shadow#master"
   }
 }
diff --git a/demo.html b/demo.html
@@ -6,46 +6,99 @@
 -->
 <html>
 <head>
-  <title>paper-item</title>
 
   <meta charset="utf-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
   <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
 
+  <title>paper-item</title>
+
   <script src="../webcomponentsjs/webcomponents.js"></script>
+
   <link href="../font-roboto/roboto.html" rel="import">
+  <link href="../core-icon/core-icon.html" rel="import">
   <link href="../core-icons/core-icons.html" rel="import">
+  <link href="../core-selector/core-selector.html" rel="import">
+  <link href="../paper-shadow/paper-shadow.html" rel="import">
+
   <link href="paper-item.html" rel="import">
+
   <style shim-shadowdom>
     body {
       font-family: RobotoDraft, 'Helvetica Neue', Helvetica, Arial;
-      margin: 20px;
+      font-size: 14px;
+      margin: 0;
+      padding: 24px;
+      -webkit-tap-highlight-color: rgba(0,0,0,0);
+      -webkit-touch-callout: none;
     }
-
-    paper-item {
-      max-width: 320px;
+
+    section {
+      padding: 20px 0;
+    }
+
+    section > div {
+      padding: 14px;
+      font-size: 16px;
+    }
+
+    html /deep/ paper-shadow {
+      display: inline-block;
+    }
+
+    core-icon {
+      margin-right: 0.5em;
     }
   </style>
 </head>
 <body unresolved>
 
-  <h2>items with icon and label:</h2>
-  <paper-item icon="refresh" label="Refresh"></paper-item>
-  <paper-item icon="favorite" label="Favorite"></paper-item>
-  <paper-item icon="delete" label="Delete"></paper-item>
-  <paper-item icon="bookmark" label="Bookmark"></paper-item>
-
-  <br><br>
-
-  <h2>links (via &lt;a&gt;):</h2>
-  <paper-item label="Polymer Project link">
-    <a href="http://www.polymer-project.org" target="_blank"></a>
-  </paper-item>
-  <paper-item label="GitHub link">
-    <a href="https://github.com/Polymer" target="_blank"></a>
-  </paper-item>
-  <paper-item label="WebComponents.org link">
-    <a href="http://webcomponents.org/" target="_blank"></a>
-  </paper-item>
+  <section>
+
+    <div>Default</div>
+
+    <paper-shadow>
+      <paper-item>Item</paper-item>
+      <paper-item disabled>Disabled</paper-item>
+      <paper-item noink><a href="http://www.polymer-project.org" layout horizontal center>Link</a></paper-item>
+    </paper-shadow>
+
+  </section>
+
+  <section>
+
+    <div>In a core-selector</div>
+
+    <paper-shadow>
+      <core-selector selected="1" selectedAttribute="">
+        <paper-item>Item 1</paper-item>
+        <paper-item>Item 2</paper-item>
+        <paper-item>Item 3</paper-item>
+      </core-selector>
+    </paper-shadow>
+
+  </section>
+
+  <section>
+
+    <div>Custom Content</div>
+
+    <paper-shadow>
+      <paper-item>
+        <core-icon icon="content-cut"></core-icon>
+        Cut
+      </paper-item>
+      <paper-item>
+        <core-icon icon="content-copy"></core-icon>
+        Copy
+      </paper-item>
+      <paper-item>
+        <core-icon icon="content-paste"></core-icon>
+        Paste
+      </paper-item>
+    </paper-shadow>
+
+  </section>
+
 </body>
 </html>
diff --git a/paper-item.css b/paper-item.css
diff --git a/paper-item.html b/paper-item.html
@@ -8,97 +8,139 @@
 -->
 
 <!--
-@group Paper Elements
 
-`paper-item` is a list-item object for use in menus. It may contain and icon and/or
-a text label.
+Material Design: <a href="http://www.google.com/design/spec/components/menus.html">Menus</a>
+
+`paper-item` is a simple item object for use in menus. When the user touches the item, a ripple
+effect emanates from the point of contact. If used in a `core-selector`, the selected item will
+be highlighted.
 
 Example:
 
     <core-menu>
-        <paper-item icon="refresh" label="Refresh"></paper-item>
-        <paper-item label="Help"></paper-item>
-        <paper-item label="Sign Out"></paper-item>
+        <paper-item>Cut</paper-item>
+        <paper-item>Copy</paper-item>
+        <paper-item>Paste</paper-item>
     </core-menu>
 
-To use as a link, put an `<a>` element in the item.
+Links
+-----
+
+To use as a link, put an `<a>` element in the item. You may also use the `noink` attribute to
+prevent the ripple from "freezing" during a page navigation.
 
 Example:
 
-    <paper-item icon="home" label="Home">
-        <a href="http://www.polymer-project.org"></a>
+    <paper-item noink>
+        <a href="http://www.polymer-project.org" layout horizontal center>Polymer</a>
     </paper-item>
 
-@class paper-item
+@group Paper Elements
+@element paper-item
+@extends paper-button-base
+@status unstable
 -->
 
 <link href="../polymer/polymer.html" rel="import">
-<link href="../core-icon/core-icon.html" rel="import">
+<link href="../paper-button/paper-button-base.html" rel="import">
 <link href="../paper-ripple/paper-ripple.html" rel="import">
 
-<link href="paper-item.css" rel="stylesheet" shim-shadowdom>
-
-<polymer-element name="paper-item" attributes="label iconSrc icon" center horizontal layout>
+<polymer-element name="paper-item" extends="paper-button-base">
 
   <template>
 
-    <paper-ripple id="ripple"></paper-ripple>
+    <style>
+
+      :host {
+        display: block;
+        position: relative;
+        font-size: 16px;
+        box-sizing: border-box;
+        min-width: 7em;
+        height: 3em;
+        outline: none;
+        -webkit-user-select: none;
+        user-select: none;
+        cursor: pointer;
+        z-index: 0;
+      }
+
+      :host([disabled]) {
+        color: #a8a8a8;
+        cursor: auto;
+        pointer-events: none;
+      }
+
+      :host(.core-selected) {
+        background-color: #eaeaea;
+      }
+
+      #ripple {
+        pointer-events: none;
+        z-index: -1;
+      }
+
+      .button-content {
+        height: 100%;
+        padding: 0 16px;
+      }
+
+      polyfill-next-selector { content: ':host > 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;
+      }
+
+    </style>
+
+    <!-- this div is needed to position the ripple behind text content -->
+    <div class="button-content" relative layout horizontal center>
+      <content></content>
+    </div>
 
-    <core-icon id="icon" hidden?="{{!iconSrc && !icon}}" src="{{iconSrc}}" icon="{{icon}}"></core-icon>
-    <div id="label">{{label}}</div>
-    <content></content>
   </template>
 
   <script>
-    Polymer('paper-item', {
+    Polymer({
 
       publish: {
 
         /**
-         * The label for the item.
+         * If true, the button will be styled with a shadow.
          *
-         * @attribute label
-         * @type string
-         * @default ''
+         * @attribute raised
+         * @type boolean
+         * @default false
          */
-        label: '',
+        raised: false,
 
         /**
-         * (optional) The URL of an image for an icon to use in the button.
-         * Should not use `icon` property if you are using this property.
+         * By default the ripple emanates from where the user touched the button.
+         * Set this to true to always center the ripple.
          *
-         * @attribute iconSrc
-         * @type string
-         * @default ''
+         * @attribute recenteringTouch
+         * @type boolean
+         * @default false
          */
-        iconSrc: '',
+        recenteringTouch: false,
 
         /**
-         * (optional) Specifies the icon name or index in the set of icons
-         * available in the icon set. If using this property, load the icon
-         * set separately where the icon is used. Should not use `src`
-         * if you are using this property.
+         * By default the ripple expands to fill the button. Set this to false to
+         * constrain the ripple to a circle within the button.
          *
-         * @attribute icon
-         * @type string
-         * @default ''
+         * @attribute fill
+         * @type boolean
+         * @default true
          */
-        icon: ''
-
-      },
-
-      eventDelegates: {
-        'down': 'downAction',
-        'up': 'upAction'
-      },
+        fill: true
 
-      downAction: function(e) {
-        this.$.ripple.downAction(e);
-      },
-
-      upAction: function(e) {
-        this.$.ripple.upAction(e);
       }
+
     });
   </script>
-</polymer-element>
+</polymer-element>