From c1d4497bf0a9c30bed9a020d2ddc777e4494b5e4 Mon Sep 17 00:00:00 2001
From: Jeff Ong <jeff.ong@automattic.com>
Date: Fri, 9 Aug 2019 05:18:40 -0400
Subject: [PATCH] Fix checkbox alignment issues in options and block manager
 modals (#16860) (#16863)

---
 assets/stylesheets/_z-index.scss              |  5 +-
 .../components/src/checkbox-control/index.js  | 24 ++---
 .../src/checkbox-control/style.scss           | 52 +++++-----
 .../components/manage-blocks-modal/style.scss |  3 +-
 .../enable-custom-fields.js.snap              | 94 +++++++++++--------
 5 files changed, 101 insertions(+), 77 deletions(-)

diff --git a/assets/stylesheets/_z-index.scss b/assets/stylesheets/_z-index.scss
index 949a0101b1f52..b1c3341695204 100644
--- a/assets/stylesheets/_z-index.scss
+++ b/assets/stylesheets/_z-index.scss
@@ -112,7 +112,10 @@ $z-layers: (
 
 	// Make sure corner handles are above side handles for ResizableBox component
 	".components-resizable-box__side-handle": 1,
-	".components-resizable-box__corner-handle": 2
+	".components-resizable-box__corner-handle": 2,
+
+	// Make sure block manager sticky category titles appear above the options
+	".edit-post-manage-blocks-modal__category-title": 1
 );
 
 @function z-index( $key ) {
diff --git a/packages/components/src/checkbox-control/index.js b/packages/components/src/checkbox-control/index.js
index 0cf12f0b9dcd9..77f75a3306498 100644
--- a/packages/components/src/checkbox-control/index.js
+++ b/packages/components/src/checkbox-control/index.js
@@ -15,18 +15,20 @@ function CheckboxControl( { label, className, heading, checked, help, instanceId
 
 	return (
 		<BaseControl label={ heading } id={ id } help={ help } className={ className }>
-			<input
-				id={ id }
-				className="components-checkbox-control__input"
-				type="checkbox"
-				value="1"
-				onChange={ onChangeValue }
-				checked={ checked }
-				aria-describedby={ !! help ? id + '__help' : undefined }
-				{ ...props }
-			/>
-			<label className="components-checkbox-control__label" htmlFor={ id }>
+			<span className="components-checkbox-control__input-container">
+				<input
+					id={ id }
+					className="components-checkbox-control__input"
+					type="checkbox"
+					value="1"
+					onChange={ onChangeValue }
+					checked={ checked }
+					aria-describedby={ !! help ? id + '__help' : undefined }
+					{ ...props }
+				/>
 				{ checked ? <Dashicon icon="yes" className="components-checkbox-control__checked" role="presentation" /> : null }
+			</span>
+			<label className="components-checkbox-control__label" htmlFor={ id }>
 				{ label }
 			</label>
 		</BaseControl>
diff --git a/packages/components/src/checkbox-control/style.scss b/packages/components/src/checkbox-control/style.scss
index 240b1ad7623b8..49c768c73c9aa 100644
--- a/packages/components/src/checkbox-control/style.scss
+++ b/packages/components/src/checkbox-control/style.scss
@@ -1,3 +1,6 @@
+$checkbox-input-size: 16px;
+$checkbox-input-size-sm: 25px; // width + height for small viewports
+
 .components-checkbox-control__input[type="checkbox"] {
 	border: 1px solid #b4b9be;
 	background: #fff;
@@ -6,14 +9,17 @@
 	cursor: pointer;
 	display: inline-block;
 	line-height: 0;
-	height: 16px;
 	margin: 0 4px 0 0;
 	outline: 0;
 	padding: 0 !important;
 	text-align: center;
-	vertical-align: middle;
-	width: 16px;
-	min-width: 16px;
+	vertical-align: top;
+	width: $checkbox-input-size-sm;
+	height: $checkbox-input-size-sm;
+	@include break-small() {
+		height: $checkbox-input-size;
+		width: $checkbox-input-size;
+	}
 	-webkit-appearance: none;
 	box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
 	transition: 0.05s border-color ease-in-out;
@@ -39,34 +45,32 @@
 	}
 }
 
-.components-checkbox-control__label {
+.components-checkbox-control__input-container {
 	position: relative;
+	display: inline-block;
+	margin-right: 12px;
 	vertical-align: middle;
-	line-height: 1;
+	width: $checkbox-input-size-sm;
+	height: $checkbox-input-size-sm;
+	@include break-small() {
+		width: $checkbox-input-size;
+		height: $checkbox-input-size;
+	}
 }
 
 svg.dashicon.components-checkbox-control__checked {
-	width: 21px;
-	height: 21px;
 	fill: #fff;
 	cursor: pointer;
 	position: absolute;
-	left: -31px;
-	bottom: -3px;
+	left: -4px;
+	top: -2px;
+	width: 31px;
+	height: 31px;
+	@include break-small() {
+		width: 21px;
+		height: 21px;
+		left: -3px;
+	}
 	user-select: none;
 	pointer-events: none;
 }
-
-@media screen and ( max-width: 728px ) {
-	.components-checkbox-control__input[type="checkbox"] {
-		width: 25px;
-		height: 25px;
-	}
-
-	svg.dashicon.components-checkbox-control__checked {
-		width: 31px;
-		height: 31px;
-		left: -41px;
-		bottom: -9px;
-	}
-}
diff --git a/packages/edit-post/src/components/manage-blocks-modal/style.scss b/packages/edit-post/src/components/manage-blocks-modal/style.scss
index 8fa6693672f75..46b877d631573 100644
--- a/packages/edit-post/src/components/manage-blocks-modal/style.scss
+++ b/packages/edit-post/src/components/manage-blocks-modal/style.scss
@@ -54,6 +54,7 @@
 	top: 0;
 	padding: $panel-padding 0;
 	background-color: $white;
+	z-index: z-index(".edit-post-manage-blocks-modal__category-title");
 
 	.components-base-control__field {
 		margin-bottom: 0;
@@ -88,7 +89,7 @@
 		margin: 0;
 	}
 
-	.components-modal__content & input[type="checkbox"] {
+	.components-modal__content &.components-checkbox-control__input-container {
 		margin: 0 $grid-size;
 	}
 
diff --git a/packages/edit-post/src/components/options-modal/options/test/__snapshots__/enable-custom-fields.js.snap b/packages/edit-post/src/components/options-modal/options/test/__snapshots__/enable-custom-fields.js.snap
index 71c2036684552..68859d3890024 100644
--- a/packages/edit-post/src/components/options-modal/options/test/__snapshots__/enable-custom-fields.js.snap
+++ b/packages/edit-post/src/components/options-modal/options/test/__snapshots__/enable-custom-fields.js.snap
@@ -10,18 +10,17 @@ exports[`EnableCustomFieldsOption renders a checked checkbox and a confirmation
     <div
       className="components-base-control__field"
     >
-      <input
-        checked={true}
-        className="components-checkbox-control__input"
-        id="inspector-checkbox-control-3"
-        onChange={[Function]}
-        type="checkbox"
-        value="1"
-      />
-      <label
-        className="components-checkbox-control__label"
-        htmlFor="inspector-checkbox-control-3"
+      <span
+        className="components-checkbox-control__input-container"
       >
+        <input
+          checked={true}
+          className="components-checkbox-control__input"
+          id="inspector-checkbox-control-3"
+          onChange={[Function]}
+          type="checkbox"
+          value="1"
+        />
         <svg
           aria-hidden="true"
           className="dashicon dashicons-yes components-checkbox-control__checked"
@@ -36,7 +35,11 @@ exports[`EnableCustomFieldsOption renders a checked checkbox and a confirmation
             d="M14.83 4.89l1.34.94-5.81 8.38H9.02L5.78 9.67l1.34-1.25 2.57 2.4z"
           />
         </svg>
-      </label>
+      </span>
+      <label
+        className="components-checkbox-control__label"
+        htmlFor="inspector-checkbox-control-3"
+      />
     </div>
   </div>
   <p
@@ -65,18 +68,17 @@ exports[`EnableCustomFieldsOption renders a checked checkbox when custom fields
     <div
       className="components-base-control__field"
     >
-      <input
-        checked={true}
-        className="components-checkbox-control__input"
-        id="inspector-checkbox-control-0"
-        onChange={[Function]}
-        type="checkbox"
-        value="1"
-      />
-      <label
-        className="components-checkbox-control__label"
-        htmlFor="inspector-checkbox-control-0"
+      <span
+        className="components-checkbox-control__input-container"
       >
+        <input
+          checked={true}
+          className="components-checkbox-control__input"
+          id="inspector-checkbox-control-0"
+          onChange={[Function]}
+          type="checkbox"
+          value="1"
+        />
         <svg
           aria-hidden="true"
           className="dashicon dashicons-yes components-checkbox-control__checked"
@@ -91,7 +93,11 @@ exports[`EnableCustomFieldsOption renders a checked checkbox when custom fields
             d="M14.83 4.89l1.34.94-5.81 8.38H9.02L5.78 9.67l1.34-1.25 2.57 2.4z"
           />
         </svg>
-      </label>
+      </span>
+      <label
+        className="components-checkbox-control__label"
+        htmlFor="inspector-checkbox-control-0"
+      />
     </div>
   </div>
 </div>
@@ -107,14 +113,18 @@ exports[`EnableCustomFieldsOption renders an unchecked checkbox and a confirmati
     <div
       className="components-base-control__field"
     >
-      <input
-        checked={false}
-        className="components-checkbox-control__input"
-        id="inspector-checkbox-control-2"
-        onChange={[Function]}
-        type="checkbox"
-        value="1"
-      />
+      <span
+        className="components-checkbox-control__input-container"
+      >
+        <input
+          checked={false}
+          className="components-checkbox-control__input"
+          id="inspector-checkbox-control-2"
+          onChange={[Function]}
+          type="checkbox"
+          value="1"
+        />
+      </span>
       <label
         className="components-checkbox-control__label"
         htmlFor="inspector-checkbox-control-2"
@@ -147,14 +157,18 @@ exports[`EnableCustomFieldsOption renders an unchecked checkbox when custom fiel
     <div
       className="components-base-control__field"
     >
-      <input
-        checked={false}
-        className="components-checkbox-control__input"
-        id="inspector-checkbox-control-1"
-        onChange={[Function]}
-        type="checkbox"
-        value="1"
-      />
+      <span
+        className="components-checkbox-control__input-container"
+      >
+        <input
+          checked={false}
+          className="components-checkbox-control__input"
+          id="inspector-checkbox-control-1"
+          onChange={[Function]}
+          type="checkbox"
+          value="1"
+        />
+      </span>
       <label
         className="components-checkbox-control__label"
         htmlFor="inspector-checkbox-control-1"