Simplify checkbox markup.

google · Sep 29, 2024 · 22a70b6 · 22a70b6
1 parent ce0d4da
commit 22a70b6
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 18 deletions.
diff --git a/assets/js/googlesitekit/components-gm2/Checkbox.js b/assets/js/googlesitekit/components-gm2/Checkbox.js
@@ -49,13 +49,6 @@ export default function Checkbox( props ) {
 		badge,
 	} = props;
 
-	const label = (
-		<div className="mdc-checkbox__label-wrapper">
-			<label htmlFor={ id }>{ children }</label>
-			{ badge }
-		</div>
-	);
-
 	return (
 		<div className="mdc-form-field">
 			<div
@@ -98,16 +91,17 @@ export default function Checkbox( props ) {
 				) }
 			</div>
 
-			{ ! description && label }
-
-			{ description && (
-				<div className="mdc-checkbox__content">
-					{ label }
+			<div className="mdc-checkbox__content">
+				<div className="mdc-checkbox__label">
+					<label htmlFor={ id }>{ children }</label>
+					{ badge }
+				</div>
+				{ description && (
 					<div className="mdc-checkbox__description">
 						{ description }
 					</div>
-				</div>
-			) }
+				) }
+			</div>
 		</div>
 	);
 }

diff --git a/assets/sass/vendor/_mdc-checkbox.scss b/assets/sass/vendor/_mdc-checkbox.scss
@@ -1,5 +1,6 @@
 // Overrides for .mdc-checkbox
 .googlesitekit-plugin {
+
 	.mdc-checkbox {
 
 		@include mdc-checkbox-container-colors($c-surfaces-on-surface, $c-base, $c-surfaces-on-surface, $c-black, true);
@@ -40,13 +41,13 @@
 		&.mdc-checkbox--align-left {
 			margin-left: -11px;
 		}
+	}
 
-		+ .mdc-checkbox__content {
-			padding-left: 4px;
-		}
+	.mdc-checkbox__content {
+		padding-left: 4px;
 	}
 
-	.mdc-checkbox__label-wrapper {
+	.mdc-checkbox__label {
 
 		&:has(.googlesitekit-badge) {
 			align-items: center;