Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(dialog): add result to MdDialogClose directive #4332

Merged
merged 1 commit into from
May 22, 2017
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 7 additions & 1 deletion src/lib/dialog/dialog-content-directives.ts
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ import {MdDialogRef} from './dialog-ref';
@Directive({
selector: 'button[md-dialog-close], button[mat-dialog-close]',
host: {
'(click)': 'dialogRef.close()',
'(click)': 'dialogRef.close(dialogResult)',
'[attr.aria-label]': 'ariaLabel',
'type': 'button', // Prevents accidental form submits.
}
Expand All @@ -17,6 +17,12 @@ export class MdDialogClose {
/** Screenreader label for the button. */
@Input('aria-label') ariaLabel: string = 'Close dialog';

/** Dialog close input. */
@Input('md-dialog-close') dialogResult: any;

/** Dialog close input for compatibility mode. */
@Input('mat-dialog-close') set _matDialogClose(value: any) { this.dialogResult = value; }

constructor(public dialogRef: MdDialogRef<any>) { }
}

Expand Down
23 changes: 17 additions & 6 deletions src/lib/dialog/dialog.md
Original file line number Diff line number Diff line change
Expand Up @@ -56,12 +56,23 @@ export class YourDialog {
### Dialog content
Several directives are available to make it easier to structure your dialog content:

| Name | Description |
|-----------------------|--------------------------------------------------------------------------|
| `md-dialog-title` | \[Attr] Dialog title, applied to a heading element (e.g., `<h1>`, `<h2>`)|
| `<md-dialog-content>` | Primary scrollable content of the dialog |
| `<md-dialog-actions>` | Container for action buttons at the bottom of the dialog |
| `md-dialog-close` | \[Attr] Added to a `<button>`, makes the button close the dialog on click|
| Name | Description |
|-----------------------|---------------------------------------------------------------------------------------------------------------|
| `md-dialog-title` | \[Attr] Dialog title, applied to a heading element (e.g., `<h1>`, `<h2>`) |
| `<md-dialog-content>` | Primary scrollable content of the dialog |
| `<md-dialog-actions>` | Container for action buttons at the bottom of the dialog |
| `md-dialog-close` | \[Attr] Added to a `<button>`, makes the button close the dialog with an optional result from the bound value.|

For example:
```html
<h2 md-dialog-title>Delete all</h2>
<md-dialog-content>Are you sure?</md-dialog-content>
<md-dialog-actions>
<button md-button md-dialog-close>No</button>
<!-- Can optionally provide a result for the closing dialog. -->
<button md-button [md-dialog-close]="true">Yes</button>
</md-dialog-actions>
```

Once a dialog opens, the dialog will automatically focus the first tabbable element.

Expand Down
13 changes: 13 additions & 0 deletions src/lib/dialog/dialog.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -600,6 +600,18 @@ describe('MdDialog', () => {
expect(button.getAttribute('type')).toBe('button');
});

it('should return the [md-dialog-close] result when clicking on the close button', async(() => {
let afterCloseCallback = jasmine.createSpy('afterClose callback');
dialogRef.afterClosed().subscribe(afterCloseCallback);

(overlayContainerElement.querySelector('button.close-with-true') as HTMLElement).click();
viewContainerFixture.detectChanges();

viewContainerFixture.whenStable().then(() => {
expect(afterCloseCallback).toHaveBeenCalledWith(true);
});
}));

});
});

Expand Down Expand Up @@ -714,6 +726,7 @@ class PizzaMsg {
<md-dialog-content>Lorem ipsum dolor sit amet.</md-dialog-content>
<md-dialog-actions>
<button md-dialog-close [aria-label]="closeButtonAriaLabel">Close</button>
<button class="close-with-true" [md-dialog-close]="true">Close and return true</button>
<div md-dialog-close>Should not close</div>
</md-dialog-actions>
`
Expand Down
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<h1 md-dialog-title>Dialog</h1>
<div md-dialog-content>What would you like to do?</div>
<div md-dialog-actions>
<button md-button (click)="dialogRef.close('Option 1')">Option 1</button>
<button md-button (click)="dialogRef.close('Option 2')">Option 2</button>
<button md-button md-dialog-close="Option 1">Option 1</button>
<button md-button md-dialog-close="Option 2">Option 2</button>
</div>