Merge pull request #6975 from nextcloud-libraries/backport/6932/stable8

Author: Antreesy

src/assets/action.scss

@@ -109,7 +109,16 @@
 			overflow: hidden;
 			white-space: nowrap;
 			max-width: 100%;
-			display: inline-block;
+			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 {

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: {
@@ -333,27 +343,26 @@ 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 v-if="description"
+					class="action-button__description"
+					v-text="description" />
 			</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" />
@@ -456,6 +465,14 @@ export default {
 			type: String,
 			default: null,
 		},
+
+		/**
+		 * Small underlying text content of the entry
+		 */
+		description: {
+			type: String,
+			default: '',
+		},
 	},
 	setup() {
 		return {