Prevent unintentional form submission in button components

docs/.docgen/components-metadata.json

@@ -1792,6 +1792,23 @@
           "func": false,
           "value": "false"
         }
+      },
+      {
+        "name": "type",
+        "description": "O tipo do botão.",
+        "tags": {},
+        "values": [
+          "'button'",
+          "'submit'",
+          "'reset'"
+        ],
+        "type": {
+          "name": "string"
+        },
+        "defaultValue": {
+          "func": false,
+          "value": "'button'"
+        }
       }
     ],
     "events": [

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@sysvale/cuida",
-	"version": "3.158.1",
+	"version": "3.158.2",
 	"description": "A design system built by Sysvale, using storybook and Vue components",
 	"repository": {
 		"type": "git",
@@ -86,4 +86,4 @@
 	"readme": "ERROR: No README data found!",
 	"homepage": "https://github.com/Sysvale/cuida#readme",
 	"_id": "@sysvale/cuida@3.0.0-alpha.21"
-}
+}

src/components/Button.vue

@@ -2,6 +2,7 @@
 <template>
 	<button
 		v-cdstip="tooltipDisabled"
+		:type="type"
 		class="button__container"
 		:class="computedStyle"
 		@click.stop="clickHandler"
@@ -122,6 +123,15 @@ const props = defineProps({
 		type: Boolean,
 		default: false,
 	},
+	/**
+	 * O tipo do botão.
+	 * @values 'button', 'submit', 'reset'
+	 */
+	type: {
+		type: String,
+		default: 'button',
+		validator: (value) => ['button', 'submit', 'reset'].includes(value),
+	},
 });
 
 const emits = defineEmits([

src/components/FlatButton.vue

@@ -1,6 +1,7 @@
 <template>
 	<button
 		ref="componentRef"
+		type="button"
 		class="flat-button__container"
 		:class="computedStyle"
 		@click="clickHandler"

src/components/IconButton.vue

@@ -5,6 +5,7 @@
 			:text="innerTooltipText"
 		>
 			<button
+				type="button"
 				class="CdsIcon-button__container"
 				:class="computedModifiers"
 				@click="clickHandler"

src/components/MobileNavigation.vue

@@ -81,6 +81,7 @@
 						</div>
 
 						<button
+							type="button"
 							class="mobile-navigation__sidebar-logout"
 							@click="emit('logout')"
 						>

src/components/SegmentedControl.vue

@@ -5,6 +5,7 @@
 		<button
 			v-for="(segment, index) in segments"
 			:key="index"
+			type="button"
 			class="segment-control__button"
 			:class="{
 				'segment-control__button--active': segment === activeSegment,

src/components/StepperInput.vue

@@ -57,6 +57,7 @@
 				<button
 					v-long-click="() => changeValue(step)"
 					:disabled="disabled"
+					type="button"
 					class="stepper-input__icon--plus"
 					tabindex="-1"
 					@focus="handleFocus"
@@ -73,6 +74,7 @@
 				<button
 					v-long-click="() => changeValue(-step)"
 					:disabled="disabled"
+					type="button"
 					class="stepper-input__icon--minus"
 					tabindex="-1"
 					@focus="handleFocus"

src/tests/SegmentedControl.spec.ts

@@ -0,0 +1,54 @@
+import { describe, test, expect } from 'vitest';
+import SegmentedControl from '../components/SegmentedControl.vue';
+import { mount } from '@vue/test-utils';
+
+describe('SegmentedControl', () => {
+	test('renders correctly', async () => {
+		const wrapper = mount(SegmentedControl, {
+			props: {
+				segments: ['Segment 1', 'Segment 2'],
+			},
+		});
+
+		expect(wrapper.html()).toMatchSnapshot();
+	});
+
+	test('should have type="button" in all segment buttons to prevent form submission', () => {
+		const wrapper = mount(SegmentedControl, {
+			props: {
+				segments: ['Segment 1', 'Segment 2'],
+			},
+		});
+
+		const buttons = wrapper.findAll('button');
+		buttons.forEach((button) => {
+			expect(button.attributes('type')).toBe('button');
+		});
+	});
+
+	test('should NOT trigger form submit when a segment is clicked', async () => {
+		const TestComponent = {
+			components: { SegmentedControl },
+			template: `
+				<form @submit.prevent="handleSubmit">
+					<SegmentedControl :segments="['S1', 'S2']" />
+				</form>
+			`,
+			data() {
+				return { submitted: false };
+			},
+			methods: {
+				handleSubmit() {
+					this.submitted = true;
+				},
+			},
+		};
+
+		const wrapper = mount(TestComponent);
+		const button = wrapper.find('button');
+
+		await button.trigger('click');
+
+		expect(wrapper.vm.submitted).toBe(false);
+	});
+});

src/tests/__snapshots__/Button.spec.ts.snap

@@ -1,7 +1,7 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`Button > renders correctly 1`] = `
-"<button data-v-3c9d0845="" class="button__container button--green--active button-size--md">
+"<button data-v-3c9d0845="" type="button" class="button__container button--green--active button-size--md">
   <!--v-if-->
   <!--v-if-->
   <!-- @slot Slot padrão utilizado para exibir texto do botão. -->Botão

src/tests/__snapshots__/CalloutCard.spec.ts.snap

@@ -8,7 +8,7 @@ exports[`CalloutCard > renders correctly 1`] = `
 							Evento que indica que o Botão foi clicado
 							@event action-button-click
 							@type {Event}
-						--><button data-v-3c9d0845="" class="button__container button--green--active button-size--md" id="content-button">
+						--><button data-v-3c9d0845="" type="button" class="button__container button--green--active button-size--md" id="content-button">
     <!--v-if-->
     <!--v-if-->
     <!-- @slot Slot padrão utilizado para exibir texto do botão. -->Ok

src/tests/__snapshots__/CarouselController.spec.ts.snap

@@ -1,7 +1,7 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`Button > renders correctly 1`] = `
-"<button data-v-3c9d0845="" class="button__container button--green--active button-size--md" total="12" perpage="4" propertyname="Métricas">
+"<button data-v-3c9d0845="" type="button" class="button__container button--green--active button-size--md" total="12" perpage="4" propertyname="Métricas">
   <!--v-if-->
   <!--v-if-->
   <!-- @slot Slot padrão utilizado para exibir texto do botão. -->Click here

src/tests/__snapshots__/EmptyState.spec.ts.snap

@@ -13,7 +13,7 @@ exports[`EmptyState > renders correctly 1`] = `
 			Evento emitido quando o botão do Empty State é clicado
 			@event action-button-click
 			@type {Event}
-		--><button data-v-3c9d0845="" data-v-f262d0f3="" class="button__container button--green--active button-size--md empty-state__button">
+		--><button data-v-3c9d0845="" data-v-f262d0f3="" type="button" class="button__container button--green--active button-size--md empty-state__button">
     <!--v-if-->
     <!--v-if-->
     <!-- @slot Slot padrão utilizado para exibir texto do botão. -->Finalizar

src/tests/__snapshots__/IconButton.spec.ts.snap

@@ -1,3 +1,3 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`IconButton > renders correctly 1`] = `"<span data-v-f6045c74="" id="CdsIcon-button"><span data-v-f6045c74=""><button data-v-f6045c74="" class="CdsIcon-button__container CdsIcon-button--lg CdsIcon-button__container--white"><cds-icon-stub data-v-f6045c74="" name="trash-outline" width="24" height="24" color="currentColor" dark="false" light="false" class="CdsIcon-button__icon"></cds-icon-stub></button></span></span>"`;
+exports[`IconButton > renders correctly 1`] = `"<span data-v-f6045c74="" id="CdsIcon-button"><span data-v-f6045c74=""><button data-v-f6045c74="" type="button" class="CdsIcon-button__container CdsIcon-button--lg CdsIcon-button__container--white"><cds-icon-stub data-v-f6045c74="" name="trash-outline" width="24" height="24" color="currentColor" dark="false" light="false" class="CdsIcon-button__icon"></cds-icon-stub></button></span></span>"`;

src/tests/__snapshots__/MobileNavigation.spec.ts.snap

@@ -31,7 +31,7 @@ exports[`MobileNavigation > renders correctly 1`] = `
               <p data-v-c1f5c1c8="">Joana Mendes</p>
               <p data-v-c1f5c1c8="">Administradora</p>
             </div>
-          </div><button data-v-c1f5c1c8="" class="mobile-navigation__sidebar-logout">
+          </div><button data-v-c1f5c1c8="" type="button" class="mobile-navigation__sidebar-logout">
             <cds-icon-stub data-v-c1f5c1c8="" name="logout-outline" width="24" height="24" color="currentColor" dark="false" light="false"></cds-icon-stub>
           </button>
         </div>

src/tests/__snapshots__/MultiFileInput.spec.ts.snap

@@ -73,7 +73,7 @@ exports[`MultiFileInput snapshot test > renders correctly 1`] = `
       </div>
     </div>
     <div data-v-96e95147="" class="multi-file-input__empty-state"> Os arquivos adicionados serão exibidos aqui </div>
-    <div data-v-96e95147="" class="multi-file-input__footer"><button data-v-3c9d0845="" data-v-96e95147="" class="button__container button--green--disabled button-size--md">
+    <div data-v-96e95147="" class="multi-file-input__footer"><button data-v-3c9d0845="" data-v-96e95147="" type="button" class="button__container button--green--disabled button-size--md">
         <!--v-if-->
         <!--v-if-->
         <!-- @slot Slot padrão utilizado para exibir texto do botão. -->Enviar

src/tests/__snapshots__/SegmentedControl.spec.ts.snap

@@ -0,0 +1,3 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`SegmentedControl > renders correctly 1`] = `"<div class="segment-control"><button type="button" class="segment-control__button segment-control__button--inactive"><span>Segment 1</span></button><button type="button" class="segment-control__button segment-control__button--inactive"><span>Segment 2</span></button></div>"`;

src/tests/__snapshots__/Wizard.spec.ts.snap

@@ -21,12 +21,12 @@ exports[`Wizard > renders correctly 1`] = `
       </div>
     </div>
   </div>
-  <div data-v-61a7952a="" class="cds-wizard__buttons"><button data-v-3c9d0845="" data-v-61a7952a="" class="button__container button--secondary--active button-size--md">
+  <div data-v-61a7952a="" class="cds-wizard__buttons"><button data-v-3c9d0845="" data-v-61a7952a="" type="button" class="button__container button--secondary--active button-size--md">
       <!--v-if-->
       <!--v-if-->
       <!-- @slot Slot padrão utilizado para exibir texto do botão. -->Anterior
       <!--v-if-->
-    </button><button data-v-3c9d0845="" data-v-61a7952a="" class="button__container button--green--active button-size--md">
+    </button><button data-v-3c9d0845="" data-v-61a7952a="" type="button" class="button__container button--green--active button-size--md">
       <!--v-if-->
       <!--v-if-->
       <!-- @slot Slot padrão utilizado para exibir texto do botão. -->Próximo