fix(toast): Updated toast styles, added rtl features, added custom demo

* Also adds test for md-toast-text class in simple toast

Fixes #6649, #breaking

Closes #7099

Author: dansanderson

src/components/button/button.scss

@@ -3,9 +3,10 @@ $button-fab-border-radius: 50% !default;
 $button-icon-border-radius: $button-fab-border-radius;
 
 $button-line-height: rem(3.60) !default;
-$button-padding: 0 rem(0.600) !default;
 $button-margin: rem(0.600) rem(0.800) !default;
 $button-min-width: rem(8.800) !default;
+$button-padding: 0 $button-left-right-padding !default;
+
 
 // Fab buttons
 $button-fab-line-height: rem(5.600) !default;

src/components/toast/demoBasicUsage/index.html

@@ -1,30 +1,24 @@
-<div ng-controller="AppCtrl" layout-fill layout="column" class="inset" ng-cloak>
+<div ng-controller="AppCtrl" layout-fill layout="column" class="inset" ng-cloak paddi>
     <p>
     Toast can be dismissed with a swipe, a timer, or a button.<br/>
-      <span style="font-size:0.8em">Notice the 'Show Custom' toast will not nudge the FABs positions since a custom parent was specified.</span>
     </p>
 
 
-    <div layout="row" layout-sm="column" layout-align="space-around">
+    <div layout="row" layout-align="space-around">
       <div style="width:50px"></div>
       <md-button ng-click="showSimpleToast()">
         Show Simple
       </md-button>
       <md-button class="md-raised" ng-click="showActionToast()">
         Show With Action
       </md-button>
-      <md-button ng-click="showCustomToast()">
-        Show Custom
-      </md-button>
       <div style="width:50px"></div>
     </div>
 
     <div layout="row" id="toastBounds">
 
       <div>
-        <br/>
-        <b>Toast Position: "{{getToastPosition()}}"</b>
-        <br/>
+        <p><b>Toast Position: "{{getToastPosition()}}"</b></p>
         <md-checkbox ng-repeat="(name, isSelected) in toastPosition"
           ng-model="toastPosition[name]">
           {{name}}

src/components/toast/demoBasicUsage/script.js

@@ -1,7 +1,7 @@
 
 angular.module('toastDemo1', ['ngMaterial'])
 
-.controller('AppCtrl', function($scope, $mdToast, $document) {
+.controller('AppCtrl', function($scope, $mdToast) {
   var last = {
       bottom: false,
       top: true,
@@ -30,31 +30,24 @@ angular.module('toastDemo1', ['ngMaterial'])
     last = angular.extend({},current);
   }
 
-  $scope.showCustomToast = function() {
-    $mdToast.show({
-      controller: 'ToastCtrl',
-      templateUrl: 'toast-template.html',
-      parent : $document[0].querySelector('#toastBounds'),
-      hideDelay: 6000,
-      position: $scope.getToastPosition()
-    });
-  };
-
   $scope.showSimpleToast = function() {
+    var pinTo = $scope.getToastPosition();
+
     $mdToast.show(
       $mdToast.simple()
         .textContent('Simple Toast!')
-        .position($scope.getToastPosition())
+        .position(pinTo )
         .hideDelay(3000)
     );
   };
 
   $scope.showActionToast = function() {
+    var pinTo = $scope.getToastPosition();
     var toast = $mdToast.simple()
           .textContent('Action Toast!')
           .action('OK')
           .highlightAction(false)
-          .position($scope.getToastPosition());
+          .position(pinTo);
 
     $mdToast.show(toast).then(function(response) {
       if ( response == 'ok' ) {

src/components/toast/demoBasicUsage/toast-template.html

@@ -0,0 +1,13 @@
+<div ng-controller="AppCtrl" class="inset" ng-cloak style="height:300px; padding: 25px;">
+  <div layout="row">
+
+    <p>
+      Toast can have multiple actions:
+    </p>
+
+    <md-button ng-click="showCustomToast()" class="md-raised" style="padding-left: 10px;padding-right: 10px;">
+      Show Custom Toast
+    </md-button>
+
+  </div>
+</div>

src/components/toast/demoCustomUsage/index.html

@@ -0,0 +1,48 @@
+(function() {
+
+  var isDlgOpen;
+
+  angular
+    .module('toastDemo2', ['ngMaterial'])
+    .controller('AppCtrl', function($scope, $mdToast) {
+      $scope.showCustomToast = function() {
+        $mdToast.show({
+          hideDelay   : 3000,
+          position    : 'top right',
+          controller  : 'ToastCtrl',
+          templateUrl : 'toast-template.html'
+        });
+      };
+    })
+    .controller('ToastCtrl', function($scope, $mdToast, $mdDialog) {
+
+      $scope.closeToast = function() {
+        if (isDlgOpen) return;
+
+        $mdToast
+          .hide()
+          .then(function() {
+            isDlgOpen = false;
+          });
+      };
+
+      $scope.openMoreInfo = function(e) {
+        if ( isDlgOpen ) return;
+        isDlgOpen = true;
+
+        $mdDialog
+          .show($mdDialog
+            .alert()
+            .title('More info goes here.')
+            .textContent('Something witty.')
+            .ariaLabel('More info')
+            .ok('Got it')
+            .targetEvent(e)
+          )
+          .then(function() {
+            isDlgOpen = false;
+          })
+      };
+    });
+
+})();

src/components/toast/demoCustomUsage/script.js

@@ -0,0 +1,9 @@
+<md-toast>
+  <span class="md-toast-text" flex>Custom toast!</span>
+  <md-button class="md-highlight" ng-click="openMoreInfo($event)">
+    More info
+  </md-button>
+  <md-button ng-click="closeToast()">
+    Close
+  </md-button>
+</md-toast>

src/components/toast/demoCustomUsage/toast-template.html

@@ -228,18 +228,18 @@ function MdToastProvider($$interimElementProvider) {
   var activeToastContent;
   var $mdToast = $$interimElementProvider('$mdToast')
     .setDefaults({
-      methods: ['position', 'hideDelay', 'capsule', 'parent' ],
+      methods: ['position', 'hideDelay', 'capsule', 'parent', 'position' ],
       options: toastDefaultOptions
     })
     .addPreset('simple', {
       argOption: 'textContent',
-      methods: ['textContent', 'content', 'action', 'highlightAction', 'theme', 'parent'],
+      methods: ['textContent', 'content', 'action', 'highlightAction', 'theme', 'parent' ],
       options: /* @ngInject */ function($mdToast, $mdTheming) {
         var opts = {
           template:
             '<md-toast md-theme="{{ toast.theme }}" ng-class="{\'md-capsule\': toast.capsule}">' +
             '  <div class="md-toast-content">' +
-            '    <span flex role="alert" aria-relevant="all" aria-atomic="true">' +
+            '    <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}">' +
@@ -366,7 +366,8 @@ function MdToastProvider($$interimElementProvider) {
     }
 
     function toastOpenClass(position) {
-      if (!$mdMedia('gt-sm')) {
+      // For mobile, always open full-width on bottom
+      if (!$mdMedia('gt-xs')) {
         return 'md-toast-open-bottom';
       }
 

src/components/toast/toast.js

@@ -1,5 +1,14 @@
 // See height set globally, depended on by buttons
 
+$md-toast-content-padding: 3 * $baseline-grid - $button-left-right-padding;
+$md-toast-button-left-margin: 3 * $baseline-grid - 2 * $button-left-right-padding;
+$md-toast-text-padding: $button-left-right-padding;
+
+
+.md-toast-text {
+  padding: 0 $md-toast-text-padding;
+}
+
 md-toast {
   position: absolute;
   z-index: $z-index-toast;
@@ -23,8 +32,7 @@ md-toast {
     max-height: 7 * $toast-height;
     max-width: 100%;
     min-height: 48px;
-    padding-left: 24px;
-    padding-right: 24px;
+    padding: 0 $md-toast-content-padding;
 
     box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
     border-radius: 2px;
@@ -35,6 +43,8 @@ md-toast {
     // Setup for transform transitions on inner content
     transform: translate3d(0, 0, 0) rotateZ(0deg);
     transition: $swift-ease-out;
+
+    @include rtl(justify-content, flex-start, flex-end);
   }
 
   &.md-capsule {
@@ -112,10 +122,12 @@ md-toast {
     cursor: pointer;
     text-transform: uppercase;
     float: right;
+  }
 
-    &.md-button {
-      min-width: 0;
-    }
+  .md-button {
+    min-width: 0;
+    @include rtl(margin-right, 0, $md-toast-button-left-margin);
+    @include rtl(margin-left, $md-toast-button-left-margin, 0);
   }
 }
 

src/components/toast/toast.scss

@@ -44,6 +44,7 @@ describe('$mdToast service', function() {
       $material.flushOutstandingAnimations();
 
       expect(parent.find('span').text().trim()).toBe('Do something');
+      expect(parent.find('span')).toHaveClass('md-toast-text');
       expect(parent.find('md-toast')).toHaveClass('md-capsule');
       expect(parent.find('md-toast').attr('md-theme')).toBe('some-theme');
 
@@ -177,8 +178,11 @@ describe('$mdToast service', function() {
         $timeout.flush();
 
         expect(toast.children.length).toBe(1);
-        expect(toast.children[0].classList.contains('md-toast-content'));
-        expect(toast.children[0].textContent).toMatch('Charmander');
+        var toastContent = toast.children[0];
+        var contentSpan = toastContent.children[0];
+        expect(toastContent.classList.contains('md-toast-content'));
+        expect(toastContent.textContent).toMatch('Charmander');
+        expect(contentSpan).not.toHaveClass('md-toast-text');
       }));