Skip to content
This repository was archived by the owner on Sep 5, 2024. It is now read-only.

Commit bf08e17

Browse files
Marcy SuttonThomasBurleson
Marcy Sutton
authored and
ThomasBurleson
committed
fix(dialog): BREAKING CHANGE now md-dialog-actions
1 parent 9693204 commit bf08e17

File tree

6 files changed

+150
-90
lines changed

6 files changed

+150
-90
lines changed

‎docs/app/partials/view-source.tmpl.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -17,9 +17,9 @@
1717
</div>
1818
</md-dialog-content>
1919

20-
<div class="md-actions" layout="horizontal">
20+
<md-dialog-actions layout="horizontal">
2121
<md-button class="md-primary" ng-click="$hideDialog()">
2222
Done
2323
</md-button>
24-
</div>
24+
</md-dialog-actions>
2525
</md-dialog>

‎src/components/dialog/demoBasicUsage/dialog1.tmpl.html‎

Lines changed: 37 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -1,43 +1,44 @@
11
<md-dialog aria-label="Mango (Fruit)" ng-cloak>
22
<form>
3-
<md-toolbar>
4-
<div class="md-toolbar-tools">
5-
<h2>Mango (Fruit)</h2>
6-
<span flex></span>
7-
<md-button class="md-icon-button" ng-click="cancel()">
8-
<md-icon md-svg-src="img/icons/ic_close_24px.svg" aria-label="Close dialog"></md-icon>
9-
</md-button>
10-
</div>
11-
</md-toolbar>
12-
<md-dialog-content style="max-width:800px;max-height:810px; ">
13-
<div class="md-dialog-content">
14-
<h2>Using .md-dialog-content class that sets the padding as the spec</h2>
15-
<p>
16-
The mango is a juicy stone fruit belonging to the genus Mangifera, consisting of numerous tropical fruiting trees, cultivated mostly for edible fruit. The majority of these species are found in nature as wild mangoes. They all belong to the flowering plant family Anacardiaceae. The mango is native to South and Southeast Asia, from where it has been distributed worldwide to become one of the most cultivated fruits in the tropics.
17-
</p>
3+
<md-toolbar>
4+
<div class="md-toolbar-tools">
5+
<h2>Mango (Fruit)</h2>
6+
<span flex></span>
7+
<md-button class="md-icon-button" ng-click="cancel()">
8+
<md-icon md-svg-src="img/icons/ic_close_24px.svg" aria-label="Close dialog"></md-icon>
9+
</md-button>
10+
</div>
11+
</md-toolbar>
1812

19-
<img style="margin: auto; max-width: 100%;" alt="Lush mango tree" src="img/mangues.jpg">
13+
<md-dialog-content style="max-width:800px;max-height:810px; ">
14+
<div class="md-dialog-content">
15+
<h2>Using .md-dialog-content class that sets the padding as the spec</h2>
16+
<p>
17+
The mango is a juicy stone fruit belonging to the genus Mangifera, consisting of numerous tropical fruiting trees, cultivated mostly for edible fruit. The majority of these species are found in nature as wild mangoes. They all belong to the flowering plant family Anacardiaceae. The mango is native to South and Southeast Asia, from where it has been distributed worldwide to become one of the most cultivated fruits in the tropics.
18+
</p>
2019

21-
<p>
22-
The highest concentration of Mangifera genus is in the western part of Malesia (Sumatra, Java and Borneo) and in Burma and India. While other Mangifera species (e.g. horse mango, M. foetida) are also grown on a more localized basis, Mangifera indica&mdash;the "common mango" or "Indian mango"&mdash;is the only mango tree commonly cultivated in many tropical and subtropical regions.
23-
</p>
24-
<p>
25-
It originated in Indian subcontinent (present day India and Pakistan) and Burma. It is the national fruit of India, Pakistan, and the Philippines, and the national tree of Bangladesh. In several cultures, its fruit and leaves are ritually used as floral decorations at weddings, public celebrations, and religious ceremonies.
26-
</p>
27-
</div>
28-
</md-dialog-content>
20+
<img style="margin: auto; max-width: 100%;" alt="Lush mango tree" src="img/mangues.jpg">
2921

30-
<div class="md-actions" layout="row">
31-
<md-button href="http://en.wikipedia.org/wiki/Mango" target="_blank" md-autofocus>
32-
More on Wikipedia
33-
</md-button>
34-
<span flex></span>
35-
<md-button ng-click="answer('not useful')" >
36-
Not Useful
37-
</md-button>
38-
<md-button ng-click="answer('useful')" style="margin-right:20px;" >
39-
Useful
40-
</md-button>
41-
</div>
22+
<p>
23+
The highest concentration of Mangifera genus is in the western part of Malesia (Sumatra, Java and Borneo) and in Burma and India. While other Mangifera species (e.g. horse mango, M. foetida) are also grown on a more localized basis, Mangifera indica&mdash;the "common mango" or "Indian mango"&mdash;is the only mango tree commonly cultivated in many tropical and subtropical regions.
24+
</p>
25+
<p>
26+
It originated in Indian subcontinent (present day India and Pakistan) and Burma. It is the national fruit of India, Pakistan, and the Philippines, and the national tree of Bangladesh. In several cultures, its fruit and leaves are ritually used as floral decorations at weddings, public celebrations, and religious ceremonies.
27+
</p>
28+
</div>
29+
</md-dialog-content>
30+
31+
<md-dialog-actions layout="row">
32+
<md-button href="http://en.wikipedia.org/wiki/Mango" target="_blank" md-autofocus>
33+
More on Wikipedia
34+
</md-button>
35+
<span flex></span>
36+
<md-button ng-click="answer('not useful')">
37+
Not Useful
38+
</md-button>
39+
<md-button ng-click="answer('useful')" style="margin-right:20px;">
40+
Useful
41+
</md-button>
42+
</md-dialog-actions>
4243
</form>
4344
</md-dialog>

‎src/components/dialog/dialog-theme.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ md-dialog.md-THEME_NAME-theme {
44
border-radius: $dialog-border-radius;
55
background-color: '{{background-color}}';
66

7-
&.md-content-overflow .md-actions {
7+
&.md-content-overflow md-dialog-actions {
88
border-top-color: '{{foreground-4}}';
99
}
1010
}

‎src/components/dialog/dialog.js‎

Lines changed: 27 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -58,7 +58,7 @@ function MdDialogDirective($$rAF, $mdTheming, $mdDialog) {
5858
* - The dialog is always given an isolate scope.
5959
* - The dialog's template must have an outer `<md-dialog>` element.
6060
* Inside, use an `<md-dialog-content>` element for the dialog's content, and use
61-
* an element with class `md-actions` for the dialog's actions.
61+
* an `<md-dialog-actions>` element for the dialog's actions.
6262
* - Dialogs must cover the entire application to keep interactions inside of them.
6363
* Use the `parent` option to change where dialogs are appended.
6464
*
@@ -139,11 +139,11 @@ function MdDialogDirective($$rAF, $mdTheming, $mdDialog) {
139139
* ' </md-item>'+
140140
* ' </md-list>'+
141141
* ' </md-dialog-content>' +
142-
* ' <div class="md-actions">' +
142+
* ' <md-dialog-actions>' +
143143
* ' <md-button ng-click="closeDialog()" class="md-primary">' +
144144
* ' Close Dialog' +
145145
* ' </md-button>' +
146-
* ' </div>' +
146+
* ' </md-dialog-actions>' +
147147
* '</md-dialog>',
148148
* locals: {
149149
* items: $scope.items
@@ -218,11 +218,11 @@ function MdDialogDirective($$rAF, $mdTheming, $mdDialog) {
218218
*
219219
* ' <md-dialog-content>Hello {{ employee }}!</md-dialog-content>' +
220220
*
221-
* ' <div class="md-actions">' +
221+
* ' <md-dialog-actions>' +
222222
* ' <md-button ng-click="closeDialog()" class="md-primary">' +
223223
* ' Close Greeting' +
224224
* ' </md-button>' +
225-
* ' </div>' +
225+
* ' </md-dialog-actions>' +
226226
* '</md-dialog>',
227227
* controller: 'GreetingController',
228228
* onComplete: afterShowAnimation,
@@ -429,19 +429,19 @@ function MdDialogProvider($$interimElementProvider) {
429429
return {
430430
template: [
431431
'<md-dialog md-theme="{{ dialog.theme }}" aria-label="{{ dialog.ariaLabel }}" ng-class="dialog.css">',
432-
' <md-dialog-content class="md-dialog-content" role="document" tabIndex="-1">',
433-
' <h2 class="md-title">{{ dialog.title }}</h2>',
434-
' <div class="md-dialog-content-body" md-template="::dialog.mdContent"></div>',
435-
' </md-dialog-content>',
436-
' <div class="md-actions">',
437-
' <md-button ng-if="dialog.$type == \'confirm\'"' +
438-
' ng-click="dialog.abort()" class="md-primary">',
439-
' {{ dialog.cancel }}',
440-
' </md-button>',
441-
' <md-button ng-click="dialog.hide()" class="md-primary" md-autofocus="dialog.$type!=\'confirm\'">',
442-
' {{ dialog.ok }}',
443-
' </md-button>',
444-
' </div>',
432+
' <md-dialog-content class="md-dialog-content" role="document" tabIndex="-1">',
433+
' <h2 class="md-title">{{ dialog.title }}</h2>',
434+
' <div class="md-dialog-content-body" md-template="::dialog.mdContent"></div>',
435+
' </md-dialog-content>',
436+
' <md-dialog-actions>',
437+
' <md-button ng-if="dialog.$type == \'confirm\'"' +
438+
' ng-click="dialog.abort()" class="md-primary">',
439+
' {{ dialog.cancel }}',
440+
' </md-button>',
441+
' <md-button ng-click="dialog.hide()" class="md-primary" md-autofocus="dialog.$type!=\'confirm\'">',
442+
' {{ dialog.ok }}',
443+
' </md-button>',
444+
' </md-dialog-actions>',
445445
'</md-dialog>'
446446
].join('').replace(/\s\s+/g, ''),
447447
controller: function mdDialogCtrl() {
@@ -459,7 +459,7 @@ function MdDialogProvider($$interimElementProvider) {
459459
}
460460

461461
/* @ngInject */
462-
function dialogDefaultOptions($mdDialog, $mdAria, $mdUtil, $mdConstant, $animate, $document, $window, $rootElement) {
462+
function dialogDefaultOptions($mdDialog, $mdAria, $mdUtil, $mdConstant, $animate, $document, $rootElement, $log) {
463463
return {
464464
hasBackdrop: true,
465465
isolateScope: true,
@@ -514,19 +514,24 @@ function MdDialogProvider($$interimElementProvider) {
514514
*/
515515
function focusOnOpen() {
516516
if (options.focusOnOpen) {
517-
var target = $mdUtil.findFocusTarget(element) || findCloseButton();
517+
var target = $mdUtil.findFocusTarget(element) || findCloseButtonOrWarn();
518518
target.focus();
519519
}
520520

521521
/**
522522
* If no element with class dialog-close, try to find the last
523523
* button child in md-actions and assume it is a close button
524+
*
525+
* If we find no actions at all, log a warning to the console.
524526
*/
525-
function findCloseButton() {
527+
function findCloseButtonOrWarn() {
526528
var closeButton = element[0].querySelector('.dialog-close');
527529
if (!closeButton) {
528-
var actionButtons = element[0].querySelectorAll('.md-actions button');
530+
var actionButtons = element[0].querySelectorAll('md-dialog-actions .md-button');
529531
closeButton = actionButtons[actionButtons.length - 1];
532+
if (actionButtons.length === 0) {
533+
$log.warn('At least one action button is required for <md-dialog-actions>.');
534+
}
530535
}
531536
return angular.element(closeButton);
532537
}
@@ -644,7 +649,6 @@ function MdDialogProvider($$interimElementProvider) {
644649
return angular.element(element || defaultElement);
645650
}
646651

647-
648652
}
649653

650654
/**

‎src/components/dialog/dialog.scss‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -86,7 +86,7 @@ md-dialog {
8686
}
8787
}
8888

89-
.md-actions {
89+
md-dialog-actions {
9090
display: flex;
9191
order: 2;
9292
box-sizing: border-box;
@@ -105,7 +105,7 @@ md-dialog {
105105
margin-top: $baseline-grid;
106106
}
107107
}
108-
&.md-content-overflow .md-actions {
108+
&.md-content-overflow md-dialog-actions {
109109
border-top-width: 1px;
110110
border-top-style: solid;
111111
}

‎src/components/dialog/dialog.spec.js‎

Lines changed: 81 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -282,11 +282,11 @@ describe('$mdDialog', function() {
282282
var parent = angular.element('<div>');
283283
$mdDialog.show({
284284
template: '' +
285-
'<md-dialog>' +
286-
' <div class="md-actions">' +
287-
' <button class="dialog-close">Close</button>' +
288-
' </div>' +
289-
'</md-dialog>',
285+
'<md-dialog>' +
286+
'<md-dialog-actions>' +
287+
'<button class="dialog-close">Close</button>' +
288+
'</md-dialog-actions>' +
289+
'</md-dialog>',
290290
parent: parent
291291
});
292292
runAnimation();
@@ -756,12 +756,13 @@ describe('$mdDialog', function() {
756756
$mdDialog.show({
757757
focusOnOpen: true,
758758
parent: parent,
759-
template: '<md-dialog>' +
760-
'<div class="md-actions">' +
761-
'<button id="a">A</md-button>' +
762-
'<button id="focus-target">B</md-button>' +
763-
'</div>' +
764-
'</md-dialog>'
759+
template:
760+
'<md-dialog>' +
761+
'<md-dialog-actions>' +
762+
'<button id="a">A</md-button>' +
763+
'<button id="focus-target">B</md-button>' +
764+
'</md-dialog-actions>' +
765+
'</md-dialog>'
765766
});
766767

767768
$rootScope.$apply();
@@ -777,12 +778,13 @@ describe('$mdDialog', function() {
777778
$mdDialog.show({
778779
focusOnOpen: false,
779780
parent: parent,
780-
template: '<md-dialog>' +
781-
'<div class="md-actions">' +
782-
'<button id="a">A</md-button>' +
783-
'<button id="focus-target">B</md-button>' +
784-
'</div>' +
785-
'</md-dialog>',
781+
template:
782+
'<md-dialog>' +
783+
'<md-dialog-actions>' +
784+
'<button id="a">A</md-button>' +
785+
'<button id="focus-target">B</md-button>' +
786+
'</md-dialog-actions>' +
787+
'</md-dialog>',
786788
});
787789

788790
$rootScope.$apply();
@@ -930,17 +932,18 @@ describe('$mdDialog', function() {
930932
'translate3d(240px, 120px, 0px) scale(0.5, 0.5)');
931933
}));
932934

933-
it('should focus the last `md-button` in md-actions open if no `.dialog-close`', inject(function($mdDialog, $rootScope, $document, $timeout, $mdConstant) {
935+
it('should focus the last `md-button` in md-dialog-actions open if no `.dialog-close`', inject(function($mdDialog, $rootScope, $document, $timeout, $mdConstant) {
934936
jasmine.mockElementFocus(this);
935937

936938
var parent = angular.element('<div>');
937939
$mdDialog.show({
938-
template: '<md-dialog>' +
939-
'<div class="md-actions">' +
940-
'<button id="a">A</md-button>' +
941-
'<button id="focus-target">B</md-button>' +
942-
'</div>' +
943-
'</md-dialog>',
940+
template:
941+
'<md-dialog>' +
942+
'<md-dialog-actions>' +
943+
'<button id="a">A</md-button>' +
944+
'<button id="focus-target">B</md-button>' +
945+
'</md-dialog-actions>' +
946+
'</md-dialog>',
944947
parent: parent
945948
});
946949

@@ -949,6 +952,58 @@ describe('$mdDialog', function() {
949952
expect($document.activeElement).toBe(parent[0].querySelector('#focus-target'));
950953
}));
951954

955+
it('should warn if md-dialog-actions does not contain actions', inject(function($mdDialog, $rootScope, $log, $timeout) {
956+
spyOn($log, 'warn');
957+
958+
var parent = angular.element('<div>');
959+
$mdDialog.show({
960+
template:
961+
'<md-dialog>' +
962+
'<md-dialog-actions>' +
963+
'<p>Why is this here</p>' +
964+
'</md-dialog-actions>' +
965+
'</md-dialog>',
966+
parent: parent
967+
});
968+
969+
$rootScope.$apply();
970+
$timeout.flush();
971+
972+
var container = angular.element(parent[0].querySelector('.md-dialog-container'));
973+
974+
container.triggerHandler('transitionend');
975+
$rootScope.$apply();
976+
parent.find('md-dialog').triggerHandler('transitionend');
977+
$rootScope.$apply();
978+
979+
expect($log.warn).toHaveBeenCalled();
980+
}));
981+
982+
it('should not warn if md-dialog-actions has actions', inject(function($mdDialog, $rootScope, $log, $timeout) {
983+
spyOn($log, 'warn');
984+
985+
var parent = angular.element('<div>');
986+
$mdDialog.show({
987+
template:
988+
'<md-dialog>' +
989+
'<md-dialog-actions>' +
990+
'<button class="md-button">Ok good</button>' +
991+
'</md-dialog-actions>' +
992+
'</md-dialog>',
993+
parent: parent
994+
});
995+
996+
var container = angular.element(parent[0].querySelector('.md-dialog-container'));
997+
$rootScope.$apply();
998+
$timeout.flush();
999+
container.triggerHandler('transitionend');
1000+
$rootScope.$apply();
1001+
parent.find('md-dialog').triggerHandler('transitionend');
1002+
$rootScope.$apply();
1003+
1004+
expect($log.warn).not.toHaveBeenCalled();
1005+
}));
1006+
9521007
it('should only allow one open at a time', inject(function($mdDialog, $rootScope, $animate) {
9531008
var parent = angular.element('<div>');
9541009
$mdDialog.show({
@@ -1163,7 +1218,7 @@ describe('$mdDialog with custom interpolation symbols', function() {
11631218
var mdContent = mdDialog.find('md-dialog-content');
11641219
var title = mdContent.find('h2');
11651220
var content = mdContent.find('p');
1166-
var mdActions = angular.element(mdDialog[0].querySelector('.md-actions'));
1221+
var mdActions = angular.element(mdDialog[0].querySelector('md-dialog-actions'));
11671222
var buttons = mdActions.find('md-button');
11681223

11691224
expect(mdDialog.attr('aria-label')).toBe('test alert');
@@ -1190,7 +1245,7 @@ describe('$mdDialog with custom interpolation symbols', function() {
11901245
var mdContent = mdDialog.find('md-dialog-content');
11911246
var title = mdContent.find('h2');
11921247
var content = mdContent.find('p');
1193-
var mdActions = angular.element(mdDialog[0].querySelector('.md-actions'));
1248+
var mdActions = angular.element(mdDialog[0].querySelector('md-dialog-actions'));
11941249
var buttons = mdActions.find('md-button');
11951250

11961251
expect(mdDialog.attr('aria-label')).toBe('test alert');

0 commit comments

Comments
 (0)