fix(dialog): BREAKING CHANGE rename to md-actions

`<div class="md-actions">` is now deprecated. Dialogs and cards should use `<md-actions>` for including action buttons.
angular · May 4, 2015 · c19feef · c19feef
1 parent ee2f059
commit c19feef
Show file tree

Hide file tree

Showing 9 changed files with 32 additions and 32 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-actions layout="horizontal">
     <md-button class="md-primary" ng-click="$hideDialog()">
       Done
     </md-button>
-  </div>
+  </md-actions>
 </md-dialog>
diff --git a/src/components/card/card.js b/src/components/card/card.js
@@ -26,7 +26,7 @@ angular.module('material.components.card', [
  * container will wrap text content and provide padding. An `<md-card-footer>` element can be
  * optionally included to put content flush against the bottom edge of the card.
  *
- * Action buttons can be included in an element with the `.md-actions` class, also used in `md-dialog`.
+ * Action buttons can be included in an element with the `md-actions` element, also used in `md-dialog`.
  * You can then position buttons using layout attributes.
  *
  * Cards have constant width and variable heights; where the maximum height is limited to what can
@@ -55,10 +55,10 @@ angular.module('material.components.card', [
  *    <h2>Card headline</h2>
  *    <p>Card content</p>
  *  </md-card-content>
- *  <div class="md-actions" layout="row" layout-align="end center">
+ *  <md-actions layout="row" layout-align="end center">
  *    <md-button>Action 1</md-button>
  *    <md-button>Action 2</md-button>
- *  </div>
+ *  </md-actions>
  * </md-card>
  * </hljs>
  *

diff --git a/src/components/card/card.scss b/src/components/card/card.scss
@@ -17,7 +17,7 @@ md-card {
   md-card-content {
     padding: $card-padding;
   }
-  .md-actions {
+  md-actions {
     margin: 0;
 
     .md-button {

diff --git a/src/components/card/demoBasicUsage/index.html b/src/components/card/demoBasicUsage/index.html
@@ -12,10 +12,10 @@ <h2 class="md-title">Paracosm</h2>
           two most important words in Ernest Greene's musical language: feel it. It's a simple request, as well...
         </p>
       </md-card-content>
-      <div class="md-actions" layout="row" layout-align="end center">
+      <md-actions layout="row" layout-align="end center">
         <md-button>Action 1</md-button>
         <md-button>Action 2</md-button>
-      </div>
+      </md-actions>
     </md-card>
 
     <md-card>

diff --git a/src/components/dialog/demoBasicUsage/dialog1.tmpl.html b/src/components/dialog/demoBasicUsage/dialog1.tmpl.html
@@ -18,8 +18,8 @@
     </div>
   </md-dialog-content>
 
-  <div class="md-actions" layout="row">
     <md-button href="http://en.wikipedia.org/wiki/Mango" target="_blank" hide show-md>
+  <md-actions layout="row">
       More on Wikipedia
     </md-button>
     <span flex></span>
@@ -29,6 +29,6 @@
     <md-button ng-click="answer('useful')" class="md-primary">
       Useful
     </md-button>
-  </div>
+  </md-actions>
 
 </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-actions {
     border-top-color: '{{foreground-4}}';
   }
 }

diff --git a/src/components/dialog/dialog.js b/src/components/dialog/dialog.js
@@ -39,7 +39,7 @@ function MdDialogDirective($$rAF, $mdTheming) {
  * - 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-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.
  *
@@ -117,11 +117,11 @@ function MdDialogDirective($$rAF, $mdTheming) {
  *            '      </md-item>'+
  *            '    </md-list>'+
  *            '  </md-dialog-content>' +
- *            '  <div class="md-actions">' +
+ *            '  <md-actions>' +
  *            '    <md-button ng-click="closeDialog()" class="md-primary">' +
  *            '      Close Dialog' +
  *            '    </md-button>' +
- *            '  </div>' +
+ *            '  </md-actions>' +
  *            '</md-dialog>',
  *          locals: {
  *            items: $scope.items
@@ -196,11 +196,11 @@ function MdDialogDirective($$rAF, $mdTheming) {
  *
  *             '  <md-dialog-content>Hello {{ employee }}!</md-dialog-content>' +
  *
- *             '  <div class="md-actions">' +
+ *             '  <md-actions>' +
  *             '    <md-button ng-click="closeDialog()" class="md-primary">' +
  *             '      Close Greeting' +
  *             '    </md-button>' +
- *             '  </div>' +
+ *             '  </md-actions>' +
  *             '</md-dialog>',
  *           controller: 'GreetingController',
  *           onComplete: afterShowAnimation,
@@ -365,15 +365,15 @@ function MdDialogProvider($$interimElementProvider) {
             '<h2 class="md-title">{{ dialog.title }}</h2>',
             '<p>{{ dialog.content }}</p>',
           '</md-dialog-content>',
-          '<div class="md-actions">',
+          '<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">',
               '{{ dialog.ok }}',
             '</md-button>',
-          '</div>',
+          '</md-actions>',
         '</md-dialog>'
       ].join(''),
       controller: function mdDialogCtrl() {
@@ -495,7 +495,7 @@ function MdDialogProvider($$interimElementProvider) {
         //button child in md-actions and assume it is a close button
         var closeButton = element[0].querySelector('.dialog-close');
         if (!closeButton) {
-          var actionButtons = element[0].querySelectorAll('.md-actions button');
+          var actionButtons = element[0].querySelectorAll('md-actions button');
           closeButton = actionButtons[ actionButtons.length - 1 ];
         }
         return angular.element(closeButton);

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

diff --git a/src/components/dialog/dialog.spec.js b/src/components/dialog/dialog.spec.js
@@ -156,10 +156,10 @@ describe('$mdDialog', function() {
       $mdDialog.show({
         template:
           '<md-dialog>' +
-            '<div class="md-actions">' +
+            '<md-actions>' +
               '<button class="dialog-close">Close</button>' +
-            '</div>' +
-            '</md-dialog>',
+            '</md-actions>' +
+          '</md-dialog>',
         parent: parent
       });
 
@@ -365,10 +365,10 @@ describe('$mdDialog', function() {
         parent: parent,
         template:
           '<md-dialog>' +
-            '<div class="md-actions">' +
+            '<md-actions>' +
               '<button id="a">A</md-button>' +
               '<button id="focus-target">B</md-button>' +
-            '</div>' +
+            '</md-actions>' +
           '</md-dialog>'
       });
 
@@ -393,10 +393,10 @@ describe('$mdDialog', function() {
         parent: parent,
         template:
           '<md-dialog>' +
-            '<div class="md-actions">' +
+            '<md-actions>' +
               '<button id="a">A</md-button>' +
               '<button id="focus-target">B</md-button>' +
-            '</div>' +
+            '</md-actions>' +
           '</md-dialog>',
       });
 
@@ -419,10 +419,10 @@ describe('$mdDialog', function() {
       $mdDialog.show({
         template:
           '<md-dialog>' +
-            '<div class="md-actions">' +
+            '<md-actions>' +
               '<button id="a">A</md-button>' +
               '<button id="focus-target">B</md-button>' +
-            '</div>' +
+            '</md-actions>' +
           '</md-dialog>',
         parent: parent
       });
@@ -598,7 +598,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-actions'));
     var buttons = mdActions.find('md-button');
 
     expect(mdDialog.attr('aria-label')).toBe('test alert');
@@ -625,7 +625,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-actions'));
     var buttons = mdActions.find('md-button');
 
     expect(mdDialog.attr('aria-label')).toBe('test alert');