fix(ld-input): add box-sizing border-box to textarea

emdgroup-liquid · Nov 16, 2021 · dc689e4 · dc689e4
1 parent 7103507
commit dc689e4
Show file tree

Hide file tree

Showing 4 changed files with 48 additions and 1 deletion.
diff --git a/screenshot/builds/master.json b/screenshot/builds/master.json
@@ -4684,6 +4684,32 @@
       "isLandscape": false,
       "isMobile": false
     },
+    {
+      "id": "ab9cae96",
+      "image": "6b11baeb77f4acbd9c2231aafa449edc.png",
+      "userAgent": "default",
+      "desc": "ld-input multiline css component",
+      "testPath": "./src/liquid/components/ld-input/test/ld-input.e2e.ts",
+      "width": 600,
+      "height": 600,
+      "deviceScaleFactor": 1,
+      "hasTouch": false,
+      "isLandscape": false,
+      "isMobile": false
+    },
+    {
+      "id": "fdd9fe79",
+      "image": "6b11baeb77f4acbd9c2231aafa449edc.png",
+      "userAgent": "default",
+      "desc": "ld-input multiline web component",
+      "testPath": "./src/liquid/components/ld-input/test/ld-input.e2e.ts",
+      "width": 600,
+      "height": 600,
+      "deviceScaleFactor": 1,
+      "hasTouch": false,
+      "isLandscape": false,
+      "isMobile": false
+    },
     {
       "id": "db9080ce",
       "image": "f063bbae55a3e0af086a49487af3d576.png",

diff --git a/screenshot/images/6b11baeb77f4acbd9c2231aafa449edc.png b/screenshot/images/6b11baeb77f4acbd9c2231aafa449edc.png
diff --git a/src/liquid/components/ld-input/ld-input.css b/src/liquid/components/ld-input/ld-input.css
@@ -82,7 +82,6 @@
 
   > input {
     align-self: stretch;
-    box-sizing: border-box;
     max-height: var(--ld-input-max-height-md);
 
     &[type='file'] {
@@ -152,6 +151,7 @@
     border-radius: var(--ld-br-m);
     outline: none;
     appearance: none;
+    box-sizing: border-box;
 
     &::placeholder {
       color: var(--ld-input-placeholder-col);

diff --git a/src/liquid/components/ld-input/test/ld-input.e2e.ts b/src/liquid/components/ld-input/test/ld-input.e2e.ts
@@ -224,6 +224,27 @@ describe('ld-input', () => {
     })
   }
 
+  describe('multiline', () => {
+    it('web component', async () => {
+      const page = await getPageWithContent(
+        `<ld-input placeholder="Placeholder" multiline rows="5" cols="33"></ld-input>`
+      )
+      const results = await page.compareScreenshot()
+      expect(results).toMatchScreenshot()
+    })
+
+    it('css component', async () => {
+      const page = await getPageWithContent(
+        `<div class="ld-input">
+          <textarea placeholder="Placeholder" rows="5" cols="33"></textarea>
+        </div>`,
+        { components: LdInput }
+      )
+      const results = await page.compareScreenshot()
+      expect(results).toMatchScreenshot()
+    })
+  })
+
   describe('aria-disabled', () => {
     it('prevents input value changes with an aria-disabled attribute', async () => {
       const page = await getPageWithContent(