fix(NcActions): migrate to custom icons in Checkbox and Radio actions

Signed-off-by: Grigorii K. Shartsev <me@shgk.me>

[skip ci]

Author: ShGKme

src/components/NcActionCheckbox/NcActionCheckbox.vue

@@ -64,6 +64,10 @@ import GenRandomId from '../../utils/GenRandomId.js'
 export default {
 	name: 'NcActionCheckbox',
 
+	components: {
+		NcIconSvgWrapper,
+	},
+
 	mixins: [ActionGlobalMixin],
 
 	inject: {
@@ -125,8 +129,11 @@ export default {
 	},
 
 	emits: [
+		/** Native change event */
 		'change',
+		/** Checkbox is checked */
 		'check',
+		/** Checkbox is unchecked */
 		'uncheck',
 		/**
 		 * Removed in v9 - use `update:modelValue` (`v-model`) instead
@@ -189,20 +196,9 @@ export default {
 			 * @type {Event}
 			 */
 			this.$emit('change', event)
-
-			if (this.$refs.checkbox.checked) {
-				/**
-				 * Emitted when the checkbox is checked
-				 *
-				 * @type {Event}
-				 */
+			if (event.target.checked) {
 				this.$emit('check')
 			} else {
-				/**
-				 * Emitted when the checkbox is unchecked
-				 *
-				 * @type {Event}
-				 */
 				this.$emit('uncheck')
 			}
 		},
@@ -214,56 +210,24 @@ export default {
 @use '../../assets/action.scss' as *;
 @include action-active;
 @include action--disabled;
+@include action-item('checkbox');
 
-.action-checkbox {
-	display: flex;
-	align-items: flex-start;
-
-	width: 100%;
-	height: auto;
-	margin: 0;
-	padding: 0;
-
-	cursor: pointer;
-	white-space: nowrap;
-
-	color: var(--color-main-text);
-	border: 0;
-	border-radius: 0; // otherwise Safari will cut the border-radius area
-	background-color: transparent;
-	box-shadow: none;
+.action:has(:focus-visible) {
+	outline: 2px solid currentColor;
+}
 
-	font-weight: normal;
-	line-height: var(--default-clickable-area);
+.action-checkbox {
+	&__icon {
+		color: var(--color-primary-element);
+	}
 
-	/* checkbox/radio fixes */
-	&__checkbox {
+	&__input {
+		width: 20px;
+		height: 20px;
+		margin: auto;
 		position: absolute;
-		inset-inline-start: 0 !important;
 		z-index: -1;
-		opacity: 0;
-	}
-
-	&__label {
-		display: flex;
-		align-items: center; // align checkbox to text
-
-		width: 100%;
-		padding: 0 !important;
-		padding-inline-end: $icon-margin !important;
-
-		&::before {
-			margin-block: 0 !important;
-			margin-inline: calc((var(--default-clickable-area) - 14px) / 2) !important;
-		}
-	}
-
-	&--disabled {
-		&,
-		.action-checkbox__label {
-			cursor: pointer;
-		}
+		opacity: 0 !important;
 	}
 }
-
 </style>

src/components/NcActionRadio/NcActionRadio.vue

@@ -74,6 +74,10 @@ import GenRandomId from '../../utils/GenRandomId.js'
 export default {
 	name: 'NcActionRadio',
 
+	components: {
+		NcIconSvgWrapper,
+	},
+
 	mixins: [ActionGlobalMixin],
 
 	inject: {
@@ -219,56 +223,24 @@ export default {
 @use '../../assets/action.scss' as *;
 @include action-active;
 @include action--disabled;
+@include action-item('radio');
 
-.action-radio {
-	display: flex;
-	align-items: flex-start;
-
-	width: 100%;
-	height: auto;
-	margin: 0;
-	padding: 0;
-
-	cursor: pointer;
-	white-space: nowrap;
-
-	color: var(--color-main-text);
-	border: 0;
-	border-radius: 0; // otherwise Safari will cut the border-radius area
-	background-color: transparent;
-	box-shadow: none;
+.action:has(:focus-visible) {
+	outline: 2px solid currentColor;
+}
 
-	font-weight: normal;
-	line-height: var(--default-clickable-area);
+.action-radio {
+	&__icon {
+		color: var(--color-primary-element);
+	}
 
-	/* checkbox/radio fixes */
-	&__radio {
+	&__input {
+		width: 20px;
+		height: 20px;
+		margin: auto;
 		position: absolute;
-		inset-inline-start: 0 !important;
 		z-index: -1;
-		opacity: 0;
-	}
-
-	&__label {
-		display: flex;
-		align-items: center; // align radio to text
-
-		width: 100%;
-		padding: 0 !important;
-		padding-inline-end: $icon-margin !important;
-
-		// (34 -14) / 2 = 10 same as ncactioncheckbox
-		&::before {
-			margin: calc((var(--default-clickable-area) - 14px) / 2) !important;
-		}
-	}
-
-	&--disabled {
-		&,
-		.action-radio__label {
-			cursor: pointer;
-		}
+		opacity: 0 !important;
 	}
 }
-
 </style>