From c8826b261555035d846d593aad8f1cf4cdc1c1e5 Mon Sep 17 00:00:00 2001
From: Patrick Yeo <patrick.yeo@liferay.com>
Date: Fri, 15 Oct 2021 13:08:31 -0700
Subject: [PATCH] feat(@clayui/css): Cadmin Custom Forms `custom-control`,
 `custom-checkbox`, and `custom-radio` convert to using Sass map pattern

---
 .../scss/cadmin/components/_custom-forms.scss | 180 +----------
 .../scss/cadmin/variables/_custom-forms.scss  | 282 ++++++++++++++++--
 2 files changed, 277 insertions(+), 185 deletions(-)

diff --git a/packages/clay-css/src/scss/cadmin/components/_custom-forms.scss b/packages/clay-css/src/scss/cadmin/components/_custom-forms.scss
index 9b8301ac80..792acb803c 100644
--- a/packages/clay-css/src/scss/cadmin/components/_custom-forms.scss
+++ b/packages/clay-css/src/scss/cadmin/components/_custom-forms.scss
@@ -66,14 +66,15 @@
 	@include clay-css($cadmin-custom-control);
 
 	&:only-child {
-		margin-bottom: 0;
+		$only-child: setter(map-get($cadmin-custom-control, only-child), ());
+
+		@include clay-css($only-child);
 	}
 
 	label {
-		cursor: map-get($cadmin-custom-control-label, cursor);
-		display: inline;
-		font-size: $cadmin-font-size-base;
-		margin-bottom: 0;
+		$label: setter(map-get($cadmin-custom-control, label), ());
+
+		@include clay-css($label);
 	}
 }
 
@@ -82,7 +83,7 @@
 }
 
 label.custom-control-label {
-	font-size: map-get($cadmin-custom-control-label, font-size);
+	@include clay-css($cadmin-label-custom-control-label);
 }
 
 .custom-control-label-text {
@@ -105,182 +106,31 @@ label.custom-control-label {
 // Custom Control Indicator
 
 .custom-control-label::before {
-	background-color: $cadmin-custom-control-indicator-bg;
-	border-color: $cadmin-custom-control-indicator-border-color;
-	border-style: $cadmin-custom-control-indicator-border-style;
-	border-width: $cadmin-custom-control-indicator-border-width;
-
-	@include box-shadow($cadmin-custom-control-indicator-box-shadow);
-
-	content: '';
-	display: block;
-	float: left;
-	font-size: $cadmin-custom-control-indicator-size;
-	height: $cadmin-custom-control-indicator-size;
-	left: 0;
-	position: relative;
-	top: $cadmin-custom-control-indicator-position-top;
-
-	@include transition($cadmin-custom-forms-transition);
+	$before: setter(map-get($cadmin-custom-control-label, before), ());
 
-	width: $cadmin-custom-control-indicator-size;
+	@include clay-css($before);
 }
 
 .custom-control-label::after {
-	background: no-repeat 50% / #{$cadmin-custom-control-indicator-bg-size};
-	content: '';
-	display: block;
-	height: $cadmin-custom-control-indicator-size;
-	left: 0;
-	position: absolute;
-	top: $cadmin-custom-control-indicator-position-top;
-	width: $cadmin-custom-control-indicator-size;
-}
-
-.custom-control-input {
-	cursor: $cadmin-form-check-input-cursor;
-	height: $cadmin-custom-control-indicator-size;
-	left: 0;
-	opacity: 0;
-	position: absolute;
-	top: $cadmin-custom-control-indicator-position-top;
-	width: $cadmin-custom-control-indicator-size;
-	z-index: 1;
-
-	&:focus ~ .custom-control-label::before {
-		@if $cadmin-enable-shadows {
-			box-shadow: $cadmin-input-box-shadow, $cadmin-input-focus-box-shadow;
-		} @else {
-			box-shadow: $cadmin-custom-control-indicator-focus-box-shadow;
-		}
-	}
-
-	&:focus:not(:checked) ~ .custom-control-label::before {
-		border-color: $cadmin-custom-control-indicator-focus-border-color;
-	}
-
-	&:active ~ .custom-control-label::before {
-		background-color: $cadmin-custom-control-indicator-active-bg;
-		border-color: $cadmin-custom-control-indicator-active-border-color;
+	$after: setter(map-get($cadmin-custom-control-label, after), ());
 
-		@include box-shadow($cadmin-custom-control-indicator-active-box-shadow);
-
-		color: $cadmin-custom-control-indicator-active-color;
-	}
-
-	&:active:checked ~ .custom-control-label::before {
-		background-color: $cadmin-custom-control-indicator-checked-active-bg;
-		border-color: $cadmin-custom-control-indicator-checked-active-border-color;
-	}
-
-	&:checked ~ .custom-control-label::before {
-		@include gradient-bg($cadmin-custom-control-indicator-checked-bg);
-
-		border-color: $cadmin-custom-control-indicator-checked-border-color;
-
-		@include box-shadow(
-			$cadmin-custom-control-indicator-checked-box-shadow
-		);
-
-		color: $cadmin-custom-control-indicator-checked-color;
-	}
-
-	// Use [disabled] and :disabled to work around https://github.com/twbs/bootstrap/issues/28247
-
-	&[disabled],
-	&:disabled {
-		cursor: $cadmin-custom-control-indicator-disabled-cursor;
-
-		~ .custom-control-label::before {
-			background-color: $cadmin-custom-control-indicator-disabled-bg;
-			border-color: $cadmin-custom-control-indicator-disabled-border-color;
-			box-shadow: none;
-		}
-
-		~ .custom-control-label {
-			@include clay-container($cadmin-custom-control-label-disabled);
-		}
-	}
-
-	&:disabled:checked ~ .custom-control-label::before {
-		background-color: $cadmin-custom-control-indicator-checked-disabled-bg;
-		border-color: $cadmin-custom-control-indicator-checked-disabled-border-color;
-	}
+	@include clay-css($after);
 }
 
-.custom-control .custom-control-input:focus ~ .custom-control-label::before {
-	box-shadow: $cadmin-custom-control-indicator-focus-box-shadow;
+.custom-control-input {
+	@include clay-custom-control-input-variant($cadmin-custom-control-input);
 }
 
 // Custom Checkbox
 
 .custom-checkbox {
-	.custom-control-input {
-		&:checked ~ .custom-control-label::after {
-			background-image: escape-svg(
-				$cadmin-custom-checkbox-indicator-icon-checked
-			);
-			background-size: $cadmin-custom-checkbox-indicator-icon-checked-bg-size;
-		}
-
-		&:indeterminate ~ .custom-control-label::before {
-			@include gradient-bg(
-				$cadmin-custom-checkbox-indicator-indeterminate-bg
-			);
-
-			border-color: $cadmin-custom-control-indicator-indeterminate-border-color;
-
-			@include box-shadow(
-				$cadmin-custom-checkbox-indicator-indeterminate-box-shadow
-			);
-		}
-
-		&:indeterminate ~ .custom-control-label::after {
-			background-image: escape-svg(
-				$cadmin-custom-checkbox-indicator-icon-indeterminate
-			);
-			background-size: $cadmin-custom-checkbox-indicator-icon-indeterminate-bg-size;
-		}
-
-		&:disabled:checked ~ .custom-control-label::before {
-			background-color: $cadmin-custom-control-indicator-checked-disabled-bg;
-		}
-
-		&:disabled:indeterminate ~ .custom-control-label::before {
-			background-color: $cadmin-custom-control-indicator-checked-disabled-bg;
-			border-color: $cadmin-custom-control-indicator-checked-disabled-border-color;
-		}
-	}
-
-	.custom-control-label::before {
-		@include border-radius($cadmin-custom-checkbox-indicator-border-radius);
-	}
+	@include clay-custom-control-variant($cadmin-custom-checkbox);
 }
 
 // Custom Radio
 
 .custom-radio {
-	.custom-control-input {
-		&:checked ~ .custom-control-label::after {
-			background-image: escape-svg(
-				$cadmin-custom-radio-indicator-icon-checked
-			);
-			background-size: $cadmin-custom-radio-indicator-icon-checked-bg-size;
-		}
-
-		&:disabled ~ .custom-control-label::before {
-			border-color: $cadmin-custom-radio-indicator-disabled-border-color;
-		}
-
-		&:disabled:checked ~ .custom-control-label::before {
-			background-color: $cadmin-custom-control-indicator-checked-disabled-bg;
-			border-color: $cadmin-custom-radio-indicator-checked-disabled-border-color;
-		}
-	}
-
-	.custom-control-label::before {
-		border-radius: $cadmin-custom-radio-indicator-border-radius;
-	}
+	@include clay-custom-control-variant($cadmin-custom-radio);
 }
 
 // Custom Control Inline
diff --git a/packages/clay-css/src/scss/cadmin/variables/_custom-forms.scss b/packages/clay-css/src/scss/cadmin/variables/_custom-forms.scss
index 66856270c4..14ff3e4923 100644
--- a/packages/clay-css/src/scss/cadmin/variables/_custom-forms.scss
+++ b/packages/clay-css/src/scss/cadmin/variables/_custom-forms.scss
@@ -18,7 +18,8 @@ $cadmin-custom-control-indicator-focus-box-shadow: $cadmin-component-focus-box-s
 
 $cadmin-custom-control-indicator-active-bg: $cadmin-white !default;
 $cadmin-custom-control-indicator-active-box-shadow: inset 0 0 0 1px
-	rgba(0, 0, 0, 0.1) !default;
+		rgba(0, 0, 0, 0.1),
+	$cadmin-custom-control-indicator-focus-box-shadow !default;
 $cadmin-custom-control-indicator-active-border-color: $cadmin-custom-control-indicator-border-color !default;
 $cadmin-custom-control-indicator-active-color: $cadmin-component-active-color !default;
 
@@ -31,7 +32,7 @@ $cadmin-custom-control-indicator-disabled-cursor: $cadmin-disabled-cursor !defau
 $cadmin-custom-control-indicator-checked-bg: $cadmin-component-active-bg !default;
 $cadmin-custom-control-indicator-checked-color: $cadmin-component-active-color !default;
 $cadmin-custom-control-indicator-checked-border-color: $cadmin-custom-control-indicator-checked-bg !default;
-$cadmin-custom-control-indicator-checked-box-shadow: none !default;
+$cadmin-custom-control-indicator-checked-box-shadow: null !default;
 
 // @deprecated as of v2.2.1 use `$cadmin-custom-control-indicator-checked-active-bg` instead
 
@@ -75,22 +76,7 @@ $cadmin-custom-control-margin-top: null !default;
 $cadmin-custom-control-min-height: $cadmin-custom-control-indicator-size +
 	($cadmin-custom-control-indicator-position-top * 2) !default;
 
-$cadmin-custom-control: () !default;
-$cadmin-custom-control: map-deep-merge(
-	(
-		cursor: $cadmin-custom-control-cursor,
-		display: block,
-		line-height: 1,
-		margin-bottom: $cadmin-custom-control-margin-bottom,
-		margin-top: $cadmin-custom-control-margin-top,
-		min-height: $cadmin-custom-control-min-height,
-		position: relative,
-		text-align: left,
-	),
-	$cadmin-custom-control
-);
-
-// Custom Description
+// .custom-control-label
 
 // @deprecated as of v2.19.0 use the Sass map `$cadmin-custom-control-label` instead
 
@@ -133,6 +119,34 @@ $cadmin-custom-control-label: map-deep-merge(
 		margin-bottom: 0,
 		position: static,
 		vertical-align: top,
+		before: (
+			background-color: $cadmin-custom-control-indicator-bg,
+			border-color: $cadmin-custom-control-indicator-border-color,
+			border-style: $cadmin-custom-control-indicator-border-style,
+			border-width: $cadmin-custom-control-indicator-border-width,
+			box-shadow:
+				clay-enable-shadows($cadmin-custom-control-indicator-box-shadow),
+			content: '',
+			display: block,
+			float: left,
+			font-size: $cadmin-custom-control-indicator-size,
+			height: $cadmin-custom-control-indicator-size,
+			left: 0,
+			position: relative,
+			top: $cadmin-custom-control-indicator-position-top,
+			transition: clay-enable-transitions($cadmin-custom-forms-transition),
+			width: $cadmin-custom-control-indicator-size,
+		),
+		after: (
+			background: no-repeat 50% / #{$cadmin-custom-control-indicator-bg-size},
+			content: '',
+			display: block,
+			height: $cadmin-custom-control-indicator-size,
+			left: 0,
+			position: absolute,
+			top: $cadmin-custom-control-indicator-position-top,
+			width: $cadmin-custom-control-indicator-size,
+		),
 	),
 	$cadmin-custom-control-label
 );
@@ -144,10 +158,27 @@ $cadmin-custom-control-label-disabled: map-deep-merge(
 	(
 		color: $cadmin-custom-control-label-disabled-color,
 		cursor: $cadmin-custom-control-description-disabled-cursor,
+		before: (
+			background-color: $cadmin-custom-control-indicator-disabled-bg,
+			border-color: $cadmin-custom-control-indicator-disabled-border-color,
+			box-shadow: none,
+		),
 	),
 	$cadmin-custom-control-label-disabled
 );
 
+// label.custom-control-label
+
+$cadmin-label-custom-control-label: () !default;
+$cadmin-label-custom-control-label: map-deep-merge(
+	(
+		font-size: map-get($cadmin-custom-control-label, font-size),
+	),
+	$cadmin-label-custom-control-label
+);
+
+// .custom-control-label-text
+
 $cadmin-custom-control-label-text: () !default;
 $cadmin-custom-control-label-text: map-deep-merge(
 	(
@@ -156,6 +187,8 @@ $cadmin-custom-control-label-text: map-deep-merge(
 	$cadmin-custom-control-label-text
 );
 
+// .custom-control-label-text small, .custom-control-label-text .small
+
 $cadmin-custom-control-label-text-small: () !default;
 $cadmin-custom-control-label-text-small: map-deep-merge(
 	(
@@ -164,6 +197,108 @@ $cadmin-custom-control-label-text-small: map-deep-merge(
 	$cadmin-custom-control-label-text-small
 );
 
+$cadmin-custom-control: () !default;
+$cadmin-custom-control: map-deep-merge(
+	(
+		cursor: $cadmin-custom-control-cursor,
+		display: block,
+		line-height: 1,
+		margin-bottom: $cadmin-custom-control-margin-bottom,
+		margin-top: $cadmin-custom-control-margin-top,
+		min-height: $cadmin-custom-control-min-height,
+		position: relative,
+		text-align: left,
+		only-child: (
+			margin-bottom: 0,
+		),
+		label: (
+			cursor: map-get($cadmin-custom-control-label, cursor),
+			display: inline,
+			font-size: $cadmin-font-size-base,
+			margin-bottom: 0,
+		),
+	),
+	$cadmin-custom-control
+);
+
+// .custom-control-input
+
+$cadmin-custom-control-input: () !default;
+$cadmin-custom-control-input: map-deep-merge(
+	(
+		cursor: $cadmin-form-check-input-cursor,
+		height: $cadmin-custom-control-indicator-size,
+		left: 0,
+		opacity: 0,
+		position: absolute,
+		top: $cadmin-custom-control-indicator-position-top,
+		width: $cadmin-custom-control-indicator-size,
+		z-index: 1,
+		focus: (
+			custom-control-label: (
+				before: (
+					border-color:
+						$cadmin-custom-control-indicator-focus-border-color,
+					box-shadow:
+						$cadmin-custom-control-indicator-focus-box-shadow,
+				),
+			),
+		),
+		active: (
+			custom-control-label: (
+				before: (
+					background-color: $cadmin-custom-control-indicator-active-bg,
+					border-color:
+						$cadmin-custom-control-indicator-active-border-color,
+					box-shadow:
+						$cadmin-custom-control-indicator-active-box-shadow,
+					color: $cadmin-custom-control-indicator-active-color,
+				),
+			),
+		),
+		disabled: (
+			cursor: $cadmin-custom-control-indicator-disabled-cursor,
+			custom-control-label: $cadmin-custom-control-label-disabled,
+		),
+		checked: (
+			custom-control-label: (
+				before: (
+					background-color:
+						$cadmin-custom-control-indicator-checked-bg,
+					border-color:
+						$cadmin-custom-control-indicator-checked-border-color,
+					box-shadow:
+						clay-enable-shadows(
+							$cadmin-custom-control-indicator-checked-box-shadow
+						),
+					color: $cadmin-custom-control-indicator-checked-color,
+				),
+			),
+			active: (
+				custom-control-label: (
+					before: (
+						background-color:
+							$cadmin-custom-control-indicator-checked-active-bg,
+						border-color:
+							$cadmin-custom-control-indicator-checked-active-border-color,
+					),
+				),
+			),
+			disabled: (
+				custom-control-label: (
+					before: (
+						background-color:
+							$cadmin-custom-control-indicator-checked-disabled-bg,
+						border-color:
+							$cadmin-custom-control-indicator-checked-disabled-border-color,
+					),
+				),
+			),
+		),
+	),
+	$cadmin-custom-control-input
+);
+
 // Custom Control Primary
 
 $cadmin-custom-control-primary-label-text: () !default;
@@ -174,7 +309,7 @@ $cadmin-custom-control-primary-label-text: map-deep-merge(
 	$cadmin-custom-control-primary-label-text
 );
 
-// Custom Checkbox
+// .custom-checkbox
 
 $cadmin-custom-checkbox-indicator-border-radius: 2px !default; // 2px
 
@@ -198,7 +333,72 @@ $cadmin-custom-checkbox-indicator-icon-indeterminate: clay-icon(
 ) !default;
 $cadmin-custom-checkbox-indicator-icon-indeterminate-bg-size: 100% !default;
 
-// Custom Radio
+$cadmin-custom-checkbox: () !default;
+$cadmin-custom-checkbox: map-deep-merge(
+	(
+		custom-control-input: (
+			custom-control-label: (
+				before: (
+					border-radius:
+						clay-enable-rounded(
+							$cadmin-custom-checkbox-indicator-border-radius
+						),
+				),
+			),
+			checked: (
+				custom-control-label: (
+					after: (
+						background-image:
+							$cadmin-custom-checkbox-indicator-icon-checked,
+						background-size:
+							$cadmin-custom-checkbox-indicator-icon-checked-bg-size,
+					),
+				),
+				disabled: (
+					custom-control-label: (
+						before: (
+							background-color:
+								$cadmin-custom-control-indicator-checked-disabled-bg,
+						),
+					),
+				),
+			),
+			indeterminate: (
+				custom-control-label: (
+					before: (
+						background-color:
+							$cadmin-custom-checkbox-indicator-indeterminate-bg,
+						border-color:
+							$cadmin-custom-control-indicator-indeterminate-border-color,
+						box-shadow:
+							clay-enable-shadows(
+								$cadmin-custom-checkbox-indicator-indeterminate-box-shadow
+							),
+					),
+					after: (
+						background-image:
+							$cadmin-custom-checkbox-indicator-icon-indeterminate,
+						background-size:
+							$cadmin-custom-checkbox-indicator-icon-indeterminate-bg-size,
+					),
+				),
+				disabled: (
+					custom-control-label: (
+						before: (
+							background-color:
+								$cadmin-custom-control-indicator-checked-disabled-bg,
+							border-color:
+								$cadmin-custom-control-indicator-checked-disabled-border-color,
+						),
+					),
+				),
+			),
+		),
+	),
+	$cadmin-custom-checkbox
+);
+
+// .custom-radio
 
 $cadmin-custom-radio-indicator-border-radius: 50% !default;
 
@@ -214,3 +414,45 @@ $cadmin-custom-radio-indicator-disabled-border-color: $cadmin-custom-control-ind
 
 $cadmin-custom-radio-indicator-disabled-checked-border-color: $cadmin-custom-control-indicator-disabled-checked-border-color !default;
 $cadmin-custom-radio-indicator-checked-disabled-border-color: $cadmin-custom-radio-indicator-disabled-checked-border-color !default;
+
+$cadmin-custom-radio: () !default;
+$cadmin-custom-radio: map-deep-merge(
+	(
+		custom-control-input: (
+			custom-control-label: (
+				before: (
+					border-radius: $cadmin-custom-radio-indicator-border-radius,
+				),
+			),
+			disabled: (
+				custom-control-label: (
+					before: (
+						border-color:
+							$cadmin-custom-radio-indicator-disabled-border-color,
+					),
+				),
+			),
+			checked: (
+				custom-control-label: (
+					after: (
+						background-image:
+							$cadmin-custom-radio-indicator-icon-checked,
+						background-size:
+							$cadmin-custom-radio-indicator-icon-checked-bg-size,
+					),
+				),
+				disabled: (
+					custom-control-label: (
+						before: (
+							background-color:
+								$cadmin-custom-control-indicator-checked-disabled-bg,
+							border-color:
+								$cadmin-custom-radio-indicator-checked-disabled-border-color,
+						),
+					),
+				),
+			),
+		),
+	),
+	$cadmin-custom-radio
+);