From 03cecfbcd7c544e68be8c9b2c182d2cda72e83ad Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?John=20Molakvo=C3=A6?= <skjnldsv@protonmail.com>
Date: Tue, 31 Oct 2023 10:47:31 +0100
Subject: [PATCH] feat(NcActionButton): support menu styling
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: John Molakvoæ <skjnldsv@protonmail.com>
---
 src/assets/action.scss                        |  8 ++
 .../NcActionButton/NcActionButton.vue         | 75 +++++++++++--------
 2 files changed, 51 insertions(+), 32 deletions(-)

diff --git a/src/assets/action.scss b/src/assets/action.scss
index ed22e6c4b4..67b75a0228 100644
--- a/src/assets/action.scss
+++ b/src/assets/action.scss
@@ -126,5 +126,13 @@
 			max-width: 100%;
 			display: inline-block;
 		}
+
+		&__menu-icon {
+			// Push to the right
+			margin-left: auto;
+			// Align with right end of the button
+			// This is the padding-right
+			margin-right: -$icon-margin;
+		}
 	}
 }
diff --git a/src/components/NcActionButton/NcActionButton.vue b/src/components/NcActionButton/NcActionButton.vue
index 328ed52ad0..8148669749 100644
--- a/src/components/NcActionButton/NcActionButton.vue
+++ b/src/components/NcActionButton/NcActionButton.vue
@@ -26,35 +26,32 @@ This component is made to be used inside of the [NcActions](#NcActions) componen
 
 ```vue
 	<template>
-		<div style="display: flex; align-items: center;">
-			<NcActions>
-				<NcActionButton @click="showMessage('Delete')">
-					<template #icon>
-						<Delete :size="20" />
-					</template>
-					Delete
-				</NcActionButton>
-				<NcActionButton :close-after-click="true" @click="showMessage('Delete and close menu')">
-					<template #icon>
-						<Delete :size="20" />
-					</template>
-					Delete and close
-				</NcActionButton>
-				<NcActionButton :close-after-click="true" @click="focusInput">
-					<template #icon>
-						<Plus :size="20" />
-					</template>
-					Create
-				</NcActionButton>
-				<NcActionButton :disabled="true" @click="showMessage('Disabled')">
-					<template #icon>
-						<Delete :size="20" />
-					</template>
-					Disabled button
-				</NcActionButton>
-			</NcActions>
-			<input ref="input" />
-		</div>
+		<NcActions>
+			<NcActionButton @click="showMessage('Delete')">
+				<template #icon>
+					<Delete :size="20" />
+				</template>
+				Delete
+			</NcActionButton>
+			<NcActionButton :close-after-click="true" @click="showMessage('Delete and close menu')">
+				<template #icon>
+					<Delete :size="20" />
+				</template>
+				Delete and close
+			</NcActionButton>
+			<NcActionButton :is-menu="true">
+				<template #icon>
+					<Plus :size="20" />
+				</template>
+				Create
+			</NcActionButton>
+			<NcActionButton :disabled="true" @click="showMessage('Disabled')">
+				<template #icon>
+					<Delete :size="20" />
+				</template>
+				Disabled button
+			</NcActionButton>
+		</NcActions>
 	</template>
 	<script>
 	import Delete from 'vue-material-design-icons/Delete'
@@ -69,9 +66,6 @@ This component is made to be used inside of the [NcActions](#NcActions) componen
 			showMessage(msg) {
 				alert(msg)
 			},
-			focusInput() {
-				this.$nextTick(() => this.$refs.input.focus())
-			},
 		},
 	}
 	</script>
@@ -217,6 +211,9 @@ export default {
 			<!-- default text display -->
 			<span v-else class="action-button__text">{{ text }}</span>
 
+			<!-- default text display -->
+			<ChevronRightIcon v-if="isMenu" class="action-button__menu-icon" />
+
 			<!-- fake slot to gather inner text -->
 			<slot v-if="false" />
 		</button>
@@ -224,6 +221,7 @@ export default {
 </template>
 
 <script>
+import ChevronRightIcon from 'vue-material-design-icons/ChevronRight.vue'
 import ActionTextMixin from '../../mixins/actionText.js'
 
 /**
@@ -232,6 +230,9 @@ import ActionTextMixin from '../../mixins/actionText.js'
 export default {
 	name: 'NcActionButton',
 
+	components: {
+		ChevronRightIcon,
+	},
 	mixins: [ActionTextMixin],
 
 	props: {
@@ -242,6 +243,7 @@ export default {
 			type: Boolean,
 			default: false,
 		},
+
 		/**
 		 * aria-hidden attribute for the icon slot
 		 */
@@ -249,6 +251,15 @@ export default {
 			type: Boolean,
 			default: null,
 		},
+
+		/**
+		 * If this is a menu, a chevron icon will
+		 * be added at the end of the line
+		 */
+		isMenu: {
+			type: Boolean,
+			default: false,
+		},
 	},
 	computed: {
 		/**