From 860cc032764e18468ed4061dac47755fa4d88865 Mon Sep 17 00:00:00 2001
From: Julien Veyssier <eneiluj@posteo.net>
Date: Fri, 10 Jun 2022 15:52:54 +0200
Subject: [PATCH 1/4] new CheckboxRadioSwitch prop to enable alternative style,
 for radio type only

Signed-off-by: Julien Veyssier <eneiluj@posteo.net>
---
 .../CheckboxRadioSwitch.vue                   | 73 ++++++++++++++++++-
 1 file changed, 70 insertions(+), 3 deletions(-)

diff --git a/src/components/CheckboxRadioSwitch/CheckboxRadioSwitch.vue b/src/components/CheckboxRadioSwitch/CheckboxRadioSwitch.vue
index a0b75eb5ca..1b56122597 100644
--- a/src/components/CheckboxRadioSwitch/CheckboxRadioSwitch.vue
+++ b/src/components/CheckboxRadioSwitch/CheckboxRadioSwitch.vue
@@ -70,6 +70,27 @@ export default {
 		sharingPermission: {{ sharingPermission }}
 	</div>
 </template>
+<script>
+	export default {
+		data() {
+			return {
+				sharingPermission: 'r',
+			}
+		}
+	}
+</script>
+```
+
+### Standard radio set with alternative style
+```vue
+<template>
+	<div>
+		<CheckboxRadioSwitch :checked.sync="sharingPermission" value="r" name="sharing_permission_radio" type="radio" :alternative-style="true">Default permission read</CheckboxRadioSwitch>
+		<CheckboxRadioSwitch :checked.sync="sharingPermission" value="rw" name="sharing_permission_radio" type="radio" :alternative-style="true">Default permission read+write</CheckboxRadioSwitch>
+		<br>
+		sharingPermission: {{ sharingPermission }}
+	</div>
+</template>
 <script>
 export default {
 	data() {
@@ -133,6 +154,7 @@ export default {
 			'checkbox-radio-switch--checked': isChecked,
 			'checkbox-radio-switch--disabled': disabled,
 			'checkbox-radio-switch--indeterminate': indeterminate,
+			'checkbox-radio-switch--alternate-radio': isAlternativeRadio,
 		}"
 		:style="cssVars"
 		class="checkbox-radio-switch">
@@ -149,7 +171,7 @@ export default {
 		<label :for="id" class="checkbox-radio-switch__label">
 			<div v-if="loading" class="icon-loading-small checkbox-radio-switch__icon" />
 			<icon :is="checkboxRadioIconElement"
-				v-else
+				v-else-if="!isAlternativeRadio"
 				:size="size"
 				class="checkbox-radio-switch__icon"
 				title=""
@@ -210,6 +232,14 @@ export default {
 			validator: type => type === TYPE_CHECKBOX || type === TYPE_RADIO || type === TYPE_SWITCH,
 		},
 
+		/**
+		 * Toggle the alternative style (for radio type only)
+		 */
+		alternativeStyle: {
+			type: Boolean,
+			default: false,
+		},
+
 		/**
 		 * Checked state. To be used with `:value.sync`
 		 */
@@ -295,6 +325,10 @@ export default {
 			return TYPE_CHECKBOX
 		},
 
+		isAlternativeRadio() {
+			return this.type === TYPE_RADIO && this.alternativeStyle
+		},
+
 		/**
 		 * Check if that entry is checked
 		 * If value is defined, we use that as the checked value
@@ -459,10 +493,43 @@ $spacing: 4px;
 		color: var(--color-text-lighter);
 	}
 
-	// If  switch is checked AND disabled, use the fade primary colour
+	// If switch is checked AND disabled, use the fade primary colour
 	&-switch.checkbox-radio-switch--disabled.checkbox-radio-switch--checked &__icon {
 		color: var(--color-primary-element-light);
 	}
-}
 
+	&.checkbox-radio-switch--alternate-radio.checkbox-radio-switch {
+		border: 2px solid var(--color-border-dark);
+		border-radius: var(--border-radius);
+
+		// avoid double borders between elements
+		& + &:not(&--checked) {
+			border-top: 0;
+		}
+		& + &--checked {
+			// as the selected element has all borders:
+			// small trick to cover the previous bottom border (only if there is one)
+			margin-top: -2px;
+		}
+
+		&--checked {
+			font-weight: bold;
+			border: 2px solid var(--color-primary-element-light);
+
+			&:hover {
+				border: 2px solid var(--color-primary);
+			}
+
+			label {
+				background-color: var(--color-background-dark);
+			}
+		}
+
+		.checkbox-radio-switch__label {
+			border-radius: 0 !important;
+			width: 100% !important;
+			margin: 0 !important;
+		}
+	}
+}
 </style>

From adef64b32688cf89955d981b1190e1dd16139dd5 Mon Sep 17 00:00:00 2001
From: Julien Veyssier <eneiluj@posteo.net>
Date: Sun, 12 Jun 2022 18:12:07 +0200
Subject: [PATCH 2/4] allow alternative style for all types

Signed-off-by: Julien Veyssier <eneiluj@posteo.net>
---
 .../CheckboxRadioSwitch.vue                   | 30 ++++++++-----------
 1 file changed, 13 insertions(+), 17 deletions(-)

diff --git a/src/components/CheckboxRadioSwitch/CheckboxRadioSwitch.vue b/src/components/CheckboxRadioSwitch/CheckboxRadioSwitch.vue
index 1b56122597..5e03d1623b 100644
--- a/src/components/CheckboxRadioSwitch/CheckboxRadioSwitch.vue
+++ b/src/components/CheckboxRadioSwitch/CheckboxRadioSwitch.vue
@@ -81,12 +81,12 @@ export default {
 </script>
 ```
 
-### Standard radio set with alternative style
+### Standard radio set with alternative button style
 ```vue
 <template>
 	<div>
-		<CheckboxRadioSwitch :checked.sync="sharingPermission" value="r" name="sharing_permission_radio" type="radio" :alternative-style="true">Default permission read</CheckboxRadioSwitch>
-		<CheckboxRadioSwitch :checked.sync="sharingPermission" value="rw" name="sharing_permission_radio" type="radio" :alternative-style="true">Default permission read+write</CheckboxRadioSwitch>
+		<CheckboxRadioSwitch :checked.sync="sharingPermission" value="r" name="sharing_permission_radio" type="radio" :button-variant="true">Default permission read</CheckboxRadioSwitch>
+		<CheckboxRadioSwitch :checked.sync="sharingPermission" value="rw" name="sharing_permission_radio" type="radio" :button-variant="true">Default permission read+write</CheckboxRadioSwitch>
 		<br>
 		sharingPermission: {{ sharingPermission }}
 	</div>
@@ -154,7 +154,7 @@ export default {
 			'checkbox-radio-switch--checked': isChecked,
 			'checkbox-radio-switch--disabled': disabled,
 			'checkbox-radio-switch--indeterminate': indeterminate,
-			'checkbox-radio-switch--alternate-radio': isAlternativeRadio,
+			'checkbox-radio-switch--button-variant': buttonVariant,
 		}"
 		:style="cssVars"
 		class="checkbox-radio-switch">
@@ -171,7 +171,7 @@ export default {
 		<label :for="id" class="checkbox-radio-switch__label">
 			<div v-if="loading" class="icon-loading-small checkbox-radio-switch__icon" />
 			<icon :is="checkboxRadioIconElement"
-				v-else-if="!isAlternativeRadio"
+				v-else-if="!buttonVariant"
 				:size="size"
 				class="checkbox-radio-switch__icon"
 				title=""
@@ -233,9 +233,9 @@ export default {
 		},
 
 		/**
-		 * Toggle the alternative style (for radio type only)
+		 * Toggle the alternative button style
 		 */
-		alternativeStyle: {
+		buttonVariant: {
 			type: Boolean,
 			default: false,
 		},
@@ -325,10 +325,6 @@ export default {
 			return TYPE_CHECKBOX
 		},
 
-		isAlternativeRadio() {
-			return this.type === TYPE_RADIO && this.alternativeStyle
-		},
-
 		/**
 		 * Check if that entry is checked
 		 * If value is defined, we use that as the checked value
@@ -498,7 +494,7 @@ $spacing: 4px;
 		color: var(--color-primary-element-light);
 	}
 
-	&.checkbox-radio-switch--alternate-radio.checkbox-radio-switch {
+	&--button-variant.checkbox-radio-switch {
 		border: 2px solid var(--color-border-dark);
 		border-radius: var(--border-radius);
 
@@ -524,12 +520,12 @@ $spacing: 4px;
 				background-color: var(--color-background-dark);
 			}
 		}
+	}
 
-		.checkbox-radio-switch__label {
-			border-radius: 0 !important;
-			width: 100% !important;
-			margin: 0 !important;
-		}
+	&--button-variant &__label {
+		border-radius: 0 !important;
+		width: 100% !important;
+		margin: 0 !important;
 	}
 }
 </style>

From 6732a9173a9c5405734331369fe03aa76b833e22 Mon Sep 17 00:00:00 2001
From: Julien Veyssier <eneiluj@posteo.net>
Date: Fri, 17 Jun 2022 14:15:28 +0200
Subject: [PATCH 3/4] use :first-of-type and :last-of-type for grouped elements

Signed-off-by: Julien Veyssier <eneiluj@posteo.net>
---
 .../CheckboxRadioSwitch.vue                   | 47 ++++++++++++++-----
 1 file changed, 36 insertions(+), 11 deletions(-)

diff --git a/src/components/CheckboxRadioSwitch/CheckboxRadioSwitch.vue b/src/components/CheckboxRadioSwitch/CheckboxRadioSwitch.vue
index 5e03d1623b..16e38a97ae 100644
--- a/src/components/CheckboxRadioSwitch/CheckboxRadioSwitch.vue
+++ b/src/components/CheckboxRadioSwitch/CheckboxRadioSwitch.vue
@@ -155,6 +155,7 @@ export default {
 			'checkbox-radio-switch--disabled': disabled,
 			'checkbox-radio-switch--indeterminate': indeterminate,
 			'checkbox-radio-switch--button-variant': buttonVariant,
+			'checkbox-radio-switch--button-variant-grouped': buttonVariantGrouped,
 		}"
 		:style="cssVars"
 		class="checkbox-radio-switch">
@@ -240,6 +241,14 @@ export default {
 			default: false,
 		},
 
+		/**
+		 * If the elements are all direct successors
+		 */
+		buttonVariantGrouped: {
+			type: Boolean,
+			default: false,
+		},
+
 		/**
 		 * Checked state. To be used with `:value.sync`
 		 */
@@ -494,19 +503,41 @@ $spacing: 4px;
 		color: var(--color-primary-element-light);
 	}
 
-	&--button-variant.checkbox-radio-switch {
-		border: 2px solid var(--color-border-dark);
-		border-radius: var(--border-radius);
+	&--button-variant &__label {
+		border-radius: 0;
+		width: 100%;
+		margin: 0;
+	}
+
+	&--button-variant:not(&--button-variant-grouped) {
+		border-radius: var(--border-radius-large);
+	}
+
+	&--button-variant-grouped {
+		&:first-of-type {
+			border-top-left-radius: var(--border-radius-large);
+			border-top-right-radius: var(--border-radius-large);
+		}
+		&:last-of-type {
+			border-bottom-left-radius: var(--border-radius-large);
+			border-bottom-right-radius: var(--border-radius-large);
+		}
 
 		// avoid double borders between elements
-		& + &:not(&--checked) {
+		& + &:not(&.checkbox-radio-switch--checked) {
 			border-top: 0;
 		}
-		& + &--checked {
+		& + &.checkbox-radio-switch--checked {
 			// as the selected element has all borders:
 			// small trick to cover the previous bottom border (only if there is one)
 			margin-top: -2px;
 		}
+	}
+
+	&--button-variant.checkbox-radio-switch {
+		border: 2px solid var(--color-border-dark);
+		// better than setting border-radius on labels (producing a small gap)
+		overflow: hidden;
 
 		&--checked {
 			font-weight: bold;
@@ -521,11 +552,5 @@ $spacing: 4px;
 			}
 		}
 	}
-
-	&--button-variant &__label {
-		border-radius: 0 !important;
-		width: 100% !important;
-		margin: 0 !important;
-	}
 }
 </style>

From 114301e4bb04667f4b344c2fa9c2491e768af12f Mon Sep 17 00:00:00 2001
From: Julien Veyssier <eneiluj@posteo.net>
Date: Mon, 20 Jun 2022 11:59:53 +0200
Subject: [PATCH 4/4] add buttonVariantGrouped prop to choose group style

Signed-off-by: Julien Veyssier <eneiluj@posteo.net>
---
 .../CheckboxRadioSwitch.vue                   | 41 +++++++++++++++----
 1 file changed, 33 insertions(+), 8 deletions(-)

diff --git a/src/components/CheckboxRadioSwitch/CheckboxRadioSwitch.vue b/src/components/CheckboxRadioSwitch/CheckboxRadioSwitch.vue
index 16e38a97ae..a8efc64043 100644
--- a/src/components/CheckboxRadioSwitch/CheckboxRadioSwitch.vue
+++ b/src/components/CheckboxRadioSwitch/CheckboxRadioSwitch.vue
@@ -85,8 +85,8 @@ export default {
 ```vue
 <template>
 	<div>
-		<CheckboxRadioSwitch :checked.sync="sharingPermission" value="r" name="sharing_permission_radio" type="radio" :button-variant="true">Default permission read</CheckboxRadioSwitch>
-		<CheckboxRadioSwitch :checked.sync="sharingPermission" value="rw" name="sharing_permission_radio" type="radio" :button-variant="true">Default permission read+write</CheckboxRadioSwitch>
+		<CheckboxRadioSwitch :checked.sync="sharingPermission" value="r" name="sharing_permission_radio" type="radio" :button-variant="true" button-variant-grouped="vertical">Default permission read</CheckboxRadioSwitch>
+		<CheckboxRadioSwitch :checked.sync="sharingPermission" value="rw" name="sharing_permission_radio" type="radio" :button-variant="true" button-variant-grouped="vertical">Default permission read+write</CheckboxRadioSwitch>
 		<br>
 		sharingPermission: {{ sharingPermission }}
 	</div>
@@ -155,7 +155,8 @@ export default {
 			'checkbox-radio-switch--disabled': disabled,
 			'checkbox-radio-switch--indeterminate': indeterminate,
 			'checkbox-radio-switch--button-variant': buttonVariant,
-			'checkbox-radio-switch--button-variant-grouped': buttonVariantGrouped,
+			'checkbox-radio-switch--button-variant-v-grouped': buttonVariant && buttonVariantGrouped === 'vertical',
+			'checkbox-radio-switch--button-variant-h-grouped': buttonVariant && buttonVariantGrouped === 'horizontal',
 		}"
 		:style="cssVars"
 		class="checkbox-radio-switch">
@@ -242,11 +243,14 @@ export default {
 		},
 
 		/**
-		 * If the elements are all direct successors
+		 * Are the elements are all direct siblings?
+		 * If so they will be grouped horizontally or vertically
+		 * Possible values are `no`, `horizontal`, `vertical`.
 		 */
 		buttonVariantGrouped: {
-			type: Boolean,
-			default: false,
+			type: String,
+			default: 'no',
+			validator: v => ['no', 'vertical', 'horizontal'].includes(v),
 		},
 
 		/**
@@ -509,11 +513,11 @@ $spacing: 4px;
 		margin: 0;
 	}
 
-	&--button-variant:not(&--button-variant-grouped) {
+	&--button-variant:not(&--button-variant-v-grouped):not(&--button-variant-h-grouped) {
 		border-radius: var(--border-radius-large);
 	}
 
-	&--button-variant-grouped {
+	&--button-variant-v-grouped {
 		&:first-of-type {
 			border-top-left-radius: var(--border-radius-large);
 			border-top-right-radius: var(--border-radius-large);
@@ -534,6 +538,27 @@ $spacing: 4px;
 		}
 	}
 
+	&--button-variant-h-grouped {
+		&:first-of-type {
+			border-top-left-radius: var(--border-radius-large);
+			border-bottom-left-radius: var(--border-radius-large);
+		}
+		&:last-of-type {
+			border-top-right-radius: var(--border-radius-large);
+			border-bottom-right-radius: var(--border-radius-large);
+		}
+
+		// avoid double borders between elements
+		& + &:not(&.checkbox-radio-switch--checked) {
+			border-left: 0;
+		}
+		& + &.checkbox-radio-switch--checked {
+			// as the selected element has all borders:
+			// small trick to cover the previous bottom border (only if there is one)
+			margin-left: -2px;
+		}
+	}
+
 	&--button-variant.checkbox-radio-switch {
 		border: 2px solid var(--color-border-dark);
 		// better than setting border-radius on labels (producing a small gap)