feat(pie-textarea): DSW-3891 Add rows prop

.changeset/blue-moments-matter.md

@@ -0,0 +1,5 @@
+---
+"@justeattakeaway/pie-textarea": minor
+---
+
+[Added] - rows prop to the pie-textarea component

apps/pie-storybook/stories/pie-textarea.stories.ts

@@ -121,8 +121,15 @@ const textareaStoryMeta: TextareaStoryMeta = {
             defaultValue: {
                 summary: '',
             },
-            if: { arg: 'type', neq: 'number' },
         },
+        rows: {
+            description: 'The number of rows to display in the textarea. Defaults to 2 if resize is set to `auto`, can be manually set to 1 if `resize` is set to `manual`.',
+            control: 'number',
+            defaultValue: {
+                summary: '2',
+            },
+        },
+
     },
     args: defaultArgs,
     parameters: {
@@ -148,6 +155,7 @@ const Template = ({
     status,
     placeholder,
     maxlength,
+    rows,
 }: TextareaProps) => {
     const [, updateArgs] = UseArgs();
 
@@ -185,7 +193,8 @@ const Template = ({
             @change="${onChange}"
             assistiveText="${ifDefined(assistiveText)}"
             status=${ifDefined(status)}
-            maxlength=${ifDefined(maxlength)}>
+            maxlength=${ifDefined(maxlength)}
+            rows=${ifDefined(rows)}>
         </pie-textarea>
     `;
 };

apps/pie-storybook/stories/testing/pie-textarea.test.stories.ts

@@ -120,7 +120,12 @@ const textareaStoryMeta: TextareaStoryMeta = {
             defaultValue: {
                 summary: '',
             },
-            if: { arg: 'type', neq: 'number' },
+        },
+        rows: {
+            control: 'number',
+            defaultValue: {
+                summary: '2',
+            },
         },
     },
     args: defaultArgs,
@@ -141,6 +146,7 @@ const Template = ({
     status,
     placeholder,
     maxlength,
+    rows,
 }: TextareaProps) => {
     const [, updateArgs] = UseArgs();
 
@@ -185,6 +191,7 @@ const Template = ({
             assistiveText="${ifDefined(assistiveText)}"
             status=${ifDefined(status)}
             maxlength=${ifDefined(maxlength)}
+            rows=${ifDefined(rows)}
             data-test-id="pie-textarea-container">
         </pie-textarea>
         <div id="output"></div>

packages/components/pie-textarea/README.md

@@ -49,6 +49,7 @@ Ideally, you should install the component using the **`@justeattakeaway/pie-webc
 | `readonly`     | `true`, `false`                                              | When true, the user cannot edit the textarea. Not the same as disabled. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly).                                                                                       | `false`     |
 | `required`     | `true`, `false`                                              | If true, textarea must have a value for valid form submission. Does not block form submission by itself.                                                                                                                                         | `false`     |
 | `resize`       | `"auto"`, `"manual"`                                         | Controls resizing behavior. `auto` resizes vertically as needed; `manual` allows user resizing but no auto resizing.                                                                                                                             | `"auto"`    |
+| `rows`         | `number`                                                     | The number of visible text rows. Defaults to 2 when `resize` is `auto`. Can be manually set to 1 when `resize` is set `manual`. Setting `rows` to less than 2 with `resize` set to `auto` will log a warning.                                                | `undefined` |
 | `size`         | `"small"`, `"medium"`, `"large"`                             | Sets the visual size of the textarea.                                                                                                                                                                                                            | `"medium"`  |
 | `status`       | `"default"`, `"error"`, `"success"`                          | Status of the component. If not `default`, `assistiveText` must be provided for accessibility.                                                                                                                                                   | `"default"` |
 | `value`        | `string`                                                     | Value of the textarea (used in form key/value pairs).                                                                                                                                                                                            | `""`        |

packages/components/pie-textarea/src/defs.ts

@@ -80,12 +80,17 @@ export interface TextareaProps {
      * The maximum number of characters allowed in the textarea.
      */
     maxlength?: number;
+
+    /**
+     * The number of rows to display in the textarea. Defaults to 2 if resize is set to auto, can be set to 1 if resize is set to manual.
+     */
+    rows?: number;
 }
 
 /**
  * The default values for the `TextareaProps` that are required (i.e. they have a fallback value in the component).
  */
-type DefaultProps = ComponentDefaultProps<TextareaProps, keyof Omit<TextareaProps, 'name' | 'autocomplete' | 'assistiveText' | 'defaultValue'| 'maxlength'>>;
+type DefaultProps = ComponentDefaultProps<TextareaProps, keyof Omit<TextareaProps, 'name' | 'autocomplete' | 'assistiveText' | 'defaultValue' | 'maxlength' | 'rows'>>;
 
 /**
  * Default values for optional properties that have default fallback values in the component.

packages/components/pie-textarea/src/index.ts

@@ -78,6 +78,9 @@ export class PieTextarea extends FormControlMixin(RtlMixin(DelegatesFocusMixin(P
     @property({ type: Number })
     public maxlength: TextareaProps['maxlength'];
 
+    @property({ type: Number })
+    public rows: TextareaProps['rows'];
+
     @query('textarea')
     private _textarea!: HTMLTextAreaElement;
 
@@ -112,6 +115,10 @@ export class PieTextarea extends FormControlMixin(RtlMixin(DelegatesFocusMixin(P
         if (this.resize === 'auto' && (changedProperties.has('resize') || changedProperties.has('size'))) {
             this.handleResize();
         }
+
+        if ((changedProperties.has('rows') || changedProperties.has('resize')) && (this.resize === 'auto' && this.rows !== undefined && this.rows < 2)) {
+            console.warn('pie-textarea: `rows` can be adjusted and set to `1` manually when `resize` is set to `manual`');
+        }
     }
 
     private _throttledResize = throttle(() => {
@@ -217,6 +224,7 @@ export class PieTextarea extends FormControlMixin(RtlMixin(DelegatesFocusMixin(P
             status,
             assistiveText,
             maxlength,
+            rows,
         } = this;
 
         const classes = {
@@ -249,6 +257,7 @@ export class PieTextarea extends FormControlMixin(RtlMixin(DelegatesFocusMixin(P
                     @input=${this.handleInput}
                     @change=${this.handleChange}
                     maxlength=${ifDefined(maxlength)}
+                    rows=${ifDefined(rows)}
                 ></textarea>
             </div>
             ${this.renderAssistiveText()}

packages/components/pie-textarea/test/component/pie-textarea.spec.ts

@@ -559,6 +559,39 @@ test.describe('PieTextarea - Component tests', () => {
                 expect(isValid).toBe(true);
             });
         });
+
+        test.describe('rows', () => {
+            test('should render textarea with the number of rows provided', async ({ page }) => {
+                // Arrange
+                const props: Partial<TextareaProps> = {
+                    rows: 5,
+                };
+                const textAreaPage = new BasePage(page, 'textarea');
+                await textAreaPage.load({ ...props });
+
+                // Act
+                const component = page.getByTestId(textArea.selectors.textArea.dataTestId);
+
+                // Assert
+                await expect(component).toHaveAttribute('rows', '5');
+            });
+
+            test('should render textarea with 1 row when `rows` is set to 1 and `resize` is set to `manual`', async ({ page }) => {
+                // Arrange
+                const props: Partial<TextareaProps> = {
+                    rows: 1,
+                    resize: 'manual',
+                };
+                const textAreaPage = new BasePage(page, 'textarea');
+                await textAreaPage.load({ ...props });
+
+                // Act
+                const component = page.getByTestId(textArea.selectors.textArea.dataTestId);
+
+                // Assert
+                await expect(component).toHaveAttribute('rows', '1');
+            });
+        });
     });
 
     test.describe('Form integration', () => {