fix(textfield): respect resize styling

adobe · Oct 5, 2021 · 04993c3 · 04993c3
1 parent 3d9d540
commit 04993c3
Show file tree

Hide file tree

Showing 4 changed files with 116 additions and 2 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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`