feat(pie-textarea): DSW-3890 Add Resize None

.changeset/textarea-resize-none.md

@@ -0,0 +1,5 @@
+---
+"@justeattakeaway/pie-textarea": minor
+---
+
+[Added] - New `resize="none"` value

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

@@ -37,7 +37,7 @@ const textareaStoryMeta: TextareaStoryMeta = {
             },
         },
         resize: {
-            description: 'Controls the resizing behaviour of the textarea. Can be `auto` or `manual`. Defaults to `auto`.',
+            description: 'Controls the resizing behaviour of the textarea. Can be `auto`, `manual` or `none`. Defaults to `auto`.',
             control: 'select',
             options: resizeModes,
             defaultValue: {
@@ -123,7 +123,7 @@ const textareaStoryMeta: TextareaStoryMeta = {
             },
         },
         rows: {
-            description: 'The number of visible text rows. Defaults to 2 when `resize` is `auto`, with a maximum of 6 rows. Can be set to 1 when `resize` is `manual` (no maximum height on desktop). On mobile, manual mode is fixed at 6 rows and cannot be resized.',
+            description: 'The number of visible text rows. Defaults to 2 when `resize` is `auto`, with a maximum of 6 rows. Can be set to 1 when `resize` is `manual` (no maximum height on desktop). On mobile, manual mode is fixed at 6 rows and cannot be resized. When `resize` is `none`, follows the `rows` value set by the user, defaulting to 2 rows.',
             control: 'number',
             defaultValue: {
                 summary: '2',

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

@@ -351,13 +351,13 @@ const baseSharedPropsMatrix: Partial<Record<keyof TextareaProps, unknown[]>> = {
 
 // Text variant stories
 const textPropsMatrix: Partial<Record<keyof TextareaProps, unknown[]>> = {
-    resize: ['auto', 'manual'],
+    resize: ['auto', 'manual', 'none'],
     value: [shortContent, longContent, overflowingContent],
 };
 
 // Text resize stories
 const resizePropsMatrix: Partial<Record<keyof TextareaProps, unknown[]>> = {
-    resize: ['auto', 'manual'],
+    resize: ['auto', 'manual', 'none'],
 };
 
 // Status variant stories

packages/components/pie-textarea/README.md

@@ -48,8 +48,8 @@ Ideally, you should install the component using the **`@justeattakeaway/pie-webc
 | `placeholder`  | `string`                                                     | Placeholder text shown when textarea is empty.                                                                                                                                                                                                   | `""`        |
 | `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`, with a maximum of 6 rows. Can be set to 1 when `resize` is `manual` (no maximum height on desktop). On mobile, manual mode is fixed at 6 rows and cannot be resized. | `undefined` |
+| `resize`       | `"auto"`, `"manual"`, `"none"`                               | Controls resizing behavior. `auto` resizes vertically as needed; `manual` allows user resizing but no auto resizing; `none` cannot be resized by the user or grow automatically.                                                                | `"auto"`    |
+| `rows`         | `number`                                                     | The number of visible text rows. Defaults to 2 when `resize` is `auto`, with a maximum of 6 rows. Can be set to 1 when `resize` is `manual` (no maximum height on desktop). On mobile, manual mode is fixed at 6 rows and cannot be resized. When `resize` is `none`, follows the `rows` value set by the user, defaulting to 2 rows. | `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

@@ -1,7 +1,7 @@
 import { type ComponentDefaultProps } from '@justeattakeaway/pie-webc-core';
 
 export const sizes = ['small', 'medium', 'large'] as const;
-export const resizeModes = ['auto', 'manual'] as const;
+export const resizeModes = ['auto', 'manual', 'none'] as const;
 export const statusTypes = ['default', 'success', 'error'] as const;
 
 export interface TextareaProps {
@@ -16,9 +16,10 @@ export interface TextareaProps {
     size?: typeof sizes[number];
 
     /**
-     * The resize mode of the textarea. Can be `auto` or `manual`. Defaults to `auto`.
+     * The resize mode of the textarea. Can be `auto`, `manual` or `none`. Defaults to `auto`.
      * When set to `auto`, the textarea will resize vertically as needed.
      * When set to `manual`, the textarea will not resize automatically but can be resized by the user.
+     * When set to `none`, the textarea will not resize automatically and cannot be resized by the user.
      */
     resize?: typeof resizeModes[number];
 
@@ -84,6 +85,7 @@ export interface TextareaProps {
     /**
      * The number of visible text rows. Defaults to 2 when resize is auto, with a maximum of 6 rows.
      * Can be set to 1 when resize is manual (no maximum height on desktop). On mobile, manual mode is fixed at 6 rows and cannot be resized.
+     * When resize is none, follows the rows value set by the user, defaulting to 2 rows.
      */
     rows?: number;
 }

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

@@ -116,7 +116,7 @@ export class PieTextarea extends FormControlMixin(RtlMixin(DelegatesFocusMixin(P
             this.handleResize();
         }
 
-        if (this.resize === 'manual' && ((changedProperties.has('rows') || changedProperties.has('size') || changedProperties.has('resize')))) {
+        if ((this.resize === 'manual' || this.resize === 'none') && ((changedProperties.has('rows') || changedProperties.has('size') || changedProperties.has('resize')))) {
             this._textarea.style.height = '';
         }
     }

packages/components/pie-textarea/src/textarea.scss

@@ -120,6 +120,10 @@
     --textarea-min-height: var(--textarea-height);
   }
 
+  &.c-textarea--resize-none {
+    --textarea-height: auto;
+  }
+
   &.has-error {
     --textarea-border-color: var(--dt-color-support-error);
   }

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

@@ -592,6 +592,44 @@ test.describe('PieTextarea - Component tests', () => {
                 await expect(component).toHaveAttribute('rows', '1');
             });
         });
+
+        test.describe('resize', () => {
+            test.describe('when set to `none`', () => {
+                test('should apply the correct resize class to the wrapper', async ({ page }) => {
+                    // Arrange
+                    const props: Partial<TextareaProps> = {
+                        resize: 'none',
+                    };
+                    const textAreaPage = new BasePage(page, 'textarea');
+                    await textAreaPage.load({ ...props });
+
+                    // Act
+                    const wrapper = page.getByTestId('pie-textarea-wrapper');
+
+                    // Assert
+                    await expect(wrapper).toHaveClass(/c-textarea--resize-none/);
+                });
+
+                test('should not grow beyond the minimum rows when the content overflows', async ({ page }) => {
+                    // Arrange
+                    const props: Partial<TextareaProps> = {
+                        resize: 'none',
+                    };
+                    const textAreaPage = new BasePage(page, 'textarea');
+                    await textAreaPage.load({ ...props });
+
+                    const textarea = page.getByTestId(textArea.selectors.textArea.dataTestId);
+                    const initialHeight = (await textarea.boundingBox())?.height;
+
+                    // Act
+                    await textarea.fill('line one\nline two\nline three\nline four\nline five\nline six\nline seven');
+
+                    // Assert
+                    const updatedHeight = (await textarea.boundingBox())?.height;
+                    expect(updatedHeight).toEqual(initialHeight);
+                });
+            });
+        });
     });
 
     test.describe('Form integration', () => {