Merge pull request #8126 from nextcloud-libraries/backport/8118/stable8

[stable8] feat(NcRadioGroupButton): add disabled state styling to NcRadioGroupButton

Author: susnux

jest.config.js

@@ -64,6 +64,14 @@ module.exports = {
 		'/node_modules/(?!(' + ignorePatterns.join('|') + '))',
 	],
 
+	globals: {
+		'vue-jest': {
+			resources: {
+				scss: ['src/assets/variables.scss'],
+			},
+		},
+	},
+
 	moduleNameMapper: {
 		'\\.(css|scss)$': 'jest-transform-stub',
 		'\\?raw$': 'jest-raw-loader',

src/components/NcRadioGroup/NcRadioGroup.vue

@@ -166,7 +166,7 @@ The radio group also allows to create a button like styling together with the `N
 		<h4>With icons</h4>
 		<div style="max-width: 250px">
 			<NcRadioGroup v-model="alignment" label="Example alignment with icons" hide-label>
-				<NcRadioGroupButton aria-label="Start" value="start">
+				<NcRadioGroupButton aria-label="Start" value="start" disabled>
 					<template #icon>
 						<NcIconSvgWrapper directional :path="mdiAlignHorizontalLeft" />
 					</template>

src/components/NcRadioGroupButton/NcRadioGroupButton.vue

@@ -24,6 +24,11 @@ const props = defineProps<{
 	 * The value that should be assigned to the `modelValue` of the `NcRadioGroup`.
 	 */
 	value: string
+
+	/**
+	 * Disabled state of the radio button
+	 */
+	disabled?: boolean
 }>()
 
 const labelId = createElementId()
@@ -38,6 +43,10 @@ const isChecked = computed(() => radioGroup?.value.modelValue === props.value)
  * Handle updating the current model value
  */
 function onUpdate() {
+	if (props.disabled) {
+		return
+	}
+
 	radioGroup!.value.onUpdate(props.value)
 }
 </script>
@@ -46,6 +55,7 @@ function onUpdate() {
 	<div
 		:class="[{
 			[$style.radioGroupButton_active]: isChecked,
+			[$style.radioGroupButton_disabled]: disabled,
 		}, $style.radioGroupButton, formBoxItemClass]"
 		@click="onUpdate">
 		<div v-if="$scopedSlots.icon" :class="$style.radioGroupButton__icon">
@@ -63,6 +73,7 @@ function onUpdate() {
 			class="hidden-visually"
 			:checked="isChecked"
 			type="radio"
+			:disabled="disabled"
 			:value="value"
 			@input="onUpdate">
 	</div>
@@ -105,7 +116,7 @@ function onUpdate() {
 		padding-inline-start: var(--radio-group-button--padding);
 	}
 
-	&:hover {
+	&:hover:not(.radioGroupButton_disabled) {
 		background-color: var(--radio-group-button--background-color-hover);
 	}
 
@@ -127,6 +138,17 @@ function onUpdate() {
 	font-weight: bold;
 }
 
+.radioGroupButton_disabled {
+	filter: saturate($opacity_normal);
+	opacity: $opacity_disabled;
+
+	// Reset the cursor
+	cursor: default;
+	* {
+		cursor: default;
+	}
+}
+
 .radioGroupButton__icon {
 	--radio-group-button--icon-size: calc(var(--default-clickable-area) - 4px);
 	display: flex;