fix: button-form-functions

packages/core/src/components/button/button.spec.ts

@@ -131,4 +131,53 @@ describe('AtomButton', () => {
 
     expect(spy).toHaveBeenCalled()
   })
+
+  it('should submit button call parent form requestSubmit', async () => {
+    const page = await newSpecPage({
+      components: [AtomButton],
+      html: '<form><atom-button type="submit">Click</atom-button></form>',
+    })
+
+    await page.waitForChanges()
+    const formEl = page.body.querySelector('form') as HTMLFormElement
+    formEl.requestSubmit = jest.fn
+    const buttonEl = page.root?.shadowRoot?.querySelector('ion-button')
+    jest.spyOn(formEl, 'requestSubmit')
+
+    buttonEl?.click()
+
+    expect(formEl.requestSubmit).toHaveBeenCalled()
+  })
+
+  it('should submit button call parent form reset', async () => {
+    const page = await newSpecPage({
+      components: [AtomButton],
+      html: '<form><atom-button type="reset">Click</atom-button></form>',
+    })
+
+    await page.waitForChanges()
+    const formEl = page.body.querySelector('form') as HTMLFormElement
+    formEl.reset = jest.fn()
+    const buttonEl = page.root?.shadowRoot?.querySelector('ion-button')
+    jest.spyOn(formEl, 'reset')
+    buttonEl?.click()
+
+    expect(formEl.reset).toHaveBeenCalled()
+  })
+
+  it('should not call form reset if button is disabled', async () => {
+    const page = await newSpecPage({
+      components: [AtomButton],
+      html: '<form><atom-button type="reset" disabled>Click</atom-button></form>',
+    })
+
+    await page.waitForChanges()
+    const formEl = page.body.querySelector('form') as HTMLFormElement
+    formEl.reset = jest.fn()
+    const buttonEl = page.root?.shadowRoot?.querySelector('ion-button')
+    jest.spyOn(formEl, 'reset')
+    buttonEl?.click()
+
+    expect(formEl.reset).not.toHaveBeenCalled()
+  })
 })

packages/core/src/components/button/button.tsx

@@ -1,5 +1,13 @@
 import { Mode } from '@ionic/core'
-import { Component, Host, Prop, h } from '@stencil/core'
+import {
+  Component,
+  Element,
+  Event,
+  EventEmitter,
+  Host,
+  Prop,
+  h,
+} from '@stencil/core'
 
 @Component({
   tag: 'atom-button',
@@ -21,6 +29,29 @@ export class AtomButton {
   @Prop() target?: string
   @Prop() type: 'submit' | 'reset' | 'button' = 'button'
 
+  @Event() click: EventEmitter
+
+  @Element() element: HTMLElement
+
+  formFunctions = {
+    reset: 'reset',
+    submit: 'requestSubmit',
+  }
+
+  private handleClick = (event) => {
+    event.preventDefault()
+
+    if (this.loading || this.disabled) return
+    if (this.type === 'button') {
+      return this.click.emit(event)
+    } else {
+      const form = this.element.closest('form')
+      if (form) {
+        return form[this.formFunctions[this.type]]()
+      }
+    }
+  }
+
   render() {
     return (
       <Host
@@ -47,6 +78,7 @@ export class AtomButton {
           rel={this.rel}
           target={this.target}
           download={this.download}
+          onClick={this.handleClick.bind(this)}
         >
           {this.loading && (
             <span class="loading">