feat(ld-input): add parts

emdgroup-liquid · Oct 12, 2021 · 180bd39 · 180bd39
1 parent 6d16834
commit 180bd39
Show file tree

Hide file tree

Showing 3 changed files with 57 additions and 20 deletions.
diff --git a/src/liquid/components/ld-input/ld-input.tsx b/src/liquid/components/ld-input/ld-input.tsx
@@ -134,16 +134,17 @@ export class LdInput implements InnerFocusable {
       return (
         <Host class={cl} onClick={this.handleClick}>
           <textarea
-            ref={(el) => (this.input = el)}
-            onInput={this.handleInput.bind(this)}
-            placeholder={this.placeholder}
             onBlur={this.handleBlur}
             onFocus={this.handleFocus}
+            onInput={this.handleInput.bind(this)}
+            part="input"
+            placeholder={this.placeholder}
+            ref={(el) => (this.input = el)}
             {...cloneAttributes(this.el)}
             value={this.value}
           />
           {this.type === 'file' && (
-            <span class="ld-input__placeholder">
+            <span class="ld-input__placeholder" part="placeholder">
               {this.input?.value || this.placeholder}
             </span>
           )}
@@ -155,17 +156,18 @@ export class LdInput implements InnerFocusable {
       <Host class={cl} onClick={this.handleClick}>
         <slot name="start"></slot>
         <input
-          ref={(el) => (this.input = el)}
+          onBlur={this.handleBlur}
+          onFocus={this.handleFocus}
           onInput={this.handleInput.bind(this)}
+          part="input"
           placeholder={this.placeholder}
+          ref={(el) => (this.input = el)}
           type={this.type}
-          onBlur={this.handleBlur}
-          onFocus={this.handleFocus}
           {...cloneAttributes(this.el)}
           value={this.value}
         />
         {this.type === 'file' && (
-          <span class="ld-input__placeholder">
+          <span class="ld-input__placeholder" part="placeholder">
             {this.input?.value || this.placeholder}
           </span>
         )}

diff --git a/src/liquid/components/ld-input/test/__snapshots__/ld-input.spec.ts.snap b/src/liquid/components/ld-input/test/__snapshots__/ld-input.spec.ts.snap
@@ -4,7 +4,7 @@ exports[`ld-input renders 1`] = `
 <ld-input class="ld-input">
   <mock:shadow-root>
     <slot name="start"></slot>
-    <input>
+    <input part="input">
     <slot name="end"></slot>
   </mock:shadow-root>
 </ld-input>
@@ -14,7 +14,26 @@ exports[`ld-input renders as dark input with prop tone set to "dark" 1`] = `
 <ld-input class="ld-input ld-input--dark" tone="dark">
   <mock:shadow-root>
     <slot name="start"></slot>
-    <input>
+    <input part="input">
+    <slot name="end"></slot>
+  </mock:shadow-root>
+</ld-input>
+`;
+
+exports[`ld-input renders type file (multiline) 1`] = `
+<ld-input class="ld-input" multiline="" type="file">
+  <mock:shadow-root><textarea part="input"></textarea>
+    <span class="ld-input__placeholder" part="placeholder"></span>
+  </mock:shadow-root>
+</ld-input>
+`;
+
+exports[`ld-input renders type file 1`] = `
+<ld-input class="ld-input" type="file">
+  <mock:shadow-root>
+    <slot name="start"></slot>
+    <input part="input" type="file">
+    <span class="ld-input__placeholder" part="placeholder"></span>
     <slot name="end"></slot>
   </mock:shadow-root>
 </ld-input>
@@ -24,7 +43,7 @@ exports[`ld-input renders with both slots 1`] = `
 <ld-input class="ld-input">
   <mock:shadow-root>
     <slot name="start"></slot>
-    <input>
+    <input part="input">
     <slot name="end"></slot>
   </mock:shadow-root>
   <span slot="start">
@@ -40,7 +59,7 @@ exports[`ld-input renders with slot end 1`] = `
 <ld-input class="ld-input">
   <mock:shadow-root>
     <slot name="start"></slot>
-    <input>
+    <input part="input">
     <slot name="end"></slot>
   </mock:shadow-root>
   <span slot="end">
@@ -53,7 +72,7 @@ exports[`ld-input renders with slot start 1`] = `
 <ld-input class="ld-input">
   <mock:shadow-root>
     <slot name="start"></slot>
-    <input>
+    <input part="input">
     <slot name="end"></slot>
   </mock:shadow-root>
   <span slot="start">
@@ -66,7 +85,7 @@ exports[`ld-input renders with value 1`] = `
 <ld-input class="ld-input" value="yada-yada">
   <mock:shadow-root>
     <slot name="start"></slot>
-    <input value="yada-yada">
+    <input part="input" value="yada-yada">
     <slot name="end"></slot>
   </mock:shadow-root>
 </ld-input>
@@ -76,7 +95,7 @@ exports[`ld-input updates value prop on value change 1`] = `
 <ld-input class="ld-input" value="yoda-yoda">
   <mock:shadow-root>
     <slot name="start"></slot>
-    <input value="yoda-yoda">
+    <input part="input" value="yoda-yoda">
     <slot name="end"></slot>
   </mock:shadow-root>
 </ld-input>

diff --git a/src/liquid/components/ld-input/test/ld-input.spec.ts b/src/liquid/components/ld-input/test/ld-input.spec.ts
@@ -5,31 +5,47 @@ describe('ld-input', () => {
   it('renders', async () => {
     const page = await newSpecPage({
       components: [LdInput],
-      html: `<ld-input></ld-input>`,
+      html: `<ld-input />`,
     })
     expect(page.root).toMatchSnapshot()
   })
 
   it('renders as dark input with prop tone set to "dark"', async () => {
     const page = await newSpecPage({
       components: [LdInput],
-      html: `<ld-input tone="dark"></ld-input>`,
+      html: `<ld-input tone="dark" />`,
     })
     expect(page.root).toMatchSnapshot()
   })
 
   it('renders with value', async () => {
     const page = await newSpecPage({
       components: [LdInput],
-      html: `<ld-input value="yada-yada"></ld-input>`,
+      html: `<ld-input value="yada-yada" />`,
+    })
+    expect(page.root).toMatchSnapshot()
+  })
+
+  it('renders type file', async () => {
+    const page = await newSpecPage({
+      components: [LdInput],
+      html: `<ld-input type="file" />`,
+    })
+    expect(page.root).toMatchSnapshot()
+  })
+
+  it('renders type file (multiline)', async () => {
+    const page = await newSpecPage({
+      components: [LdInput],
+      html: `<ld-input type="file" multiline />`,
     })
     expect(page.root).toMatchSnapshot()
   })
 
   it('updates value prop on value change', async () => {
     const page = await newSpecPage({
       components: [LdInput],
-      html: `<ld-input value="yada-yada"></ld-input>`,
+      html: `<ld-input value="yada-yada" />`,
     })
     const ldInput = page.root
     expect(ldInput.value).toBe('yada-yada')
@@ -47,7 +63,7 @@ describe('ld-input', () => {
   it('emits focus and blur event', async () => {
     const page = await newSpecPage({
       components: [LdInput],
-      html: `<ld-input></ld-input>`,
+      html: `<ld-input />`,
     })
     const ldInput = page.root
     const input = page.root.shadowRoot.querySelector('input')