Merge pull request #6507 from nextcloud-libraries/fix/noid/stylelint

fix(NcAction*): complete BiDi support

Author: Antreesy

src/components/NcActionCaption/NcActionCaption.vue

@@ -52,8 +52,8 @@ export default {
 		box-shadow: none !important;
 		user-select: none;
 		pointer-events: none;
-		margin-left: 12px;
-		padding-right: 14px;
+		margin-inline-start: 12px;
+		padding-inline-end: 14px;
 		height: var(--default-clickable-area);
 		display: flex;
 		align-items: center;

src/components/NcActionCheckbox/NcActionCheckbox.vue

@@ -233,13 +233,9 @@ export default {
 	/* checkbox/radio fixes */
 	&__checkbox {
 		position: absolute;
-		top: auto;
-		left: -10000px;
-
-		overflow: hidden;
-
-		width: 1px;
-		height: 1px;
+		inset-inline-start: 0 !important;
+		z-index: -1;
+		opacity: 0;
 	}
 
 	&__label {

src/components/NcActionInput/NcActionInput.vue

@@ -583,10 +583,11 @@ $input-margin: 4px;
 		flex: 1 1 auto;
 
 		margin: $input-margin 0;
-		padding-right: $icon-margin;
+		padding-inline-end: $icon-margin;
 	}
 
 	&__container {
+		position: relative;
 		width: 100%;
 	}
 
@@ -615,11 +616,12 @@ $input-margin: 4px;
 
 		&--hidden {
 			position: absolute;
-			left: -10000px;
-			top: auto;
+			inset-inline-start: 0;
 			width: 1px;
 			height: 1px;
 			overflow: hidden;
+			z-index: -1;
+			opacity: 0;
 		}
 	}
 

src/components/NcActionRadio/NcActionRadio.vue

@@ -238,13 +238,9 @@ export default {
 	/* checkbox/radio fixes */
 	&__radio {
 		position: absolute;
-		top: auto;
-		left: -10000px;
-
-		overflow: hidden;
-
-		width: 1px;
-		height: 1px;
+		inset-inline-start: 0 !important;
+		z-index: -1;
+		opacity: 0;
 	}
 
 	&__label {
@@ -253,7 +249,7 @@ export default {
 
 		width: 100%;
 		padding: 0 !important;
-		padding-right: $icon-margin !important;
+		padding-inline-end: $icon-margin !important;
 
 		// (34 -14) / 2 = 10 same as ncactioncheckbox
 		&::before {

src/components/NcActionTextEditable/NcActionTextEditable.vue

@@ -82,7 +82,8 @@ 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">
-					<ArrowRight :size="20" />
+					<ArrowLeft v-if="isRTL" :size="20" />
+					<ArrowRight v-else :size="20" />
 				</label>
 			</form>
 		</span>
@@ -94,12 +95,16 @@ import { useModelMigration } from '../../composables/useModelMigration.ts'
 import ActionTextMixin from '../../mixins/actionText.js'
 import GenRandomId from '../../utils/GenRandomId.js'
 
+import ArrowLeft from 'vue-material-design-icons/ArrowLeft.vue'
 import ArrowRight from 'vue-material-design-icons/ArrowRight.vue'
 
+import { isRTL } from '@nextcloud/l10n'
+
 export default {
 	name: 'NcActionTextEditable',
 
 	components: {
+		ArrowLeft,
 		ArrowRight,
 	},
 
@@ -165,6 +170,7 @@ export default {
 		const model = useModelMigration('value', 'update:value')
 		return {
 			model,
+			isRTL: isRTL(),
 		}
 	},
 
@@ -276,16 +282,18 @@ $input-margin: 4px;
 
 		position: relative;
 		margin: $input-margin 0;
-		padding-right: $icon-margin;
+		padding-inline-end: $icon-margin;
 	}
 
 	&__submit {
 		position: absolute;
-		left: -10000px;
+		inset-inline-start: 0;
 		top: auto;
 		width: 1px;
 		height: 1px;
 		overflow: hidden;
+		z-index: -1;
+		opacity: 0;
 	}
 
 	&__label {
@@ -295,7 +303,7 @@ $input-margin: 4px;
 
 		// bottom-right corner
 		position: absolute;
-		right: calc($icon-margin + 1);
+		inset-inline-end: calc($icon-margin + 1px);
 		bottom: 1px;
 		width: calc(var(--default-clickable-area) - $input-margin * 2);
 		height: calc(var(--default-clickable-area) - $input-margin * 2);
@@ -356,7 +364,7 @@ $input-margin: 4px;
 				z-index: 2;
 
 				border-color: var(--color-primary-element);
-				border-left-color: transparent;
+				border-inline-start-color: transparent;
 			}
 		}
 	}

src/components/NcActions/NcActions.vue

@@ -2040,11 +2040,7 @@ export default {
 .action-items {
 	display: flex;
 	align-items: center;
-
-	// Spacing between buttons
-	& > button {
-		margin-right: calc($icon-margin / 2);
-	}
+	gap: calc($icon-margin / 2);
 }
 
 .action-item {

src/components/NcButton/NcButton.vue

@@ -397,7 +397,7 @@ td.row-name {
 }
 
 td.row-size {
-	text-align: right;
+	text-align: end;
 	padding-inline-end: 16px;
 }
 

src/components/NcColorPicker/NcColorPicker.vue

@@ -94,12 +94,12 @@ export default {
 <style>
 .container1 {
 	display: flex;
+	gap: 20px;
 }
 
 .color1 {
 	width: 100px;
 	height: 34px;
-	margin-left: 20px;
 	border-radius: 6px;
 }
 </style>
@@ -129,12 +129,12 @@ export default {
 <style>
 .container0 {
 	display: flex;
+	gap: 20px;
 }
 
 .color0 {
 	width: 100px;
 	height: 34px;
-	margin-left: 20px;
 	border-radius: 6px;
 }
 </style>

src/components/NcHeaderButton/NcHeaderButton.vue

@@ -55,7 +55,7 @@ export default {
 	justify-content: right;
 	background-color: var(--color-primary);
 	height: var(--header-height, 50px);
-	padding-right: 12px;
+	padding-inline-end: 12px;
 }
 </style>
 ```

src/components/NcHeaderMenu/NcHeaderMenu.vue

@@ -50,7 +50,7 @@ export default {
 	justify-content: right;
 	background-color: var(--color-primary);
 	height: var(--header-height, 50px);
-	padding-right: 12px;
+	padding-inline-end: 12px;
 }
 </style>
 ```