Add rows and cols propertie

demo/text-area-demos.html

@@ -17,7 +17,18 @@ <h3>Basic text area</h3>
       </template>
     </vaadin-demo-snippet>
 
-    <h3>Maximum height</h3>
+    <h3>Controlling size with Rows & Cols</h3>
+    <vaadin-demo-snippet id="text-area-demos-text-area-rows-cols">
+      <template preserve-content>
+        <vaadin-text-area
+            label="Description"
+            placeholder="Write here ..."
+            rows="4"
+            cols="50"></vaadin-text-area>
+      </template>
+    </vaadin-demo-snippet>
+
+    <h3>Controlling size with maximum height</h3>
     <vaadin-demo-snippet id="text-area-demos-text-area-with-max-height">
       <template preserve-content>
         <style>
@@ -32,7 +43,7 @@ <h3>Maximum height</h3>
       </template>
     </vaadin-demo-snippet>
 
-    <h3>Minimum height</h3>
+    <h3>Controlling size with minimum height</h3>
     <vaadin-demo-snippet id="text-area-demos-text-area-with-min-height">
       <template preserve-content>
         <style>

src/vaadin-text-area.html

@@ -138,9 +138,23 @@
           return '2.4.7';
         }
 
+        static get properties() {
+          return {
+            rows: {
+              type: Number,
+              reflectToAttribute: true
+            },
+            cols: {
+              type: Number,
+              reflectToAttribute: true
+            }
+          };
+        }
+
         static get observers() {
           return [
-            '_textAreaValueChanged(value)'
+            '_textAreaValueChanged(value)',
+            '_rowsColsChanged(rows, cols)'
           ];
         }
 
@@ -168,6 +182,13 @@
           const inputField = this.root.querySelector('[part=input-field]');
           const scrollTop = inputField.scrollTop;
           const input = this.inputElement;
+          const container = this.root.querySelector('.vaadin-text-area-container');
+
+          if (this.cols) {
+            container.style.width = '100%';
+          } else {
+            container.style.removeProperty('width');
+          }
 
           const inputWidth = getComputedStyle(input).width;
 
@@ -183,8 +204,10 @@
           this._oldValueLength = valueLength;
 
           const inputHeight = input.scrollHeight;
-          if (inputHeight > input.clientHeight) {
+          if (inputHeight > input.clientHeight && !this.rows) {
             input.style.height = inputHeight + 'px';
+          } else if (this.rows) {
+            input.style.height = 'initial';
           }
 
           // Restore
@@ -195,6 +218,22 @@
           this._dispatchIronResizeEventIfNeeded('InputHeight', inputHeight);
         }
 
+        _rowsColsChanged(rows, cols) {
+          if (rows) {
+            this.inputElement.setAttribute('rows', rows);
+          } else {
+            this.inputElement.removeAttribute('rows');
+          }
+
+          if (cols) {
+            this.inputElement.setAttribute('cols', cols);
+          } else {
+            this.inputElement.removeAttribute('cols');
+          }
+
+          this._updateHeight();
+        }
+
         /**
          * Fired when the text-area height changes.
          *

test/text-area.html

@@ -27,6 +27,8 @@
   </test-fixture>
 
   <script>
+    const isIe = /\bTrident\b/.test(navigator.userAgent);
+
     ['', 'with slotted input'].forEach(condition => {
       let fixtureName = '';
       if (condition !== '') {
@@ -339,8 +341,37 @@
         });
       });
 
+      describe(`rows-cols ${condition}`, () => {
+        let textArea, input, container;
+
+        beforeEach(() => {
+          textArea = fixture(`default${fixtureName}`);
+          input = textArea.inputElement;
+          container = textArea.root.querySelector('.vaadin-text-area-container');
+        });
+
+        it('should propagate rows property to native textarea', () => {
+          textArea.rows = 7;
+          expect(input.rows).to.equal(7);
+        });
+
+        it('should propagate cols property to native textarea', () => {
+          textArea.cols = 40;
+          expect(input.cols).to.equal(40);
+        });
+
+        it('should set input height initial with rows property', () => {
+          textArea.rows = 7;
+          expect(input.style.height).to.be.equal(isIe ? 'auto' : 'initial');
+        });
+
+        it('should set container width 100% with cols property', () => {
+          textArea.cols = 40;
+          expect(container.style.width).to.be.equal('100%');
+        });
+      });
+
       // FIXME(platosha): Flacky with P2 in IE 11, fails with undefined `spy`.
-      const isIe = /\bTrident\b/.test(navigator.userAgent);
       (isIe ? describe.skip : describe)(`resize ${condition}`, () => {
         let textArea, spy;
 

test/visual/test.js

@@ -132,5 +132,26 @@ gemini.suite('vaadin-text-field', function(rootSuite) {
         .setCaptureElements('#text-area-clear-button')
         .capture('text-area-clear-button');
     });
+
+    gemini.suite(`text-area-rows-${theme}`, function(suite) {
+      suite
+        .setUrl(`vaadin-text-area/rows-cols.html?theme=${theme}`)
+        .setCaptureElements('#rows')
+        .capture('rows');
+    });
+
+    gemini.suite(`text-area-cols-${theme}`, function(suite) {
+      suite
+        .setUrl(`vaadin-text-area/rows-cols.html?theme=${theme}`)
+        .setCaptureElements('#cols')
+        .capture('cols');
+    });
+
+    gemini.suite(`text-area-rows-cols-${theme}`, function(suite) {
+      suite
+        .setUrl(`vaadin-text-area/rows-cols.html?theme=${theme}`)
+        .setCaptureElements('#rows-cols')
+        .capture('rows-cols');
+    });
   });
 });

test/visual/vaadin-text-area/rows-cols.html

@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+
+<head lang="ar">
+  <meta charset="UTF-8">
+  <title></title>
+  <script src="../../../../webcomponentsjs/webcomponents-loader.js"></script>
+  <script>
+    const theme = window.location.search.replace(/.*theme=(\w+).*/, '$1') || 'lumo';
+    document.write(`<link rel="import" href="../../../theme/${theme}/vaadin-text-area.html">`);
+
+    window.addEventListener('WebComponentsReady', function() {
+      setTimeout(function() {
+        window.ShadyDOM && window.ShadyDOM.flush(); // Force DOM composition
+        window.webComponentsAreReady = true; // Checked in gemini before capture callback
+      });
+    });
+  </script>
+  <link href="../common.html" rel="import">
+</head>
+
+<body>
+
+  <fieldset id="rows">
+    <vaadin-text-area rows="6"></vaadin-text-area>
+  </fieldset>
+
+  <fieldset id="cols">
+    <vaadin-text-area cols="50"></vaadin-text-area>
+  </fieldset>
+
+  <fieldset id="rows-cols">
+    <vaadin-text-area rows="6" cols="50"></vaadin-text-area>
+  </fieldset>
+
+</body>