Textarea

.gitignore

@@ -12,3 +12,6 @@ dist
 /vendor
 
 .polymer-qp
+
+atlassian-ide-plugin.xml
+*.iml

src/components/textField/demoBasicUsage/index.html

@@ -23,6 +23,8 @@
         <md-text-float label="Postal Code" ng-model="user.postalCode" > </md-text-float>
       </div>
       <md-text-float label="Country"       ng-model="user.country"    disabled > </md-text-float>
+      <md-text-float label="Intro"         ng-model="user.intro"      rows="4"
+                     cols="50"             type="textarea"            > </md-text-float>
     </form>
   </md-content>
 

src/components/textField/demoBasicUsage/script.js

@@ -16,7 +16,8 @@ angular.module('textFieldDemo1', ['ngMaterial'])
        city:      "Mountain View" ,
        state:     "CA" ,
        country:   "USA" ,
-       postalCode : "94043"
+       postalCode : "94043",
+       intro: ""
     };
   });
 

src/components/textField/textField.js

@@ -40,6 +40,9 @@ angular.module('material.components.textField', [
  *
  * <!-- Specify an input type if desired. -->
  * <md-text-float label="eMail"    ng-model="user.email" type="email" ></md-text-float>
+ *
+ * <!-- Specify textarea as an input type if desired. -->
+ * <md-text-float label="intro"    ng-model="user.intro" type="textarea" ></md-text-float>
  * </hljs>
  */
 function mdTextFloatDirective($mdTheming, $mdUtil, $parse) {
@@ -134,7 +137,14 @@ function mdInputDirective($mdUtil) {
   return {
     restrict: 'E',
     replace: true,
-    template: '<input >',
+    template: function createTemplate(element) {
+      var isTextarea = element.parent().attr('type') === 'textarea';
+      if (isTextarea) {
+        return '<textarea >';
+      } else {
+        return '<input >';
+      }
+    },
     require: ['^?mdInputGroup', '?ngModel'],
     link: function(scope, element, attr, ctrls) {
       if ( !ctrls[0] ) return;
@@ -146,7 +156,12 @@ function mdInputDirective($mdUtil) {
         element.attr('aria-disabled', !!isDisabled);
         element.attr('tabindex', !!isDisabled);
       });
-      element.attr('type', attr.type || element.parent().attr('type') || "text");
+
+      element.attr({
+        'type': attr.type || element.parent().attr('type') || "text",
+        'rows': attr.rows || element.parent().attr('rows'),
+        'cols': attr.cols || element.parent().attr('cols')
+      });
 
       // When the input value changes, check if it "has" a value, and
       // set the appropriate class on the input group

src/components/textField/textField.spec.js

@@ -228,6 +228,46 @@ describe('Text Field directives', function() {
     });
   });
 
+  describe(' - mdTextFloat type=textarea', function mdTextareaFloatSuit() {
+    var model;
+    beforeEach(function () {
+      model = {
+        labels: {
+          intro: 'intro'
+        },
+        user: {
+          filledIntro: 'This is my intro',
+          emptyIntro: null
+        }
+      }
+    });
+
+    it('should configure the amount of collumn and rows', function configureColsAndRows() {
+      var markup = '<md-text-float rows="4" cols="50"' +
+        '  type="textarea"' +
+        '  label="{{labels.intro}}" ' +
+        '  ng-model="user.filledIntro" >' +
+        '</md-text-float>';
+      var el = buildElement(markup, model);
+      var textarea = el.find('textarea');
+
+      expect(textarea.attr('rows')).toBe('4');
+      expect(textarea.attr('cols')).toBe('50');
+    });
+
+    it('should configure the label', function configureLabel() {
+      var markup = '<md-text-float rows="4" cols="50"' +
+        '  type="textarea"' +
+        '  label="{{labels.intro}}" ' +
+        '  ng-model="user.filledIntro" >' +
+        '</md-text-float>';
+      var el = buildElement(markup, model);
+      var label = el.find('label');
+
+      expect(label.text()).toBe(model.labels.intro);
+    });
+  });
+
   // ****************************************************************
   // Utility `setup` methods
   // ****************************************************************