feat: allow shrinking text area to single row (#8168)

* feat: allow using single row for text area

* update material theme to align single row textarea with other field components

* update screenshots

* update docs

packages/text-area/src/vaadin-text-area-mixin.d.ts

@@ -63,7 +63,7 @@ export declare class TextAreaMixinClass {
   pattern: string;
 
   /**
-   * Minimum number of rows to show. Default is two rows, which is also the minimum value.
+   * Minimum number of rows to show. Default is two rows.
    *
    * When using a custom slotted textarea, the minimum number of rows are not applied for backwards compatibility.
    *

packages/text-area/src/vaadin-text-area-mixin.js

@@ -42,7 +42,7 @@ export const TextAreaMixin = (superClass) =>
         },
 
         /**
-         * Minimum number of rows to show. Default is two rows, which is also the minimum value.
+         * Minimum number of rows to show. Default is two rows.
          *
          * When using a custom slotted textarea, the minimum number of rows are not applied for backwards compatibility.
          *
@@ -219,7 +219,7 @@ export const TextAreaMixin = (superClass) =>
       // Do not override this on custom slotted textarea as number of rows may
       // have been configured there.
       if (this.inputElement === this.__textAreaController.defaultNode) {
-        this.inputElement.rows = Math.max(minRows, 2);
+        this.inputElement.rows = Math.max(minRows, 1);
       }
     }
 
@@ -257,8 +257,8 @@ export const TextAreaMixin = (superClass) =>
      * @private
      */
     __minRowsChanged(minRows) {
-      if (minRows < 2) {
-        console.warn('<vaadin-text-area> minRows must be at least 2.');
+      if (minRows < 1) {
+        console.warn('<vaadin-text-area> minRows must be at least 1.');
       }
     }
 

packages/text-area/test/text-area.common.js

@@ -379,18 +379,18 @@ describe('text-area', () => {
         expect(textArea.clientHeight).to.equal(lineHeight * 4);
       });
 
-      it('should not be possible to set min-height to less than two rows', async () => {
+      it('should be possible to set min-height to a single row', async () => {
         textArea.minRows = 1;
         await nextUpdate(textArea);
 
-        expect(textArea.clientHeight).to.closeTo(lineHeight * 2, 1);
+        expect(textArea.clientHeight).to.closeTo(lineHeight, 1);
       });
 
-      it('should log warning when setting minRows to less than two rows', async () => {
-        textArea.minRows = 1;
+      it('should log warning when setting minRows to less than one row', async () => {
+        textArea.minRows = 0;
         await nextUpdate(textArea);
 
-        expect(console.warn).to.be.calledWith('<vaadin-text-area> minRows must be at least 2.');
+        expect(console.warn).to.be.calledWith('<vaadin-text-area> minRows must be at least 1.');
       });
 
       it('should not log warning when setting minRows to two rows or more', async () => {

packages/text-area/test/visual/lumo/text-area.test.js

@@ -130,4 +130,12 @@ describe('text-area', () => {
     element.maxRows = 4;
     await visualDiff(div, 'max-rows');
   });
+
+  it('single-row', async () => {
+    element.minRows = 1;
+    element.value = 'value';
+    element.clearButtonVisible = true;
+
+    await visualDiff(div, 'single-row');
+  });
 });

packages/text-area/test/visual/material/text-area.test.js

@@ -132,4 +132,12 @@ describe('text-area', () => {
     element.maxRows = 4;
     await visualDiff(div, 'max-rows');
   });
+
+  it('single-row', async () => {
+    element.minRows = 1;
+    element.value = 'value';
+    element.clearButtonVisible = true;
+
+    await visualDiff(div, 'single-row');
+  });
 });

packages/text-area/theme/lumo/vaadin-text-area-styles.js

@@ -15,6 +15,7 @@ const textArea = css`
   [part='input-field'] ::slotted(textarea) {
     height: auto;
     box-sizing: border-box;
+    min-height: 0;
   }
 
   [part='input-field'] {
@@ -64,11 +65,13 @@ const textArea = css`
     align-self: flex-start;
   }
 
-  /* Vertically align icon prefix/suffix/clear button with the first line of text */
   [part='input-field'] ::slotted(vaadin-icon[slot$='fix']),
   [part='clear-button'] {
+    /* Vertically align icon prefix/suffix/clear button with the first line of text */
     top: calc((var(--lumo-icon-size-m) - 1em * var(--lumo-line-height-s)) / -2);
     margin-top: calc((var(--lumo-icon-size-m) - 1em * var(--lumo-line-height-s)) / -2);
+    /* Reduce effective height to match line height of native textarea, so icons don't increase component size when using single row */
+    margin-bottom: calc((var(--lumo-icon-size-m) - 1em * var(--lumo-line-height-s)) / -2);
   }
 `;