From f357ffd82db65c92716e4ef89b371e726980953c Mon Sep 17 00:00:00 2001
From: Daniel Rios Pavia <daniel.riospavia@shopify.com>
Date: Thu, 8 Sep 2022 07:43:22 +0200
Subject: [PATCH] buttons now have type button by default

---
 .../BaseButton/BaseButton.client.tsx          |  9 +++++-
 .../BaseButton/tests/BaseButton.vitest.tsx    | 29 +++++++++++++++++++
 2 files changed, 37 insertions(+), 1 deletion(-)

diff --git a/packages/hydrogen/src/components/BaseButton/BaseButton.client.tsx b/packages/hydrogen/src/components/BaseButton/BaseButton.client.tsx
index 4570136ce8..1475b167da 100644
--- a/packages/hydrogen/src/components/BaseButton/BaseButton.client.tsx
+++ b/packages/hydrogen/src/components/BaseButton/BaseButton.client.tsx
@@ -35,6 +35,7 @@ export function BaseButton<AsType extends React.ElementType = 'button'>(
     defaultOnClick,
     children,
     buttonRef,
+    type,
     ...passthroughProps
   } = props;
 
@@ -56,9 +57,15 @@ export function BaseButton<AsType extends React.ElementType = 'button'>(
   );
 
   const Component = as || 'button';
+  const componentType = type || (Component === 'button' ? 'button' : undefined);
 
   return (
-    <Component ref={buttonRef} onClick={handleOnClick} {...passthroughProps}>
+    <Component
+      ref={buttonRef}
+      onClick={handleOnClick}
+      type={componentType}
+      {...passthroughProps}
+    >
       {children}
     </Component>
   );
diff --git a/packages/hydrogen/src/components/BaseButton/tests/BaseButton.vitest.tsx b/packages/hydrogen/src/components/BaseButton/tests/BaseButton.vitest.tsx
index f60952bc42..f55fb98b40 100644
--- a/packages/hydrogen/src/components/BaseButton/tests/BaseButton.vitest.tsx
+++ b/packages/hydrogen/src/components/BaseButton/tests/BaseButton.vitest.tsx
@@ -99,5 +99,34 @@ describe('<BaseButton/>', () => {
         expect(mockDefaultOnClick).not.toBeCalled();
       });
     });
+
+    describe('base button type attribute', () => {
+      it('is a button by default given the component is a button', () => {
+        render(<BaseButton>Base Button</BaseButton>, {
+          wrapper: ShopifyTestProviders,
+        });
+
+        expect(screen.getByRole('button')).toHaveAttribute('type', 'button');
+      });
+
+      it('is not a button by default given the component is not a button', () => {
+        render(<BaseButton as="p">Base Button</BaseButton>, {
+          wrapper: ShopifyTestProviders,
+        });
+
+        expect(screen.getByText('Base Button')).not.toHaveAttribute(
+          'type',
+          'button'
+        );
+      });
+
+      it('respects user provided type', () => {
+        render(<BaseButton type="submit">Base Button</BaseButton>, {
+          wrapper: ShopifyTestProviders,
+        });
+
+        expect(screen.getByRole('button')).toHaveAttribute('type', 'submit');
+      });
+    });
   });
 });