refactor: use button type for react and vue based on click listener (#4490)

* refactor: use button type for react and vue based on click listener

* chore: add migration documentation

* auto update snapshots (#4492)

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

---------

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
Co-authored-by: Maximilian Franzke <[email protected]>

Author: 3 people

__snapshots__/button/patternhub/button-properties-should-match-screenshot.png

@@ -1,5 +1,14 @@
 ## Migration Beta (1.x.x) ➡ 2.0.0
 
+## db-button/DBButton type
+
+We changed the behaviour of the `type` property in the `db-button`/`DBButton` component.
+Those changes will only affect React and Vue users.
+If you use `onClick` or `@click` you will get `type=button` as default, otherwise it will be `type=submit`.
+You can still set the `type` property manually, to overwrite this.
+Angular and Web Components users will not be affected by this change, the default will be `button`, because click event listeners can't be undefined in the frameworks.
+Please provide the correct `type` property in your code anyhow as a best practise.
+
 ## icon-before/-after
 
 We renamed the `data-icon-after` and `data-icon-before` properties to `data-icon-trailing` and `data-icon-leading`,

docs/migration/v2.x.x-to-v3.0.0.md

@@ -2,10 +2,11 @@ import {
 	Show,
 	useDefaultProps,
 	useMetadata,
-	useRef
+	useRef,
+	useStore
 } from '@builder.io/mitosis';
 import { cls, getBoolean, getBooleanAsString, getHideProp } from '../../utils';
-import type { DBButtonProps } from './model';
+import type { DBButtonProps, DBButtonState } from './model';
 
 useMetadata({
 	angular: {
@@ -18,12 +19,23 @@ useDefaultProps<DBButtonProps>({});
 export default function DBButton(props: DBButtonProps) {
 	const _ref = useRef<HTMLButtonElement | any>(null);
 
+	const state = useStore<DBButtonState>({
+		getButtonType: () => {
+			if (props.type) {
+				return props.type;
+			} else if (props.onClick) {
+				return 'button';
+			}
+			return 'submit';
+		}
+	});
+
 	return (
 		<button
 			ref={_ref}
 			id={props.id}
 			class={cls('db-button', props.className)}
-			type={props.type || 'button'}
+			type={state.getButtonType()}
 			disabled={getBoolean(props.disabled, 'disabled')}
 			data-icon={props.iconLeading ?? props.icon}
 			data-hide-icon={getHideProp(

packages/components/src/components/button/button.lite.tsx

@@ -1,6 +1,5 @@
 import {
 	ClickEventProps,
-	ClickEventState,
 	GlobalProps,
 	GlobalState,
 	IconLeadingProps,
@@ -83,8 +82,8 @@ export type DBButtonProps = DBButtonDefaultProps &
 	IconLeadingProps &
 	IconTrailingProps;
 
-export type DBButtonDefaultState = {};
+export type DBButtonDefaultState = {
+	getButtonType: () => ButtonTypeType;
+};
 
-export type DBButtonState = DBButtonDefaultState &
-	GlobalState &
-	ClickEventState<HTMLButtonElement>;
+export type DBButtonState = DBButtonDefaultState & GlobalState;