Merge pull request #8047 from nextcloud-libraries/backport/8045/stable8

[stable8] fix: animate toggle switch icon

Author: susnux

src/components/NcCheckboxRadioSwitch/NcCheckboxContent.vue

@@ -32,6 +32,11 @@
 				:checked="isChecked"
 				:loading="loading">
 				<NcLoadingIcon v-if="loading" />
+				<NcIconToggleSwitch
+					v-else-if="isSwitchType"
+					:checked="isChecked"
+					:size="iconSize"
+					inline />
 				<component
 					:is="checkboxRadioIconElement"
 					v-else-if="!buttonVariant"
@@ -61,8 +66,7 @@ import CheckboxMarked from 'vue-material-design-icons/CheckboxMarked.vue'
 import MinusBox from 'vue-material-design-icons/MinusBox.vue'
 import RadioboxBlank from 'vue-material-design-icons/RadioboxBlank.vue'
 import RadioboxMarked from 'vue-material-design-icons/RadioboxMarked.vue'
-import ToggleSwitch from 'vue-material-design-icons/ToggleSwitch.vue'
-import ToggleSwitchOff from 'vue-material-design-icons/ToggleSwitchOff.vue'
+import NcIconToggleSwitch from '../NcIconToggleSwitch/NcIconToggleSwitch.vue'
 import NcLoadingIcon from '../NcLoadingIcon/index.js'
 
 export const TYPE_CHECKBOX = 'checkbox'
@@ -75,6 +79,7 @@ export default {
 
 	components: {
 		NcLoadingIcon,
+		NcIconToggleSwitch,
 	},
 
 	props: {
@@ -175,6 +180,10 @@ export default {
 			return this.type === TYPE_BUTTON
 		},
 
+		isSwitchType() {
+			return this.type === TYPE_SWITCH
+		},
+
 		/**
 		 * Returns the proper Material icon depending on the select case
 		 *
@@ -188,14 +197,6 @@ export default {
 				return RadioboxBlank
 			}
 
-			// Switch
-			if (this.type === TYPE_SWITCH) {
-				if (this.isChecked) {
-					return ToggleSwitch
-				}
-				return ToggleSwitchOff
-			}
-
 			// Checkbox
 			if (this.indeterminate) {
 				return MinusBox
@@ -240,6 +241,7 @@ export default {
 	&-radio:not(&--button-variant) &__icon,
 	&-switch:not(&--button-variant) &__icon {
 		margin-block: calc((var(--default-clickable-area) - 2 * var(--default-grid-baseline) - var(--icon-height)) / 2) auto;
+		line-height: 0;
 	}
 
 	&-checkbox:not(&--button-variant) &__icon--has-description,

src/components/NcFormBoxSwitch/NcFormBoxSwitch.vue

@@ -13,11 +13,10 @@ export default {
 </script>
 
 <script setup lang="ts">
-import { mdiToggleSwitch, mdiToggleSwitchOff } from '@mdi/js'
 import { useVModel } from '@vueuse/core'
 import { watch } from 'vue'
 import NcFormBoxItem from '../NcFormBox/NcFormBoxItem.vue'
-import NcIconSvgWrapper from '../NcIconSvgWrapper/NcIconSvgWrapper.vue'
+import NcIconToggleSwitch from '../NcIconToggleSwitch/NcIconToggleSwitch.vue'
 import { createElementId } from '../../utils/createElementId.ts'
 
 const props = withDefaults(defineProps<{
@@ -85,11 +84,7 @@ watch(model, () => {
 				role="switch"
 				:aria-describedby="descriptionId"
 				:disabled="disabled">
-			<NcIconSvgWrapper
-				:path="model ? mdiToggleSwitch : mdiToggleSwitchOff"
-				:class="$style.formBoxSwitch__icon"
-				:size="34 /* --default-clickable-area */"
-				inline />
+			<NcIconToggleSwitch :checked="modelValue" inline />
 		</template>
 	</NcFormBoxItem>
 </template>
@@ -108,14 +103,6 @@ input.formBoxSwitch__input {
 	height: auto;
 	cursor: inherit;
 }
-
-.formBoxSwitch__icon {
-	color: var(--color-text-maxcontrast);
-}
-
-input:checked + .formBoxSwitch__icon {
-	color: var(--color-primary-element);
-}
 </style>
 
 <docs>

src/components/NcIconToggleSwitch/NcIconToggleSwitch.vue

@@ -0,0 +1,65 @@
+<!--
+  - SPDX-FileCopyrightText: 2025 Nextcloud GmbH and Nextcloud contributors
+  - SPDX-License-Identifier: AGPL-3.0-or-later
+-->
+
+<script lang="ts">
+const svg = `<svg
+	xmlns="http://www.w3.org/2000/svg"
+	viewBox="0 0 24 12">
+	<path d="M17,1H7A5,5 0 0,0 2,6 5,5 0 0,0 7,11H17A5,5 0 0,0 22,6 5,5 0 0,0 17,1Z" />
+	<circle
+		cy="6"
+		r="3"
+		fill="var(--color-main-background)" />
+</svg>`
+</script>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import NcIconSvgWrapper from '../NcIconSvgWrapper/NcIconSvgWrapper.vue'
+
+const props = withDefaults(defineProps<{
+	/** Whether the toggle switch is checked */
+	checked: boolean
+	/** Size of the icon */
+	size?: number
+	/** NcIconSvgWrapper's inline prop */
+	inline?: boolean
+}>(), {
+	size: 34,
+	inline: false,
+})
+
+const color = computed(() => props.checked ? 'var(--color-primary-element)' : 'var(--color-text-maxcontrast)')
+const cx = computed(() => props.checked ? 'calc(17 / 24 * 100%)' : 'calc(7 / 24 * 100%)')
+</script>
+
+<template>
+	<NcIconSvgWrapper
+		:class="$style.iconToggleSwitch"
+		:svg="svg"
+		:size="size"
+		:inline="inline" />
+</template>
+
+<style module lang="scss">
+.iconToggleSwitch {
+	color: v-bind(color);
+	transition: color var(--animation-quick) ease;
+
+	svg {
+		/* Unlike other icons, this icon is not a square */
+		height: auto !important;
+	}
+
+	circle {
+		cx: v-bind(cx);
+		transition: cx var(--animation-quick) ease;
+	}
+}
+</style>
+
+<docs>
+Private component
+</docs>

styleguide.config.js

@@ -211,6 +211,7 @@ module.exports = async () => {
 					'src/components/NcTextArea/*.vue',
 					'src/components/NcPopover/NcPopoverTriggerProvider.vue',
 					'src/components/NcFormBox/NcFormBoxItem.vue',
+					'src/components/NcIconToggleSwitch/NcIconToggleSwitch.vue',
 				],
 				sections: [
 					{