feat(NcActionButton): support menu styling

Signed-off-by: John Molakvoæ <[email protected]>
nextcloud-libraries · Oct 31, 2023 · 03cecfb · 03cecfb
1 parent 40dcf81
commit 03cecfb
Show file tree

Hide file tree

Showing 2 changed files with 51 additions and 32 deletions.
diff --git 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
@@ -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,13 +211,17 @@ 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>
 	</li>
 </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,13 +243,23 @@ export default {
 			type: Boolean,
 			default: false,
 		},
+
 		/**
 		 * aria-hidden attribute for the icon slot
 		 */
 		ariaHidden: {
 			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: {
 		/**