fix(button): submit type works (#407)

src/components/button/bl-button.test.ts

@@ -139,4 +139,18 @@ describe('bl-button', () => {
       expect(ev.detail).to.be.equal('Click event fired!');
     });
   });
+  describe('Form Participation', () => {
+    it('submits wrapping form if type is submit', async () => {
+      const form = await fixture<HTMLFormElement>(html`<form>
+        <bl-button type="submit">button</bl-button>
+      </form>`);
+      form.addEventListener('submit', (e) => e.preventDefault());
+
+      const button = form.querySelector('bl-button')?.shadowRoot?.querySelector('button');
+
+      setTimeout(() => button?.click());
+      const ev = await oneEvent(form, 'submit');
+      expect(ev).to.exist;
+    });
+  });
 });

src/components/button/bl-button.ts

@@ -2,6 +2,7 @@ import { CSSResultGroup, html, LitElement, TemplateResult } from 'lit';
 import { customElement, property, state, query } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
+import { submit } from '@open-wc/form-helpers';
 import { event, EventDispatcher } from '../../utilities/event';
 import style from './bl-button.css';
 import '../icon/bl-icon';
@@ -103,12 +104,23 @@ export default class BlButton extends LitElement {
     return this.active;
   }
 
+  private form: HTMLFormElement | null;
+
+  connectedCallback() {
+    super.connectedCallback();
+    this.form = this.closest('form');
+  }
+
   private caretTemplate(): TemplateResult {
     return html` <bl-icon class="open" name="arrow_up"></bl-icon>
       <bl-icon class="close" name="arrow_down"></bl-icon>`;
   }
 
   private _handleClick() {
+    if (this.type === 'submit' && this.form) {
+      submit(this.form);
+    }
+
     this.onClick('Click event fired!');
   }
 

src/components/input/bl-input.stories.mdx

@@ -274,7 +274,7 @@ Input component uses [ElementInternals](https://developer.mozilla.org/en-US/docs
   <bl-input name="name" label="Your Name"></bl-input>
   <bl-input name="age" type="number" required min="18" label="Age"></bl-input>
 
-  <button type="submit">Submit</button>
+  <bl-button type="submit">Submit</bl-button>
 </form>
 
 <script>

src/components/textarea/bl-textarea.stories.mdx

@@ -235,7 +235,7 @@ When you use `bl-textarea` within a form with a `name` attribute, textarea's val
 <form novalidate>
   <bl-textarea name="name" required></bl-textarea>
 
-  <button type="submit">Submit</button>
+  <bl-button type="submit">Submit</bl-button>
 </form>
 
 <script>