feat(pie-textarea): DSW-3891 Add rows prop by KatarinaNeskovic · Pull Request #2962 · justeattakeaway/pie

KatarinaNeskovic · 2026-06-23T15:42:41Z

Adds a rows prop to pie-textarea to set the number of rows (defaults to 2 in auto mode). Prop was tested locally in Aperture across all 4 apps. Existing draft Aperture PR wasn't updated with the prop change to avoid pushing changes for each prop test.

Logic changes in updated():

Added rows to the auto-mode condition so changing rows also applies the correct height.
Added a manual-mode condition that resets the inline height (set by auto-resize), so switching auto → manual doesn't keep a stale height.

Author Checklist (complete before requesting a review, do not delete any)

I have performed a self-review of my code.
I have added thorough tests where applicable (unit / component / visual).
I have reviewed the PIE Storybook/PIE Docs PR preview.
I have reviewed visual test updates properly before approving.
If changes will affect consumers of the package, I have created a changeset entry.
If a changeset file has been created, I have tested these changes in PIE Aperture using the /test-aperture command.

Reviewer checklists (complete before approving)

Mark items as [-] N/A if not applicable.

Reviewer 1

I have reviewed the PIE Storybook/PIE Docs PR preview.
I have verified that all acceptance criteria for this ticket have been completed.
I have reviewed the Aperture changes (if added)
If there are visual test updates, I have reviewed them.

Reviewer 2

I have reviewed the PIE Storybook/PIE Docs PR preview.
I have verified that all acceptance criteria for this ticket have been completed.
I have reviewed the Aperture changes (if added)
If there are visual test updates, I have reviewed them.

changeset-bot · 2026-06-23T15:42:48Z

🦋 Changeset detected

Latest commit: 4f5f81d

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 4 packages

Name	Type
@justeattakeaway/pie-textarea	Minor
@justeattakeaway/pie-webc	Patch
@justeattakeaway/pie-docs	Patch
@justeattakeaway/pie-storybook	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

KatarinaNeskovic · 2026-06-23T15:55:02Z

/test-aperture

pie-design-system-app · 2026-06-23T15:55:22Z

Starting a new snapshot build. You can view the logs here.

…add conditional console warning

pie-design-system-app · 2026-06-23T16:05:07Z

@KatarinaNeskovic Your snapshots have been published to npm!

Test the snapshots by updating your package.json with the newly-published versions:

Note

If you have more than one of these packages installed, we suggest using the new snapshots for all of them to help avoid version conflicts.

yarn up @justeattakeaway/pie-textarea@0.0.0-snapshot-release-20260623160452 --mode=update-lockfile

yarn up @justeattakeaway/pie-webc@0.0.0-snapshot-release-20260623160452 --mode=update-lockfile

Then finally:

yarn install

pie-design-system-app · 2026-06-23T16:07:55Z

🚀 Aperture PR updated: justeattakeaway/pie-aperture#507

App deployments will appear under the Deployments section of this PR shortly!

_{Updated 26 Jun 2026, 15:31 UTC · PIE @ fdecde3 · workflow run}

KatarinaNeskovic · 2026-06-26T15:27:32Z

/test-aperture

pie-design-system-app · 2026-06-26T15:27:45Z

Starting a new snapshot build. You can view the logs here.

pie-design-system-app · 2026-06-26T15:29:15Z

@KatarinaNeskovic Your snapshots have been published to npm!

Test the snapshots by updating your package.json with the newly-published versions:

Note

If you have more than one of these packages installed, we suggest using the new snapshots for all of them to help avoid version conflicts.

yarn up @justeattakeaway/pie-textarea@0.0.0-snapshot-release-20260626152859 --mode=update-lockfile

yarn up @justeattakeaway/pie-webc@0.0.0-snapshot-release-20260626152859 --mode=update-lockfile

Then finally:

yarn install

Copilot

Pull request overview

Adds a rows prop to pie-textarea so consumers can control the initial visible height (via the native <textarea rows> attribute), and updates supporting styles/docs/stories/tests within the PIE design system monorepo.

Changes:

Added rows to TextareaProps and wired it through to the internal <textarea> rendering.
Updated resize/height handling (including manual-mode CSS variable changes) and Storybook controls/docs to expose rows.
Added Playwright component tests for the rows attribute and a changeset for a minor release.

Reviewed changes

Copilot reviewed 8 out of 8 changed files in this pull request and generated 5 comments.

Show a summary per file

File	Description
packages/components/pie-textarea/src/index.ts	Adds `rows` reactive prop, passes it to `<textarea>`, and adjusts `updated()` resize logic.
packages/components/pie-textarea/src/defs.ts	Extends public props/types to include `rows` and updates inline docs.
packages/components/pie-textarea/src/textarea.scss	Adjusts manual resize mode height variable (`--textarea-height`) to support rows-driven sizing.
packages/components/pie-textarea/test/component/pie-textarea.spec.ts	Adds component tests asserting the `rows` attribute is set.
packages/components/pie-textarea/README.md	Documents the new `rows` prop in the public README property table.
apps/pie-storybook/stories/pie-textarea.stories.ts	Exposes `rows` in Storybook controls and template wiring.
apps/pie-storybook/stories/testing/pie-textarea.test.stories.ts	Adds `rows` control to testing stories and wires it into the template.
.changeset/blue-moments-matter.md	Declares a minor release for `@justeattakeaway/pie-textarea` due to the new prop.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

+        if (this.resize === 'manual' && ((changedProperties.has('rows') || changedProperties.has('size')))) {
+            this._textarea.style.height = '';
+        }


+     * The number of visible rows in the textarea. Defaults to 2 when resize is auto, with a maximum of 6 rows.
+     * Can be set to 1 when resize is manual, which has no maximum height on pointer devices but is capped at 6 rows on touch devices.
+     */


 | `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`, which has no maximum height on pointer devices but is capped at 6 rows on touch devices. | `undefined` |


+        rows: {
+            description: 'The number of visible rows in the textarea. Defaults to 2 when `resize` is `auto`, with a maximum of 6 rows. Can be set to 1 when `resize` is `manual`, which has no maximum height on pointer devices but is capped at 6 rows on touch devices.',
+            control: 'number',
+            defaultValue: {
+                summary: '2',
+            },
+        },


+        if (this.resize === 'auto' && ((changedProperties.has('resize') || changedProperties.has('size')) || changedProperties.has('rows'))) {
            this.handleResize();
        }
+
+        if (this.resize === 'manual' && ((changedProperties.has('rows') || changedProperties.has('size')))) {


pie-design-system-app · 2026-06-26T16:50:11Z

	Fails
🚫	You have unchecked checklist items outside the "Not-applicable Checklist items" section. Please ensure all unchecked checkboxes are moved to the appropriate section.
🚫	You have unchecked checklist items in Reviewer 1's section. Please ensure all items are addressed before approval.
🚫	You have unchecked checklist items in Reviewer 2's section. Please ensure all items are addressed before approval.

Generated by 🚫 dangerJS against 4f5f81d

KatarinaNeskovic requested a review from a team as a code owner June 23, 2026 15:42

pie-design-system-app Bot added apps components pie-storybook pie-textarea labels Jun 23, 2026

KatarinaNeskovic changed the title ~~DSW-3891: Textarea Rows Prop~~ feat(pie-textarea): DSW-3891 Add rows prop Jun 23, 2026

pie-design-system-app Bot temporarily deployed to storybook-pr-2962 June 23, 2026 15:47 Inactive

pie-design-system-app Bot temporarily deployed to storybook-testing-pr-2962 June 23, 2026 15:47 Inactive

KatarinaNeskovic added 3 commits June 23, 2026 17:55

feat(pie-textarea): DSW-3891 add rows prop in index, defs and story

9efe260

feat(pie-textarea): DSW-3891 update test stories and browsers tests, …

bd5d0c2

…add conditional console warning

feat(pie-textarea): DSW-3891 update component README and added changeset

0da0c6e

pie-design-system-app Bot temporarily deployed to storybook-pr-2962 June 23, 2026 15:59 Inactive

pie-design-system-app Bot requested a deployment to storybook-testing-pr-2962 June 23, 2026 15:59 Pending

KatarinaNeskovic force-pushed the dsw-3891-textarea-rows-prop branch from afb58e6 to 0da0c6e Compare June 23, 2026 16:00

KatarinaNeskovic changed the title ~~feat(pie-textarea): DSW-3891 Add rows prop~~ feat(pie-textarea) : DSW-3891 Add rows prop Jun 23, 2026

pie-design-system-app Bot temporarily deployed to storybook-pr-2962 June 23, 2026 16:05 Inactive

pie-design-system-app Bot temporarily deployed to storybook-testing-pr-2962 June 23, 2026 16:05 Inactive

pie-design-system-app Bot had a problem deploying to aperture-nextjs-app-v14-pr-507 June 23, 2026 16:08 Failure

pie-design-system-app Bot deployed to aperture-nuxt-app-pr-507 June 23, 2026 16:08 View deployment

pie-design-system-app Bot had a problem deploying to aperture-nextjs-app-v15-pr-507 June 23, 2026 16:08 Failure

pie-design-system-app Bot deployed to aperture-vanilla-app-pr-507 June 23, 2026 16:08 View deployment

KatarinaNeskovic changed the title ~~feat(pie-textarea) : DSW-3891 Add rows prop~~ feat(pie-textarea): DSW-3891 Add rows prop Jun 23, 2026

feat(pie-textarea): DSW-3891 update rows prop behaviour and descriptions

fdecde3

pie-design-system-app Bot temporarily deployed to storybook-testing-pr-2962 June 26, 2026 08:50 Inactive

pie-design-system-app Bot temporarily deployed to storybook-pr-2962 June 26, 2026 08:51 Inactive

pie-design-system-app Bot deployed to aperture-nextjs-app-v15-pr-507 June 26, 2026 15:31 View deployment

pie-design-system-app Bot deployed to aperture-vanilla-app-pr-507 June 26, 2026 15:31 View deployment

pie-design-system-app Bot deployed to aperture-nuxt-app-pr-507 June 26, 2026 15:31 View deployment

pie-design-system-app Bot deployed to aperture-nextjs-app-v14-pr-507 June 26, 2026 15:31 View deployment

KatarinaNeskovic added 2 commits June 26, 2026 18:13

feat(pie-textarea): DSW-3891 update descriptions

30531f9

feat(pie-textarea): DSW-3891 update descriptions

4f5f81d

pie-design-system-app Bot deployed to storybook-testing-pr-2962 June 26, 2026 16:23 View deployment

pie-design-system-app Bot deployed to storybook-pr-2962 June 26, 2026 16:23 View deployment

KatarinaNeskovic requested a review from Copilot June 26, 2026 16:45

Copilot started reviewing on behalf of KatarinaNeskovic June 26, 2026 16:46 View session

Copilot AI reviewed Jun 26, 2026

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

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

feat(pie-textarea): DSW-3891 Add rows prop#2962
KatarinaNeskovic wants to merge 6 commits into
mainfrom
dsw-3891-textarea-rows-prop

KatarinaNeskovic commented Jun 23, 2026 •

edited

Loading

Uh oh!

changeset-bot Bot commented Jun 23, 2026 •

edited

Loading

Uh oh!

KatarinaNeskovic commented Jun 23, 2026

Uh oh!

pie-design-system-app Bot commented Jun 23, 2026

Uh oh!

pie-design-system-app Bot commented Jun 23, 2026

Uh oh!

pie-design-system-app Bot commented Jun 23, 2026 •

edited

Loading

Uh oh!

KatarinaNeskovic commented Jun 26, 2026

Uh oh!

pie-design-system-app Bot commented Jun 26, 2026

Uh oh!

pie-design-system-app Bot commented Jun 26, 2026

Uh oh!

Copilot AI left a comment

Uh oh!

pie-design-system-app Bot commented Jun 26, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Uh oh!

Conversation

KatarinaNeskovic commented Jun 23, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Author Checklist (complete before requesting a review, do not delete any)

Reviewer checklists (complete before approving)

Reviewer 1

Reviewer 2

Uh oh!

changeset-bot Bot commented Jun 23, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🦋 Changeset detected

Uh oh!

KatarinaNeskovic commented Jun 23, 2026

Uh oh!

pie-design-system-app Bot commented Jun 23, 2026

Uh oh!

pie-design-system-app Bot commented Jun 23, 2026

Uh oh!

pie-design-system-app Bot commented Jun 23, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

KatarinaNeskovic commented Jun 26, 2026

Uh oh!

pie-design-system-app Bot commented Jun 26, 2026

Uh oh!

pie-design-system-app Bot commented Jun 26, 2026

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

pie-design-system-app Bot commented Jun 26, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

KatarinaNeskovic commented Jun 23, 2026 •

edited

Loading

changeset-bot Bot commented Jun 23, 2026 •

edited

Loading

pie-design-system-app Bot commented Jun 23, 2026 •

edited

Loading