fix(textarea): support placeholder (#578)

packages/textarea/src/LionTextarea.js

@@ -24,6 +24,10 @@ export class LionTextarea extends LionField {
         attribute: 'readonly',
         reflect: true,
       },
+      placeholder: {
+        type: String,
+        reflect: true,
+      },
     };
   }
 
@@ -79,6 +83,13 @@ export class LionTextarea extends LionField {
       }
     }
 
+    if (changedProperties.has('placeholder')) {
+      const native = this._inputNode;
+      if (native) {
+        native.placeholder = this.placeholder;
+      }
+    }
+
     if (changedProperties.has('modelValue')) {
       this.resizeTextarea();
     }

packages/textarea/test/lion-textarea.test.js

@@ -140,6 +140,17 @@ describe('<lion-textarea>', () => {
       .and.to.be.below(el.scrollHeight);
   });
 
+  it('has an attribute that can be used to set the placeholder text of the textarea', async () => {
+    const el = await fixture(`<lion-textarea placeholder="text"></lion-textarea>`);
+    expect(el.getAttribute('placeholder')).to.equal('text');
+    expect(el._inputNode.getAttribute('placeholder')).to.equal('text');
+
+    el.placeholder = 'foo';
+    await el.updateComplete;
+    expect(el.getAttribute('placeholder')).to.equal('foo');
+    expect(el._inputNode.getAttribute('placeholder')).to.equal('foo');
+  });
+
   it('is accessible', async () => {
     const el = await fixture(`<lion-textarea label="Label"></lion-textarea>`);
     await expect(el).to.be.accessible();