fix(progress-circular): path not being re-rendered when diameter changes (#9846)

* Fixes the `path` element not being updated when a progress circle's `md-diameter` changes.
* Fixes a warning being logged for the progress circlar demo.
* Does some minor cleanup in the progress circle directive.

Fixes #9841.

Author: crisbeto

src/components/progressCircular/demoBasicUsage/script.js

@@ -1,5 +1,9 @@
 angular
-  .module('progressCircularDemo1', ['ngMaterial'])
+  .module('progressCircularDemo1', ['ngMaterial'], function($mdThemingProvider) {
+    $mdThemingProvider.theme('docs-dark', 'default')
+      .primaryPalette('yellow')
+      .dark();
+  })
   .controller('AppCtrl', ['$interval',
     function($interval) {
       var self = this;

src/components/progressCircular/js/progressCircularDirective.js

@@ -87,11 +87,7 @@ function MdProgressCircularDirective($window, $mdProgressCircular, $mdTheming,
       });
 
       if (angular.isUndefined(attrs.mdMode)) {
-        var hasValue = angular.isDefined(attrs.value);
-        var mode = hasValue ? MODE_DETERMINATE : MODE_INDETERMINATE;
-        var info = "Auto-adding the missing md-mode='{0}' to the ProgressCircular element";
-
-          // $log.debug( $mdUtil.supplant(info, [mode]) );
+        var mode = attrs.hasOwnProperty('value') ? MODE_DETERMINATE : MODE_INDETERMINATE;
         attrs.$set('mdMode', mode);
       } else {
         attrs.$set('mdMode', attrs.mdMode.trim());
@@ -138,8 +134,8 @@ function MdProgressCircularDirective($window, $mdProgressCircular, $mdTheming,
       if (isDisabled === true || isDisabled === false){
         return isDisabled;
       }
-      return angular.isDefined(element.attr('disabled'));
 
+      return angular.isDefined(element.attr('disabled'));
     }], function(newValues, oldValues) {
       var mode = newValues[1];
       var isDisabled = newValues[2];
@@ -176,6 +172,7 @@ function MdProgressCircularDirective($window, $mdProgressCircular, $mdTheming,
     scope.$watch('mdDiameter', function(newValue) {
       var diameter = getSize(newValue);
       var strokeWidth = getStroke(diameter);
+      var value = clamp(scope.value);
       var transformOrigin = (diameter / 2) + 'px';
       var dimensions = {
         width: diameter + 'px',
@@ -200,6 +197,8 @@ function MdProgressCircularDirective($window, $mdProgressCircular, $mdTheming,
 
       element.css(dimensions);
       path.css('stroke-width',  strokeWidth + 'px');
+
+      renderCircle(value, value);
     });
 
     function renderCircle(animateFrom, animateTo, easing, duration, rotation) {

src/components/progressCircular/progress-circular.spec.js

@@ -67,7 +67,7 @@ describe('mdProgressCircular', function() {
     expect(progress.attr('aria-valuenow')).toEqual('50');
   });
 
-  it('should\'t set aria-valuenow in indeterminate mode', function() {
+  it('should not set aria-valuenow in indeterminate mode', function() {
     var progress = buildIndicator('<md-progress-circular md-mode="indeterminate" value="100"></md-progress-circular>');
 
     expect(progress.attr('aria-valuenow')).toBeUndefined();
@@ -111,6 +111,27 @@ describe('mdProgressCircular', function() {
     expect(svg.css('transform-origin')).toBe('21px 21px 21px');
   });
 
+  it('should adjust the element size when the diameter changes', function() {
+    $rootScope.diameter = 30;
+
+    var element = buildIndicator(
+      '<md-progress-circular value="50" md-diameter="{{diameter}}"></md-progress-circular>'
+    );
+
+    var path = element.find('path');
+    var initialPathDimensions = path.attr('d');
+
+    expect(element.css('width')).toBe('30px');
+    expect(element.css('height')).toBe('30px');
+    expect(initialPathDimensions).toBeTruthy();
+
+    $rootScope.$apply('diameter = 60');
+
+    expect(element.css('width')).toBe('60px');
+    expect(element.css('height')).toBe('60px');
+    expect(path.attr('d')).not.toBe(initialPathDimensions);
+  });
+
   /**
    * Build a progressCircular
    */