@polymer/paper-dialog-behavior - npm Package Compare versions

Comparing version 3.0.0-pre.4 to 3.0.0-pre.6

demo/simple-dialog.js

@@ -1,8 +0,7 @@
-import { html } from '../../polymer/polymer.js';
-import { PaperDialogBehavior } from '../paper-dialog-behavior.js';
+import '../../polymer/polymer.js';
+import '../paper-dialog-behavior.js';
 import '../paper-dialog-shared-styles.js';
-import { Polymer } from '../../polymer/lib/legacy/polymer-fn.js';
 
 Polymer({
-  _template: html`
+  _template: Polymer.html`
     <style include="paper-dialog-shared-styles"></style>
@@ -15,4 +14,4 @@ <slot></slot>
   behaviors: [
-    PaperDialogBehavior
+    Polymer.PaperDialogBehavior
   ]
 });

package.json

 {
   "name": "@polymer/paper-dialog-behavior",
   "flat": true,
-  "version": "3.0.0-pre.4",
+  "version": "3.0.0-pre.6",
   "description": "Implements a behavior used for material design dialogs",
@@ -22,17 +22,17 @@ "contributors": "The Polymer Authors",
   "dependencies": {
-    "@polymer/iron-overlay-behavior": "^3.0.0-pre.4",
-    "@polymer/paper-styles": "^3.0.0-pre.4",
-    "@polymer/polymer": "^3.0.0-pre.4"
+    "@polymer/iron-overlay-behavior": "^3.0.0-pre.6",
+    "@polymer/paper-styles": "^3.0.0-pre.6",
+    "@polymer/polymer": "^3.0.0-pre.6"
   },
   "devDependencies": {
-    "@polymer/iron-component-page": "^3.0.0-pre.4",
-    "@polymer/iron-demo-helpers": "^3.0.0-pre.4",
-    "@polymer/iron-test-helpers": "^3.0.0-pre.4",
-    "@polymer/paper-button": "^3.0.0-pre.4",
-    "@polymer/paper-dialog-scrollable": "^3.0.0-pre.4",
-    "@polymer/paper-dropdown-menu": "^3.0.0-pre.4",
-    "@polymer/paper-icon-button": "^3.0.0-pre.4",
-    "@polymer/paper-item": "^3.0.0-pre.4",
-    "@polymer/paper-listbox": "^3.0.0-pre.4",
-    "wct-browser-legacy": "0.0.1-pre.10",
+    "@polymer/iron-component-page": "^3.0.0-pre.6",
+    "@polymer/iron-demo-helpers": "^3.0.0-pre.6",
+    "@polymer/iron-test-helpers": "^3.0.0-pre.6",
+    "@polymer/paper-button": "^3.0.0-pre.6",
+    "@polymer/paper-dialog-scrollable": "^3.0.0-pre.6",
+    "@polymer/paper-dropdown-menu": "^3.0.0-pre.6",
+    "@polymer/paper-icon-button": "^3.0.0-pre.6",
+    "@polymer/paper-item": "^3.0.0-pre.6",
+    "@polymer/paper-listbox": "^3.0.0-pre.6",
+    "wct-browser-legacy": "0.0.1-pre.11",
     "@webcomponents/webcomponentsjs": "^1.0.0"
@@ -39,0 +39,0 @@ },

paper-dialog-behavior.js

 import '../polymer/polymer.js';
-import { IronOverlayBehavior } from '../iron-overlay-behavior/iron-overlay-behavior.js';
-import { dom } from '../polymer/lib/legacy/polymer.dom.js';
+import '../iron-overlay-behavior/iron-overlay-behavior.js';
 
-export const PaperDialogBehaviorImpl = {
+/**
+Use `Polymer.PaperDialogBehavior` and `paper-dialog-shared-styles.html` to implement a Material Design
+dialog.
 
+For example, if `<paper-dialog-impl>` implements this behavior:
+
+    <paper-dialog-impl>
+        <h2>Header</h2>
+        <div>Dialog body</div>
+        <div class="buttons">
+            <paper-button dialog-dismiss>Cancel</paper-button>
+            <paper-button dialog-confirm>Accept</paper-button>
+        </div>
+    </paper-dialog-impl>
+
+`paper-dialog-shared-styles.html` provide styles for a header, content area, and an action area for buttons.
+Use the `<h2>` tag for the header and the `buttons` class for the action area. You can use the
+`paper-dialog-scrollable` element (in its own repository) if you need a scrolling content area.
+
+Use the `dialog-dismiss` and `dialog-confirm` attributes on interactive controls to close the
+dialog. If the user dismisses the dialog with `dialog-confirm`, the `closingReason` will update
+to include `confirmed: true`.
+
+### Accessibility
+
+This element has `role="dialog"` by default. Depending on the context, it may be more appropriate
+to override this attribute with `role="alertdialog"`.
+
+If `modal` is set, the element will prevent the focus from exiting the element.
+It will also ensure that focus remains in the dialog.
+
+@hero hero.svg
+@demo demo/index.html
+@polymerBehavior Polymer.PaperDialogBehavior
+*/
+Polymer.PaperDialogBehaviorImpl = {
+
   hostAttributes: {
@@ -82,3 +116,3 @@ 'role': 'dialog',
     // from the root target until this (excluded).
-    var path = dom(event).path;
+    var path = Polymer.dom(event).path;
     for (var i = 0, l = path.indexOf(this); i < l; i++) {
@@ -97,2 +131,3 @@ var target = path[i];
 
-export const PaperDialogBehavior = [IronOverlayBehavior, PaperDialogBehaviorImpl];
+/** @polymerBehavior */
+Polymer.PaperDialogBehavior = [Polymer.IronOverlayBehavior, Polymer.PaperDialogBehaviorImpl];

test/test-buttons.js

@@ -1,6 +0,5 @@
-import { html } from '../../polymer/polymer.js';
-import { Polymer } from '../../polymer/lib/legacy/polymer-fn.js';
+import '../../polymer/polymer.js';
 
 Polymer({
-  _template: html`
+  _template: Polymer.html`
     <button dialog-dismiss="" id="dismiss">dismiss</button>
@@ -7,0 +6,0 @@ <button dialog-confirm="" id="confirm">confirm</button>

test/test-dialog.js

@@ -1,8 +0,7 @@
-import { html } from '../../polymer/polymer.js';
-import { PaperDialogBehavior } from '../paper-dialog-behavior.js';
+import '../../polymer/polymer.js';
+import '../paper-dialog-behavior.js';
 import '../paper-dialog-shared-styles.js';
-import { Polymer } from '../../polymer/lib/legacy/polymer-fn.js';
 
 Polymer({
-  _template: html`
+  _template: Polymer.html`
     <style include="paper-dialog-shared-styles"></style>
@@ -15,4 +14,4 @@ <slot></slot>
   behaviors: [
-    PaperDialogBehavior
+    Polymer.PaperDialogBehavior
   ]
 });

No alert changes

Improved metrics

Total package byte prevSize

48964

increased by2.27%

Lines of code

284

increased by9.23%

Dependency changes

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

• Updated@polymer/paper-styles@^3.0.0-pre.6

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