add rounded, first and last props to manage border radius

Signed-off-by: Julien Veyssier <[email protected]>

src/components/CheckboxRadioSwitch/CheckboxRadioSwitch.vue

@@ -155,6 +155,9 @@ export default {
 			'checkbox-radio-switch--disabled': disabled,
 			'checkbox-radio-switch--indeterminate': indeterminate,
 			'checkbox-radio-switch--button-variant': buttonVariant,
+			'checkbox-radio-switch--button-variant-rounded': buttonVariantRounded,
+			'checkbox-radio-switch--button-variant-first': buttonVariantFirst,
+			'checkbox-radio-switch--button-variant-last': buttonVariantLast,
 		}"
 		:style="cssVars"
 		class="checkbox-radio-switch">
@@ -240,6 +243,30 @@ export default {
 			default: false,
 		},
 
+		/**
+		 * Toggle the rounded corners for the alternative button style
+		 */
+		buttonVariantRounded: {
+			type: Boolean,
+			default: false,
+		},
+
+		/**
+		 * Toggle the top left and right rounded corners for the alternative button style
+		 */
+		buttonVariantFirst: {
+			type: Boolean,
+			default: false,
+		},
+
+		/**
+		 * Toggle the bottom left and right rounded corners for the alternative button style
+		 */
+		buttonVariantLast: {
+			type: Boolean,
+			default: false,
+		},
+
 		/**
 		 * Checked state. To be used with `:value.sync`
 		 */
@@ -494,9 +521,29 @@ $spacing: 4px;
 		color: var(--color-primary-element-light);
 	}
 
+	&--button-variant &__label {
+		border-radius: 0;
+		width: 100%;
+		margin: 0;
+	}
+
+	&--button-variant-rounded {
+		border-radius: var(--border-radius-large);
+	}
+
+	&--button-variant-first {
+		border-top-left-radius: var(--border-radius-large);
+		border-top-right-radius: var(--border-radius-large);
+	}
+	&--button-variant-last {
+		border-bottom-left-radius: var(--border-radius-large);
+		border-bottom-right-radius: var(--border-radius-large);
+	}
+
 	&--button-variant.checkbox-radio-switch {
 		border: 2px solid var(--color-border-dark);
-		border-radius: var(--border-radius);
+		// better than setting border-radius on labels (producing a small gap)
+		overflow: hidden;
 
 		// avoid double borders between elements
 		& + &:not(&--checked) {
@@ -521,11 +568,5 @@ $spacing: 4px;
 			}
 		}
 	}
-
-	&--button-variant &__label {
-		border-radius: 0 !important;
-		width: 100% !important;
-		margin: 0 !important;
-	}
 }
 </style>