Add type=button to stories (#12930)

apps/browser/src/platform/popup/layout/popup-layout.stories.ts

@@ -45,7 +45,7 @@ class ExtensionContainerComponent {}
     <bit-section>
       <bit-item-group aria-label="Mock Vault Items">
         <bit-item *ngFor="let item of data; index as i">
-          <button bit-item-content>
+          <button type="button" bit-item-content>
             <i slot="start" class="bwi bwi-globe tw-text-3xl tw-text-muted" aria-hidden="true"></i>
             {{ i }} of {{ data.length - 1 }}
             <span slot="secondary">Bar</span>
@@ -277,8 +277,8 @@ class MockSettingsPageComponent {}
       </popup-header>
       <vault-placeholder></vault-placeholder>
       <popup-footer slot="footer">
-        <button bitButton buttonType="primary">Save</button>
-        <button bitButton buttonType="secondary">Cancel</button>
+        <button type="button" bitButton buttonType="primary">Save</button>
+        <button type="button" bitButton buttonType="secondary">Cancel</button>
         <button slot="end" type="button" buttonType="danger" bitIconButton="bwi-trash"></button>
       </popup-footer>
     </popup-page>

libs/angular/src/directives/copy-click.directive.spec.ts

@@ -9,10 +9,16 @@ import { CopyClickDirective } from "./copy-click.directive";
 
 @Component({
   template: `
-    <button appCopyClick="no toast shown" #noToast></button>
-    <button appCopyClick="info toast shown" showToast="info" #infoToast></button>
-    <button appCopyClick="success toast shown" showToast #successToast></button>
-    <button appCopyClick="toast with label" showToast valueLabel="Content" #toastWithLabel></button>
+    <button type="button" appCopyClick="no toast shown" #noToast></button>
+    <button type="button" appCopyClick="info toast shown" showToast="info" #infoToast></button>
+    <button type="button" appCopyClick="success toast shown" showToast #successToast></button>
+    <button
+      type="button"
+      appCopyClick="toast with label"
+      showToast
+      valueLabel="Content"
+      #toastWithLabel
+    ></button>
   `,
 })
 class TestCopyClickComponent {

libs/components/src/dialog/dialog.service.stories.ts

@@ -19,7 +19,7 @@ interface Animal {
 }
 
 @Component({
-  template: `<button bitButton (click)="openDialog()">Open Dialog</button>`,
+  template: `<button bitButton type="button" (click)="openDialog()">Open Dialog</button>`,
 })
 class StoryDialogComponent {
   constructor(public dialogService: DialogService) {}
@@ -42,8 +42,10 @@ class StoryDialogComponent {
         Animal: {{ animal }}
       </span>
       <ng-container bitDialogFooter>
-        <button bitButton buttonType="primary" (click)="dialogRef.close()">Save</button>
-        <button bitButton buttonType="secondary" bitDialogClose>Cancel</button>
+        <button type="button" bitButton buttonType="primary" (click)="dialogRef.close()">
+          Save
+        </button>
+        <button type="button" bitButton buttonType="secondary" bitDialogClose>Cancel</button>
       </ng-container>
     </bit-dialog>
   `,

libs/components/src/dialog/simple-dialog/simple-configurable-dialog/simple-configurable-dialog.service.stories.ts

@@ -16,6 +16,7 @@ import { DialogModule } from "../../dialog.module";
       <h2>{{ group.title }}</h2>
       <div class="tw-mb-4 tw-flex tw-flex-row tw-gap-2">
         <button
+          type="button"
           *ngFor="let dialog of group.dialogs"
           bitButton
           (click)="openSimpleConfigurableDialog(dialog)"

libs/components/src/dialog/simple-dialog/simple-dialog.service.stories.ts

@@ -17,7 +17,7 @@ interface Animal {
 }
 
 @Component({
-  template: `<button bitButton (click)="openDialog()">Open Simple Dialog</button>`,
+  template: `<button type="button" bitButton (click)="openDialog()">Open Simple Dialog</button>`,
 })
 class StoryDialogComponent {
   constructor(public dialogService: DialogService) {}
@@ -41,8 +41,10 @@ class StoryDialogComponent {
         Animal: {{ animal }}
       </span>
       <ng-container bitDialogFooter>
-        <button bitButton buttonType="primary" (click)="dialogRef.close()">Save</button>
-        <button bitButton buttonType="secondary" bitDialogClose>Cancel</button>
+        <button type="button" bitButton buttonType="primary" (click)="dialogRef.close()">
+          Save
+        </button>
+        <button type="button" bitButton buttonType="secondary" bitDialogClose>Cancel</button>
       </ng-container>
     </bit-simple-dialog>
   `,

libs/components/src/stories/kitchen-sink/components/kitchen-sink-main.component.ts

@@ -15,8 +15,8 @@ import { KitchenSinkToggleList } from "./kitchen-sink-toggle-list.component";
     <bit-dialog title="Dialog Title" dialogSize="large">
       <span bitDialogContent> Dialog body text goes here. </span>
       <ng-container bitDialogFooter>
-        <button bitButton buttonType="primary" (click)="dialogRef.close()">OK</button>
-        <button bitButton buttonType="secondary" bitDialogClose>Cancel</button>
+        <button type="button" bitButton buttonType="primary" (click)="dialogRef.close()">OK</button>
+        <button type="button" bitButton buttonType="secondary" bitDialogClose>Cancel</button>
       </ng-container>
     </bit-dialog>
   `,
@@ -42,7 +42,7 @@ class KitchenSinkDialog {
       </bit-breadcrumbs>
     </p>
 
-    <div class="tw-mb-6 tw-mt-6">
+    <div class="tw-my-6">
       <h1 bitTypography="h1">Bitwarden Kitchen Sink<bit-avatar text="Bit Warden"></bit-avatar></h1>
       <a bitLink linkType="primary" href="#">Learn more</a>
     </div>
@@ -68,8 +68,8 @@ class KitchenSinkDialog {
           <h2 bitTypography="h2" class="tw-mb-6">About</h2>
           <bit-kitchen-sink-table></bit-kitchen-sink-table>
 
-          <button bitButton (click)="openDialog()">Open Dialog</button>
-          <button bitButton (click)="openDrawer()">Open Drawer</button>
+          <button type="button" bitButton (click)="openDialog()">Open Dialog</button>
+          <button type="button" bitButton (click)="openDrawer()">Open Drawer</button>
         </bit-section>
         <bit-section>
           <h2 bitTypography="h2" class="tw-mb-6">Companies using Bitwarden</h2>

libs/components/src/stories/kitchen-sink/components/kitchen-sink-table.component.ts

@@ -20,7 +20,11 @@ import { KitchenSinkSharedModule } from "../kitchen-sink-shared.module";
           <td bitCell>Password Manager</td>
           <td bitCell>Everyone</td>
           <td bitCell>
-            <button bitIconButton="bwi-ellipsis-v" [bitMenuTriggerFor]="menu1"></button>
+            <button
+              type="button"
+              bitIconButton="bwi-ellipsis-v"
+              [bitMenuTriggerFor]="menu1"
+            ></button>
             <bit-menu #menu1>
               <a href="#" bitMenuItem>Anchor link</a>
               <a href="#" bitMenuItem>Another link</a>
@@ -33,7 +37,11 @@ import { KitchenSinkSharedModule } from "../kitchen-sink-shared.module";
           <td bitCell>Secrets Manager</td>
           <td bitCell>Developers</td>
           <td bitCell>
-            <button bitIconButton="bwi-ellipsis-v" [bitMenuTriggerFor]="menu2"></button>
+            <button
+              type="button"
+              bitIconButton="bwi-ellipsis-v"
+              [bitMenuTriggerFor]="menu2"
+            ></button>
             <bit-menu #menu2>
               <a href="#" bitMenuItem>Anchor link</a>
               <a href="#" bitMenuItem>Another link</a>

libs/components/src/stories/kitchen-sink/components/kitchen-sink-toggle-list.component.ts

@@ -7,7 +7,7 @@ import { KitchenSinkSharedModule } from "../kitchen-sink-shared.module";
   selector: "bit-kitchen-sink-toggle-list",
   imports: [KitchenSinkSharedModule],
   template: `
-    <div class="tw-mt-6 tw-mb-6">
+    <div class="tw-my-6">
       <bit-toggle-group [(selected)]="selectedToggle" aria-label="Company list filter">
         <bit-toggle value="all"> All <span bitBadge variant="info">3</span> </bit-toggle>
 

libs/components/src/table/sortable.component.ts

@@ -10,7 +10,12 @@ import { TableComponent } from "./table.component";
 @Component({
   selector: "th[bitSortable]",
   template: `
-    <button [ngClass]="classList" [attr.aria-pressed]="isActive" (click)="setActive()">
+    <button
+      type="button"
+      [ngClass]="classList"
+      [attr.aria-pressed]="isActive"
+      (click)="setActive()"
+    >
       <ng-content></ng-content>
       <i class="bwi tw-ml-2" [ngClass]="icon"></i>
     </button>