fix(theming): BREAKING: no longer apply md-default-theme class to unn…

…ested themable elements

closes #4846

Themable elements no longer have a `.md-default-theme` class applied to
them if they are not inside of a directive explicitly setting
`md-theme="default"` this helps reduce specificity making it easier to
override angular material's default style. At the same time, the rule is
applied if `md-theme="default"` so that the (presumably nested) theme
can have higher specificity than other themes in the DOM.

Fix required: Stylesheets should not target elements using the
`md-default-theme` selector. Overrides should happen by targeting non
angular-material provided classes. As a quick fix, a
`md-theme="default"` at the `ng-app` level will result in the
`md-default`theme` class being applied as it was before this fix.
Theming related styles now target `md-default-theme` making it harder to
override when the class is applied.

src/components/card/card.spec.js

@@ -1,16 +1,15 @@
 describe('mdCard directive', function() {
 
- beforeEach(module('material.components.card'));
+ var $mdThemingMock = function() { $mdThemingMock.called = true; };
 
- it('should have the default theme class when the md-theme attribute is not defined', inject(function($compile, $rootScope) {
- var card = $compile('<md-card></md-card>')($rootScope.$new());
- $rootScope.$apply();
- expect(card.hasClass('md-default-theme')).toBe(true);
+ beforeEach(module(function($provide) {
+ $provide.value('$mdTheming', $mdThemingMock);
  }));
 
- it('should have the correct theme class when the md-theme attribute is defined', inject(function($compile, $rootScope) {
- var card = $compile('<md-card md-theme="green"></md-card>')($rootScope.$new());
- $rootScope.$apply();
- expect(card.hasClass('md-green-theme')).toBe(true);
+ beforeEach(module('material.components.card'));
+
+ it('should be themable', inject(function($compile, $rootScope) {
+ $compile('<md-card></md-card>')($rootScope.$new());
+ expect($mdThemingMock.called).toBe(true);
  }));
 });

src/core/services/theming/theming.js

@@ -322,15 +322,16 @@ function ThemingProvider($mdColorPalette) {
  var attrThemeValue = el.attr('md-theme-watch');
  if ( (alwaysWatchTheme || angular.isDefined(attrThemeValue)) && attrThemeValue != 'false') {
  var deregisterWatch = $rootScope.$watch(function() {
- return ctrl && ctrl.$mdTheme || defaultTheme;
+ return ctrl && ctrl.$mdTheme || (defaultTheme == 'default' ? '' : defaultTheme);
  }, changeTheme);
  el.on('$destroy', deregisterWatch);
  } else {
- var theme = ctrl && ctrl.$mdTheme || defaultTheme;
+ var theme = ctrl && ctrl.$mdTheme || (defaultTheme == 'default' ? '' : defaultTheme);
  changeTheme(theme);
  }
 
  function changeTheme(theme) {
+ if (!theme) return;
  if (!registered(theme)) {
  $log.warn('Attempted to use unregistered theme \'' + theme + '\'. ' +
  'Register it with $mdThemingProvider.theme().');
@@ -438,7 +439,7 @@ function parseRules(theme, colorType, rules) {
  // Don't apply a selector rule to the default theme, making it easier to override
  // styles of the base-component
  if (theme.name == 'default') {
- newRule = newRule.replace(/\.md-default-theme/g, '');
+ newRule = newRule.replace(/((\w|-)+)\.md-default-theme((\.|\w|-|:|\(|\)|\[|\]|"|'|=)*)/g, '$&, $1$3');
  }
  generatedRules.push(newRule);
  });

src/core/services/theming/theming.spec.js

@@ -280,7 +280,7 @@ describe('$mdThemingProvider', function() {
  var hue1 = themingProvider._rgba(themingProvider._PALETTES.testPalette['300'].value, '0.3');
  var hue2 = themingProvider._rgba(themingProvider._PALETTES.testPalette['800'].value, '0.3');
  var hue3 = themingProvider._rgba(themingProvider._PALETTES.testPalette.A100.value, '0.3');
- result = parse('.md-THEME_NAME-theme.md-primary { color: "{{primary-color-0.3}}"; }');
+ var result = parse('.md-THEME_NAME-theme.md-primary { color: "{{primary-color-0.3}}"; }');
  expect(result[0]).toEqual({content: 'color: ' + primary + ';', hue: null, type: 'primary'});
  expect(result[1]).toEqual({content: 'color: ' + hue1 + ';', hue: 'hue-1', type: 'primary'});
  expect(result[2]).toEqual({content: 'color: ' + hue2 + ';', hue: 'hue-2', type: 'primary'});
@@ -331,11 +331,6 @@ describe('$mdTheming service', function() {
  });
 
 
- it('applies a default theme if no theme can be found', inject(function($mdTheming) {
- $mdTheming(el);
- expect(el.hasClass('md-default-theme')).toBe(true);
- }));
-
  it('supports setting a different default theme', function() {
  $mdThemingProvider.setDefaultTheme('other');
  inject(function($rootScope, $compile, $mdTheming) {
@@ -359,8 +354,9 @@ describe('$mdTheming service', function() {
  }));
 
  it('provides the md-themable directive', function() {
+ $mdThemingProvider.setDefaultTheme('some');
  el = compileAndLink('<h1 md-themable></h1>');
- expect(el.hasClass('md-default-theme')).toBe(true);
+ expect(el.hasClass('md-some-theme')).toBe(true);
  });
 
  it('can inherit from explicit parents', inject(function($rootScope, $mdTheming) {
@@ -395,7 +391,7 @@ describe('md-theme directive', function() {
  it('warns when an unregistered theme is used', function() {
  inject(function($log, $compile, $rootScope) {
  spyOn($log, 'warn');
- var el = $compile('<div md-theme="unregistered"></div>')($rootScope);
+ $compile('<div md-theme="unregistered"></div>')($rootScope);
  $rootScope.$apply();
  expect($log.warn).toHaveBeenCalled();
  });
@@ -404,7 +400,7 @@ describe('md-theme directive', function() {
  it('does not warn when a registered theme is used', function() {
  inject(function($log, $compile, $rootScope) {
  spyOn($log, 'warn');
- var el = $compile('<div md-theme="default"></div>')($rootScope);
+ $compile('<div md-theme="default"></div>')($rootScope);
  $rootScope.$apply();
  expect($log.warn.calls.count()).toBe(0);
  });
@@ -447,7 +443,7 @@ describe('md-themable directive', function() {
 
  it('should support watching parent theme by default', function() {
  $mdThemingProvider.alwaysWatchTheme(true);
- inject(function($rootScope, $compile, $mdTheming) {
+ inject(function($rootScope, $compile) {
  $rootScope.themey = 'red';
  var el = $compile('<div md-theme="{{themey}}"><span md-themable></span></div>')($rootScope);
  $rootScope.$apply();
@@ -457,4 +453,14 @@ describe('md-themable directive', function() {
  expect(el.children().hasClass('md-red-theme')).toBe(true);
  });
  });
+
+ it('should not apply a class for an unnested default theme', inject(function($rootScope, $compile) {
+ var el = $compile('<div md-themable></div>')($rootScope);
+ expect(el.hasClass('md-default-theme')).toBe(false);
+ }));
+
+ it('should apply a class for a nested default theme', inject(function($rootScope, $compile) {
+ var el = $compile('<div md-theme="default" md-themable></div>')($rootScope);
+ expect(el.hasClass('md-default-theme')).toBe(true);
+ }));
 });