Merge pull request #2713 from nextcloud/enhanc/action-button-border-r…

…adius

Use large border-radius in Action Button

src/assets/action.scss

@@ -25,6 +25,8 @@
 	li {
 		&.active {
 			background-color: var(--color-background-hover);
+			border-radius: 6px;
+			padding: 0;
 		}
 	}
 }

src/components/Actions/Actions.vue

@@ -170,6 +170,7 @@ export default {
 			:placement="placement"
 			:boundaries-element="boundariesElement"
 			:container="container"
+			popover-base-class="action-item__popover"
 			@show="openMenu"
 			@after-show="onOpen"
 			@hide="closeMenu">
@@ -781,6 +782,10 @@ export default {
 	}
 }
 
+.popover__inner ul {
+	padding: 4px;
+}
+
 .ie,
 .edge {
 	.action-item__menu,
@@ -790,3 +795,11 @@ export default {
 }
 
 </style>
+
+<style lang="scss">
+// We overwrote the popover base class, so we can style
+// the popover__inner for actions only.
+.popover.action-item__popover .popover__inner {
+	border-radius: var(--border-radius-large);
+}
+</style>

src/components/Popover/Popover.vue

@@ -54,7 +54,7 @@ With a `<button>` as a trigger:
 <template>
 	<VPopover ref="popover"
 		v-bind="$attrs"
-		popover-base-class="popover"
+		:popover-base-class="`popover ${popoverBaseClass}`"
 		popover-wrapper-class="popover__wrapper"
 		popover-arrow-class="popover__arrow"
 		popover-inner-class="popover__inner"
@@ -77,6 +77,13 @@ export default {
 		VPopover,
 	},
 
+	props: {
+		popoverBaseClass: {
+			type: String,
+			default: '',
+		}
+	},
+
 	mounted() {
 		this.$watch(
 			() => {