feat(toast): add highlight class method + improved docs design + alig…

…n demo with specs

BREAKING CHANGE: Toasts now use accent color by default for a highlighted action button.

- Add `highlightClass` method to toast (very useful! - and won't break anything)
- Improved the docs design for the possible methods for the #simple method.
- Changed demo to align with specs, No Dismiss buttons.
- Highlight Color should use by default the accent color.

Fixes #6607

Closes #7246

src/components/toast/demoBasicUsage/script.js

@@ -44,14 +44,15 @@ angular.module('toastDemo1', ['ngMaterial'])
  $scope.showActionToast = function() {
  var pinTo = $scope.getToastPosition();
  var toast = $mdToast.simple()
- .textContent('Action Toast!')
- .action('OK')
- .highlightAction(false)
- .position(pinTo);
+ .textContent('Marked as read')
+ .action('UNDO')
+ .highlightAction(true)
+ .highlightClass('md-accent')// Accent is used by default, this just demonstrates the usage.
+ .position(pinTo);
 
  $mdToast.show(toast).then(function(response) {
  if ( response == 'ok' ) {
- alert('You clicked \'OK\'.');
+ alert('You clicked the \'UNDO\' action.');
  }
  });
  };

src/components/toast/toast-theme.scss

@@ -1,15 +1,20 @@
 md-toast.md-THEME_NAME-theme {
+
  .md-toast-content {
  background-color: #323232;
  color: '{{background-50}}';
 
  .md-button {
  color: '{{background-50}}';
+
  &.md-highlight {
- color: '{{primary-A200}}';
- &.md-accent {
- color: '{{accent-A200}}';
+ // By default the toast should use the accent color as the primary highlight color
+ color: '{{accent-A200}}';
+
+ &.md-primary {
+ color: '{{primary-A200}}';
  }
+
  &.md-warn {
  color: '{{warn-A200}}';
  }

src/components/toast/toast.js

@@ -105,22 +105,55 @@ function MdToastDirective($mdToast) {
  * @returns {obj} a `$mdToastPreset` with the following chainable configuration methods.
  *
  * _**Note:** These configuration methods are provided in addition to the methods provided by
- * the `build()` and `show()` methods below._
+ * the `build()` and `show()` methods below._
+ *
+ * <table class="md-api-table methods">
+ * <thead>
+ * <tr>
+ * <th>Method</th>
+ * <th>Description</th>
+ * </tr>
+ * </thead>
+ * <tbody>
+ * <tr>
+ * <td>`.textContent(string)`</td>
+ * <td>Sets the toast content to the specified string</td>
+ * </tr>
+ * <tr>
+ * <td>`.action(string)`</td>
+ * <td>
+ * Adds an action button. <br/>
+ * If clicked, the promise (returned from `show()`)
+ * will resolve with the value `'ok'`; otherwise, it is resolved with `true` after a `hideDelay`
+ * timeout
+ * </td>
+ * </tr>
+ * <tr>
+ * <td>`.highlightAction(boolean)`</td>
+ * <td>
+ * Whether or not the action button will have an additional highlight class.<br/>
+ * By default the `accent` color will be applied to the action button.
+ * </td>
+ * </tr>
+ * <tr>
+ * <td>`.highlightClass(string)`</td>
+ * <td>
+ * If set, the given class will be applied to the highlighted action button.<br/>
+ * This allows you to specify the highlight color easily. Highlight classes are `md-primary`, `md-warn`
+ * and `md-accent`
+ * </td>
+ * </tr>
+ * <tr>
+ * <td>`.capsule(boolean)`</td>
+ * <td>Whether or not to add the `md-capsule` class to the toast to provide rounded corners</td>
+ * </tr>
+ * <tr>
+ * <td>`.theme(string)`</td>
+ * <td>Sets the theme on the toast to the requested theme. Default is `$mdThemingProvider`'s default.</td>
+ * </tr>
+ * </tbody>
+ * </table>
  *
- * - `.textContent(string)` - Sets the toast content to the specified string.
- *
- * - `.action(string)` - Adds an action button. If clicked, the promise (returned from `show()`)
- * will resolve with the value `'ok'`; otherwise, it is resolved with `true` after a `hideDelay`
- * timeout.
- *
- * - `.highlightAction(boolean)` - Whether or not the action button will have an additional
- * highlight class.
- *
- * - `.capsule(boolean)` - Whether or not to add the `md-capsule` class to the toast to provide
- * rounded corners.
- *
- * - `.theme(string)` - Sets the theme on the toast to the requested theme. Default is
- * `$mdThemingProvider`'s default.
  */
 
 /**
@@ -233,25 +266,35 @@ function MdToastProvider($$interimElementProvider) {
  })
  .addPreset('simple', {
  argOption: 'textContent',
- methods: ['textContent', 'content', 'action', 'highlightAction', 'theme', 'parent' ],
+ methods: ['textContent', 'content', 'action', 'highlightAction', 'highlightClass', 'theme', 'parent' ],
  options: /* @ngInject */ function($mdToast, $mdTheming) {
- var opts = {
+ return {
  template:
  '<md-toast md-theme="{{ toast.theme }}" ng-class="{\'md-capsule\': toast.capsule}">' +
  ' <div class="md-toast-content">' +
  ' <span flex class="md-toast-text" role="alert" aria-relevant="all" aria-atomic="true">' +
  ' {{ toast.content }}' +
  ' </span>' +
- ' <md-button class="md-action" ng-if="toast.action" ng-click="toast.resolve()" ng-class="{\'md-highlight\': toast.highlightAction}">' +
+ ' <md-button class="md-action" ng-if="toast.action" ng-click="toast.resolve()" ' +
+ ' ng-class="highlightClasses">' +
  ' {{ toast.action }}' +
  ' </md-button>' +
  ' </div>' +
  '</md-toast>',
  controller: /* @ngInject */ function mdToastCtrl($scope) {
  var self = this;
+
+ if (self.highlightAction) {
+ $scope.highlightClasses = [
+ 'md-highlight',
+ self.highlightClass
+ ]
+ }
+
  $scope.$watch(function() { return activeToastContent; }, function() {
  self.content = activeToastContent;
  });
+
  this.resolve = function() {
  $mdToast.hide( ACTION_RESOLVE );
  };
@@ -260,7 +303,6 @@ function MdToastProvider($$interimElementProvider) {
  controllerAs: 'toast',
  bindToController: true
  };
- return opts;
  }
  })
  .addMethod('updateTextContent', updateTextContent)

src/components/toast/toast.spec.js

@@ -83,6 +83,28 @@ describe('$mdToast service', function() {
  expect(resolved).toBe(true);
  }));
 
+ it('should apply the highlight class when using highlightAction', inject(function($mdToast, $rootScope, $material) {
+ var parent = angular.element('<div>');
+
+ $mdToast.show(
+ $mdToast.simple({
+ content: 'Marked as read',
+ parent: parent
+ })
+ .action('UNDO')
+ .highlightAction(true)
+ .highlightClass('md-warn')
+ );
+
+ $material.flushOutstandingAnimations();
+
+ var button = parent.find('button');
+
+ expect(button.text().trim()).toBe('UNDO');
+ expect(button).toHaveClass('md-highlight');
+ expect(button).toHaveClass('md-warn');
+ }));
+
  describe('when using custom interpolation symbols', function() {
  beforeEach(module(function($interpolateProvider) {
  $interpolateProvider.startSymbol('[[').endSymbol(']]');