From 758bab57af49c3b2ae43302a830355c694437131 Mon Sep 17 00:00:00 2001
From: Maksim Sukharev <antreesy.web@gmail.com>
Date: Mon, 19 May 2025 14:27:36 +0200
Subject: [PATCH 1/2] fix(NcActionButton): wrap items under single wrapper

Signed-off-by: Maksim Sukharev <antreesy.web@gmail.com>
---
 src/assets/action.scss                        |  2 +-
 .../NcActionButton/NcActionButton.vue         | 26 ++++++++-----------
 2 files changed, 12 insertions(+), 16 deletions(-)

diff --git a/src/assets/action.scss b/src/assets/action.scss
index 37b2ac1296..3381d591c6 100644
--- a/src/assets/action.scss
+++ b/src/assets/action.scss
@@ -109,7 +109,7 @@
 			overflow: hidden;
 			white-space: nowrap;
 			max-width: 100%;
-			display: inline-block;
+			display: block;
 		}
 
 		&__menu-icon {
diff --git a/src/components/NcActionButton/NcActionButton.vue b/src/components/NcActionButton/NcActionButton.vue
index c5edaa9583..3c23dc8bf8 100644
--- a/src/components/NcActionButton/NcActionButton.vue
+++ b/src/components/NcActionButton/NcActionButton.vue
@@ -333,27 +333,23 @@ export default {
 			</slot>
 
 			<!-- long text with name -->
-			<span v-if="name"
-				class="action-button__longtext-wrapper">
-				<strong class="action-button__name">
+			<span class="action-button__longtext-wrapper">
+				<strong v-if="name"
+					class="action-button__name">
 					{{ name }}
 				</strong>
-				<br>
 				<!-- white space is shown on longtext, so we can't
 					put {{ text }} on a new line for code readability -->
-				<span class="action-button__longtext" v-text="text" />
+				<span v-if="isLongText"
+					class="action-button__longtext"
+					v-text="text" />
+				<!-- default text display -->
+				<span v-else
+					class="action-button__text">
+					{{ text }}
+				</span>
 			</span>
 
-			<!-- long text only -->
-			<!-- white space is shown on longtext, so we can't
-				put {{ text }} on a new line for code readability -->
-			<span v-else-if="isLongText"
-				class="action-button__longtext"
-				v-text="text" />
-
-			<!-- default text display -->
-			<span v-else class="action-button__text">{{ text }}</span>
-
 			<!-- right(in LTR) or left(in RTL) arrow icon when there is a sub-menu -->
 			<ChevronRightIcon v-if="isMenu && !isRtl" :size="20" class="action-button__menu-icon" />
 			<ChevronLeftIcon v-else-if="isMenu && isRtl" :size="20" class="action-button__menu-icon" />

From 522eb37ae3568c279e07d6ee35ba74548933bf52 Mon Sep 17 00:00:00 2001
From: Maksim Sukharev <antreesy.web@gmail.com>
Date: Mon, 19 May 2025 14:50:18 +0200
Subject: [PATCH 2/2] feat(NcActionButton): introduce 'description' prop

Signed-off-by: Maksim Sukharev <antreesy.web@gmail.com>
---
 src/assets/action.scss                        |  9 ++++++++
 .../NcActionButton/NcActionButton.vue         | 23 ++++++++++++++++++-
 2 files changed, 31 insertions(+), 1 deletion(-)

diff --git a/src/assets/action.scss b/src/assets/action.scss
index 3381d591c6..36800f6a3c 100644
--- a/src/assets/action.scss
+++ b/src/assets/action.scss
@@ -112,6 +112,15 @@
 			display: block;
 		}
 
+		&__description {
+			display: block;
+			white-space: pre-wrap;
+			font-size: var(--font-size-small);
+			line-height: var(--default-line-height);
+			color: var(--color-text-maxcontrast);
+			cursor: pointer;
+		}
+
 		&__menu-icon {
 			margin-inline: auto calc($icon-margin * -1);
 		}
diff --git a/src/components/NcActionButton/NcActionButton.vue b/src/components/NcActionButton/NcActionButton.vue
index 3c23dc8bf8..5d16439166 100644
--- a/src/components/NcActionButton/NcActionButton.vue
+++ b/src/components/NcActionButton/NcActionButton.vue
@@ -53,7 +53,9 @@ This component is made to be used inside of the [NcActions](#NcActions) componen
 	</script>
 ```
 
-If you're using a long text you can specify a name
+If you're using a long text, you can specify a `name` prop.
+
+For the same purpose, but in a more compact way, `description` prop can be used.
 
 ```vue
 	<template>
@@ -70,15 +72,23 @@ If you're using a long text you can specify a name
 				</template>
 				This button is associated with a very long text.\nAnd with new lines too.
 			</NcActionButton>
+			<NcActionButton description="Subline description for the button" @click="showMessage('Edit')">
+				<template #icon>
+					<Pencil :size="20" />
+				</template>
+				Edit
+			</NcActionButton>
 		</NcActions>
 	</template>
 	<script>
 	import Delete from 'vue-material-design-icons/Delete.vue'
+	import Pencil from 'vue-material-design-icons/Pencil.vue'
 	import Plus from 'vue-material-design-icons/Plus.vue'
 
 	export default {
 		components: {
 			Delete,
+			Pencil,
 			Plus,
 		},
 		methods: {
@@ -348,6 +358,9 @@ export default {
 					class="action-button__text">
 					{{ text }}
 				</span>
+				<span v-if="description"
+					class="action-button__description"
+					v-text="description" />
 			</span>
 
 			<!-- right(in LTR) or left(in RTL) arrow icon when there is a sub-menu -->
@@ -452,6 +465,14 @@ export default {
 			type: String,
 			default: null,
 		},
+
+		/**
+		 * Small underlying text content of the entry
+		 */
+		description: {
+			type: String,
+			default: '',
+		},
 	},
 	setup() {
 		return {