fix(button): enhance multi-line text support and update button styles

.changeset/tricky-regions-agree.md

@@ -0,0 +1,9 @@
+---
+"@db-ux/core-components": patch
+"@db-ux/ngx-core-components": patch
+"@db-ux/react-core-components": patch
+"@db-ux/v-core-components": patch
+"@db-ux/wc-core-components": patch
+---
+
+fix(button): Replace fixed height with min-height for buttons to allow dynamic height adjustment when text wraps

__snapshots__/button/showcase/chromium-highContrast/should-have-same-aria-snapshot/DBButton-should-have-same-aria-snapshot.yaml

@@ -26,4 +26,8 @@
   - button "True"
   - link "Width"
   - button "(Default) Auto"
-  - button "Width"
+  - button "Width"
+  - link "Multi-line Text With Line Breaks"
+  - button "Multi-line Text With Automatic Line Breaks"
+  - button "Multi-line Text With Automatic Line Breaks and Icon"
+  - button "Button Small Multi-line Text With Automatic Line Breaks"

__snapshots__/button/showcase/chromium/should-have-same-aria-snapshot/DBButton-should-have-same-aria-snapshot.yaml

@@ -26,4 +26,8 @@
   - button "True"
   - link "Width"
   - button "(Default) Auto"
-  - button "Width"
+  - button "Width"
+  - link "Multi-line Text With Line Breaks"
+  - button "Multi-line Text With Automatic Line Breaks"
+  - button "Multi-line Text With Automatic Line Breaks and Icon"
+  - button "Button Small Multi-line Text With Automatic Line Breaks"

__snapshots__/button/showcase/firefox/should-have-same-aria-snapshot/DBButton-should-have-same-aria-snapshot.yaml

@@ -26,4 +26,8 @@
   - button "True"
   - link "Width"
   - button "(Default) Auto"
-  - button "Width"
+  - button "Width"
+  - link "Multi-line Text With Line Breaks"
+  - button "Multi-line Text With Automatic Line Breaks"
+  - button "Multi-line Text With Automatic Line Breaks and Icon"
+  - button "Button Small Multi-line Text With Automatic Line Breaks"

__snapshots__/button/showcase/mobile-chrome/should-have-same-aria-snapshot/DBButton-should-have-same-aria-snapshot.yaml

@@ -26,4 +26,8 @@
   - button "True"
   - link "Width"
   - button "(Default) Auto"
-  - button "Width"
+  - button "Width"
+  - link "Multi-line Text With Line Breaks"
+  - button "Multi-line Text With Automatic Line Breaks"
+  - button "Multi-line Text With Automatic Line Breaks and Icon"
+  - button "Button Small Multi-line Text With Automatic Line Breaks"

__snapshots__/button/showcase/mobile-safari/should-have-same-aria-snapshot/DBButton-should-have-same-aria-snapshot.yaml

@@ -26,4 +26,8 @@
   - button "True"
   - link "Width"
   - button "(Default) Auto"
-  - button "Width"
+  - button "Width"
+  - link "Multi-line Text With Line Breaks"
+  - button "Multi-line Text With Automatic Line Breaks"
+  - button "Multi-line Text With Automatic Line Breaks and Icon"
+  - button "Button Small Multi-line Text With Automatic Line Breaks"

__snapshots__/button/showcase/webkit/should-have-same-aria-snapshot/DBButton-should-have-same-aria-snapshot.yaml

@@ -26,4 +26,8 @@
   - button "True"
   - link "Width"
   - button "(Default) Auto"
-  - button "Width"
+  - button "Width"
+  - link "Multi-line Text With Line Breaks"
+  - button "Multi-line Text With Automatic Line Breaks"
+  - button "Multi-line Text With Automatic Line Breaks and Icon"
+  - button "Button Small Multi-line Text With Automatic Line Breaks"

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

@@ -7,15 +7,18 @@
 @use "../../styles/internal/component";
 @use "../../styles/internal/button-components";
 
+// generic styles can be found in _button-components.scss
 .db-button {
 	@extend %default-interactive-component;
 	@extend %default-button;
 	@extend %db-overwrite-font-size-md;
 
+	max-inline-size: 100%;
 	color: colors.$db-adaptive-on-bg-basic-emphasis-100-default;
-	block-size: variables.$db-sizing-md;
+	min-block-size: variables.$db-sizing-md;
+	block-size: max-content;
 	inline-size: fit-content;
-	padding: variables.$db-spacing-fixed-xs variables.$db-spacing-fixed-md;
+	padding: variables.$db-spacing-fixed-2xs variables.$db-spacing-fixed-md;
 
 	// disable text-decoration if someone wants to use the button for an <a> tag
 	text-decoration: none;
@@ -25,6 +28,7 @@
 		@include icons.is-icon-text-replace;
 
 		padding: 0;
+		aspect-ratio: 1;
 		inline-size: variables.$db-sizing-md;
 
 		&::before {
@@ -36,11 +40,11 @@
 		@extend %db-overwrite-font-size-sm;
 
 		font-weight: 700;
-		block-size: variables.$db-sizing-sm;
+		min-block-size: variables.$db-sizing-sm;
 
 		&:not([data-no-text="true"]) {
-			padding: variables.$db-spacing-fixed-3xs
-				variables.$db-spacing-fixed-sm;
+			// stylelint-disable-next-line db-ux/use-spacings
+			padding: 2px variables.$db-spacing-fixed-sm;
 
 			&::before {
 				margin-inline-end: variables.$db-spacing-fixed-2xs;
@@ -113,6 +117,7 @@
 	&:has(> .db-button) {
 		margin: 0;
 		padding: 0;
+		block-size: variables.$db-sizing-md;
 
 		&::before {
 			content: none;

packages/components/src/styles/internal/_button-components.scss

@@ -2,7 +2,8 @@
 
 %default-button {
 	font-weight: 700;
-	white-space: nowrap; // we don't want to break buttons
+	overflow-wrap: break-word; // Multiple lines support
+	white-space: pre-line; // Multiple lines support
 	justify-content: center;
 	text-align: center;
 

showcases/angular-showcase/src/app/components/button/button.component.html

@@ -21,8 +21,7 @@
 			[disabled]="exampleProps?.disabled"
 			[width]="exampleProps?.width"
 			(click)="showAlert(exampleName)"
+			>{{ exampleName }}</db-button
 		>
-			{{ exampleName }}
-		</db-button>
 	</ng-template>
 </app-default-component>

showcases/shared/button.json

@@ -150,5 +150,32 @@
 				}
 			}
 		]
+	},
+	{
+		"name": "Multi-line Text With Line Breaks",
+		"examples": [
+			{
+				"name": "Multi-line Text With Automatic Line Breaks",
+				"style": { "width": "300px" },
+				"props": {
+					"width": "full"
+				}
+			},
+			{
+				"name": "Multi-line Text With Automatic Line Breaks and Icon",
+				"style": { "width": "300px" },
+				"props": {
+					"width": "full",
+					"icon": "x_placeholder"
+				}
+			},
+			{
+				"name": "Button Small Multi-line Text With Automatic Line Breaks",
+				"style": { "width": "300px" },
+				"props": {
+					"size": "small"
+				}
+			}
+		]
 	}
 ]