fix(Button): default to type=button

lumada-design · May 29, 2023 · 41b8494 · 41b8494
1 parent 5c25254
commit 41b8494
Show file tree

Hide file tree

Showing 16 changed files with 72 additions and 6 deletions.
diff --git a/packages/core/src/components/ActionsGeneric/__snapshots__/ActionsGeneric.test.tsx.snap b/packages/core/src/components/ActionsGeneric/__snapshots__/ActionsGeneric.test.tsx.snap
@@ -10,6 +10,7 @@ exports[`ActionsGeneric > should render correctly 1`] = `
       class="HvActionsGeneric-button e4fkrgz0 HvButton-root css-rf0utc-StyledButton-StyledButton e138pvrm0"
       disabled=""
       tabindex="-1"
+      type="button"
     >
       <div
         class="css-1nxr552-StyledContentDiv e138pvrm3"
@@ -45,6 +46,7 @@ exports[`ActionsGeneric > should render correctly 1`] = `
     </button>
     <button
       class="HvActionsGeneric-button e4fkrgz0 HvButton-root css-1thpith-StyledButton-StyledButton e138pvrm0"
+      type="button"
     >
       <div
         class="css-1nxr552-StyledContentDiv e138pvrm3"
@@ -80,6 +82,7 @@ exports[`ActionsGeneric > should render correctly 1`] = `
     </button>
     <button
       class="HvActionsGeneric-button e4fkrgz0 HvButton-root css-1thpith-StyledButton-StyledButton e138pvrm0"
+      type="button"
     >
       <div
         class="css-1nxr552-StyledContentDiv e138pvrm3"
@@ -115,6 +118,7 @@ exports[`ActionsGeneric > should render correctly 1`] = `
     </button>
     <button
       class="HvActionsGeneric-button e4fkrgz0 HvButton-root css-1thpith-StyledButton-StyledButton e138pvrm0"
+      type="button"
     >
       <div
         class="css-1nxr552-StyledContentDiv e138pvrm3"

diff --git a/packages/core/src/components/Banner/__snapshots__/Banner.test.tsx.snap b/packages/core/src/components/Banner/__snapshots__/Banner.test.tsx.snap
@@ -32,6 +32,7 @@ exports[`Banner > should render correctly 1`] = `
               aria-label="Close"
               class="HvBanner-ActionContainer-closeAction HvButton-root css-48f9xl-StyledButton e138pvrm0"
               tabindex="0"
+              type="button"
             >
               <div
                 class="css-1nxr552-StyledContentDiv e138pvrm3"

diff --git a/packages/core/src/components/BulkActions/__snapshots__/BulkActions.test.tsx.snap b/packages/core/src/components/BulkActions/__snapshots__/BulkActions.test.tsx.snap
@@ -76,6 +76,7 @@ exports[`BulkActions > With actions > should render correctly 1`] = `
         class="HvActionsGeneric-button e4fkrgz0 HvButton-root css-rf0utc-StyledButton-StyledButton e138pvrm0"
         disabled=""
         tabindex="-1"
+        type="button"
       >
         <div
           class="css-1nxr552-StyledContentDiv e138pvrm3"
@@ -114,6 +115,7 @@ exports[`BulkActions > With actions > should render correctly 1`] = `
         class="HvActionsGeneric-button e4fkrgz0 HvButton-root css-rf0utc-StyledButton-StyledButton e138pvrm0"
         disabled=""
         tabindex="-1"
+        type="button"
       >
         <div
           class="css-1nxr552-StyledContentDiv e138pvrm3"
@@ -165,6 +167,7 @@ exports[`BulkActions > With actions > should render correctly 1`] = `
             disabled=""
             id="hv-drop-down-menu-20-icon-button"
             tabindex="-1"
+            type="button"
           >
             <div
               class="css-1nxr552-StyledContentDiv e138pvrm3"

diff --git a/packages/core/src/components/Button/Button.test.tsx b/packages/core/src/components/Button/Button.test.tsx
@@ -76,26 +76,44 @@ describe("Button", () => {
       </div>
     );
     const primary = getByRole("button", { name: "Primary" });
-    expect(primary).toBeInTheDocument();
     expect(primary).toBeDisabled();
     const primarySubtle = getByRole("button", { name: "Primary Subtle" });
-    expect(primarySubtle).toBeInTheDocument();
     expect(primarySubtle).toBeDisabled();
     const primaryGhost = getByRole("button", { name: "Primary Ghost" });
-    expect(primaryGhost).toBeInTheDocument();
     expect(primaryGhost).toBeDisabled();
 
     const secondary = getByRole("button", { name: "Secondary" });
-    expect(secondary).toBeInTheDocument();
     expect(secondary).toBeDisabled();
     const secondarySubtle = getByRole("button", { name: "Secondary Subtle" });
-    expect(secondarySubtle).toBeInTheDocument();
     expect(secondarySubtle).toBeDisabled();
     const secondaryGhost = getByRole("button", { name: "Secondary Ghost" });
-    expect(secondaryGhost).toBeInTheDocument();
     expect(secondaryGhost).toBeDisabled();
   });
 
+  it(`is type="button" by default`, () => {
+    render(
+      <form>
+        <HvButton>Button</HvButton>
+      </form>
+    );
+    const button = screen.getByRole("button", { name: "Button" });
+    expect(button).toHaveAttribute("type", "button");
+  });
+
+  it(`submits form when type="submit"`, async () => {
+    const submitFn = vi.fn();
+    render(
+      <form onSubmit={submitFn}>
+        <HvButton type="submit">Button</HvButton>
+      </form>
+    );
+    const button = screen.getByRole("button", { name: "Button" });
+    expect(button).toHaveAttribute("type", "submit");
+
+    await userEvent.click(button);
+    expect(submitFn).toHaveBeenCalled();
+  });
+
   describe("interactions", () => {
     it("executes passed function on a click", () => {
       const buttonSpy = vi.fn();

diff --git a/packages/core/src/components/Button/Button.tsx b/packages/core/src/components/Button/Button.tsx
@@ -144,6 +144,7 @@ export const HvButton: <C extends React.ElementType = "button">(
       <StyledComponent
         id={id}
         ref={ref}
+        type="button"
         className={clsx(className, classes?.root, buttonClasses.root)}
         onClick={onClick}
         onFocus={onFocusHandler}

diff --git a/packages/core/src/components/Button/__snapshots__/Button.test.tsx.snap b/packages/core/src/components/Button/__snapshots__/Button.test.tsx.snap
@@ -4,6 +4,7 @@ exports[`Button > sample snapshot testing > should match the snapshot 1`] = `
 <DocumentFragment>
   <button
     class="HvButton-root css-or2r1m-StyledButton e138pvrm0"
+    type="button"
   >
     <div
       class="css-1nxr552-StyledContentDiv e138pvrm3"

diff --git a/packages/core/src/components/Controls/__snapshots__/Controls.test.tsx.snap b/packages/core/src/components/Controls/__snapshots__/Controls.test.tsx.snap
@@ -138,6 +138,7 @@ exports[`<HvControls> > sample snapshot testing > Controls 1`] = `
             class="button selected e17vrbb40 HvButton-root css-6jfwuk-StyledButton-StyledButton e138pvrm0"
             id="card"
             label="Select card view"
+            type="button"
           >
             <div
               class="css-1nxr552-StyledContentDiv e138pvrm3"
@@ -172,6 +173,7 @@ exports[`<HvControls> > sample snapshot testing > Controls 1`] = `
             class="button e17vrbb40 HvButton-root css-6jfwuk-StyledButton-StyledButton e138pvrm0"
             id="list"
             label="Select list view"
+            type="button"
           >
             <div
               class="css-1nxr552-StyledContentDiv e138pvrm3"
@@ -752,6 +754,7 @@ exports[`<HvControls> > sample snapshot testing > Controls Controlled 1`] = `
             class="button selected e17vrbb40 HvButton-root css-6jfwuk-StyledButton-StyledButton e138pvrm0"
             id="card"
             label="Select card view"
+            type="button"
           >
             <div
               class="css-1nxr552-StyledContentDiv e138pvrm3"
@@ -786,6 +789,7 @@ exports[`<HvControls> > sample snapshot testing > Controls Controlled 1`] = `
             class="button e17vrbb40 HvButton-root css-6jfwuk-StyledButton-StyledButton e138pvrm0"
             id="list"
             label="Select list view"
+            type="button"
           >
             <div
               class="css-1nxr552-StyledContentDiv e138pvrm3"
@@ -1191,6 +1195,7 @@ exports[`<HvControls> > sample snapshot testing > Custom Controls 1`] = `
               aria-pressed="true"
               class="button selected e17vrbb40 HvButton-root css-drqpdh-StyledButton-StyledButton e138pvrm0"
               id="all"
+              type="button"
             >
               <div
                 class="css-1nxr552-StyledContentDiv e138pvrm3"
@@ -1207,6 +1212,7 @@ exports[`<HvControls> > sample snapshot testing > Custom Controls 1`] = `
               aria-pressed="false"
               class="button e17vrbb40 HvButton-root css-drqpdh-StyledButton-StyledButton e138pvrm0"
               id="critical"
+              type="button"
             >
               <div
                 class="css-1nxr552-StyledContentDiv e138pvrm3"
@@ -1223,6 +1229,7 @@ exports[`<HvControls> > sample snapshot testing > Custom Controls 1`] = `
               aria-pressed="false"
               class="button e17vrbb40 HvButton-root css-drqpdh-StyledButton-StyledButton e138pvrm0"
               id="major"
+              type="button"
             >
               <div
                 class="css-1nxr552-StyledContentDiv e138pvrm3"
@@ -1239,6 +1246,7 @@ exports[`<HvControls> > sample snapshot testing > Custom Controls 1`] = `
               aria-pressed="false"
               class="button e17vrbb40 HvButton-root css-drqpdh-StyledButton-StyledButton e138pvrm0"
               id="average"
+              type="button"
             >
               <div
                 class="css-1nxr552-StyledContentDiv e138pvrm3"
@@ -1255,6 +1263,7 @@ exports[`<HvControls> > sample snapshot testing > Custom Controls 1`] = `
               aria-pressed="false"
               class="button e17vrbb40 HvButton-root css-drqpdh-StyledButton-StyledButton e138pvrm0"
               id="minor"
+              type="button"
             >
               <div
                 class="css-1nxr552-StyledContentDiv e138pvrm3"
@@ -2175,6 +2184,7 @@ exports[`<HvControls> > sample snapshot testing > Mixed Controls 1`] = `
               aria-pressed="true"
               class="button selected e17vrbb40 HvButton-root css-drqpdh-StyledButton-StyledButton e138pvrm0"
               id="all"
+              type="button"
             >
               <div
                 class="css-1nxr552-StyledContentDiv e138pvrm3"
@@ -2191,6 +2201,7 @@ exports[`<HvControls> > sample snapshot testing > Mixed Controls 1`] = `
               aria-pressed="false"
               class="button e17vrbb40 HvButton-root css-drqpdh-StyledButton-StyledButton e138pvrm0"
               id="critical"
+              type="button"
             >
               <div
                 class="css-1nxr552-StyledContentDiv e138pvrm3"
@@ -2207,6 +2218,7 @@ exports[`<HvControls> > sample snapshot testing > Mixed Controls 1`] = `
               aria-pressed="false"
               class="button e17vrbb40 HvButton-root css-drqpdh-StyledButton-StyledButton e138pvrm0"
               id="major"
+              type="button"
             >
               <div
                 class="css-1nxr552-StyledContentDiv e138pvrm3"
@@ -2223,6 +2235,7 @@ exports[`<HvControls> > sample snapshot testing > Mixed Controls 1`] = `
               aria-pressed="false"
               class="button e17vrbb40 HvButton-root css-drqpdh-StyledButton-StyledButton e138pvrm0"
               id="average"
+              type="button"
             >
               <div
                 class="css-1nxr552-StyledContentDiv e138pvrm3"
@@ -2239,6 +2252,7 @@ exports[`<HvControls> > sample snapshot testing > Mixed Controls 1`] = `
               aria-pressed="false"
               class="button e17vrbb40 HvButton-root css-drqpdh-StyledButton-StyledButton e138pvrm0"
               id="minor"
+              type="button"
             >
               <div
                 class="css-1nxr552-StyledContentDiv e138pvrm3"

diff --git a/packages/core/src/components/DropDownMenu/__snapshots__/DropDownMenu.test.tsx.snap b/packages/core/src/components/DropDownMenu/__snapshots__/DropDownMenu.test.tsx.snap
@@ -17,6 +17,7 @@ exports[`DropDownMenu > should render correctly 1`] = `
         aria-label="Dropdown menu"
         class="HvDropDownMenu-icon e13q7myz1 HvButton-root hv-uikit-css-15tynx0-StyledButton-StyledButton e138pvrm0"
         id="hv-drop-down-menu-4-icon-button"
+        type="button"
       >
         <div
           class="hv-uikit-css-1nxr552-StyledContentDiv e138pvrm3"

diff --git a/packages/core/src/components/FileUploader/File/__snapshots__/File.test.tsx.snap b/packages/core/src/components/FileUploader/File/__snapshots__/File.test.tsx.snap
@@ -40,6 +40,7 @@ exports[`File > should render correctly fail status 1`] = `
   <button
     aria-label="removeFileButtonLabel"
     class="HvFile-removeButton e6pb7kb0 HvButton-root css-6nk431-StyledButton-StyledIconButton e138pvrm0"
+    type="button"
   >
     <div
       class="css-1nxr552-StyledContentDiv e138pvrm3"
@@ -111,6 +112,7 @@ exports[`File > should render correctly success status 1`] = `
   <button
     aria-label="removeFileButtonLabel"
     class="HvFile-removeButton e6pb7kb0 HvButton-root css-6nk431-StyledButton-StyledIconButton e138pvrm0"
+    type="button"
   >
     <div
       class="css-1nxr552-StyledContentDiv e138pvrm3"

diff --git a/packages/core/src/components/FileUploader/FileList/__snapshots__/FileList.test.tsx.snap b/packages/core/src/components/FileUploader/FileList/__snapshots__/FileList.test.tsx.snap
@@ -46,6 +46,7 @@ exports[`FileList > should render correctly 1`] = `
         aria-label="removeFileButtonLabel"
         class="HvFile-removeButton e6pb7kb0 HvButton-root css-6nk431-StyledButton-StyledIconButton e138pvrm0"
         id="list-values-remove-button"
+        type="button"
       >
         <div
           class="css-1nxr552-StyledContentDiv e138pvrm3"
@@ -115,6 +116,7 @@ exports[`FileList > should render correctly 1`] = `
         aria-label="removeFileButtonLabel"
         class="HvFile-removeButton e6pb7kb0 HvButton-root css-6nk431-StyledButton-StyledIconButton e138pvrm0"
         id="list-values-remove-button"
+        type="button"
       >
         <div
           class="css-1nxr552-StyledContentDiv e138pvrm3"

diff --git a/packages/core/src/components/FileUploader/__snapshots__/FileUploader.test.tsx.snap b/packages/core/src/components/FileUploader/__snapshots__/FileUploader.test.tsx.snap
@@ -103,6 +103,7 @@ exports[`FileUploader > should render correctly 1`] = `
           aria-label="Remove File"
           class="HvFile-removeButton e6pb7kb0 HvButton-root css-6nk431-StyledButton-StyledIconButton e138pvrm0"
           id="hvfilelist4-values-remove-button"
+          type="button"
         >
           <div
             class="css-1nxr552-StyledContentDiv e138pvrm3"
@@ -157,6 +158,7 @@ exports[`FileUploader > should render correctly 1`] = `
           aria-label="Remove File"
           class="HvFile-removeButton e6pb7kb0 HvButton-root css-6nk431-StyledButton-StyledIconButton e138pvrm0"
           id="hvfilelist4-values-remove-button"
+          type="button"
         >
           <div
             class="css-1nxr552-StyledContentDiv e138pvrm3"

diff --git a/packages/core/src/components/Pagination/__snapshots__/Pagination.test.tsx.snap b/packages/core/src/components/Pagination/__snapshots__/Pagination.test.tsx.snap
@@ -72,6 +72,7 @@ exports[`Pagination > should render correctly 1`] = `
           class="HvPagination-iconContainer e1tn2n0k2 HvButton-root hv-uikit-css-purpg8-StyledButton-StyledButtonIconTooltip e138pvrm0"
           disabled=""
           tabindex="-1"
+          type="button"
         >
           <div
             class="hv-uikit-css-1nxr552-StyledContentDiv e138pvrm3"
@@ -111,6 +112,7 @@ exports[`Pagination > should render correctly 1`] = `
           class="HvPagination-iconContainer e1tn2n0k2 HvButton-root hv-uikit-css-purpg8-StyledButton-StyledButtonIconTooltip e138pvrm0"
           disabled=""
           tabindex="-1"
+          type="button"
         >
           <div
             class="hv-uikit-css-1nxr552-StyledContentDiv e138pvrm3"
@@ -219,6 +221,7 @@ exports[`Pagination > should render correctly 1`] = `
           class="HvPagination-iconContainer e1tn2n0k2 HvButton-root hv-uikit-css-purpg8-StyledButton-StyledButtonIconTooltip e138pvrm0"
           disabled=""
           tabindex="-1"
+          type="button"
         >
           <div
             class="hv-uikit-css-1nxr552-StyledContentDiv e138pvrm3"
@@ -258,6 +261,7 @@ exports[`Pagination > should render correctly 1`] = `
           class="HvPagination-iconContainer e1tn2n0k2 HvButton-root hv-uikit-css-purpg8-StyledButton-StyledButtonIconTooltip e138pvrm0"
           disabled=""
           tabindex="-1"
+          type="button"
         >
           <div
             class="hv-uikit-css-1nxr552-StyledContentDiv e138pvrm3"

diff --git a/packages/core/src/components/QueryBuilder/__snapshots__/QueryBuilder.test.tsx.snap b/packages/core/src/components/QueryBuilder/__snapshots__/QueryBuilder.test.tsx.snap
@@ -17,6 +17,7 @@ exports[`QueryBuilder > snapshot > matches snapshot 1`] = `
           <button
             aria-pressed="true"
             class="button selected e17vrbb40 HvButton-root css-1gx6mqk-StyledButton-StyledButton e138pvrm0"
+            type="button"
           >
             <div
               class="css-1nxr552-StyledContentDiv e138pvrm3"
@@ -31,6 +32,7 @@ exports[`QueryBuilder > snapshot > matches snapshot 1`] = `
           <button
             aria-pressed="false"
             class="button e17vrbb40 HvButton-root css-1gx6mqk-StyledButton-StyledButton e138pvrm0"
+            type="button"
           >
             <div
               class="css-1nxr552-StyledContentDiv e138pvrm3"
@@ -53,6 +55,7 @@ exports[`QueryBuilder > snapshot > matches snapshot 1`] = `
           <button
             aria-label="Reset query"
             class="HvQueryBuilder-removeButton HvButton-root css-17gbypf-StyledButton e138pvrm0"
+            type="button"
           >
             <div
               class="css-1nxr552-StyledContentDiv e138pvrm3"
@@ -157,6 +160,7 @@ exports[`QueryBuilder > snapshot > matches snapshot 1`] = `
         >
           <button
             class="HvButton-root css-1u5hgoy-StyledButton e138pvrm0"
+            type="button"
           >
             <div
               class="css-1nxr552-StyledContentDiv e138pvrm3"
@@ -196,6 +200,7 @@ exports[`QueryBuilder > snapshot > matches snapshot 1`] = `
         >
           <button
             class="HvButton-root css-1u5hgoy-StyledButton e138pvrm0"
+            type="button"
           >
             <div
               class="css-1nxr552-StyledContentDiv e138pvrm3"

diff --git a/packages/core/src/components/ToggleButton/__snapshots__/ToggleButton.test.tsx.snap b/packages/core/src/components/ToggleButton/__snapshots__/ToggleButton.test.tsx.snap
@@ -5,6 +5,7 @@ exports[`ToggleButton > should render correctly 1`] = `
   <button
     aria-pressed="false"
     class="HvButton-root css-1711hqm-StyledButton e138pvrm0"
+    type="button"
   >
     <div
       class="css-1nxr552-StyledContentDiv e138pvrm3"

diff --git a/...ges/core/src/components/VerticalNavigation/__snapshots__/VerticalNavigation.test.tsx.snap b/...ges/core/src/components/VerticalNavigation/__snapshots__/VerticalNavigation.test.tsx.snap
@@ -20,6 +20,7 @@ exports[`VerticalNavigation > should render correctly 1`] = `
           aria-expanded="true"
           aria-label="collapseButton"
           class="e1arrhkt0 HvButton-root css-135ktzz-StyledButton-StyledCollapseButton e138pvrm0"
+          type="button"
         >
           <div
             class="css-1nxr552-StyledContentDiv e138pvrm3"