chore: remove button state (#4501)

* chore: remove button state

* fix: issue with remaining state property

Author: nmerget

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

@@ -2,13 +2,20 @@
 
 ## db-button/DBButton type
 
+### `type` property
+
 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.
 
+### `state` property
+
+We removed the `state` property from the `db-button`/`DBButton` component for now.
+It wasn't implemented in any framework causing some confusion, and we will reintroduce it in a future version.
+
 ## icon-before/-after
 
 We renamed the `data-icon-after` and `data-icon-before` properties to `data-icon-trailing` and `data-icon-leading`,

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

@@ -44,7 +44,6 @@ export default function DBButton(props: DBButtonProps) {
 			data-icon-trailing={props.iconTrailing}
 			data-hide-icon-trailing={getHideProp(props.showIconTrailing)}
 			data-size={props.size}
-			data-state={props.state}
 			data-width={props.width}
 			data-variant={props.variant}
 			data-no-text={getBooleanAsString(props.noText)}

packages/components/src/components/button/button.scss

@@ -101,17 +101,6 @@
 		opacity: variables.$db-opacity-md;
 	}
 
-	// States (currently only "loading")
-	&[data-state="loading"] {
-		@include icons.is-icon-text-replace();
-
-		font-size: 0;
-
-		&::before {
-			content: "";
-		}
-	}
-
 	// Workaround for current stencil implementation for header
 	&:has(> .db-button) {
 		margin: 0;

packages/components/src/components/button/model.ts

@@ -24,9 +24,6 @@ export type ButtonVariantType = (typeof ButtonVariantList)[number];
 export const ButtonTypeList = ['button', 'reset', 'submit'] as const;
 export type ButtonTypeType = (typeof ButtonTypeList)[number];
 
-export const ButtonStateList = ['loading'] as const;
-export type ButtonStateType = (typeof ButtonStateList)[number];
-
 export type DBButtonDefaultProps = {
 	/**
 	 * The disabled attribute can be set to [keep a user from clicking on the button](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#disabled).
@@ -48,11 +45,6 @@ export type DBButtonDefaultProps = {
 	 */
 	noText?: boolean | string;
 
-	/**
-	 * Show loading progress inside button.
-	 */
-	state?: ButtonStateType;
-
 	/**
 	 * The type attribute specifies the [type of button](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#type).
 	 */

showcases/react-showcase/src/components/button/index.tsx

@@ -7,7 +7,6 @@ import DefaultComponent from '../default-component';
 
 const getButton = ({
 	variant,
-	state,
 	size,
 	noText,
 	icon,
@@ -21,7 +20,6 @@ const getButton = ({
 }: DBButtonProps) => (
 	<DBButton
 		variant={variant}
-		state={state}
 		size={size}
 		noText={noText}
 		icon={icon}