googlearchive / paper-dialog

A dialog à la Material Design

paper-dialog

This element is compatible with Polymer 0.5 and lower only, and will be deprecated.
You can check out a similar 0.8-compatible version of this element at https://github.com/polymerelements/paper-dialog

paper-dialog's Issues

I have a question.

https://github.com/Polymer/paper-dialog/blob/master/paper-dialog.css#L49

What are differences between polymer-next-selector and polyfill-next-selector?

Thanks!

control paper-shadow in paper-action-dialog

Is there an option that you add some control over the paper-shadow in paper-action-dialog?

I think it could be easily obtained by adding
attributes="z" in <polymer-element> tag and modifing paper-shadow to respect it: <paper-shadow z="{{z}}" fit>

Kind regards

Document the supported affirmative/dismissive attributes on light dom elements

Docs need to explain light dom elements with affirmative and dismissive attributes will be selected.

<content select="[affirmative]"></content>
<content select="[dismissive]"></content>

Dialog within ng-show displays itself in the bottom corner

When I have a modal dialog inside of

<div ng-show="isConsent">

it displays in the bottom right-hand corner of my page. If I remove ng-show from the div it appears in the center. Any ideas about why this might be a problem?

Escape key dismisses multiple dialogs

If multiple dialogs are displayed at once then clicking the mouse away from the dialogs dismisses them one at a time in reverse order of appearance, which is the expected behavior. However, if multiple dialogs are displayed and the Escape is pressed then all dialogs are dismissed at once, which is not the expected behavior.

`.actions` and `.main` containers are in a non-logical order

http://www.w3.org/TR/css3-flexbox/#order-accessibility says "Authors must use order only for visual, not logical, reordering of content; style sheets that use order to perform logical reordering are non-conforming."

Suggestion: swap the order and use select=":not([dismissive]):not([affirmative])" on .actions.

core-header-panel doesn't work in paper-dialog

originally from: https://groups.google.com/d/msgid/polymer-dev/c215a370-443d-4ade-a1f9-d7f3212b3232%40googlegroups.com

The header panel can't be seen inside an paper-dialog (overlay). If I remove the :host {position: relative} from core-header-panel.html, the panel is shown but nothing else can be clicked except the header panel contents.

    <paper-dialog opened="true" autoCloseDisabled="true" target="" transition="paper-dialog-transition-bottom">
        <core-header-panel mode="waterfall">
            <core-toolbar>
                <paper-button label="Select" autofocus></paper-button>
                <paper-button label="Save"></paper-button>
            </core-toolbar>
        </core-header-panel>

        //other elements
    </paper-dialog>

CSS Positioning Persists

paper-dialog seems to persist the "top" value generated on open. This causes reuse of a dialog with different data to no longer be vertically centered.

Consider a scenario where a dialog may have an image for some items, but not an image for others. This may cause the dialog to be much higher for the items with images than the dialog for the items without an image.

(without image)

(with image)

(with image, after reloading -- without having selected the "add" button first)

Looking through the documentation, I couldn't find any way to "reset" the positioning. Please advise if there is; thanks!

On Mobile Safari, "with-backdrop" prevents canceling by clicking outside dialog

On Mobile Safari, the following dialog doesn't close when clicking outside it:

<paper-dialog id="dialog" with-backdrop>
  <h2>Dialog Content</h2>
</paper-dialog>

Dialog won't close when clicking outside (only on Firefox, Safari)

As topic.

Needs aria-describedby and additional accessibility improvements

Unfortunately, dialogs are something a significant number of sites fail at accessibility-wise, and it'd be great if this component could bake in accessibility best practices. In particular:

• Dialogs need aria-describedby so they're automatically read. A good heuristic might be automatically setting aria-describedby to the ID of the first child element with text. That would probably catch most cases where a dialog has a paragraph of text content. For others, perhaps a "describedby" attribute would allow specifying a section by ID.
• Focus needs to be brought into the dialog. Without this, screen reader users need to find and manually interact with the dialog.
• Additionally, aria-hidden needs to be set to true on all non-dialog content. Without this, screen reader focus still seems to remain within the page regardless of whether browser focus was brought into the dialog. aria-hidden must then be restored to its original value when the dialog is dismissed.

Toogle and opened variable

Don't you think that toggle should switch the opened variable ?
Therefore the function should be

...
toggle: function() {
 if (this.$.opened){this.$.opened=false;}else{this.$.opened=true;};       
this.$.overlay.toggle();
      },
....

Opening multiple dialogs that have the "modal" attribute throws an error

And the output from webstorm is:

Uncaught RangeError: Maximum call stack size exceeded.    paper-dialog-behavior.html:215
  Polymer.PaperDialogBehaviorImpl._onFocus  paper-dialog-behavior.html:215
  Polymer.PaperDialogBehaviorImpl._onFocus  paper-dialog-behavior.html:213
  Polymer.PaperDialogBehaviorImpl._onFocus  paper-dialog-behavior.html:215
  Polymer.PaperDialogBehaviorImpl._onFocus  paper-dialog-behavior.html:213
  Polymer.PaperDialogBehaviorImpl._onFocus  paper-dialog-behavior.html:215
  Polymer.PaperDialogBehaviorImpl._onFocus  paper-dialog-behavior.html:213
  Polymer.PaperDialogBehaviorImpl._onFocus  paper-dialog-behavior.html:215
  Polymer.PaperDialogBehaviorImpl._onFocus  paper-dialog-behavior.html:213

Add a description in the GitHub repository

Applying styles to elements within paper-dialog

It seems difficult to apply css to elements within paper-dialogs other than using inline styling because of the way core-overlay handles the dialogs and seems to remove them from the DOM entirely when not displayed.

For example, paper-input and paper-checkbox should have the same colors across the application, so they should pick up the style for something like:

paper-checkbox::shadow #ink { color: #007e9e; }

But this (anything similar) seems not to affect paper-checkbox within paper-dialog despite correctly styling other non-paper-dialog instances of paper-checkbox. Am I doing something wrong, or is this intentional, or something else altogether?

Here's an example of a paper-dialog I'm using to ask for user feedback:

<paper-action-dialog id="feedbackDialog" heading="Tell us what you think" transition="core-transition-bottom" backdrop>

      <p>Your feedback will help us improve the system.</p>

      <paper-input-decorator label="Your comments (required)" error="input is required!" id="feedbackInput" autofocus>
          <paper-autogrow-textarea>
            <textarea></textarea>
          </paper-autogrow-textarea>
      </paper-input-decorator>

      <core-label horizontal layout>
        <paper-checkbox for></paper-checkbox>
        <div vertical layout>
          <div class="body2">Include my contact information</div>
          <p class="body1">We'll include your name, library barcode and email address so we can get back to you.</p>
        </div>
      </core-label>

      <paper-button dismissive on-tap="{{toggleFeedback}}">Cancel</paper-button>
      <paper-button affirmative class="colored" on-tap="{{sendFeedback}}">Send feedback</paper-button>

    </paper-action-dialog>

<paper-dialog>'s contents can't be styled by a containing element

I tried to write a custom element containing a <paper-dialog> and a <style> section to style the contents of the dialog:

<!DOCTYPE html>
<link rel="import" href="bower_components/paper-dialog/paper-dialog.html"></script>
<style>
  * /deep/ p { background-color: yellow; }
</style>
<polymer-element name="my-dialog">
  <template>
    <style>
      p { font-family: "Comic Sans"; color: red;}
    </style>
    <button on-click="{{show}}">Show My</button>
    <paper-dialog id="dlg" heading="A dialog">
      <p>Red Comic Sans?</p>
    </paper-dialog>
  </template>
  <script>
    Polymer({
      show: function() {
        this.$.dlg.open();
      }
    });
  </script>
</polymer-element>
<polymer-element name="other-dialog">
  <template>
    <style>
      p { font-family: monospace; color: blue;}
    </style>
    <button on-click="{{show}}">Show Other</button>
    <paper-dialog id="dlg" heading="A dialog">
      <p>Blue Monospace?</p>
    </paper-dialog>
  </template>
  <script>
    Polymer({
      show: function() {
        this.$.dlg.open();
      }
    });
  </script>
</polymer-element>

<my-dialog></my-dialog>
<other-dialog></my-dialog>

By moving the whole <paper-dialog> element into the shadow of an <overlay-host>, without pulling along the associated <style> block, you lose any styles I wanted for the content of the dialog. To work around this, I'd have to give each <paper-dialog> a globally-unique ID, which kind of defeats the purpose of web components.

Button stays focused when dialog is closed

If you close a dialog (say, with a Cancel button), then re-open the dialog, the button still appears in its hover state, even if the mouse isn't over it.

Styling gets lots after toggling the visibility

I am using:

   <paper-dialog heading="Dialog" transition="paper-dialog-transition-center" tabindex="-1" class="paper-dialog-transition paper-dialog-transition-center" style="z-index: 26; position: fixed; display: none; width: 50%;">
    <p>Lorem Ipsum...</p>
    <paper-button label="OK" affirmative="" default="" role="button" tabindex="0" aria-label="OK"></paper-button>
  </paper-dialog>```

Notice the ```width: 50%```

When the dialog shows up the first time, the width is correctly set to 50%.
If I dismiss the dialog and opens it again, the width attribute is lost.

closeSelector default value documentation is wrong

closeSelector docs say default value is "", but it's actually '[dismissive],[affirmative]' - this is misleading because it's not obvious how to prevent dialog buttons from closing the dialog otherwise (see http://stackoverflow.com/questions/25587549/prevent-paper-dialog-from-automatically-closing)

cant control margin

kinda similar to #14

the paper dialog html defines margin 20 on the core-overlay its using. this isnt configurable from the outside making it impossible to change, for example to a lower margin value.
And since its eventually set as inline style, makes it harder to control with CSS...

would definitely be nice if it was controllable from the outside.

thanks

Coordinates of polymer element <paper-dialog> cannot be set

When using the dart polymer element of paper-elements (https://pub.dartlang.org/packages/paper_elements), the dialog appears in the middle of the browser. The coordinates of the dialog cannot be set and it is not possible to move it.

Are there any plans to enhance the element with that features?
Anja

<paper-dialog> docs mention "layered" without introducing it.

https://www.polymer-project.org/docs/elements/paper-elements.html#paper-dialog says

Because a paper-dialog is layered by default

where layered looks like a technical term, but the term hasn't been introduced anywhere.

Even if I knew to click on the base element to keep looking, layered isn't documented there either, just listed. On <core-overlay>, we get a brief description that doesn't say anything about styling implications.

paper-shadow not being applied.

Running into https://github.com/Polymer/paper-shadow/blob/master/paper-shadow.html#L88:L97 where my dialog doesn't have its paper shadow being applied.

Should default to use hasPosition for the paper-shadow in this element?

cc @morethanreal

Backdrop over dialog when nested in other element.

Backdrop over dialog when nested in another element. Works ok if no backdrop. The dialog is also relative to containing element, not sure if being relative to containing element is intentional. It comes in from an html import. version 0.4.2 and chrome 38.0.2125.104 m

Backdrop not removed when closing dialog which was opened from another dialog

Hello,

This issue depends on paper-action-dialog

If backdrop is enabled the backdrop layer is not removed on closing the dialog if the dialog is opened from within another dialog.

The complete page is not accessable anymore because of the backgrop layer.

When using paper-dialog everything works fine.

If two paper dialogs open at the same time, and both have backdrop set, closing them both does not remove the backdrop

So if you cause two layered dialogs to open at the same time both with backdrop enabled, and close both dialogs, the backdrop does become transparent, but doesn't get removed, preventing events from getting back through to the app

What if two dialogs open at the same time?

when two dialogs was opened in order, the backdrop can not cover the formor?

autofocus does not work with buttons inside paper-dialog

The documentation on http://www.polymer-project.org/docs/elements/paper-elements.html#paper-dialog says:

"One child element should have the autofocus attribute so that the Enter key will automatically take action. This is especially important for screen reader environments."

Even when one button has the autofocus attribute as in the demo (http://www.polymer-project.org/components/paper-dialog/demo.html) the Enter key does nothing. I'm not sure whether the issue is with autofocus or the dialog, but something is broken. This is a real problem from an accessibility standpoint, and an annoyance to other users as well.

.

.

Scrolling inside of paper-dialog

I have quite a large element that causes the paper-dialog to scroll, but the scroll hit area seems to be varied instead of scrolling anywhere on the element. My HTML looks like

<paper-dialog id="paperdialog" transition="paper-dialog-transition-bottom" heading="New Thing">
            <div class="scrollwrap" layout vertical>
                <paper-input label="Stuff" value="{{new.stuff}}" floatingLabel="true"></paper-input>
                <paper-input label="Stuff" value="{{new.stuff}}" floatingLabel="true"></paper-input>
                <paper-input label="Stuff" value="{{new.stuff}}" floatingLabel="true" style="padding-bottom: 400px;"></paper-input>
<!-- style added to force scroll on most screens -->
                <paper-input label="Sort" value="{{new.stuff}}" floatingLabel="true"></paper-input>
                <h4>Live</h4>
                <paper-radio-group selected="{{new.item}}" valueattr="label">
                    <paper-radio-button label="Yes"></paper-radio-button>
                    <paper-radio-button label="No"></paper-radio-button>
                </paper-radio-group>
                <h4>Category</h4>
                <paper-radio-group selected="{{new.item}}" valueattr="label">
                    <paper-radio-button label="Option"></paper-radio-button>
                    <paper-radio-button label="Option"></paper-radio-button>
                    <paper-radio-button label="Option"></paper-radio-button>
                    <paper-radio-button label="Option"></paper-radio-button>
                </paper-radio-group>
            </div>
            <paper-button affirmative label="Cancel"></paper-button>
            <paper-button affirmative label="Add" on-click="{{sendForm}}"></paper-button>
        </paper-dialog>

Content has been scrubbed but hopefully you all can get the picture. This layout ends up with some whitespace at the top right of the dialog, and when I mouse over that whitespace on my screen I cannot get the dialog to scroll.

Edit: clarity and grammar

Documentation for transition is incomplete

The documentation currently reads "Set this property to the id of a". I'm guessing this is meant to finish with "to the ID of a paper-dialog-transition", but I'm not sure.

I'm using the same code as given in the example on that page, and no transition is applied -- the dialog immediately appears with no animation.

If support for dialog element grows, paper-dialog should extend dialog.

The paper-dialog element should be an extension of <dialog> as support for it lands in most browsers. http://caniuse.com/#feat=dialog. It seems natural.

paper-action-dialog should have a divider between buttons and content

See Material Design page "Buttons". It seems like the paper-action-dialog should show a divider when there's more content than can be seen without scrolling. I've included a quote from and link to the page.

"With the addition of a divider, a persistent footer button can also be used for scrollable dialogs."
http://www.google.com/design/spec/components/buttons.html#buttons-usage

Are you going to support angularjs?

Would be awesome

paper-dialog-transition-center dialog consistently opens and shifts down jarringly

http://webmup.com/xSFBe/vid.webm for example

Follow WAI-ARIA best practices

http://www.w3.org/TR/wai-aria-practices/#dialog_modal
http://www.w3.org/TR/wai-aria-practices/#dialog_nonmodal
http://www.w3.org/TR/2011/CR-wai-aria-20110118/roles#dialog

Not working in firefox

on-tap does not tap, but on-click does work, I think this is why you can not dismiss it

Styling a rounded dialog does not work due to the pre-set background #fff

The paper dialog has css:

:host {
      background: #fff;
     /* other css... */
}

Which, if you set:

html /deep/ .rounded_dialog::shadow #scroller {
  border-radius: 10px;
}

Will cause white corners to show behind the dialog. Setting the background color to none, by adding this rule:

html /deep/ .rounded_dialog::shadow #scroller {
  border-radius: 10px;
  background: none;
}

Will cause the #scroller and #actions to be transparent as well. Setting a background color to #scroller & #actions will create some quirky corner effects between the #scroller & #actions.

Sizing of "scroller" incorrect on dialogs with paper-checkbox

try

<paper-action-dialog id="edit_node_dialog" heading="{{dialogNode.id == null ? 'New' : 'Edit'}} Node" transition="paper-transition-center" layered="false">
      <div id="edit_form" layout vertical>

        <paper-input-decorator  label="Location" floatingLabel>
          <input is="core-input" id="input_node_location" value="{{dialogNode.location}}" required></input>
        </paper-input-decorator>

        <paper-input-decorator  label="Number" floatingLabel>
          <input is="core-input" id="input_node_number" value="{{dialogNode.number}}" required type="number" on-key-press="{{keyPress}}"></input>
        </paper-input-decorator>

        <paper-checkbox id="input_node_offline" label="Offline" checked="{{dialogNode.offline}}"></paper-checkbox>
        <paper-checkbox id="input_node_calcdewpoint" label="Calc Dew Point" checked="{{dialogNode.calcDewPoint}}"></paper-checkbox>
      </div>
      <paper-button dismissive>Cancel</paper-button>
      <paper-button id="buttonOk" affirmative on-tap="{{nodeButtonOkTapped}}">Ok</paper-button>
    </paper-action-dialog>

and this should nicely show the dialog, without scrollbars, as it is small, but we get scrollbars in the scroller div.

TypeError: Cannot read property 'teardown' of undefined

I'm using paper-dialog and getting the following error in Chrome:

Exception caught during observer callback: TypeError: Cannot read property 'teardown' of undefined

stack trace is here:
http://cl.ly/image/102q2V1j212F

I've replaced my paper-dialog implementation with one from the docs, and am still getting the error. I've got Polymer 0.4.2.

Closing dialog, button animation causes error 'Cannot removeChild of Null'

Cannot removeChild of Null

Seems that the animation on the button is still running when the dialog/overlay is closed..

Dialog needs to either end the button animation or wait until the animation is finished before the dialog / overlay is removed.

<paper-action-dialog> uses "dismissive" incompatibly with Material Design spec

https://www.polymer-project.org/docs/elements/paper-elements.html#paper-action-dialog says:

The buttons should have either the affirmative or dismissive attribute. See the Material Design spec for more info.
Example:

   <paper-action-dialog heading="Dialog Title">
     <p>Some content</p>
     <paper-button dismissive>More Info</paper-button>
     <paper-button affirmative>Decline</paper-button>
     <paper-button affirmative>Accept</paper-button>
   </paper-action-dialog>

However, http://www.google.com/design/spec/components/dialogs.html#dialogs-specs includes a "Don't" example with an "AGREE" button to the left of a "DISAGREE" button with the explanation that "Dismissive actions are always placed directly to the left of affirmative actions." I interpret this to say that "Decline" is "dismissive", contrary to the Polymer example.

When backdrop="true", the shade is rendered on top of the dialog (iOS)

If you set the shade, it is rendered on top of the dialog.

Tested on:
iOS 7

Page is still scrollable behind a paper-dialog

Don't know if this is WAI, but currently it is possible on both the desktop and mobile versions to scroll the page behind the dialog while it is open. On desktop it's confusing but not really that big of a deal, since it only occurs when the user uses their mouse's scroll wheel.

On mobile, however, it's really bad since any vertical touch gesture is interpreted as scrolling the page (but strangely, not the dialog). What's worse is that when you scroll down in mobile Chrome, the URL bar disappears making the effective height of the viewport larger, but the dialog's backdrop takes a second to respond, so you have the awful situation where the backdrop doesn't cover the bottom 50px of the screen for about a second.

I would think allowing scrolling in the background would be very counter-intuitive and should thus be prevented, but at the very least the backdrop of the dialog should extend far beyond the edges of the viewport so that, if the viewport is suddenly resized, the backdrop still covers everything.

external event for 'opened' changed

Im very new to Polymer but unless Im missing some fundamental concept, I dont see how I can listen on the opened property changing when im using the paper-dialog element.

I want one part of my code (controller) to set the opened state and another part of the code (view) to listen on the state changing.

I dont see how I can do it right now although it seems to me like a very trivial requirement.

Am I missing something or is this just not possible with they way its built now?

thanks

<paper-dialog> is misplaced if called from <paper-icon-button>

If paper-dialog if called from paper-icon-button, then the dialog has wrong dimensions and placed at the bottom-right part of the window. See:

To reproduce this issue, use following code.

<!DOCTYPE html>
<html>
  <head>
    <title>Dialog test</title>
    <link rel="import" href="bower_components/paper-icon-button/paper-icon-button.html">
    <link rel="import" href="bower_components/core-icon-button/core-icon-button.html">
    <link rel="import" href="bower_components/paper-dialog/paper-dialog.html">
  </head>
  <body>

    <template id="main" is="auto-binding">
        <paper-icon-button icon="more-vert" on-tap="{{toggleDialog}}">
          <paper-dialog heading="Test Dialog">
            <div>
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
            </div>
          </paper-dialog>
        </paper-icon-button>
    </template>

    <script>
      var main = document.querySelector('#main');
      main.toggleDialog = function(e) {
        var d = e.target.querySelector('display-conf-dialog,paper-dialog,paper-action-dialog');
        if (!d) {
          return;
        }
        d.toggle();
      };
    </script>
  </body>
</html>

Workaround: use core-icon-button instead of paper-icon-button. Also resizing the window fixes that.

Sub-heading or heading in light dom feature

A subheading attribute would be interesting, but I think it may actually be even better to use a content-selector around a div or some dom element with a class to put whatever HTML provided as the heading. Something to the effect of:

<paper-dialog>
<div class="heading">
    <h2>This is the <strong>title<strong></h2>
    <h3>This is a subtitle</h3>
    <p>Little tiny text snippet saying something clever.</p>
</div>
<div class="content">
<p>This is where all the rest of the stuff goes. </p>
</div>
</paper-dialog>

This seems similar to what has recently been done with paper-button, and how core-header-panel works with the "core-header" class, keeping content in the light dom.

Throwing it out there to chew on.

If dialog content is long, a scrollbar should be permanently shown

Without (especially in Webkit) a default-showing scrollbar, in dialogs with content that is larger than the dialog itself, a scrollbar should always be visible.

Improperly shaped dialog when there are not affirmative or dismissive buttons

If you have no affirmative or dismissive buttons in your dialog, the dialog still shows space at the bottom where affirmative or dismissive buttons would be. The dialog shows up taller than it needs to be.

Because only affirmative or dismissive buttons show up in this space, if you are using your own button that handles dialog dismissal under it's own rules, the extra space shows beneath the button and the whole dialog looks wrong.

can't restrict dialog to a parent element

We have a 'main' element that contains two elements separated by a core-splitter.

<!-- app-main.html -->
  <left-panel></left-panel>
  <core-splitter></core-splitter>
  <right-panel></right-panel>

The right hand element wants to display a paper-dialog element only within its contraints. When it displays the panel, it seems to become part of the whole element, something like this :

<!-- main.html -->
<body>
  <app-main></app-main>
  <core-overlay-layer>
    <overlay-host>
      <paper-dialog></paper-dialog>
    </overlay-host>
  </core-overlay-layer>
</body>

Unfortunately, I have a css rule body > * { display: none !important }, and exceptions for <app-main>. So I have to add <core-overlay-layer> to the exceptions just to be able to see it (after having figured out where it was!).

However, it still shows in the wrong place - ie positions relative to the top left of the body, when I want it relative to the top left of <right-panel>.

It seems (I wasn't the original author of this code) we already turned off the backdrop (well, I don't see it anyway - not in the body - but perhaps that's because of the css rule); and it was replaced by one that only covered the <right-panel>. Unfortunately, that doesn't move the dialog itself, and I'm left trying to position it manually, which just seems wrong.

Is there a solution to this problem? Is there no way to specify a 'target' element into which the dialog is constrained?