fix(dialog): BREAKING CHANGE now md-dialog-actions

angular · Nov 4, 2015 · bf08e17 · bf08e17
1 parent 9693204
commit bf08e17
Show file tree

Hide file tree

Showing 6 changed files with 150 additions and 90 deletions.
diff --git a/docs/app/partials/view-source.tmpl.html b/docs/app/partials/view-source.tmpl.html
@@ -17,9 +17,9 @@
     </div>
   </md-dialog-content>
 
-  <div class="md-actions" layout="horizontal">
+  <md-dialog-actions layout="horizontal">
     <md-button class="md-primary" ng-click="$hideDialog()">
       Done
     </md-button>
-  </div>
+  </md-dialog-actions>
 </md-dialog>
diff --git a/src/components/dialog/demoBasicUsage/dialog1.tmpl.html b/src/components/dialog/demoBasicUsage/dialog1.tmpl.html
@@ -1,43 +1,44 @@
 <md-dialog aria-label="Mango (Fruit)"  ng-cloak>
   <form>
-  <md-toolbar>
-    <div class="md-toolbar-tools">
-      <h2>Mango (Fruit)</h2>
-      <span flex></span>
-      <md-button class="md-icon-button" ng-click="cancel()">
-        <md-icon md-svg-src="img/icons/ic_close_24px.svg" aria-label="Close dialog"></md-icon>
-      </md-button>
-    </div>
-  </md-toolbar>
-  <md-dialog-content style="max-width:800px;max-height:810px; ">
-    <div class="md-dialog-content">
-      <h2>Using .md-dialog-content class that sets the padding as the spec</h2>
-      <p>
-        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.
-      </p>
+    <md-toolbar>
+      <div class="md-toolbar-tools">
+        <h2>Mango (Fruit)</h2>
+        <span flex></span>
+        <md-button class="md-icon-button" ng-click="cancel()">
+          <md-icon md-svg-src="img/icons/ic_close_24px.svg" aria-label="Close dialog"></md-icon>
+        </md-button>
+      </div>
+    </md-toolbar>
 
-      <img style="margin: auto; max-width: 100%;" alt="Lush mango tree" src="img/mangues.jpg">
+    <md-dialog-content style="max-width:800px;max-height:810px; ">
+      <div class="md-dialog-content">
+        <h2>Using .md-dialog-content class that sets the padding as the spec</h2>
+        <p>
+          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.
+        </p>
 
-      <p>
-        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.
-      </p>
-      <p>
-        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.
-      </p>
-    </div>
-  </md-dialog-content>
+        <img style="margin: auto; max-width: 100%;" alt="Lush mango tree" src="img/mangues.jpg">
 
-  <div class="md-actions" layout="row">
-    <md-button href="http://en.wikipedia.org/wiki/Mango" target="_blank" md-autofocus>
-      More on Wikipedia
-    </md-button>
-    <span flex></span>
-    <md-button ng-click="answer('not useful')" >
-     Not Useful
-    </md-button>
-    <md-button ng-click="answer('useful')" style="margin-right:20px;" >
-      Useful
-    </md-button>
-  </div>
+        <p>
+          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.
+        </p>
+        <p>
+          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.
+        </p>
+      </div>
+    </md-dialog-content>
+
+    <md-dialog-actions layout="row">
+      <md-button href="http://en.wikipedia.org/wiki/Mango" target="_blank" md-autofocus>
+        More on Wikipedia
+      </md-button>
+      <span flex></span>
+      <md-button ng-click="answer('not useful')">
+       Not Useful
+      </md-button>
+      <md-button ng-click="answer('useful')" style="margin-right:20px;">
+        Useful
+      </md-button>
+    </md-dialog-actions>
   </form>
 </md-dialog>
diff --git a/src/components/dialog/dialog-theme.scss b/src/components/dialog/dialog-theme.scss
@@ -4,7 +4,7 @@ md-dialog.md-THEME_NAME-theme {
   border-radius: $dialog-border-radius;
   background-color: '{{background-color}}';
 
-  &.md-content-overflow .md-actions {
+  &.md-content-overflow md-dialog-actions {
     border-top-color: '{{foreground-4}}';
   }
 }

diff --git a/src/components/dialog/dialog.js b/src/components/dialog/dialog.js
@@ -58,7 +58,7 @@ function MdDialogDirective($$rAF, $mdTheming, $mdDialog) {
  * - The dialog is always given an isolate scope.
  * - The dialog's template must have an outer `<md-dialog>` element.
  *   Inside, use an `<md-dialog-content>` element for the dialog's content, and use
- *   an element with class `md-actions` for the dialog's actions.
+ *   an `<md-dialog-actions>` element for the dialog's actions.
  * - Dialogs must cover the entire application to keep interactions inside of them.
  * Use the `parent` option to change where dialogs are appended.
  *
@@ -139,11 +139,11 @@ function MdDialogDirective($$rAF, $mdTheming, $mdDialog) {
  *            '      </md-item>'+
  *            '    </md-list>'+
  *            '  </md-dialog-content>' +
- *            '  <div class="md-actions">' +
+ *            '  <md-dialog-actions>' +
  *            '    <md-button ng-click="closeDialog()" class="md-primary">' +
  *            '      Close Dialog' +
  *            '    </md-button>' +
- *            '  </div>' +
+ *            '  </md-dialog-actions>' +
  *            '</md-dialog>',
  *          locals: {
  *            items: $scope.items
@@ -218,11 +218,11 @@ function MdDialogDirective($$rAF, $mdTheming, $mdDialog) {
  *
  *             '  <md-dialog-content>Hello {{ employee }}!</md-dialog-content>' +
  *
- *             '  <div class="md-actions">' +
+ *             '  <md-dialog-actions>' +
  *             '    <md-button ng-click="closeDialog()" class="md-primary">' +
  *             '      Close Greeting' +
  *             '    </md-button>' +
- *             '  </div>' +
+ *             '  </md-dialog-actions>' +
  *             '</md-dialog>',
  *           controller: 'GreetingController',
  *           onComplete: afterShowAnimation,
@@ -429,19 +429,19 @@ function MdDialogProvider($$interimElementProvider) {
     return {
       template: [
         '<md-dialog md-theme="{{ dialog.theme }}" aria-label="{{ dialog.ariaLabel }}" ng-class="dialog.css">',
-        ' <md-dialog-content class="md-dialog-content" role="document" tabIndex="-1">',
-        '   <h2 class="md-title">{{ dialog.title }}</h2>',
-        '   <div class="md-dialog-content-body" md-template="::dialog.mdContent"></div>',
-        ' </md-dialog-content>',
-        ' <div class="md-actions">',
-        '   <md-button ng-if="dialog.$type == \'confirm\'"' +
-        '     ng-click="dialog.abort()" class="md-primary">',
-        '     {{ dialog.cancel }}',
-        '   </md-button>',
-        '   <md-button ng-click="dialog.hide()" class="md-primary" md-autofocus="dialog.$type!=\'confirm\'">',
-        '     {{ dialog.ok }}',
-        '   </md-button>',
-        ' </div>',
+        '  <md-dialog-content class="md-dialog-content" role="document" tabIndex="-1">',
+        '    <h2 class="md-title">{{ dialog.title }}</h2>',
+        '    <div class="md-dialog-content-body" md-template="::dialog.mdContent"></div>',
+        '  </md-dialog-content>',
+        '  <md-dialog-actions>',
+        '    <md-button ng-if="dialog.$type == \'confirm\'"' +
+        '               ng-click="dialog.abort()" class="md-primary">',
+        '      {{ dialog.cancel }}',
+        '    </md-button>',
+        '    <md-button ng-click="dialog.hide()" class="md-primary" md-autofocus="dialog.$type!=\'confirm\'">',
+        '      {{ dialog.ok }}',
+        '    </md-button>',
+        '  </md-dialog-actions>',
         '</md-dialog>'
       ].join('').replace(/\s\s+/g, ''),
       controller: function mdDialogCtrl() {
@@ -459,7 +459,7 @@ function MdDialogProvider($$interimElementProvider) {
   }
 
   /* @ngInject */
-  function dialogDefaultOptions($mdDialog, $mdAria, $mdUtil, $mdConstant, $animate, $document, $window, $rootElement) {
+  function dialogDefaultOptions($mdDialog, $mdAria, $mdUtil, $mdConstant, $animate, $document, $rootElement, $log) {
     return {
       hasBackdrop: true,
       isolateScope: true,
@@ -514,19 +514,24 @@ function MdDialogProvider($$interimElementProvider) {
        */
       function focusOnOpen() {
         if (options.focusOnOpen) {
-          var target = $mdUtil.findFocusTarget(element) || findCloseButton();
+          var target = $mdUtil.findFocusTarget(element) || findCloseButtonOrWarn();
           target.focus();
         }
 
         /**
          *  If no element with class dialog-close, try to find the last
          *  button child in md-actions and assume it is a close button
+         *
+         * If we find no actions at all, log a warning to the console.
          */
-        function findCloseButton() {
+        function findCloseButtonOrWarn() {
           var closeButton = element[0].querySelector('.dialog-close');
           if (!closeButton) {
-            var actionButtons = element[0].querySelectorAll('.md-actions button');
+            var actionButtons = element[0].querySelectorAll('md-dialog-actions .md-button');
             closeButton = actionButtons[actionButtons.length - 1];
+            if (actionButtons.length === 0) {
+              $log.warn('At least one action button is required for <md-dialog-actions>.');
+            }
           }
           return angular.element(closeButton);
         }
@@ -644,7 +649,6 @@ function MdDialogProvider($$interimElementProvider) {
             return angular.element(element || defaultElement);
           }
 
-
         }
 
     /**

diff --git a/src/components/dialog/dialog.scss b/src/components/dialog/dialog.scss
@@ -86,7 +86,7 @@ md-dialog {
     }
   }
 
-  .md-actions {
+  md-dialog-actions {
     display: flex;
     order: 2;
     box-sizing: border-box;
@@ -105,7 +105,7 @@ md-dialog {
       margin-top: $baseline-grid;
     }
   }
-  &.md-content-overflow .md-actions {
+  &.md-content-overflow md-dialog-actions {
     border-top-width: 1px;
     border-top-style: solid;
   }

diff --git a/src/components/dialog/dialog.spec.js b/src/components/dialog/dialog.spec.js
@@ -282,11 +282,11 @@ describe('$mdDialog', function() {
       var parent = angular.element('<div>');
       $mdDialog.show({
         template: '' +
-        '<md-dialog>' +
-        '  <div class="md-actions">' +
-        '    <button class="dialog-close">Close</button>' +
-        '  </div>' +
-        '</md-dialog>',
+          '<md-dialog>' +
+            '<md-dialog-actions>' +
+              '<button class="dialog-close">Close</button>' +
+            '</md-dialog-actions>' +
+          '</md-dialog>',
         parent: parent
       });
       runAnimation();
@@ -756,12 +756,13 @@ describe('$mdDialog', function() {
       $mdDialog.show({
         focusOnOpen: true,
         parent: parent,
-        template: '<md-dialog>' +
-        '<div class="md-actions">' +
-        '<button id="a">A</md-button>' +
-        '<button id="focus-target">B</md-button>' +
-        '</div>' +
-        '</md-dialog>'
+        template:
+          '<md-dialog>' +
+            '<md-dialog-actions>' +
+              '<button id="a">A</md-button>' +
+              '<button id="focus-target">B</md-button>' +
+            '</md-dialog-actions>' +
+          '</md-dialog>'
       });
 
       $rootScope.$apply();
@@ -777,12 +778,13 @@ describe('$mdDialog', function() {
       $mdDialog.show({
         focusOnOpen: false,
         parent: parent,
-        template: '<md-dialog>' +
-        '<div class="md-actions">' +
-        '<button id="a">A</md-button>' +
-        '<button id="focus-target">B</md-button>' +
-        '</div>' +
-        '</md-dialog>',
+        template:
+          '<md-dialog>' +
+            '<md-dialog-actions>' +
+              '<button id="a">A</md-button>' +
+              '<button id="focus-target">B</md-button>' +
+            '</md-dialog-actions>' +
+          '</md-dialog>',
       });
 
       $rootScope.$apply();
@@ -930,17 +932,18 @@ describe('$mdDialog', function() {
         'translate3d(240px, 120px, 0px) scale(0.5, 0.5)');
     }));
 
-    it('should focus the last `md-button` in md-actions open if no `.dialog-close`', inject(function($mdDialog, $rootScope, $document, $timeout, $mdConstant) {
+    it('should focus the last `md-button` in md-dialog-actions open if no `.dialog-close`', inject(function($mdDialog, $rootScope, $document, $timeout, $mdConstant) {
       jasmine.mockElementFocus(this);
 
       var parent = angular.element('<div>');
       $mdDialog.show({
-        template: '<md-dialog>' +
-        '<div class="md-actions">' +
-        '<button id="a">A</md-button>' +
-        '<button id="focus-target">B</md-button>' +
-        '</div>' +
-        '</md-dialog>',
+        template:
+          '<md-dialog>' +
+            '<md-dialog-actions>' +
+              '<button id="a">A</md-button>' +
+              '<button id="focus-target">B</md-button>' +
+            '</md-dialog-actions>' +
+          '</md-dialog>',
         parent: parent
       });
 
@@ -949,6 +952,58 @@ describe('$mdDialog', function() {
       expect($document.activeElement).toBe(parent[0].querySelector('#focus-target'));
     }));
 
+    it('should warn if md-dialog-actions does not contain actions', inject(function($mdDialog, $rootScope, $log, $timeout) {
+      spyOn($log, 'warn');
+
+      var parent = angular.element('<div>');
+      $mdDialog.show({
+        template:
+          '<md-dialog>' +
+            '<md-dialog-actions>' +
+              '<p>Why is this here</p>' +
+            '</md-dialog-actions>' +
+          '</md-dialog>',
+        parent: parent
+      });
+
+      $rootScope.$apply();
+      $timeout.flush();
+
+      var container = angular.element(parent[0].querySelector('.md-dialog-container'));
+
+      container.triggerHandler('transitionend');
+      $rootScope.$apply();
+      parent.find('md-dialog').triggerHandler('transitionend');
+      $rootScope.$apply();
+
+      expect($log.warn).toHaveBeenCalled();
+    }));
+
+    it('should not warn if md-dialog-actions has actions', inject(function($mdDialog, $rootScope, $log, $timeout) {
+      spyOn($log, 'warn');
+
+      var parent = angular.element('<div>');
+      $mdDialog.show({
+        template:
+          '<md-dialog>' +
+            '<md-dialog-actions>' +
+              '<button class="md-button">Ok good</button>' +
+            '</md-dialog-actions>' +
+          '</md-dialog>',
+        parent: parent
+      });
+
+      var container = angular.element(parent[0].querySelector('.md-dialog-container'));
+      $rootScope.$apply();
+      $timeout.flush();
+      container.triggerHandler('transitionend');
+      $rootScope.$apply();
+      parent.find('md-dialog').triggerHandler('transitionend');
+      $rootScope.$apply();
+
+      expect($log.warn).not.toHaveBeenCalled();
+    }));
+
     it('should only allow one open at a time', inject(function($mdDialog, $rootScope, $animate) {
       var parent = angular.element('<div>');
       $mdDialog.show({
@@ -1163,7 +1218,7 @@ describe('$mdDialog with custom interpolation symbols', function() {
     var mdContent = mdDialog.find('md-dialog-content');
     var title = mdContent.find('h2');
     var content = mdContent.find('p');
-    var mdActions = angular.element(mdDialog[0].querySelector('.md-actions'));
+    var mdActions = angular.element(mdDialog[0].querySelector('md-dialog-actions'));
     var buttons = mdActions.find('md-button');
 
     expect(mdDialog.attr('aria-label')).toBe('test alert');
@@ -1190,7 +1245,7 @@ describe('$mdDialog with custom interpolation symbols', function() {
     var mdContent = mdDialog.find('md-dialog-content');
     var title = mdContent.find('h2');
     var content = mdContent.find('p');
-    var mdActions = angular.element(mdDialog[0].querySelector('.md-actions'));
+    var mdActions = angular.element(mdDialog[0].querySelector('md-dialog-actions'));
     var buttons = mdActions.find('md-button');
 
     expect(mdDialog.attr('aria-label')).toBe('test alert');