made snapshots match the new output (#13)

* add type="button" to all buttons to not do a "submit" when used inside a form container

* made snapshots match the new output

* Update src/styled.tsx

Use .attrs instead of an anonymous component

Co-Authored-By: Kotaro Sugawara <kotarella1110@gmail.com>

* Use default props instead

Co-authored-by: Kotaro Sugawara <kotarella1110@gmail.com>

Author: nksaraf

src/__snapshots__/devTool.test.tsx.snap

@@ -24,6 +24,7 @@ exports[`DevTool render correctly  1`] = `
         <button
           class="css-7zizgu"
           title="Close dev panel"
+          type="button"
         >
           ✕
         </button>
@@ -38,13 +39,15 @@ exports[`DevTool render correctly  1`] = `
             class="css-4vv12s"
             style="border-right: 1px solid #0e101c; text-transform: none; font-size: 11px; line-height: 1;"
             title="Update values and state the form"
+            type="button"
           >
             ♺ UPDATE
           </button>
           <button
             class="css-4vv12s"
             style="border-right: 1px solid #0e101c; text-transform: none; font-size: 11px; line-height: 1;"
             title="Toggle entire fields"
+            type="button"
           >
             [+] EXPAND
           </button>
@@ -79,13 +82,15 @@ exports[`DevTool render correctly  1`] = `
                         class="css-4vv12s"
                         style="border: 1px solid #516391; border-radius: 2px; padding: 3px 5px; display: inline-block; font-size: 10px; line-height: 12px; width: 20px; text-align: center; margin-right: 10px;"
                         title="Toggle field table"
+                        type="button"
                       >
                         +
                       </button>
                       <button
                         class="css-4vv12s"
                         style="border: 1px solid #516391; border-radius: 2px; padding: 3px 5px; display: inline-block; font-size: 10px; line-height: 12px; text-align: center; margin-right: 10px;"
                         title="Scroll into view"
+                        type="button"
                       >
                         Native
                       </button>
@@ -124,13 +129,15 @@ exports[`DevTool render correctly  1`] = `
                         class="css-4vv12s"
                         style="border: 1px solid #516391; border-radius: 2px; padding: 3px 5px; display: inline-block; font-size: 10px; line-height: 12px; width: 20px; text-align: center; margin-right: 10px;"
                         title="Toggle field table"
+                        type="button"
                       >
                         +
                       </button>
                       <button
                         class="css-4vv12s"
                         style="border: 1px solid #516391; border-radius: 2px; padding: 3px 5px; display: inline-block; font-size: 10px; line-height: 12px; text-align: center; margin-right: 10px;"
                         title="Scroll into view"
+                        type="button"
                       >
                         Native
                       </button>
@@ -157,6 +164,7 @@ exports[`DevTool render correctly  1`] = `
             class="css-4vv12s"
             style="margin: 0px; width: 100%; padding: 8px 10px; text-transform: none; font-size: 12px; line-height: 14px;"
             title="Toggle form state panel"
+            type="button"
           >
             <span
               style="transition: 0.5s all; color: rgb(236, 89, 144);"

src/__snapshots__/header.test.tsx.snap

@@ -18,6 +18,7 @@ exports[`header should render correct color when form pass 1`] = `
     <button
       class="css-7zizgu"
       title="Close dev panel"
+      type="button"
     >
       ✕
     </button>
@@ -43,6 +44,7 @@ exports[`header should render correct when form failed 1`] = `
     <button
       class="css-7zizgu"
       title="Close dev panel"
+      type="button"
     >
       ✕
     </button>

src/__snapshots__/panelTable.test.tsx.snap

@@ -19,13 +19,15 @@ exports[`PanelTable should render correctly 1`] = `
               class="css-4vv12s"
               style="border: 1px solid #516391; border-radius: 2px; padding: 3px 5px; display: inline-block; font-size: 10px; line-height: 12px; width: 20px; text-align: center; margin-right: 10px;"
               title="Toggle field table"
+              type="button"
             >
               +
             </button>
             <button
               class="css-4vv12s"
               style="border: 1px solid #516391; border-radius: 2px; padding: 3px 5px; display: inline-block; font-size: 10px; line-height: 12px; text-align: center; margin-right: 10px; cursor: not-allowed; background: rgb(81, 99, 145);"
               title="Scroll into view"
+              type="button"
             >
               Custom
             </button>

src/styled.tsx

@@ -2,8 +2,8 @@ import styled from '@emotion/styled';
 import colors from './colors';
 
 export const paraGraphDefaultStyle = {
-  fontSize: 14,
-  lineHeight: '22px',
+    fontSize: 14,
+    lineHeight: '22px',
 };
 
 const Button = styled.button`
@@ -21,6 +21,8 @@ const Button = styled.button`
   }
 `;
 
+Button.defaultProps = { type: 'button' };
+
 const CircleButton = styled(Button)`
   font-size: 14px;
   font-weight: bold;