search

googlearchive / paper-dialog

A dialog à la Material Design
19 stars 16 forks source link

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

Open jyasskin opened 9 years ago

jyasskin commented 9 years ago

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.

morethanreal commented 9 years ago

From the spec:

Affirmative actions are placed on the right side and continue the process. Affirmative actions may be destructive, like Delete or Remove.

Dismissive actions are placed directly to the left of affirmative actions and return the user to the originating screen or step in the process.

In the example, I interpreted both Decline and Accept as affirmative actions, since choosing one or the other continues the process by answering whether the user declines or accept something, and More Info as a dismissive action that doesn't answer the question.

anthonytordillos commented 9 years ago

I'm pretty sure jyasskin's interpretation is correct. Another issue is that according to the spec, the dismissive action is supposed to be immediately to the left of the affirmative, whereas the current implementation places it on the far left of the dialog.

bendavis78 commented 9 years ago

To echo @anthonytordillos, the example given is also a "DON'T", according to material design spec. The dialog should have only one dismissive and one affirmative, and both buttons should be on the right side of the dialog with the dismissive immediately to the left of the affirmative.