feat(NcActions): add wide prop for full-width menus

Signed-off-by: Christian Hartmann <chris-hartmann@gmx.de>

Author: Chartman123

src/components/NcActions/NcActions.vue

@@ -1094,6 +1094,14 @@ export default {
 			default: null,
 		},
 
+		/**
+		 * Specifies whether the button should span all the available width.
+		 */
+		wide: {
+			type: Boolean,
+			default: false,
+		},
+
 		/**
 		 * Specify the size used for trigger and single actions buttons.
 		 *
@@ -1694,13 +1702,19 @@ export default {
 				mergeProps(
 					propsToForward,
 					{
-						class: 'action-item action-item--single',
+						class: [
+							'action-item action-item--single',
+							{
+								'action-item--wide': this.wide,
+							},
+						],
 						'aria-label': action?.props?.['aria-label'] || text,
 						title,
 						disabled: this.disabled || action?.props?.disabled,
 						pressed: action?.props?.modelValue,
 						size: this.size,
 						type,
+						wide: this.wide,
 						// If it has a menuName, we use a secondary button
 						variant: this.variant || (buttonText ? 'secondary' : 'tertiary'),
 						onFocus: this.onFocus,
@@ -1759,6 +1773,7 @@ export default {
 						disabled: this.disabled,
 						size: this.size,
 						variant: this.triggerButtonVariant,
+						wide: this.wide,
 						ref: 'triggerButton',
 						'aria-label': this.menuName ? null : this.ariaLabel,
 						// 'aria-controls' should only present together with a valid aria-haspopup
@@ -1861,6 +1876,7 @@ export default {
 					`action-item--${this.triggerButtonVariant}`,
 					{
 						'action-item--open': this.opened,
+						'action-item--wide': this.wide,
 					},
 				],
 			},
@@ -1913,6 +1929,10 @@ export default {
 		background-color: var(--open-background-color);
 	}
 
+	&.action-item--wide {
+		width: 100%;
+	}
+
 	&__menutoggle__icon {
 		width: 20px;
 		height: 20px;

src/components/NcButton/NcButton.vue

@@ -861,7 +861,7 @@ function onClick(event: MouseEvent) {
 	}
 
 	// Icon-only button
-	&:has(#{&}__text:empty) {
+	&:has(#{&}__text:empty):not(#{&}--wide) {
 		--button-padding: var(--button-radius);
 		line-height: 1;
 		width: var(--button-size) !important;