feat(@clayui/css): LPD-68820 Adds dividers for solid color buttons in btn-group

Author: pat270

packages/clay-css/src/scss/cadmin/components/_button-groups.scss

@@ -148,3 +148,43 @@
 		}
 	}
 }
+
+%clay-btn-group-divider {
+	$_not-first-of-type: map-get(
+		$cadmin-clay-btn-group-divider,
+		'&:not(:first-of-type)'
+	);
+
+	@if ($_not-first-of-type) {
+		&:not(:first-of-type) {
+			@include clay-css($_not-first-of-type);
+		}
+	}
+
+	$_not-last-of-type: map-get(
+		$cadmin-clay-btn-group-divider,
+		'&:not(:last-of-type)'
+	);
+
+	@if ($_not-last-of-type) {
+		&:not(:last-of-type) {
+			@include clay-css($_not-last-of-type);
+		}
+	}
+}
+
+.btn-group {
+	@each $name, $value in $cadmin-btn-group-palette {
+		@if not clay-is-map-unset($value) {
+			$selector: if(
+				starts-with($name, 'btn'),
+				str-insert($name, '.', 1),
+				$name
+			);
+
+			#{$selector} {
+				@include clay-button-variant($value);
+			}
+		}
+	}
+}

packages/clay-css/src/scss/cadmin/variables/_buttons.scss

@@ -394,6 +394,44 @@ $cadmin-btn-group-spaced: map-merge(
 	$cadmin-btn-group-spaced
 );
 
+$cadmin-clay-btn-group-divider: () !default;
+$cadmin-clay-btn-group-divider: map-deep-merge(
+	(
+		'&:not(:first-of-type)': (
+			border-left-color: $cadmin-white,
+		),
+		'&:not(:last-of-type)': (
+			border-right-color: $cadmin-white,
+		),
+	),
+	$cadmin-clay-btn-group-divider
+);
+
+$cadmin-btn-group-palette: () !default;
+$cadmin-btn-group-palette: map-deep-merge(
+	(
+		'> .btn-primary': (
+			extend: '%clay-btn-group-divider',
+		),
+		'> .btn-info': (
+			extend: '%clay-btn-group-divider',
+		),
+		'> .btn-success': (
+			extend: '%clay-btn-group-divider',
+		),
+		'> .btn-warning': (
+			extend: '%clay-btn-group-divider',
+		),
+		'> .btn-danger': (
+			extend: '%clay-btn-group-divider',
+		),
+		'> .btn-dark': (
+			extend: '%clay-btn-group-divider',
+		),
+	),
+	$cadmin-btn-group-palette
+);
+
 // Button Toolbar
 
 $cadmin-btn-toolbar-spacer-x: 8px !default; // 8px

packages/clay-css/src/scss/components/_button-groups.scss

@@ -28,6 +28,11 @@
 		margin-left: math-sign($btn-border-width);
 	}
 
+	> .btn::after {
+		content: '';
+		display: block;
+	}
+
 	> .btn:not(:last-child):not(.dropdown-toggle),
 	> .btn-group:not(:last-child) > .btn {
 		@include border-right-radius(0);
@@ -206,3 +211,43 @@
 		}
 	}
 }
+
+%clay-btn-group-divider {
+	$_not-first-of-type: map-get(
+		$clay-btn-group-divider,
+		'&:not(:first-of-type)'
+	);
+
+	@if ($_not-first-of-type) {
+		&:not(:first-of-type) {
+			@include clay-css($_not-first-of-type);
+		}
+	}
+
+	$_not-last-of-type: map-get(
+		$clay-btn-group-divider,
+		'&:not(:last-of-type)'
+	);
+
+	@if ($_not-last-of-type) {
+		&:not(:last-of-type) {
+			@include clay-css($_not-last-of-type);
+		}
+	}
+}
+
+.btn-group {
+	@each $name, $value in $btn-group-palette {
+		@if not clay-is-map-unset($value) {
+			$selector: if(
+				starts-with($name, 'btn'),
+				str-insert($name, '.', 1),
+				$name
+			);
+
+			#{$selector} {
+				@include clay-button-variant($value);
+			}
+		}
+	}
+}

packages/clay-css/src/scss/variables/_buttons.scss

@@ -386,6 +386,44 @@ $btn-group-spaced: map-merge(
 	$btn-group-spaced
 );
 
+$clay-btn-group-divider: () !default;
+$clay-btn-group-divider: map-deep-merge(
+	(
+		'&:not(:first-of-type)': (
+			border-left-color: $white,
+		),
+		'&:not(:last-of-type)': (
+			border-right-color: $white,
+		),
+	),
+	$clay-btn-group-divider
+);
+
+$btn-group-palette: () !default;
+$btn-group-palette: map-deep-merge(
+	(
+		'> .btn-primary': (
+			extend: '%clay-btn-group-divider',
+		),
+		'> .btn-info': (
+			extend: '%clay-btn-group-divider',
+		),
+		'> .btn-success': (
+			extend: '%clay-btn-group-divider',
+		),
+		'> .btn-warning': (
+			extend: '%clay-btn-group-divider',
+		),
+		'> .btn-danger': (
+			extend: '%clay-btn-group-divider',
+		),
+		'> .btn-dark': (
+			extend: '%clay-btn-group-divider',
+		),
+	),
+	$btn-group-palette
+);
+
 // Button Toolbar
 
 $btn-toolbar-spacer-x: 0.5rem !default; // 8px