polymer-paper-rails 0.2.5 → 0.2.6

data/app/assets/components/paper-input/paper-input.html

@@ -36,6 +36,11 @@ Use `paper-input-decorator` directly, or see
 <a href="https://github.com/garstasio/ajax-form">`ajax-form`</a> for a possible solution
 to submitting a `paper-input`.
 
+Validation
+----------
+
+Use `paper-input-decorator` if you would like to implement validation.
+
 @group Paper Elements
 @element paper-input
 @homepage github.io
@@ -56,7 +61,7 @@ to submitting a `paper-input`.
   </style>
 
   <paper-input-decorator id="decorator" label="{{label}}" floatingLabel="{{floatingLabel}}" value="{{value}}" disabled?="{{disabled}}">
-    <input is="core-input" value="{{value}}" committedValue="{{committedValue}}" on-change="{{changeAction}}" disabled?="{{disabled}}">
+    <input is="core-input" id="input" value="{{value}}" committedValue="{{committedValue}}" on-change="{{changeAction}}" disabled?="{{disabled}}">
   </paper-input-decorator>
 
 </template>
@@ -95,21 +100,42 @@ to submitting a `paper-input`.
        */
       disabled: {value: false, reflect: true},
 
+      /**
+       * The current value of the input.
+       *
+       * @attribute value
+       * @type String
+       * @default ''
+       */
       value: '',
 
+      /**
+       * The most recently committed value of the input.
+       *
+       * @attribute committedValue
+       * @type String
+       * @default ''
+       */
       committedValue: ''
 
     },
 
+    /**
+     * Focuses the `input`.
+     *
+     * @method focus
+     */
+    focus: function() {
+      this.$.input.focus();
+    },
+
     valueChanged: function() {
       this.$.decorator.updateLabelVisibility(this.value);
     },
 
     changeAction: function(e) {
-      if (!window.ShadowDOMPolyfill) {
-        // re-fire event that does not bubble across shadow roots
-        this.fire('change', null, this);
-      }
+      // re-fire event that does not bubble across shadow roots
+      this.fire('change', null, this);
     }
 
   });

data/app/assets/components/paper-item/paper-item.html

@@ -82,7 +82,6 @@ Example:
       }
 
       .button-content {
-        height: 100%;
         padding: 0.9em 1em;
       }
 
@@ -144,4 +143,4 @@ Example:
 
     });
   </script>
-</polymer-element>
+</polymer-element>

data/app/assets/components/paper-progress/paper-progress.html

@@ -21,7 +21,7 @@ progress, such as the buffer level during a streaming playback progress bar.
 
 Example:
 
-    <paper-progress value="10" secondaryProgesss="30"></paper-progress>
+    <paper-progress value="10" secondaryProgress="30"></paper-progress>
 
 Styling progress bar:
 

data/app/assets/components/paper-radio-button/paper-radio-button.css

@@ -50,25 +50,30 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
   border-radius: 50%;
   border: solid 2px;
   border-color: #5a5a5a;
+  transition: border-color 0.28s;
+}
+
+:host([checked]) #offRadio {
+  border-color: #009688;
 }
 
 #onRadio {
   position: absolute;
-  top: 0;
-  left: 0;
-  width: 16px;
-  height: 16px;
+  top: 4px;
+  left: 4px;
+  width: 8px;
+  height: 8px;
   border-radius: 50%;
-  background-color: #0f9d58;
+  background-color: #009688;
   -webkit-transform: scale(0);
   transform: scale(0);
   transition: -webkit-transform ease 0.28s;
   transition: transform ease 0.28s;
 }
 
-#onRadio.fill {
-  -webkit-transform: scale(1.1);
-  transform: scale(1.1);
+:host([checked]) #onRadio {
+  -webkit-transform: scale(1);
+  transform: scale(1);
 }
 
 #radioLabel {
@@ -89,16 +94,15 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
   pointer-events: none;
 }
 
+:host([disabled]) #offRadio,
 :host([disabled]) #onRadio {
-  display: none;
+  opacity: 0.33;
 }
 
 :host([disabled]) #offRadio {
-  opacity: 0.33;
   border-color: #5a5a5a;
 }
 
-:host([disabled][checked]) #offRadio {
-  opacity: 0.33;
+:host([disabled][checked]) #onRadio {
   background-color: #5a5a5a;
 }

data/app/assets/components/paper-radio-button/paper-radio-button.html

@@ -32,7 +32,11 @@ To change the radio checked color:
     paper-radio-button::shadow #onRadio {
       background-color: #4285f4;
     }
-    
+
+    paper-radio-button[checked]::shadow #offRadio {
+      border-color: #4285f4;
+    }
+
 To change the ink color for unchecked state:
 
     paper-radio-button::shadow #ink {
@@ -133,6 +137,9 @@ To change the radio unchecked color:
     },
     
     tap: function() {
+      if (this.disabled) {
+        return;
+      }
       var old = this.checked;
       this.toggle();
       if (this.checked !== old) {
@@ -145,8 +152,7 @@ To change the radio unchecked color:
     },
     
     checkedChanged: function() {
-      this.$.onRadio.classList.toggle('fill', this.checked);
-      this.setAttribute('aria-checked', this.checked ? 'true': 'false');
+      this.setAttribute('aria-checked', this.checked ? 'true' : 'false');
       this.fire('core-change');
     },
     

data/app/assets/components/paper-ripple/paper-ripple.html

@@ -44,7 +44,8 @@ Styling ripple effect:
   Note that CSS color property is inherited so it is not required to set it on
   the `paper-ripple` element directly.
 
-Apply `recenteringTouch` class to make the recentering rippling effect.
+By default, the ripple is centered on the point of contact.  Apply `recenteringTouch` 
+class to have the ripple grow toward the center of its container.
 
     <paper-ripple class="recenteringTouch"></paper-ripple>
 

data/app/assets/components/paper-shadow/paper-shadow.css

@@ -26,41 +26,41 @@ html /deep/ paper-shadow::shadow #shadow-top[animated] {
 }
 
 html /deep/ .paper-shadow-top-z-1 {
-  box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.16);
+  box-shadow: none;
 }
 
 html /deep/ .paper-shadow-bottom-z-1 {
-  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
+  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.37);
 }
 
 html /deep/ .paper-shadow-top-z-2 {
-  box-shadow: 0 6px 20px 0 rgba(0, 0, 0, 0.19);
+  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.2);
 }
 
 html /deep/ .paper-shadow-bottom-z-2 {
-  box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2);
+  box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.3);
 }
 
 html /deep/ .paper-shadow-top-z-3 {
-  box-shadow: 0 17px 50px 0 rgba(0, 0, 0, 0.19);
+  box-shadow: 0 11px 7px 0 rgba(0, 0, 0, 0.19);
 }
 
 html /deep/ .paper-shadow-bottom-z-3 {
-  box-shadow: 0 12px 15px 0 rgba(0, 0, 0, 0.24);
+  box-shadow: 0 13px 25px 0 rgba(0, 0, 0, 0.3);
 }
 
 html /deep/ .paper-shadow-top-z-4 {
-  box-shadow: 0 25px 55px 0 rgba(0, 0, 0, 0.21);
+  box-shadow: 0 14px 12px 0 rgba(0, 0, 0, 0.17);
 }
 
 html /deep/ .paper-shadow-bottom-z-4 {
-  box-shadow: 0 16px 28px 0 rgba(0, 0, 0, 0.22);
+  box-shadow: 0 20px 40px 0 rgba(0, 0, 0, 0.3);
 }
 
 html /deep/ .paper-shadow-top-z-5 {
-  box-shadow: 0 40px 77px 0 rgba(0, 0, 0, 0.22);
+  box-shadow: 0 17px 17px 0 rgba(0, 0, 0, 0.15);
 }
 
 html /deep/ .paper-shadow-bottom-z-5 {
-  box-shadow: 0 27px 24px 0 rgba(0, 0, 0, 0.2);
+  box-shadow: 0 27px 55px 0 rgba(0, 0, 0, 0.3);
 }

data/app/assets/components/paper-shadow/paper-shadow.html

@@ -64,6 +64,13 @@ Example:
 
     },
 
+    /**
+     * Set the z-depth of the shadow. This should be used after element
+     * creation instead of setting the z property directly.
+     *
+     * @method setZ
+     * @param {Number} newZ
+     */
     setZ: function(newZ) {
       if (this.z !== newZ) {
         this.$['shadow-bottom'].classList.remove('paper-shadow-bottom-z-' + this.z);
@@ -76,4 +83,4 @@ Example:
 
   });
 </script>
-</polymer-element>
+</polymer-element>

data/app/assets/components/paper-slider/paper-slider.html

@@ -116,6 +116,12 @@ To change the slider secondary progress bar color:
      *
      * @event core-change
      */
+     
+    /**
+     * Fired when the slider's immediateValue changes.
+     *
+     * @event immediate-value-change
+     */
 
     /**
      * Fired when the slider's value changes due to user interaction.
@@ -183,9 +189,17 @@ To change the slider secondary progress bar color:
      * @type number
      * @default 0
      */
-
     maxMarkers: 100,
-     
+
+    /**
+     * True when the user is dragging the slider.
+     *
+     * @attribute dragging
+     * @type boolean
+     * @default false
+     */
+    dragging: false,
+
     observe: {
       'step snaps': 'update'
     },
@@ -227,6 +241,7 @@ To change the slider secondary progress bar color:
       if (!this.dragging) {
         this.value = this.immediateValue;
       }
+      this.fire('immediate-value-change');
     },
 
     expandKnob: function() {
@@ -297,7 +312,7 @@ To change the slider secondary progress bar color:
       var ratio = (e.x - rect.left) / this._w;
       this.positionKnob(ratio);
       this.expandJob = this.job(this.expandJob, this.expandKnob, 60);
-      this.fire('change');
+      this.asyncFire('change');
     },
 
     knobTransitionEnd: function(e) {
@@ -307,7 +322,8 @@ To change the slider secondary progress bar color:
     },
 
     updateMarkers: function() {
-      this.markers = [], l = (this.max - this.min) / this.step;
+      this.markers = [];
+      var l = (this.max - this.min) / this.step;
       if (!this.snaps && l > this.maxMarkers) {
         return;
       }
@@ -316,10 +332,18 @@ To change the slider secondary progress bar color:
       }
     },
 
+    /**
+     * Increases value by `step` but not above `max`.
+     * @method increment
+     */
     increment: function() {
       this.value = this.clampValue(this.value + this.step);
     },
 
+    /**
+     * Decreases value by `step` but not below `min`.
+     * @method decrement
+     */
     decrement: function() {
       this.value = this.clampValue(this.value - this.step);
     },

data/app/assets/components/paper-spinner/paper-spinner.css

@@ -134,75 +134,87 @@
   to    { transform: rotate(1080deg); } /* 4   * ARCSIZE */
 }
 
+/**
+ * HACK: Even though the intention is to have the current .spinner-layer at
+ * `opacity: 1`, we set it to `opacity: 0.99` instead since this forces Chrome
+ * to do proper subpixel rendering for the elements being animated. This is
+ * especially visible in Chrome 39 on Ubuntu 14.04. See:
+ *
+ * - https://github.com/Polymer/paper-spinner/issues/9
+ * - https://code.google.com/p/chromium/issues/detail?id=436255
+ */
 @-webkit-keyframes blue-fade-in-out {
-  from { opacity: 1; }
-  25% { opacity: 1; }
+  from { opacity: 0.99; }
+  25% { opacity: 0.99; }
   26% { opacity: 0; }
   89% { opacity: 0; }
-  90% { opacity: 1; }
-  100% { opacity: 1; }
+  90% { opacity: 0.99; }
+  100% { opacity: 0.99; }
 }
 
 @keyframes blue-fade-in-out {
-  from { opacity: 1; }
-  25% { opacity: 1; }
+  from { opacity: 0.99; }
+  25% { opacity: 0.99; }
   26% { opacity: 0; }
   89% { opacity: 0; }
-  90% { opacity: 1; }
-  100% { opacity: 1; }
+  90% { opacity: 0.99; }
+  100% { opacity: 0.99; }
 }
 
 @-webkit-keyframes red-fade-in-out {
   from { opacity: 0; }
   15% { opacity: 0; }
-  25% { opacity: 1; }
-  50% { opacity: 1; }
+  25% { opacity: 0.99; }
+  50% { opacity: 0.99; }
   51% { opacity: 0; }
 }
 
 @keyframes red-fade-in-out {
   from { opacity: 0; }
   15% { opacity: 0; }
-  25% { opacity: 1; }
-  50% { opacity: 1; }
+  25% { opacity: 0.99; }
+  50% { opacity: 0.99; }
   51% { opacity: 0; }
 }
 
 @-webkit-keyframes yellow-fade-in-out {
   from { opacity: 0; }
   40% { opacity: 0; }
-  50% { opacity: 1; }
-  75% { opacity: 1; }
+  50% { opacity: 0.99; }
+  75% { opacity: 0.99; }
   76% { opacity: 0; }
 }
 
 @keyframes yellow-fade-in-out {
   from { opacity: 0; }
   40% { opacity: 0; }
-  50% { opacity: 1; }
-  75% { opacity: 1; }
+  50% { opacity: 0.99; }
+  75% { opacity: 0.99; }
   76% { opacity: 0; }
 }
 
 @-webkit-keyframes green-fade-in-out {
   from { opacity: 0; }
   65% { opacity: 0; }
-  75% { opacity: 1; }
-  90% { opacity: 1; }
+  75% { opacity: 0.99; }
+  90% { opacity: 0.99; }
   100% { opacity: 0; }
 }
 
 @keyframes green-fade-in-out {
   from { opacity: 0; }
   65% { opacity: 0; }
-  75% { opacity: 1; }
-  90% { opacity: 1; }
+  75% { opacity: 0.99; }
+  90% { opacity: 0.99; }
   100% { opacity: 0; }
 }
 
 /**
  * Patch the gap that appear between the two adjacent div.circle-clipper while the
  * spinner is rotating (appears on Chrome 38, Safari 7.1, and IE 11).
+ *
+ * Update: the gap no longer appears on Chrome when .spinner-layer's opacity is 0.99,
+ * but still does on Safari and IE.
  */
 .gap-patch {
   position: absolute;
@@ -294,18 +306,18 @@
   to { transform: rotate(-130deg); }
 }
 
-#spinnerContainer.warmdown {
+#spinnerContainer.cooldown {
   /* duration: SHRINK_TIME */
   -webkit-animation: container-rotate 1568ms linear infinite, fade-out 400ms cubic-bezier(0.4, 0.0, 0.2, 1);
   animation: container-rotate 1568ms linear infinite, fade-out 400ms cubic-bezier(0.4, 0.0, 0.2, 1);
 }
 
 @-webkit-keyframes fade-out {
-  from { opacity: 1; }
+  from { opacity: 0.99; }
   to { opacity: 0; }
 }
 
 @keyframes fade-out {
-  from { opacity: 1; }
+  from { opacity: 0.99; }
   to { opacity: 0; }
 }