From 49593c87f793fc5de440e49fb60867b860f642c5 Mon Sep 17 00:00:00 2001
From: Cody Mikol <cody.mikol@boltstech.com>
Date: Thu, 18 Jan 2018 14:04:10 -0500
Subject: [PATCH] fix(dialog): md-colors breaks inside of dialogs

Only append an md-theme attribute if the md-dialog is propagated from an element that contains an md-theme.

Fixes #10276
---
 src/components/dialog/dialog.js      |  7 ++--
 src/components/dialog/dialog.spec.js | 53 ++++++++++++++++++++++++++++
 2 files changed, 58 insertions(+), 2 deletions(-)

diff --git a/src/components/dialog/dialog.js b/src/components/dialog/dialog.js
index ba04101e362..fcc437b0860 100644
--- a/src/components/dialog/dialog.js
+++ b/src/components/dialog/dialog.js
@@ -693,7 +693,8 @@ function MdDialogProvider($$interimElementProvider) {
         var startSymbol = $interpolate.startSymbol();
         var endSymbol = $interpolate.endSymbol();
         var theme = startSymbol + (options.themeWatch ? '' : '::') + 'theme' + endSymbol;
-        return '<div class="md-dialog-container" tabindex="-1" md-theme="' + theme + '">' + validatedTemplate(template) + '</div>';
+        var themeAttr = (options.hasTheme) ? 'md-theme="'+theme+'"': '';
+        return '<div class="md-dialog-container" tabindex="-1" ' + themeAttr + '>' + validatedTemplate(template) + '</div>';
 
         /**
          * The specified template should contain a <md-dialog> wrapper element....
@@ -854,7 +855,9 @@ function MdDialogProvider($$interimElementProvider) {
 
       var themeCtrl = targetEl && targetEl.controller('mdTheme');
 
-      if (!themeCtrl) {
+      options.hasTheme = (!!themeCtrl);
+
+      if (!options.hasTheme) {
         return;
       }
 
diff --git a/src/components/dialog/dialog.spec.js b/src/components/dialog/dialog.spec.js
index 9617d561431..906bbe0b704 100644
--- a/src/components/dialog/dialog.spec.js
+++ b/src/components/dialog/dialog.spec.js
@@ -1774,6 +1774,59 @@ describe('$mdDialog', function() {
     });
 
     describe('theming', function () {
+
+      it('should inherit md-theme if the child has a md-theme to inherit',
+        inject(function ($mdDialog, $mdTheming, $rootScope, $compile) {
+
+          var template = '<div id="rawContent">Hello</div>';
+          var parent = angular.element('<div>');
+
+          var button = $compile(
+            '<button ng-click="showDialog($event)" md-theme="coolTheme">test</button>'
+          )($rootScope);
+
+          $mdTheming(button);
+
+          $rootScope.showDialog = function (ev) {
+            $mdDialog.show({
+              template: template,
+              parent: parent,
+              targetEvent: ev
+            });
+          };
+
+          button[0].click();
+
+          var container = angular.element(parent[0].querySelector('.md-dialog-container'));
+
+          expect(container.attr('md-theme')).toEqual('coolTheme');
+        }));
+
+      it('should not set md-theme if the child does not have md-theme to inherit',
+        inject(function ($mdDialog, $mdTheming, $rootScope, $compile) {
+
+          var template = '<div id="rawContent">Hello</div>';
+          var parent = angular.element('<div>');
+
+          var button = $compile('<button ng-click="showDialog($event)">test</button>')($rootScope);
+
+          $mdTheming(button);
+
+          $rootScope.showDialog = function (ev) {
+            $mdDialog.show({
+              template: template,
+              parent: parent,
+              targetEvent: ev
+            });
+          };
+
+          button[0].click();
+
+          var container = angular.element(parent[0].querySelector('.md-dialog-container'));
+
+          expect(container.attr('md-theme')).toBeUndefined();
+        }));
+
       it('should inherit targetElement theme', inject(function($mdDialog, $mdTheming, $rootScope, $compile) {
         var template = '<div id="rawContent">Hello</div>';
         var parent = angular.element('<div>');