fix: added placeholder attribute for input

Author: SwyserDev

packages/input/src/LionInput.js

@@ -30,6 +30,10 @@ export class LionInput extends LionField {
         type: Number,
         reflect: true,
       },
+      placeholder: {
+        type: String,
+        reflect: true,
+      },
     };
   }
 
@@ -80,6 +84,9 @@ export class LionInput extends LionField {
     if (changedProps.has('step')) {
       this.inputElement.step = this.step;
     }
+    if (changedProps.has('placeholder')) {
+      this.inputElement.placeholder = this.placeholder;
+    }
   }
 
   __delegateReadOnly() {

packages/input/test/lion-input.test.js

@@ -38,4 +38,15 @@ describe('<lion-input>', () => {
     expect(el.getAttribute('type')).to.equal('foo');
     expect(el.inputElement.getAttribute('type')).to.equal('foo');
   });
+
+  it('has an attribute that can be used to set the placeholder text of the input', async () => {
+    const el = await fixture(`<lion-input placeholder="text"></lion-input>`);
+    expect(el.getAttribute('placeholder')).to.equal('text');
+    expect(el.inputElement.getAttribute('placeholder')).to.equal('text');
+
+    el.placeholder = 'foo';
+    await el.updateComplete;
+    expect(el.getAttribute('placeholder')).to.equal('foo');
+    expect(el.inputElement.getAttribute('placeholder')).to.equal('foo');
+  });
 });