fix(toast): wrap toast content with .md-toast-content

Author: jelbourn

src/components/toast/toast.js

@@ -156,6 +156,9 @@ function MdToastDirective($mdToast) {
   *     have an outer `md-toast` element.
   *   - `template` - `{string=}`: Same as templateUrl, except this is an actual
   *     template string.
+  *   - `autoWrap` - `{boolean=}`: Whether or not to automatically wrap the template content with a
+  *     `<div class="md-toast-content">` if one is not provided. Defaults to true. Can be disabled if you provide a
+  *     custom toast directive.
   *   - `scope` - `{object=}`: the scope to link the template / controller to. If none is specified, it will create a new child scope.
   *     This scope will be destroyed when the toast is removed unless `preserveScope` is set to true.
   *   - `preserveScope` - `{boolean=}`: whether to preserve the scope when the element is removed. Default is false
@@ -277,7 +280,28 @@ function MdToastProvider($$interimElementProvider) {
       onRemove: onRemove,
       position: 'bottom left',
       themable: true,
-      hideDelay: 3000
+      hideDelay: 3000,
+      autoWrap: true,
+      transformTemplate: function(template, options) {
+        var shouldAddWrapper = options.autoWrap && template && !/md-toast-content/g.test(template);
+
+        if (shouldAddWrapper) {
+          // Root element of template will be <md-toast>. We need to wrap all of its content inside of
+          // of <div class="md-toast-content">. All templates provided here should be static, developer-controlled
+          // content (meaning we're not attempting to guard against XSS).
+          var parsedTemplate = angular.element(template);
+          var wrappedContent = '<div class="md-toast-content">' + parsedTemplate.html() + '</div>';
+
+          parsedTemplate.empty().append(wrappedContent);
+
+          // Underlying interimElement expects a template string.
+          return parsedTemplate[0].outerHTML;
+        }
+
+        return shouldAddWrapper ?
+            '<div class="md-toast-content">' + template + '</div>' :
+            template || '';
+      }
     };
 
     function onShow(scope, element, options) {

src/components/toast/toast.spec.js

@@ -168,6 +168,21 @@ describe('$mdToast service', function() {
         expect(toast.hasClass('md-left')).toBe(true);
       }));
 
+      it('should wrap toast content with .md-toast-content', inject(function($rootElement, $timeout) {
+        setup({
+          template: '<md-toast><p>Charmander</p></md-toast>',
+          position: 'top left'
+        });
+        var toast = $rootElement.find('md-toast')[0];
+        $timeout.flush();
+
+        expect(toast.children.length).toBe(1);
+        expect(toast.children[0].classList.contains('md-toast-content'));
+        expect(toast.children[0].textContent).toMatch('Charmander');
+      }));
+
+
+
       describe('sm screen', function () {
         beforeEach(function () {
           module(function ($provide) {