From 2af732d6e26801edb5890e9c59e3913cf505b172 Mon Sep 17 00:00:00 2001
From: Kai Hao <kevin830726@gmail.com>
Date: Mon, 15 Mar 2021 11:33:57 +0800
Subject: [PATCH] Add type=button by default to Button component

---
 .../__snapshots__/Alert.test.js.snap          |  6 +++
 .../BaseButton/__tests__/BaseButton.test.js   | 14 ++++++-
 .../__snapshots__/BaseButton.test.js.snap     |  1 +
 .../src/BaseButton/useBaseButton.js           |  2 +
 .../src/Button/__tests__/Button.test.js       | 14 ++++++-
 .../__snapshots__/Button.test.js.snap         | 16 ++++++++
 .../__snapshots__/ButtonGroup.test.js.snap    |  3 ++
 .../__tests__/__snapshots__/Card.test.js.snap |  2 +
 .../ClipboardButton.test.js.snap              |  1 +
 .../__snapshots__/CloseButton.test.js.snap    |  3 ++
 .../__snapshots__/ColorControl.test.js.snap   |  1 +
 .../__snapshots__/ControlGroup.test.js.snap   |  3 ++
 .../__snapshots__/SearchInput.test.js.snap    |  6 +++
 .../__snapshots__/Stepper.test.js.snap        |  6 +++
 .../__tests__/__snapshots__/Tag.test.js.snap  |  1 +
 .../__snapshots__/Tooltip.test.js.snap        |  8 ++++
 .../__snapshots__/Components.test.js.snap     | 37 +++++++++++++++++++
 17 files changed, 122 insertions(+), 2 deletions(-)

diff --git a/packages/components/src/Alert/__tests__/__snapshots__/Alert.test.js.snap b/packages/components/src/Alert/__tests__/__snapshots__/Alert.test.js.snap
index 402b81e32..c34114032 100644
--- a/packages/components/src/Alert/__tests__/__snapshots__/Alert.test.js.snap
+++ b/packages/components/src/Alert/__tests__/__snapshots__/Alert.test.js.snap
@@ -605,6 +605,7 @@ exports[`props should render as dismissable 1`] = `
           data-g2-component="CloseButton"
           data-icon="true"
           title="Dismiss"
+          type="button"
         >
           <span
             class="components-flex-item wp-components-flex-item ic-1p3tlc8 ic-192yz5d emotion-7"
@@ -1714,6 +1715,7 @@ exports[`props should render with status 1`] = `
             data-g2-component="CloseButton"
             data-icon="true"
             title="Dismiss"
+            type="button"
           >
             <span
               class="components-flex-item wp-components-flex-item ic-1p3tlc8 ic-192yz5d emotion-8"
@@ -1792,6 +1794,7 @@ exports[`props should render with status 1`] = `
             data-g2-component="CloseButton"
             data-icon="true"
             title="Dismiss"
+            type="button"
           >
             <span
               class="components-flex-item wp-components-flex-item ic-1p3tlc8 ic-192yz5d emotion-8"
@@ -1870,6 +1873,7 @@ exports[`props should render with status 1`] = `
             data-g2-component="CloseButton"
             data-icon="true"
             title="Dismiss"
+            type="button"
           >
             <span
               class="components-flex-item wp-components-flex-item ic-1p3tlc8 ic-192yz5d emotion-8"
@@ -1948,6 +1952,7 @@ exports[`props should render with status 1`] = `
             data-g2-component="CloseButton"
             data-icon="true"
             title="Dismiss"
+            type="button"
           >
             <span
               class="components-flex-item wp-components-flex-item ic-1p3tlc8 ic-192yz5d emotion-8"
@@ -2026,6 +2031,7 @@ exports[`props should render with status 1`] = `
             data-g2-component="CloseButton"
             data-icon="true"
             title="Dismiss"
+            type="button"
           >
             <span
               class="components-flex-item wp-components-flex-item ic-1p3tlc8 ic-192yz5d emotion-8"
diff --git a/packages/components/src/BaseButton/__tests__/BaseButton.test.js b/packages/components/src/BaseButton/__tests__/BaseButton.test.js
index c8503f142..11a259ab4 100644
--- a/packages/components/src/BaseButton/__tests__/BaseButton.test.js
+++ b/packages/components/src/BaseButton/__tests__/BaseButton.test.js
@@ -1,4 +1,4 @@
-import { render } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 import React from 'react';
 
 import { BaseButton } from '../index';
@@ -8,4 +8,16 @@ describe('props', () => {
 		const { container } = render(<BaseButton>I like warm hugs</BaseButton>);
 		expect(container.firstChild).toMatchSnapshot();
 	});
+
+	test('should render type', () => {
+		render(
+			<>
+				<BaseButton type="submit">Submit</BaseButton>
+				<BaseButton href="#">Link</BaseButton>
+			</>,
+		);
+
+		expect(screen.getByRole('button')).toHaveAttribute('type', 'submit');
+		expect(screen.getByRole('link')).not.toHaveAttribute('type');
+	});
 });
diff --git a/packages/components/src/BaseButton/__tests__/__snapshots__/BaseButton.test.js.snap b/packages/components/src/BaseButton/__tests__/__snapshots__/BaseButton.test.js.snap
index 3c93705ab..71788f9c5 100644
--- a/packages/components/src/BaseButton/__tests__/__snapshots__/BaseButton.test.js.snap
+++ b/packages/components/src/BaseButton/__tests__/__snapshots__/BaseButton.test.js.snap
@@ -229,6 +229,7 @@ exports[`props should render correctly 1`] = `
   data-g2-c16t="true"
   data-g2-component="BaseButton"
   data-icon="false"
+  type="button"
 >
   <span
     class="components-flex-item wp-components-flex-item ic-1p3tlc8 ic-192yz5d emotion-1"
diff --git a/packages/components/src/BaseButton/useBaseButton.js b/packages/components/src/BaseButton/useBaseButton.js
index 788162c0b..b63b88eab 100644
--- a/packages/components/src/BaseButton/useBaseButton.js
+++ b/packages/components/src/BaseButton/useBaseButton.js
@@ -49,6 +49,7 @@ export function useBaseButton(props) {
 	const as = href ? 'a' : 'button';
 	const { styles: controlGroupStyles } = useControlGroupContext();
 	const isIconOnly = !!icon && !children;
+	const type = as === 'button' ? 'button' : undefined;
 
 	const classes = cx(
 		flexClassName,
@@ -73,6 +74,7 @@ export function useBaseButton(props) {
 	return {
 		...flexProps,
 		as,
+		type,
 		href,
 		children,
 		disabled,
diff --git a/packages/components/src/Button/__tests__/Button.test.js b/packages/components/src/Button/__tests__/Button.test.js
index 002324ae1..cc5ccbe8f 100644
--- a/packages/components/src/Button/__tests__/Button.test.js
+++ b/packages/components/src/Button/__tests__/Button.test.js
@@ -1,4 +1,4 @@
-import { render } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 import React from 'react';
 
 import { Button } from '../index';
@@ -98,4 +98,16 @@ describe('props', () => {
 		);
 		expect(container.firstChild).toMatchSnapshot();
 	});
+
+	test('should render type', () => {
+		render(
+			<>
+				<Button type="submit">Submit</Button>
+				<Button href="#">Link</Button>
+			</>,
+		);
+
+		expect(screen.getByRole('button')).toHaveAttribute('type', 'submit');
+		expect(screen.getByRole('link')).not.toHaveAttribute('type');
+	});
 });
diff --git a/packages/components/src/Button/__tests__/__snapshots__/Button.test.js.snap b/packages/components/src/Button/__tests__/__snapshots__/Button.test.js.snap
index eb290111e..7e9c41e98 100644
--- a/packages/components/src/Button/__tests__/__snapshots__/Button.test.js.snap
+++ b/packages/components/src/Button/__tests__/__snapshots__/Button.test.js.snap
@@ -295,6 +295,7 @@ exports[`props should render (Flex) gap 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-1"
@@ -918,6 +919,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-1"
@@ -1230,6 +1232,7 @@ exports[`props should render disabled 1`] = `
   data-g2-component="Button"
   data-icon="false"
   disabled=""
+  type="button"
 >
   <span
     class="components-flex-item wp-components-flex-item ic-1p3tlc8 ic-192yz5d emotion-1"
@@ -1541,6 +1544,7 @@ exports[`props should render elevation 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-1"
@@ -1925,6 +1929,7 @@ exports[`props should render hasCaret 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-1"
@@ -2340,6 +2345,7 @@ exports[`props should render icon 1`] = `
   data-g2-c16t="true"
   data-g2-component="Button"
   data-icon="true"
+  type="button"
 >
   <span
     class="components-flex-item wp-components-flex-item ic-1p3tlc8 ic-192yz5d emotion-1"
@@ -2689,6 +2695,7 @@ exports[`props should render isControl 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-1"
@@ -3002,6 +3009,7 @@ exports[`props should render isDestructive 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-1"
@@ -3590,6 +3598,7 @@ exports[`props should render isLoading 1`] = `
   data-g2-component="Button"
   data-icon="false"
   disabled=""
+  type="button"
 >
   <div
     aria-hidden="true"
@@ -3967,6 +3976,7 @@ exports[`props should render isNarrow 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-1"
@@ -4279,6 +4289,7 @@ exports[`props should render isRounded 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-1"
@@ -4608,6 +4619,7 @@ exports[`props should render isSubtle 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-1"
@@ -4959,6 +4971,7 @@ exports[`props should render prefix 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-1"
@@ -5290,6 +5303,7 @@ exports[`props should render size 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-1"
@@ -5641,6 +5655,7 @@ exports[`props should render suffix 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-1"
@@ -5965,6 +5980,7 @@ exports[`props should render variant 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-1"
diff --git a/packages/components/src/ButtonGroup/__tests__/__snapshots__/ButtonGroup.test.js.snap b/packages/components/src/ButtonGroup/__tests__/__snapshots__/ButtonGroup.test.js.snap
index 2cc528eb4..b4d54de10 100644
--- a/packages/components/src/ButtonGroup/__tests__/__snapshots__/ButtonGroup.test.js.snap
+++ b/packages/components/src/ButtonGroup/__tests__/__snapshots__/ButtonGroup.test.js.snap
@@ -413,6 +413,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-2"
@@ -440,6 +441,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-2"
@@ -467,6 +469,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-2"
diff --git a/packages/components/src/Card/__tests__/__snapshots__/Card.test.js.snap b/packages/components/src/Card/__tests__/__snapshots__/Card.test.js.snap
index f1e3bea27..74fd790de 100644
--- a/packages/components/src/Card/__tests__/__snapshots__/Card.test.js.snap
+++ b/packages/components/src/Card/__tests__/__snapshots__/Card.test.js.snap
@@ -673,6 +673,7 @@ exports[`props should render CardInnerBody 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-6"
@@ -1422,6 +1423,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-6"
diff --git a/packages/components/src/ClipboardButton/__tests__/__snapshots__/ClipboardButton.test.js.snap b/packages/components/src/ClipboardButton/__tests__/__snapshots__/ClipboardButton.test.js.snap
index 9ba7d9f87..a69bb442b 100644
--- a/packages/components/src/ClipboardButton/__tests__/__snapshots__/ClipboardButton.test.js.snap
+++ b/packages/components/src/ClipboardButton/__tests__/__snapshots__/ClipboardButton.test.js.snap
@@ -295,6 +295,7 @@ exports[`props should render correctly 1`] = `
   data-g2-c16t="true"
   data-g2-component="ClipboardButton"
   data-icon="false"
+  type="button"
 >
   <span
     class="components-flex-item wp-components-flex-item ic-1p3tlc8 ic-192yz5d emotion-1"
diff --git a/packages/components/src/CloseButton/__tests__/__snapshots__/CloseButton.test.js.snap b/packages/components/src/CloseButton/__tests__/__snapshots__/CloseButton.test.js.snap
index b6663861f..b99d0d8a6 100644
--- a/packages/components/src/CloseButton/__tests__/__snapshots__/CloseButton.test.js.snap
+++ b/packages/components/src/CloseButton/__tests__/__snapshots__/CloseButton.test.js.snap
@@ -353,6 +353,7 @@ exports[`props should render correctly 1`] = `
   data-g2-c16t="true"
   data-g2-component="CloseButton"
   data-icon="true"
+  type="button"
 >
   <span
     class="components-flex-item wp-components-flex-item ic-1p3tlc8 ic-192yz5d emotion-1"
@@ -748,6 +749,7 @@ exports[`props should render size 1`] = `
   data-g2-c16t="true"
   data-g2-component="CloseButton"
   data-icon="true"
+  type="button"
 >
   <span
     class="components-flex-item wp-components-flex-item ic-1p3tlc8 ic-192yz5d emotion-1"
@@ -1146,6 +1148,7 @@ exports[`props should render variant 1`] = `
   data-g2-c16t="true"
   data-g2-component="CloseButton"
   data-icon="true"
+  type="button"
 >
   <span
     class="components-flex-item wp-components-flex-item ic-1p3tlc8 ic-192yz5d emotion-1"
diff --git a/packages/components/src/ColorControl/__tests__/__snapshots__/ColorControl.test.js.snap b/packages/components/src/ColorControl/__tests__/__snapshots__/ColorControl.test.js.snap
index 7b2a181a8..8aa9c384e 100644
--- a/packages/components/src/ColorControl/__tests__/__snapshots__/ColorControl.test.js.snap
+++ b/packages/components/src/ColorControl/__tests__/__snapshots__/ColorControl.test.js.snap
@@ -562,6 +562,7 @@ exports[`props should render correctly 1`] = `
   data-g2-c16t="true"
   data-g2-component="ColorControl"
   data-icon="false"
+  type="button"
 >
   <span
     class="components-flex-item wp-components-flex-item ic-1p3tlc8 ic-192yz5d emotion-1"
diff --git a/packages/components/src/ControlGroup/__tests__/__snapshots__/ControlGroup.test.js.snap b/packages/components/src/ControlGroup/__tests__/__snapshots__/ControlGroup.test.js.snap
index b726201cc..47308d179 100644
--- a/packages/components/src/ControlGroup/__tests__/__snapshots__/ControlGroup.test.js.snap
+++ b/packages/components/src/ControlGroup/__tests__/__snapshots__/ControlGroup.test.js.snap
@@ -566,6 +566,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-2"
@@ -589,6 +590,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-2"
@@ -1523,6 +1525,7 @@ exports[`props should render mixed control types 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-9"
diff --git a/packages/components/src/SearchInput/__tests__/__snapshots__/SearchInput.test.js.snap b/packages/components/src/SearchInput/__tests__/__snapshots__/SearchInput.test.js.snap
index 1dcead085..0976ada3e 100644
--- a/packages/components/src/SearchInput/__tests__/__snapshots__/SearchInput.test.js.snap
+++ b/packages/components/src/SearchInput/__tests__/__snapshots__/SearchInput.test.js.snap
@@ -733,6 +733,7 @@ exports[`props should render correctly 1`] = `
       data-g2-component="Button"
       data-icon="true"
       tabindex="-1"
+      type="button"
     >
       <span
         class="components-flex-item wp-components-flex-item ic-1p3tlc8 ic-192yz5d emotion-7"
@@ -1673,6 +1674,7 @@ exports[`props should render isLoading 1`] = `
       data-g2-component="Button"
       data-icon="true"
       tabindex="-1"
+      type="button"
     >
       <span
         class="components-flex-item wp-components-flex-item ic-1p3tlc8 ic-192yz5d emotion-8"
@@ -2443,6 +2445,7 @@ exports[`props should render placeholder 1`] = `
       data-g2-component="Button"
       data-icon="true"
       tabindex="-1"
+      type="button"
     >
       <span
         class="components-flex-item wp-components-flex-item ic-1p3tlc8 ic-192yz5d emotion-7"
@@ -3216,6 +3219,7 @@ exports[`props should render prefix 1`] = `
       data-g2-component="Button"
       data-icon="true"
       tabindex="-1"
+      type="button"
     >
       <span
         class="components-flex-item wp-components-flex-item ic-1p3tlc8 ic-192yz5d emotion-7"
@@ -3989,6 +3993,7 @@ exports[`props should render suffix 1`] = `
       data-g2-component="Button"
       data-icon="true"
       tabindex="-1"
+      type="button"
     >
       <span
         class="components-flex-item wp-components-flex-item ic-1p3tlc8 ic-192yz5d emotion-7"
@@ -4759,6 +4764,7 @@ exports[`props should render value 1`] = `
       data-g2-component="Button"
       data-icon="true"
       tabindex="-1"
+      type="button"
     >
       <span
         class="components-flex-item wp-components-flex-item ic-1p3tlc8 ic-192yz5d emotion-7"
diff --git a/packages/components/src/Stepper/__tests__/__snapshots__/Stepper.test.js.snap b/packages/components/src/Stepper/__tests__/__snapshots__/Stepper.test.js.snap
index c9ea78623..789e555af 100644
--- a/packages/components/src/Stepper/__tests__/__snapshots__/Stepper.test.js.snap
+++ b/packages/components/src/Stepper/__tests__/__snapshots__/Stepper.test.js.snap
@@ -684,6 +684,7 @@ exports[`props should render correctly 1`] = `
     data-g2-c16t="true"
     data-g2-component="StepperButton"
     data-icon="true"
+    type="button"
   >
     <span
       class="components-flex-item wp-components-flex-item ic-1p3tlc8 ic-192yz5d emotion-2"
@@ -726,6 +727,7 @@ exports[`props should render correctly 1`] = `
     data-g2-c16t="true"
     data-g2-component="StepperButton"
     data-icon="true"
+    type="button"
   >
     <span
       class="components-flex-item wp-components-flex-item ic-1p3tlc8 ic-192yz5d emotion-2"
@@ -1468,6 +1470,7 @@ exports[`props should render size 1`] = `
     data-g2-c16t="true"
     data-g2-component="StepperButton"
     data-icon="true"
+    type="button"
   >
     <span
       class="components-flex-item wp-components-flex-item ic-1p3tlc8 ic-192yz5d emotion-2"
@@ -1510,6 +1513,7 @@ exports[`props should render size 1`] = `
     data-g2-c16t="true"
     data-g2-component="StepperButton"
     data-icon="true"
+    type="button"
   >
     <span
       class="components-flex-item wp-components-flex-item ic-1p3tlc8 ic-192yz5d emotion-2"
@@ -2239,6 +2243,7 @@ exports[`props should render vertically 1`] = `
     data-g2-c16t="true"
     data-g2-component="StepperButton"
     data-icon="true"
+    type="button"
   >
     <span
       class="components-flex-item wp-components-flex-item ic-1p3tlc8 ic-192yz5d emotion-2"
@@ -2281,6 +2286,7 @@ exports[`props should render vertically 1`] = `
     data-g2-c16t="true"
     data-g2-component="StepperButton"
     data-icon="true"
+    type="button"
   >
     <span
       class="components-flex-item wp-components-flex-item ic-1p3tlc8 ic-192yz5d emotion-2"
diff --git a/packages/components/src/Tag/__tests__/__snapshots__/Tag.test.js.snap b/packages/components/src/Tag/__tests__/__snapshots__/Tag.test.js.snap
index 245f2edd9..17c5c535f 100644
--- a/packages/components/src/Tag/__tests__/__snapshots__/Tag.test.js.snap
+++ b/packages/components/src/Tag/__tests__/__snapshots__/Tag.test.js.snap
@@ -1020,6 +1020,7 @@ exports[`props should render removeButtonText 1`] = `
       data-g2-component="TagRemoveButton"
       data-icon="true"
       title="Remove"
+      type="button"
     >
       <span
         class="components-flex-item wp-components-flex-item ic-1p3tlc8 ic-192yz5d emotion-4"
diff --git a/packages/components/src/Tooltip/__tests__/__snapshots__/Tooltip.test.js.snap b/packages/components/src/Tooltip/__tests__/__snapshots__/Tooltip.test.js.snap
index 7ef9cb750..0832001d5 100644
--- a/packages/components/src/Tooltip/__tests__/__snapshots__/Tooltip.test.js.snap
+++ b/packages/components/src/Tooltip/__tests__/__snapshots__/Tooltip.test.js.snap
@@ -297,6 +297,7 @@ exports[`props should render animatedDuration 1`] = `
   data-g2-component="Button"
   data-icon="false"
   tabindex="0"
+  type="button"
 >
   <span
     class="components-flex-item wp-components-flex-item ic-1p3tlc8 ic-192yz5d emotion-1"
@@ -610,6 +611,7 @@ exports[`props should render correctly 1`] = `
   data-g2-component="Button"
   data-icon="false"
   tabindex="0"
+  type="button"
 >
   <span
     class="components-flex-item wp-components-flex-item ic-1p3tlc8 ic-192yz5d emotion-1"
@@ -923,6 +925,7 @@ exports[`props should render gutter 1`] = `
   data-g2-component="Button"
   data-icon="false"
   tabindex="0"
+  type="button"
 >
   <span
     class="components-flex-item wp-components-flex-item ic-1p3tlc8 ic-192yz5d emotion-1"
@@ -1236,6 +1239,7 @@ exports[`props should render placement 1`] = `
   data-g2-component="Button"
   data-icon="false"
   tabindex="0"
+  type="button"
 >
   <span
     class="components-flex-item wp-components-flex-item ic-1p3tlc8 ic-192yz5d emotion-1"
@@ -1549,6 +1553,7 @@ exports[`props should render visible 1`] = `
   data-g2-component="Button"
   data-icon="false"
   tabindex="0"
+  type="button"
 >
   <span
     class="components-flex-item wp-components-flex-item ic-1p3tlc8 ic-192yz5d emotion-1"
@@ -1862,6 +1867,7 @@ exports[`props should render without animation 1`] = `
   data-g2-component="Button"
   data-icon="false"
   tabindex="0"
+  type="button"
 >
   <span
     class="components-flex-item wp-components-flex-item ic-1p3tlc8 ic-192yz5d emotion-1"
@@ -2177,6 +2183,7 @@ exports[`props should render without content 1`] = `
   data-g2-component="Button"
   data-icon="false"
   tabindex="0"
+  type="button"
 >
   <span
     class="components-flex-item wp-components-flex-item ic-1p3tlc8 ic-192yz5d emotion-1"
@@ -2490,6 +2497,7 @@ exports[`props should render without modal 1`] = `
   data-g2-component="Button"
   data-icon="false"
   tabindex="0"
+  type="button"
 >
   <span
     class="components-flex-item wp-components-flex-item ic-1p3tlc8 ic-192yz5d emotion-1"
diff --git a/packages/components/src/__tests__/__snapshots__/Components.test.js.snap b/packages/components/src/__tests__/__snapshots__/Components.test.js.snap
index 94fc4825c..908f8a6ca 100644
--- a/packages/components/src/__tests__/__snapshots__/Components.test.js.snap
+++ b/packages/components/src/__tests__/__snapshots__/Components.test.js.snap
@@ -3101,6 +3101,7 @@ exports[`props should render BaseButton 1`] = `
   data-g2-component="BaseButton"
   data-icon="false"
   id="BaseButton"
+  type="button"
 >
   <span
     class="components-elevation wp-components-elevation ic-i1zzlu ic-192yz5d emotion-1"
@@ -3302,6 +3303,7 @@ exports[`props should render BaseButton with css prop 1`] = `
   data-g2-component="BaseButton"
   data-icon="false"
   id="BaseButton"
+  type="button"
 >
   <span
     class="components-elevation wp-components-elevation ic-i1zzlu ic-192yz5d emotion-1"
@@ -3505,6 +3507,7 @@ exports[`props should render BaseButton with css prop 2`] = `
   data-g2-component="BaseButton"
   data-icon="false"
   id="BaseButton"
+  type="button"
 >
   <span
     class="components-elevation wp-components-elevation ic-i1zzlu ic-192yz5d emotion-1"
@@ -4108,6 +4111,7 @@ exports[`props should render Button 1`] = `
   data-g2-component="Button"
   data-icon="false"
   id="Button"
+  type="button"
 >
   <span
     class="components-elevation wp-components-elevation ic-i1zzlu ic-192yz5d emotion-1"
@@ -4375,6 +4379,7 @@ exports[`props should render Button with css prop 1`] = `
   data-g2-component="Button"
   data-icon="false"
   id="Button"
+  type="button"
 >
   <span
     class="components-elevation wp-components-elevation ic-i1zzlu ic-192yz5d emotion-1"
@@ -4644,6 +4649,7 @@ exports[`props should render Button with css prop 2`] = `
   data-g2-component="Button"
   data-icon="false"
   id="Button"
+  type="button"
 >
   <span
     class="components-elevation wp-components-elevation ic-i1zzlu ic-192yz5d emotion-1"
@@ -6859,6 +6865,7 @@ exports[`props should render ClipboardButton 1`] = `
   data-g2-component="ClipboardButton"
   data-icon="false"
   id="ClipboardButton"
+  type="button"
 >
   <span
     class="components-elevation wp-components-elevation ic-i1zzlu ic-192yz5d emotion-1"
@@ -7126,6 +7133,7 @@ exports[`props should render ClipboardButton with css prop 1`] = `
   data-g2-component="ClipboardButton"
   data-icon="false"
   id="ClipboardButton"
+  type="button"
 >
   <span
     class="components-elevation wp-components-elevation ic-i1zzlu ic-192yz5d emotion-1"
@@ -7395,6 +7403,7 @@ exports[`props should render ClipboardButton with css prop 2`] = `
   data-g2-component="ClipboardButton"
   data-icon="false"
   id="ClipboardButton"
+  type="button"
 >
   <span
     class="components-elevation wp-components-elevation ic-i1zzlu ic-192yz5d emotion-1"
@@ -7758,6 +7767,7 @@ exports[`props should render CloseButton 1`] = `
   data-g2-component="CloseButton"
   data-icon="true"
   id="CloseButton"
+  type="button"
 >
   <span
     class="components-flex-item wp-components-flex-item ic-1p3tlc8 ic-192yz5d emotion-1"
@@ -8147,6 +8157,7 @@ exports[`props should render CloseButton with css prop 1`] = `
   data-g2-component="CloseButton"
   data-icon="true"
   id="CloseButton"
+  type="button"
 >
   <span
     class="components-flex-item wp-components-flex-item ic-1p3tlc8 ic-192yz5d emotion-1"
@@ -8538,6 +8549,7 @@ exports[`props should render CloseButton with css prop 2`] = `
   data-g2-component="CloseButton"
   data-icon="true"
   id="CloseButton"
+  type="button"
 >
   <span
     class="components-flex-item wp-components-flex-item ic-1p3tlc8 ic-192yz5d emotion-1"
@@ -9583,6 +9595,7 @@ exports[`props should render ColorControl 1`] = `
   data-g2-component="ColorControl"
   data-icon="false"
   id="ColorControl"
+  type="button"
 >
   <span
     class="components-flex-item wp-components-flex-item ic-1p3tlc8 ic-192yz5d emotion-1"
@@ -10157,6 +10170,7 @@ exports[`props should render ColorControl with css prop 1`] = `
   data-g2-component="ColorControl"
   data-icon="false"
   id="ColorControl"
+  type="button"
 >
   <span
     class="components-flex-item wp-components-flex-item ic-1p3tlc8 ic-192yz5d emotion-1"
@@ -10733,6 +10747,7 @@ exports[`props should render ColorControl with css prop 2`] = `
   data-g2-component="ColorControl"
   data-icon="false"
   id="ColorControl"
+  type="button"
 >
   <span
     class="components-flex-item wp-components-flex-item ic-1p3tlc8 ic-192yz5d emotion-1"
@@ -12988,6 +13003,7 @@ a:active>.emotion-0,
   data-g2-component="DropdownMenuItem"
   data-icon="false"
   id="DropdownMenuItem"
+  type="button"
 >
   <span
     class="components-elevation wp-components-elevation ic-i1zzlu ic-192yz5d emotion-1"
@@ -13313,6 +13329,7 @@ a:active>.emotion-0,
   data-g2-component="DropdownMenuItem"
   data-icon="false"
   id="DropdownMenuItem"
+  type="button"
 >
   <span
     class="components-elevation wp-components-elevation ic-i1zzlu ic-192yz5d emotion-1"
@@ -13640,6 +13657,7 @@ a:active>.emotion-0,
   data-g2-component="DropdownMenuItem"
   data-icon="false"
   id="DropdownMenuItem"
+  type="button"
 >
   <span
     class="components-elevation wp-components-elevation ic-i1zzlu ic-192yz5d emotion-1"
@@ -13907,6 +13925,7 @@ exports[`props should render DropdownTrigger 1`] = `
   data-g2-component="DropdownTrigger"
   data-icon="false"
   id="DropdownTrigger"
+  type="button"
 >
   <span
     class="components-elevation wp-components-elevation ic-i1zzlu ic-192yz5d emotion-1"
@@ -14174,6 +14193,7 @@ exports[`props should render DropdownTrigger with css prop 1`] = `
   data-g2-component="DropdownTrigger"
   data-icon="false"
   id="DropdownTrigger"
+  type="button"
 >
   <span
     class="components-elevation wp-components-elevation ic-i1zzlu ic-192yz5d emotion-1"
@@ -14443,6 +14463,7 @@ exports[`props should render DropdownTrigger with css prop 2`] = `
   data-g2-component="DropdownTrigger"
   data-icon="false"
   id="DropdownTrigger"
+  type="button"
 >
   <span
     class="components-elevation wp-components-elevation ic-i1zzlu ic-192yz5d emotion-1"
@@ -16517,6 +16538,7 @@ exports[`props should render FontSizeControl 1`] = `
           data-g2-component="Button"
           data-icon="false"
           disabled=""
+          type="button"
         >
           <span
             class="components-flex-item wp-components-flex-item ic-1p3tlc8 ic-192yz5d emotion-14"
@@ -17623,6 +17645,7 @@ exports[`props should render FontSizeControl with css prop 1`] = `
           data-g2-component="Button"
           data-icon="false"
           disabled=""
+          type="button"
         >
           <span
             class="components-flex-item wp-components-flex-item ic-1p3tlc8 ic-192yz5d emotion-14"
@@ -18731,6 +18754,7 @@ exports[`props should render FontSizeControl with css prop 2`] = `
           data-g2-component="Button"
           data-icon="false"
           disabled=""
+          type="button"
         >
           <span
             class="components-flex-item wp-components-flex-item ic-1p3tlc8 ic-192yz5d emotion-14"
@@ -21483,6 +21507,7 @@ a:active>.emotion-0,
   data-g2-component="MenuItem"
   data-icon="false"
   id="MenuItem"
+  type="button"
 >
   <span
     class="components-elevation wp-components-elevation ic-i1zzlu ic-192yz5d emotion-1"
@@ -21808,6 +21833,7 @@ a:active>.emotion-0,
   data-g2-component="MenuItem"
   data-icon="false"
   id="MenuItem"
+  type="button"
 >
   <span
     class="components-elevation wp-components-elevation ic-i1zzlu ic-192yz5d emotion-1"
@@ -22135,6 +22161,7 @@ a:active>.emotion-0,
   data-g2-component="MenuItem"
   data-icon="false"
   id="MenuItem"
+  type="button"
 >
   <span
     class="components-elevation wp-components-elevation ic-i1zzlu ic-192yz5d emotion-1"
@@ -23069,6 +23096,7 @@ exports[`props should render ModalHeader 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-3"
@@ -23478,6 +23506,7 @@ exports[`props should render ModalHeader with css prop 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-3"
@@ -23889,6 +23918,7 @@ exports[`props should render ModalHeader with css prop 2`] = `
       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-3"
@@ -27132,6 +27162,7 @@ exports[`props should render SearchInput 1`] = `
       data-g2-component="Button"
       data-icon="true"
       tabindex="-1"
+      type="button"
     >
       <span
         class="components-flex-item wp-components-flex-item ic-1p3tlc8 ic-192yz5d emotion-7"
@@ -31511,6 +31542,7 @@ exports[`props should render Stepper 1`] = `
     data-g2-c16t="true"
     data-g2-component="StepperButton"
     data-icon="true"
+    type="button"
   >
     <span
       class="components-flex-item wp-components-flex-item ic-1p3tlc8 ic-192yz5d emotion-2"
@@ -31553,6 +31585,7 @@ exports[`props should render Stepper 1`] = `
     data-g2-c16t="true"
     data-g2-component="StepperButton"
     data-icon="true"
+    type="button"
   >
     <span
       class="components-flex-item wp-components-flex-item ic-1p3tlc8 ic-192yz5d emotion-2"
@@ -32274,6 +32307,7 @@ exports[`props should render Stepper with css prop 1`] = `
     data-g2-c16t="true"
     data-g2-component="StepperButton"
     data-icon="true"
+    type="button"
   >
     <span
       class="components-flex-item wp-components-flex-item ic-1p3tlc8 ic-192yz5d emotion-2"
@@ -32316,6 +32350,7 @@ exports[`props should render Stepper with css prop 1`] = `
     data-g2-c16t="true"
     data-g2-component="StepperButton"
     data-icon="true"
+    type="button"
   >
     <span
       class="components-flex-item wp-components-flex-item ic-1p3tlc8 ic-192yz5d emotion-2"
@@ -33039,6 +33074,7 @@ exports[`props should render Stepper with css prop 2`] = `
     data-g2-c16t="true"
     data-g2-component="StepperButton"
     data-icon="true"
+    type="button"
   >
     <span
       class="components-flex-item wp-components-flex-item ic-1p3tlc8 ic-192yz5d emotion-2"
@@ -33081,6 +33117,7 @@ exports[`props should render Stepper with css prop 2`] = `
     data-g2-c16t="true"
     data-g2-component="StepperButton"
     data-icon="true"
+    type="button"
   >
     <span
       class="components-flex-item wp-components-flex-item ic-1p3tlc8 ic-192yz5d emotion-2"