Allow to show menu title for single Action

Signed-off-by: Raimund Schlüßler <raimund.schluessler@mailbox.org>

src/components/Actions/Actions.vue

@@ -138,7 +138,8 @@ export default {
 		v-bind="firstActionBinding"
 		:class="{
 			[firstAction.icon]: firstAction.icon,
-			[firstActionClass]: firstActionClass }"
+			[firstActionClass]: firstActionClass,
+			'action-item--single--with-title': singleActionTitle }"
 		class="action-item action-item--single"
 		rel="nofollow noreferrer noopener"
 		:disabled="isDisabled"
@@ -148,6 +149,8 @@ export default {
 		<!-- Render the icon slot content of the first action -->
 		<VNodes :vnodes="firstActionIconSlot" />
 
+		{{ singleActionTitle }}
+
 		<!-- fake slot to gather main action -->
 		<span :aria-hidden="true" hidden>
 			<!-- @slot All action elements passed into the default slot will be used -->
@@ -273,6 +276,14 @@ export default {
 			default: false,
 		},
 
+		/**
+		 * Force the title to show for single actions
+		 */
+		forceTitle: {
+			type: Boolean,
+			default: false,
+		},
+
 		/**
 		 * Specify the menu title
 		 */
@@ -370,6 +381,13 @@ export default {
 			return this.actions.length === 1
 				&& this.firstActionElement !== null
 		},
+		/**
+		 * Return the title of the single action if forced
+		 * @returns {string}
+		 */
+		singleActionTitle() {
+			return this.forceTitle ? this.menuTitle : ''
+		},
 		isDisabled() {
 			return this.disabled
 				|| (this.actions.length === 1 && this.firstAction?.$props?.disabled)
@@ -683,27 +701,6 @@ export default {
 		border: none;
 		border-radius: $clickable-area / 2;
 		background-color: transparent;
-	}
-
-	&::v-deep .material-design-icon {
-		width: $clickable-area;
-		height: $clickable-area;
-		opacity: $opacity_full;
-
-		.material-design-icon__svg {
-			vertical-align: middle;
-		}
-	}
-
-	// icon-more
-	&__menutoggle {
-		// align menu icon in center
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		opacity: $opacity_normal;
-		font-weight: bold;
-		line-height: $icon-size;
 
 		&--with-title {
 			position: relative;
@@ -728,6 +725,27 @@ export default {
 				left: ($clickable-area - 24px) / 2;
 			}
 		}
+	}
+
+	&::v-deep .material-design-icon {
+		width: $clickable-area;
+		height: $clickable-area;
+		opacity: $opacity_full;
+
+		.material-design-icon__svg {
+			vertical-align: middle;
+		}
+	}
+
+	// icon-more
+	&__menutoggle {
+		// align menu icon in center
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		opacity: $opacity_normal;
+		font-weight: bold;
+		line-height: $icon-size;
 
 		&--primary {
 			opacity: $opacity_full;