From 04993c380d485b0e9b02fd6ad196e5caaf29e0a2 Mon Sep 17 00:00:00 2001
From: Hunter Loftis <hunter@hunterloftis.com>
Date: Mon, 4 Oct 2021 17:25:51 -0400
Subject: [PATCH] fix(textfield): respect resize styling

---
 .circleci/config.yml                          |  2 +-
 packages/textfield/src/textfield.css          |  8 ++
 .../textfield/stories/textarea.stories.ts     | 23 +++++
 packages/textfield/test/textfield.test.ts     | 85 ++++++++++++++++++-
 4 files changed, 116 insertions(+), 2 deletions(-)

diff --git a/.circleci/config.yml b/.circleci/config.yml
index af3f2b9ddc..f1b329d43d 100644
--- a/.circleci/config.yml
+++ b/.circleci/config.yml
@@ -8,7 +8,7 @@ executors:
 parameters:
     current_golden_images_hash:
         type: string
-        default: 606c73d79c7ee9d2bee8111338c1612f156cae31
+        default: 0abc68c15a87e8658ec16e004aa6eb8a5a638529
 commands:
     downstream:
         steps:
diff --git a/packages/textfield/src/textfield.css b/packages/textfield/src/textfield.css
index 26d8b7ccc9..20ead79731 100644
--- a/packages/textfield/src/textfield.css
+++ b/packages/textfield/src/textfield.css
@@ -12,6 +12,14 @@ governing permissions and limitations under the License.
 
 @import './spectrum-textfield.css';
 
+:host([multiline]) {
+    resize: both;
+}
+
+textarea {
+    resize: inherit;
+}
+
 :host([grows]) .input {
     position: absolute;
     top: 0;
diff --git a/packages/textfield/stories/textarea.stories.ts b/packages/textfield/stories/textarea.stories.ts
index b32b12f803..8474fc71d1 100644
--- a/packages/textfield/stories/textarea.stories.ts
+++ b/packages/textfield/stories/textarea.stories.ts
@@ -105,3 +105,26 @@ export const readonly = (): TemplateResult => html`
         placeholder="Enter your life story"
     ></sp-textfield>
 `;
+
+export const resizeControls = (): TemplateResult => html`
+    <sp-textfield
+        multiline
+        style="resize: none;"
+        label="No resize control"
+        placeholder="No resize control"
+    ></sp-textfield>
+
+    <sp-textfield
+        multiline
+        style="resize: vertical;"
+        label="Vertical resize control"
+        placeholder="Vertical resize control"
+    ></sp-textfield>
+
+    <sp-textfield
+        multiline
+        style="resize: horizontal;"
+        label="Horizontal resize control"
+        placeholder="Horizontal resize control"
+    ></sp-textfield>
+`;
diff --git a/packages/textfield/test/textfield.test.ts b/packages/textfield/test/textfield.test.ts
index e0e2ad9926..d1874400ac 100644
--- a/packages/textfield/test/textfield.test.ts
+++ b/packages/textfield/test/textfield.test.ts
@@ -12,7 +12,7 @@ governing permissions and limitations under the License.
 import '../sp-textfield.js';
 import { Textfield } from '../';
 import { litFixture, html, elementUpdated, expect } from '@open-wc/testing';
-import { sendKeys } from '@web/test-runner-commands';
+import { sendKeys, executeServerCommand } from '@web/test-runner-commands';
 
 describe('Textfield', () => {
     it('loads default textfield accessibly', async () => {
@@ -103,6 +103,89 @@ describe('Textfield', () => {
             : null;
         expect(input).to.not.be.null;
     });
+    it('resizes by default', async () => {
+        const el = await litFixture<Textfield>(
+            html`
+                <sp-textfield
+                    multiline
+                    label="No resize control"
+                    placeholder="No resize control"
+                ></sp-textfield>
+            `
+        );
+        const startBounds = el.getBoundingClientRect();
+
+        await executeServerCommand('send-mouse', {
+            steps: [
+                {
+                    type: 'move',
+                    position: [
+                        startBounds.right - 2,
+                        startBounds.bottom - 2,
+                    ],
+                },
+                {
+                    type: 'down',
+                },
+                {
+                    type: 'move',
+                    position: [
+                        startBounds.right + 50,
+                        startBounds.bottom + 50,
+                    ],
+                },
+                {
+                    type: 'up',
+                },
+            ],
+        });
+
+        const endBounds = el.getBoundingClientRect();
+        expect(endBounds.width).to.be.greaterThan(startBounds.width);
+        expect(endBounds.height).to.be.greaterThan(startBounds.height);
+    });
+    it('accepts resize styling', async () => {
+        const el = await litFixture<Textfield>(
+            html`
+                <sp-textfield
+                    multiline
+                    style="resize: none;"
+                    label="No resize control"
+                    placeholder="No resize control"
+                ></sp-textfield>
+            `
+        );
+        const startBounds = el.getBoundingClientRect();
+
+        await executeServerCommand('send-mouse', {
+            steps: [
+                {
+                    type: 'move',
+                    position: [
+                        startBounds.right - 2,
+                        startBounds.bottom - 2,
+                    ],
+                },
+                {
+                    type: 'down',
+                },
+                {
+                    type: 'move',
+                    position: [
+                        startBounds.right + 50,
+                        startBounds.bottom + 50,
+                    ],
+                },
+                {
+                    type: 'up',
+                },
+            ],
+        });
+
+        const endBounds = el.getBoundingClientRect();
+        expect(endBounds.width).equals(startBounds.width);
+        expect(endBounds.height).equals(startBounds.height);
+    });
     it('grows', async () => {
         const el = await litFixture<Textfield>(
             html`