Merge pull request #6767 from nextcloud-libraries/chore/rtl-icon

refactor: use `NcIconSvgWrapper` with `directional` property where needed

Author: susnux

src/components/NcActionButton/NcActionButton.vue

@@ -364,9 +364,12 @@ export default {
 			</span>
 
 			<!-- 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" />
+			<NcIconSvgWrapper v-if="isMenu"
+				class="action-button__menu-icon"
+				directional
+				:path="mdiChevronRight" />
+			<NcIconSvgWrapper v-else-if="isChecked" :path="mdiCheck" class="action-button__pressed-icon" />
+
 			<span v-else-if="isChecked === false" class="action-button__pressed-icon material-design-icon" />
 
 			<!-- fake slot to gather inner text -->
@@ -376,12 +379,10 @@ export default {
 </template>
 
 <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 '../../utils/rtl.ts'
+import { mdiCheck, mdiChevronRight } from '@mdi/js'
 import { NC_ACTIONS_IS_SEMANTIC_MENU } from '../NcActions/useNcActions.ts'
+import ActionTextMixin from '../../mixins/actionText.js'
+import NcIconSvgWrapper from '../NcIconSvgWrapper/NcIconSvgWrapper.vue'
 
 /**
  * Button component to be used in Actions
@@ -390,9 +391,7 @@ export default {
 	name: 'NcActionButton',
 
 	components: {
-		CheckIcon,
-		ChevronRightIcon,
-		ChevronLeftIcon,
+		NcIconSvgWrapper,
 	},
 
 	mixins: [ActionTextMixin],
@@ -471,7 +470,8 @@ export default {
 
 	setup() {
 		return {
-			isRtl,
+			mdiCheck,
+			mdiChevronRight,
 		}
 	},
 

src/components/NcActionTextEditable/NcActionTextEditable.vue

@@ -74,29 +74,25 @@ export default {
 				<!-- allow the custom font to inject a ::before
 					not possible on input[type=submit] -->
 				<label v-show="!disabled" :for="id" class="action-text-editable__label">
-					<ArrowLeft v-if="isRtl" :size="20" />
-					<ArrowRight v-else :size="20" />
+					<NcIconSvgWrapper directional :path="mdiArrowRight" />
 				</label>
 			</form>
 		</span>
 	</li>
 </template>
 
 <script>
-import ActionTextMixin from '../../mixins/actionText.js'
+import { mdiArrowRight } from '@mdi/js'
 import { createElementId } from '../../utils/createElementId.ts'
 
-import ArrowLeft from 'vue-material-design-icons/ArrowLeft.vue'
-import ArrowRight from 'vue-material-design-icons/ArrowRight.vue'
-
-import { isRtl } from '../../utils/rtl.ts'
+import ActionTextMixin from '../../mixins/actionText.js'
+import NcIconSvgWrapper from '../NcIconSvgWrapper/index.js'
 
 export default {
 	name: 'NcActionTextEditable',
 
 	components: {
-		ArrowLeft,
-		ArrowRight,
+		NcIconSvgWrapper,
 	},
 
 	mixins: [ActionTextMixin],
@@ -134,7 +130,7 @@ export default {
 
 	setup() {
 		return {
-			isRtl,
+			mdiArrowRight,
 		}
 	},