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');