From 0f898c61f0777259d44e8d22b8e051e3870cb691 Mon Sep 17 00:00:00 2001
From: Q <hello@jonquach.com>
Date: Wed, 17 Mar 2021 08:02:01 -0400
Subject: [PATCH] Component System: Button - Add a default type of button
 (#29900)

---
 .../test/__snapshots__/index.js.snap          |  3 +++
 .../components/src/ui/button/component.js     |  2 ++
 .../button/test/__snapshots__/index.js.snap   | 24 ++++++++++---------
 3 files changed, 18 insertions(+), 11 deletions(-)

diff --git a/packages/components/src/ui/button-group/test/__snapshots__/index.js.snap b/packages/components/src/ui/button-group/test/__snapshots__/index.js.snap
index ea2343cd92c680..4d776a309dfaa1 100644
--- a/packages/components/src/ui/button-group/test/__snapshots__/index.js.snap
+++ b/packages/components/src/ui/button-group/test/__snapshots__/index.js.snap
@@ -409,6 +409,7 @@ exports[`props should render correctly 1`] = `
     id="ButtonGroup-1"
     role="radio"
     tabindex="0"
+    type="button"
   >
     <span
       class="components-flex-item wp-components-flex-item ic-1p3tlc8 ic-192yz5d emotion-0"
@@ -437,6 +438,7 @@ exports[`props should render correctly 1`] = `
     id="ButtonGroup-2"
     role="radio"
     tabindex="-1"
+    type="button"
   >
     <span
       class="components-flex-item wp-components-flex-item ic-1p3tlc8 ic-192yz5d emotion-0"
@@ -465,6 +467,7 @@ exports[`props should render correctly 1`] = `
     id="ButtonGroup-3"
     role="radio"
     tabindex="-1"
+    type="button"
   >
     <span
       class="components-flex-item wp-components-flex-item ic-1p3tlc8 ic-192yz5d emotion-0"
diff --git a/packages/components/src/ui/button/component.js b/packages/components/src/ui/button/component.js
index 4a6f17ae2c2126..70cf5a6190b869 100644
--- a/packages/components/src/ui/button/component.js
+++ b/packages/components/src/ui/button/component.js
@@ -47,6 +47,7 @@ function Button( props, forwardedRef ) {
 		isSubtle = false,
 		onClick = noop,
 		size = 'medium',
+		type = 'button',
 		variant = 'secondary',
 		describedBy,
 		...otherProps
@@ -114,6 +115,7 @@ function Button( props, forwardedRef ) {
 				onClick={ handleOnClick }
 				ref={ forwardedRef }
 				aria-describedby={ describedById }
+				type={ type }
 				{ ...otherProps }
 			>
 				{ children }
diff --git a/packages/components/src/ui/button/test/__snapshots__/index.js.snap b/packages/components/src/ui/button/test/__snapshots__/index.js.snap
index c4668adb1f4954..ef04b87133f3ec 100644
--- a/packages/components/src/ui/button/test/__snapshots__/index.js.snap
+++ b/packages/components/src/ui/button/test/__snapshots__/index.js.snap
@@ -34,12 +34,12 @@ Snapshot Diff:
     data-g2-component="Button"
     data-icon="false"
 -   href="#"
+    type="button"
   >
     <span
       class="components-flex-item wp-components-flex-item ic-1p3tlc8 ic-192yz5d css-1493c17"
       data-g2-c16t="true"
-      data-g2-component="ButtonContent"
-@@ -20,6 +19,6 @@
+@@ -21,6 +20,6 @@
       aria-hidden="true"
       class="components-elevation wp-components-elevation ic-i1zzlu ic-192yz5d css-8abvx7"
       data-g2-c16t="true"
@@ -340,6 +340,7 @@ exports[`props should render correctly 1`] = `
   data-g2-c16t="true"
   data-g2-component="Button"
   data-icon="false"
+  type="button"
 >
   <span
     class="components-flex-item wp-components-flex-item ic-1p3tlc8 ic-192yz5d emotion-0"
@@ -371,7 +372,7 @@ Snapshot Diff:
     data-destructive="false"
     data-focused="false"
     data-g2-c16t="true"
-@@ -12,11 +11,11 @@
+@@ -13,11 +12,11 @@
     <span
       class="components-flex-item wp-components-flex-item ic-1p3tlc8 ic-192yz5d css-1493c17"
       data-g2-c16t="true"
@@ -412,7 +413,7 @@ Snapshot Diff:
 - First value
 + Second value
 
-@@ -14,29 +14,10 @@
+@@ -15,29 +15,10 @@
       data-g2-component="ButtonContent"
     >
       Lorem
@@ -449,20 +450,21 @@ Snapshot Diff:
 - First value
 + Second value
 
-@@ -4,19 +4,12 @@
+@@ -4,20 +4,13 @@
     data-active="false"
     data-destructive="false"
     data-focused="false"
     data-g2-c16t="true"
     data-g2-component="Button"
 -   data-icon="true"
-- >
++   data-icon="false"
+    type="button"
+  >
 -   <span
 -     class="components-flex-item wp-components-flex-item ic-1p3tlc8 ic-192yz5d css-1dor7w6"
 -     data-g2-c16t="true"
 -     data-g2-component="ButtonIcon"
-+   data-icon="false"
-  >
+-   >
 -     <svg />
 -   </span>
     <span
@@ -582,10 +584,10 @@ Snapshot Diff:
 - First value
 + Second value
 
-@@ -7,19 +7,10 @@
-    data-g2-c16t="true"
+@@ -8,19 +8,10 @@
     data-g2-component="Button"
     data-icon="false"
+    type="button"
   >
     <span
 -     class="components-flex-item wp-components-flex-item ic-1p3tlc8 ic-192yz5d css-1dor7w6"
@@ -635,7 +637,7 @@ Snapshot Diff:
 - First value
 + Second value
 
-@@ -14,19 +14,10 @@
+@@ -15,19 +15,10 @@
       data-g2-component="ButtonContent"
     >
       Lorem