Checkbox Component Styling Fix (woocommerce#5164)

* Wrap label in div to prevent clickable area growing too large * Prevent pointer events on svg * Double gap in editor
jonny-bull · Dec 14, 2021 · 5aadec2 · 5aadec2
1 parent 104e8b5
commit 5aadec2
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 33 deletions.
diff --git a/assets/js/blocks/cart-checkout/checkout/inner-blocks/checkout-terms-block/editor.scss b/assets/js/blocks/cart-checkout/checkout/inner-blocks/checkout-terms-block/editor.scss
@@ -12,10 +12,6 @@
 	}
 }
 
-.wc-block-components-checkbox {
-	margin-right: $gap;
-}
-
 .wc-block-checkout__terms_notice .components-notice__action {
 	margin-left: 0;
 }

diff --git a/packages/checkout/components/checkbox-control/index.tsx b/packages/checkout/components/checkbox-control/index.tsx
@@ -35,39 +35,40 @@ const CheckboxControl = ( {
 	const checkboxId = id || `checkbox-control-${ instanceId }`;
 
 	return (
-		<label
+		<div
 			className={ classNames(
 				'wc-block-components-checkbox',
 				{
 					'has-error': hasError,
 				},
 				className
 			) }
-			htmlFor={ checkboxId }
 		>
-			<input
-				id={ checkboxId }
-				className="wc-block-components-checkbox__input"
-				type="checkbox"
-				onChange={ ( event ) => onChange( event.target.checked ) }
-				aria-invalid={ hasError === true }
-				{ ...rest }
-			/>
-			<svg
-				className="wc-block-components-checkbox__mark"
-				aria-hidden="true"
-				xmlns="http://www.w3.org/2000/svg"
-				viewBox="0 0 24 20"
-			>
-				<path d="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z" />
-			</svg>
-			{ label && (
-				<span className="wc-block-components-checkbox__label">
-					{ label }
-				</span>
-			) }
-			{ children }
-		</label>
+			<label htmlFor={ checkboxId }>
+				<input
+					id={ checkboxId }
+					className="wc-block-components-checkbox__input"
+					type="checkbox"
+					onChange={ ( event ) => onChange( event.target.checked ) }
+					aria-invalid={ hasError === true }
+					{ ...rest }
+				/>
+				<svg
+					className="wc-block-components-checkbox__mark"
+					aria-hidden="true"
+					xmlns="http://www.w3.org/2000/svg"
+					viewBox="0 0 24 20"
+				>
+					<path d="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z" />
+				</svg>
+				{ label && (
+					<span className="wc-block-components-checkbox__label">
+						{ label }
+					</span>
+				) }
+				{ children }
+			</label>
+		</div>
 	);
 };
 

diff --git a/packages/checkout/components/checkbox-control/style.scss b/packages/checkout/components/checkbox-control/style.scss
@@ -1,10 +1,13 @@
 .wc-block-components-checkbox {
 	@include reset-typography();
-	align-items: flex-start;
-	display: flex;
-	position: relative;
 	margin-top: em($gap-large);
 
+	label {
+		align-items: flex-start;
+		display: flex;
+		position: relative;
+	}
+
 	.wc-block-components-checkbox__input[type="checkbox"] {
 		font-size: 1em;
 		appearance: none;
@@ -14,6 +17,7 @@
 		height: em(24px);
 		width: em(24px);
 		margin: 0;
+		margin-right: $gap;
 		min-height: 24px;
 		min-width: 24px;
 		overflow: hidden;
@@ -83,6 +87,7 @@
 		margin-top: em(1px);
 		width: em(18px);
 		height: em(18px);
+		pointer-events: none;
 
 		.has-dark-controls & {
 			fill: #fff;
@@ -91,7 +96,6 @@
 
 	> span,
 	.wc-block-components-checkbox__label {
-		padding-left: $gap;
 		vertical-align: middle;
 		line-height: em(24px);
 	}