@polymer/paper-toast - npm Package Compare versions

Comparing version 3.0.0-pre.12 to 3.0.0-pre.13

package.json

@@ -18,13 +18,15 @@ {
     "bower": "^1.8.0",
-    "@polymer/iron-component-page": "3.0.0-pre.12",
-    "@polymer/iron-demo-helpers": "3.0.0-pre.12",
-    "@polymer/paper-button": "3.0.0-pre.12",
-    "@polymer/test-fixture": "3.0.0-pre.12",
-    "wct-browser-legacy": "0.0.1-pre.11",
-    "@webcomponents/webcomponentsjs": "^1.0.0"
+    "webmat": "^0.2.0",
+    "@polymer/iron-component-page": "^3.0.0-pre.13",
+    "@polymer/iron-demo-helpers": "^3.0.0-pre.13",
+    "@polymer/paper-button": "^3.0.0-pre.13",
+    "@polymer/test-fixture": "^3.0.0-pre.13",
+    "wct-browser-legacy": "^0.0.1-pre.11",
+    "@webcomponents/webcomponentsjs": "^2.0.0-0"
   },
   "scripts": {
-    "update-types": "bower install && gen-typescript-declarations --deleteExisting --outDir ."
+    "update-types": "bower install && gen-typescript-declarations --deleteExisting --outDir .",
+    "format": "webmat && npm run update-types"
   },
-  "version": "3.0.0-pre.12",
+  "version": "3.0.0-pre.13",
   "resolutions": {
@@ -39,7 +41,7 @@ "inherits": "2.0.3",
   "dependencies": {
-    "@polymer/iron-a11y-announcer": "3.0.0-pre.12",
-    "@polymer/iron-overlay-behavior": "3.0.0-pre.12",
-    "@polymer/iron-fit-behavior": "3.0.0-pre.12",
-    "@polymer/polymer": "3.0.0-pre.12"
+    "@polymer/iron-a11y-announcer": "^3.0.0-pre.13",
+    "@polymer/iron-overlay-behavior": "^3.0.0-pre.13",
+    "@polymer/iron-fit-behavior": "^3.0.0-pre.13",
+    "@polymer/polymer": "^3.0.0-pre.13"
   }
 }

paper-toast.js

@@ -1,7 +0,72 @@
-import { Base } from '@polymer/polymer/polymer-legacy.js';
-import { IronA11yAnnouncer } from '@polymer/iron-a11y-announcer/iron-a11y-announcer.js';
-import { IronOverlayBehavior, IronOverlayBehaviorImpl } from '@polymer/iron-overlay-behavior/iron-overlay-behavior.js';
-import { Polymer } from '@polymer/polymer/lib/legacy/polymer-fn.js';
-import { html } from '@polymer/polymer/lib/utils/html-tag.js';
+/**
+@license
+Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
+This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
+The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
+The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
+Code distributed by Google as part of the polymer project is also
+subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
+*/
+/**
+Material design: [Snackbars & toasts](https://www.google.com/design/spec/components/snackbars-toasts.html)
 
+`paper-toast` provides a subtle notification toast. Only one `paper-toast` will
+be visible on screen.
+
+Use `opened` to show the toast:
+
+Example:
+
+    <paper-toast text="Hello world!" opened></paper-toast>
+
+Also `open()` or `show()` can be used to show the toast:
+
+Example:
+
+    <paper-button on-click="openToast">Open Toast</paper-button>
+    <paper-toast id="toast" text="Hello world!"></paper-toast>
+
+    ...
+
+    openToast: function() {
+      this.$.toast.open();
+    }
+
+Set `duration` to 0, a negative number or Infinity to persist the toast on screen:
+
+Example:
+
+    <paper-toast text="Terms and conditions" opened duration="0">
+      <a href="#">Show more</a>
+    </paper-toast>
+
+
+### Styling
+The following custom properties and mixins are available for styling:
+
+Custom property | Description | Default
+----------------|-------------|----------
+`--paper-toast-background-color` | The paper-toast background-color | `#323232`
+`--paper-toast-color` | The paper-toast color | `#f1f1f1`
+
+This element applies the mixin `--paper-font-common-base` but does not import `paper-styles/typography.html`.
+In order to apply the `Roboto` font to this element, make sure you've imported `paper-styles/typography.html`.
+
+@group Paper Elements
+@element paper-toast
+@demo demo/index.html
+@hero hero.svg
+*/
+/*
+  FIXME(polymer-modulizer): the above comments were extracted
+  from HTML and may be out of place here. Review them and
+  then delete this comment!
+*/
+import { Base } from '../polymer/polymer-legacy.js';
+
+import { IronA11yAnnouncer } from '../iron-a11y-announcer/iron-a11y-announcer.js';
+import { IronOverlayBehavior, IronOverlayBehaviorImpl } from '../iron-overlay-behavior/iron-overlay-behavior.js';
+import { Polymer } from '../polymer/lib/legacy/polymer-fn.js';
+import { html } from '../polymer/lib/utils/html-tag.js';
+
 // Keeps track of the toast currently opened.
@@ -58,7 +123,4 @@ var currentToast = null;
   is: 'paper-toast',
+  behaviors: [IronOverlayBehavior],
 
-  behaviors: [
-    IronOverlayBehavior
-  ],
-
   properties: {
@@ -69,7 +131,3 @@ /**
      */
-    fitInto: {
-      type: Object,
-      value: window,
-      observer: '_onFitIntoChanged'
-    },
+    fitInto: {type: Object, value: window, observer: '_onFitIntoChanged'},
 
@@ -81,6 +139,3 @@ /**
      */
-    horizontalAlign: {
-      type: String,
-      value: 'left'
-    },
+    horizontalAlign: {type: String, value: 'left'},
 
@@ -92,6 +147,3 @@ /**
      */
-    verticalAlign: {
-      type: String,
-      value: 'bottom'
-    },
+    verticalAlign: {type: String, value: 'bottom'},
 
@@ -103,6 +155,3 @@ /**
      */
-    duration: {
-      type: Number,
-      value: 3000
-    },
+    duration: {type: Number, value: 3000},
 
@@ -112,6 +161,3 @@ /**
      */
-    text: {
-      type: String,
-      value: ''
-    },
+    text: {type: String, value: ''},
 
@@ -122,6 +168,3 @@ /**
      */
-    noCancelOnOutsideClick: {
-      type: Boolean,
-      value: true
-    },
+    noCancelOnOutsideClick: {type: Boolean, value: true},
 
@@ -133,11 +176,6 @@ /**
      */
-    noAutoFocus: {
-      type: Boolean,
-      value: true
-    }
+    noAutoFocus: {type: Boolean, value: true}
   },
 
-  listeners: {
-    'transitionend': '__onTransitionEnd'
-  },
+  listeners: {'transitionend': '__onTransitionEnd'},
 
@@ -168,3 +206,4 @@ /**
   /**
-   * Show the toast. Without arguments, this is the same as `open()` from `IronOverlayBehavior`.
+   * Show the toast. Without arguments, this is the same as `open()` from
+   * `IronOverlayBehavior`.
    * @param {(Object|string)=} properties Properties to be set before opening the toast.
@@ -175,7 +214,8 @@ * e.g. `toast.show('hello')` or `toast.show({text: 'hello', duration: 3000})`
     if (typeof properties == 'string') {
-      properties = { text: properties };
+      properties = {text: properties};
     }
     for (var property in properties) {
       if (property.indexOf('_') === 0) {
-        Base._warn('The property "' + property + '" is private and was not set.');
+        Base._warn(
+            'The property "' + property + '" is private and was not set.');
       } else if (property in this) {
@@ -204,4 +244,4 @@ this[property] = properties[property];
     // closing the toast. The last one so far is for `opacity`.
-    // This marks the end of the transition, so we check for this to determine if this
-    // is the correct event.
+    // This marks the end of the transition, so we check for this to determine
+    // if this is the correct event.
     if (e && e.target === this && e.propertyName === 'opacity') {
@@ -230,5 +270,3 @@ if (this.opened) {
       currentToast = this;
-      this.fire('iron-announce', {
-        text: this.text
-      });
+      this.fire('iron-announce', {text: this.text});
       if (this._canAutoClose) {
@@ -235,0 +273,0 @@ this._autoClose = this.async(this.close, this.duration);

README.md

@@ -44,2 +44,13 @@ [![Build status](https://travis-ci.org/PolymerElements/paper-toast.svg?branch=master)](https://travis-ci.org/PolymerElements/paper-toast)
 
+`<paper-toast>` is affected by the [stacking context](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context) of its container. Adding `<paper-toast>` inside elements that create a new stacking context - e.g. `<app-drawer>`, `<app-layout>` or `<iron-list>` - might result in toasts partially obstructed or clipped. Add `<paper-toast>` to the top level (`<body>`) element, outside the structure, e.g.:
+
+```html
+  <!-- ... -->
+  </app-drawer-layout>
+  <paper-toast id="toast"></paper-toast>
+</template>
+```
+
+You can then use custom events to communicate with it from within child components, using `addEventListener` and `dispatchEvent`.
+
 ### Styling
@@ -46,0 +57,0 @@

No alert changes

Improved metrics

Total package byte prevSize

33737

increased by10.19%

Lines of code

276

increased by8.24%

Number of lines in readme file

68

increased by19.3%

Worsened metrics

Dev dependency count

9

increased by12.5%

Dependency changes

• + Added@polymer/iron-a11y-announcer@3.2.0(transitive)

• + Added@polymer/iron-a11y-keys-behavior@3.0.1(transitive)

• + Added@polymer/iron-fit-behavior@3.1.0(transitive)

• + Added@polymer/iron-overlay-behavior@3.0.3(transitive)

• + Added@polymer/iron-resizable-behavior@3.0.1(transitive)

• + Added@polymer/polymer@3.5.2(transitive)

• - Removed@polymer/iron-a11y-announcer@3.0.0-pre.12(transitive)

• - Removed@polymer/iron-a11y-keys-behavior@3.0.0-pre.12(transitive)

• - Removed@polymer/iron-fit-behavior@3.0.0-pre.12(transitive)

• - Removed@polymer/iron-overlay-behavior@3.0.0-pre.12(transitive)

• - Removed@polymer/iron-resizable-behavior@3.0.0-pre.12(transitive)

• - Removed@polymer/polymer@3.0.0-pre.12(transitive)

• - Removed@webcomponents/webcomponentsjs@1.3.3(transitive)

• Updated@polymer/iron-a11y-announcer@^3.0.0-pre.13

• Updated@polymer/iron-fit-behavior@^3.0.0-pre.13

• Updated@polymer/iron-overlay-behavior@^3.0.0-pre.13

• Updated@polymer/polymer@^3.0.0-pre.13