From 0e449a2bb02f841069c792d420f261bb99b8d8de Mon Sep 17 00:00:00 2001
From: Faisal Alghamdi <falghamdi125@gmail.com>
Date: Fri, 8 Nov 2024 16:53:33 -0500
Subject: [PATCH 1/3] Fix(NcActionButton): Add RTL support to NcActionButton
 component

Signed-off-by: Faisal Alghamdi <falghamdi125@gmail.com>
---
 src/assets/action.scss                           | 8 ++------
 src/components/NcActionButton/NcActionButton.vue | 4 ++--
 2 files changed, 4 insertions(+), 8 deletions(-)

diff --git a/src/assets/action.scss b/src/assets/action.scss
index c5e1b1469f..5fd8488461 100644
--- a/src/assets/action.scss
+++ b/src/assets/action.scss
@@ -37,7 +37,7 @@
 		height: auto;
 		margin: 0;
 		padding: 0;
-		padding-right: $icon-margin;
+		padding-inline-end: $icon-margin;
 		box-sizing: border-box; // otherwise router-link overflows in Firefox
 
 		cursor: pointer;
@@ -109,11 +109,7 @@
 		}
 
 		&__menu-icon {
-			// Push to the right
-			margin-left: auto;
-			// Align with right end of the button
-			// This is the padding-right
-			margin-right: calc($icon-margin * -1);
+			margin-inline: auto calc($icon-margin * -1);
 		}
 	}
 }
diff --git a/src/components/NcActionButton/NcActionButton.vue b/src/components/NcActionButton/NcActionButton.vue
index f638495651..a8f74380a9 100644
--- a/src/components/NcActionButton/NcActionButton.vue
+++ b/src/components/NcActionButton/NcActionButton.vue
@@ -547,7 +547,7 @@ export default {
 @include action-item('button');
 
 .action-button__pressed-icon {
-	margin-left: auto;
-	margin-right: calc($icon-margin * -1);
+	margin-inline-start: auto;
+	margin-inline-end: calc($icon-margin * -1);
 }
 </style>

From f0ac2e83b28d6cc40cb18366cc231d3eee008240 Mon Sep 17 00:00:00 2001
From: Ferdinand Thiessen <opensource@fthiessen.de>
Date: Tue, 19 Nov 2024 13:16:51 +0100
Subject: [PATCH 2/3] refactor(NcActionButton): Adjust css syntax

Signed-off-by: Ferdinand Thiessen <opensource@fthiessen.de>
---
 src/components/NcActionButton/NcActionButton.vue | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/components/NcActionButton/NcActionButton.vue b/src/components/NcActionButton/NcActionButton.vue
index a8f74380a9..49f46c0c56 100644
--- a/src/components/NcActionButton/NcActionButton.vue
+++ b/src/components/NcActionButton/NcActionButton.vue
@@ -547,7 +547,6 @@ export default {
 @include action-item('button');
 
 .action-button__pressed-icon {
-	margin-inline-start: auto;
-	margin-inline-end: calc($icon-margin * -1);
+	margin-inline: auto calc($icon-margin * -1);
 }
 </style>

From 348e3f12155b545d4baefa8df58f38c7e7ee03be Mon Sep 17 00:00:00 2001
From: Faisal Alghamdi <falghamdi125@gmail.com>
Date: Sun, 8 Dec 2024 08:24:31 -0500
Subject: [PATCH 3/3] Fix(NcActionButton): Set submenu arrow direction in RTL
 mode

Signed-off-by: Faisal Alghamdi <falghamdi125@gmail.com>
---
 src/components/NcActionButton/NcActionButton.vue | 13 +++++++++++--
 1 file changed, 11 insertions(+), 2 deletions(-)

diff --git a/src/components/NcActionButton/NcActionButton.vue b/src/components/NcActionButton/NcActionButton.vue
index 49f46c0c56..218e90c05d 100644
--- a/src/components/NcActionButton/NcActionButton.vue
+++ b/src/components/NcActionButton/NcActionButton.vue
@@ -354,8 +354,9 @@ export default {
 			<!-- default text display -->
 			<span v-else class="action-button__text">{{ text }}</span>
 
-			<!-- right arrow icon when there is a sub-menu -->
-			<ChevronRightIcon v-if="isMenu" :size="20" class="action-button__menu-icon" />
+			<!-- 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" />
 			<CheckIcon v-else-if="isChecked === true" :size="20" class="action-button__pressed-icon" />
 			<span v-else-if="isChecked === false" class="action-button__pressed-icon material-design-icon" />
 
@@ -368,7 +369,9 @@ export default {
 <script>
 import CheckIcon from 'vue-material-design-icons/Check.vue'
 import ChevronRightIcon from 'vue-material-design-icons/ChevronRight.vue'
+import ChevronLeftIcon from 'vue-material-design-icons/ChevronLeft.vue'
 import ActionTextMixin from '../../mixins/actionText.js'
+import { isRTL } from '@nextcloud/l10n'
 
 /**
  * Button component to be used in Actions
@@ -379,6 +382,12 @@ export default {
 	components: {
 		CheckIcon,
 		ChevronRightIcon,
+		ChevronLeftIcon,
+	},
+	setup() {
+		return {
+			isRTL: isRTL(),
+		}
 	},
 	mixins: [ActionTextMixin],