CheckboxControl: replace margin overrides with new opt-in prop (#45434)

* CheckboxControl: replace margin overrides with new opt-in prop * Fix failing snapshots
WordPress · Nov 3, 2022 · 3325937 · 3325937
1 parent 8d4958b
commit 3325937
Show file tree

Hide file tree

Showing 13 changed files with 23 additions and 17 deletions.
diff --git a/packages/block-editor/src/components/block-lock/modal.js b/packages/block-editor/src/components/block-lock/modal.js
@@ -114,6 +114,7 @@ export default function BlockLockModal( { clientId, onClose } ) {
 					className="block-editor-block-lock-modal__options"
 				>
 					<CheckboxControl
+						__nextHasNoMarginBottom
 						className="block-editor-block-lock-modal__options-title"
 						label={
 							<span id={ instanceId }>{ __( 'Lock all' ) }</span>
@@ -134,6 +135,7 @@ export default function BlockLockModal( { clientId, onClose } ) {
 						{ allowsEditLocking && (
 							<li className="block-editor-block-lock-modal__checklist-item">
 								<CheckboxControl
+									__nextHasNoMarginBottom
 									label={
 										<>
 											{ __( 'Restrict editing' ) }
@@ -158,6 +160,7 @@ export default function BlockLockModal( { clientId, onClose } ) {
 						) }
 						<li className="block-editor-block-lock-modal__checklist-item">
 							<CheckboxControl
+								__nextHasNoMarginBottom
 								label={
 									<>
 										{ __( 'Disable movement' ) }
@@ -181,6 +184,7 @@ export default function BlockLockModal( { clientId, onClose } ) {
 						</li>
 						<li className="block-editor-block-lock-modal__checklist-item">
 							<CheckboxControl
+								__nextHasNoMarginBottom
 								label={
 									<>
 										{ __( 'Prevent removal' ) }

diff --git a/packages/block-editor/src/components/block-lock/style.scss b/packages/block-editor/src/components/block-lock/style.scss
@@ -22,7 +22,6 @@
 	.components-base-control__field {
 		align-items: center;
 		display: flex;
-		margin: 0;
 	}
 }
 .block-editor-block-lock-modal__checklist-item {
@@ -32,7 +31,6 @@
 	.components-base-control__field {
 		align-items: center;
 		display: flex;
-		margin: 0;
 	}
 
 	.components-checkbox-control__label {

diff --git a/packages/edit-post/src/components/block-manager/category.js b/packages/edit-post/src/components/block-manager/category.js
@@ -88,6 +88,7 @@ function BlockManagerCategory( { title, blockTypes } ) {
 			className="edit-post-block-manager__category"
 		>
 			<CheckboxControl
+				__nextHasNoMarginBottom
 				checked={ isAllChecked }
 				onChange={ toggleAllVisible }
 				className="edit-post-block-manager__category-title"

diff --git a/packages/edit-post/src/components/block-manager/checklist.js b/packages/edit-post/src/components/block-manager/checklist.js
@@ -13,6 +13,7 @@ function BlockTypesChecklist( { blockTypes, value, onItemChange } ) {
 					className="edit-post-block-manager__checklist-item"
 				>
 					<CheckboxControl
+						__nextHasNoMarginBottom
 						label={
 							<>
 								{ blockType.title }

diff --git a/packages/edit-post/src/components/block-manager/style.scss b/packages/edit-post/src/components/block-manager/style.scss
@@ -55,7 +55,6 @@
 	.components-base-control__field {
 		align-items: center;
 		display: flex;
-		margin: 0;
 	}
 }
 

diff --git a/packages/editor/src/components/entities-saved-states/entity-record-item.js b/packages/editor/src/components/entities-saved-states/entity-record-item.js
@@ -77,6 +77,7 @@ export default function EntityRecordItem( {
 	return (
 		<PanelRow>
 			<CheckboxControl
+				__nextHasNoMarginBottom
 				label={
 					<strong>
 						{ decodeEntities( entityRecordTitle ) ||

diff --git a/packages/editor/src/components/post-comments/index.js b/packages/editor/src/components/post-comments/index.js
@@ -19,6 +19,7 @@ function PostComments( { commentStatus = 'open', ...props } ) {
 
 	return (
 		<CheckboxControl
+			__nextHasNoMarginBottom
 			label={ __( 'Allow comments' ) }
 			checked={ commentStatus === 'open' }
 			onChange={ onToggleComments }

diff --git a/packages/editor/src/components/post-pending-status/index.js b/packages/editor/src/components/post-pending-status/index.js
@@ -21,6 +21,7 @@ export function PostPendingStatus( { status, onUpdateStatus } ) {
 	return (
 		<PostPendingStatusCheck>
 			<CheckboxControl
+				__nextHasNoMarginBottom
 				label={ __( 'Pending review' ) }
 				checked={ status === 'pending' }
 				onChange={ togglePendingStatus }

diff --git a/packages/editor/src/components/post-pingbacks/index.js b/packages/editor/src/components/post-pingbacks/index.js
@@ -19,6 +19,7 @@ function PostPingbacks( { pingStatus = 'open', ...props } ) {
 
 	return (
 		<CheckboxControl
+			__nextHasNoMarginBottom
 			label={ __( 'Allow pingbacks & trackbacks' ) }
 			checked={ pingStatus === 'open' }
 			onChange={ onTogglePingback }

diff --git a/packages/editor/src/components/post-publish-panel/index.js b/packages/editor/src/components/post-publish-panel/index.js
@@ -125,6 +125,7 @@ export class PostPublishPanel extends Component {
 				</div>
 				<div className="editor-post-publish-panel__footer">
 					<CheckboxControl
+						__nextHasNoMarginBottom
 						label={ __( 'Always show pre-publish checks.' ) }
 						checked={ isPublishSidebarEnabled }
 						onChange={ onTogglePublishSidebar }

diff --git a/packages/editor/src/components/post-publish-panel/test/__snapshots__/index.js.snap b/packages/editor/src/components/post-publish-panel/test/__snapshots__/index.js.snap
@@ -31,6 +31,10 @@ exports[`PostPublishPanel should render the post-publish panel if the post is pu
   padding: 0;
 }
 
+.components-panel__row .emotion-8 {
+  margin-bottom: inherit;
+}
+
 <div>
   <div
     class="editor-post-publish-panel"
@@ -141,7 +145,7 @@ exports[`PostPublishPanel should render the post-publish panel if the post is pu
         class="components-base-control components-checkbox-control emotion-0 emotion-1"
       >
         <div
-          class="components-base-control__field emotion-2 emotion-3"
+          class="components-base-control__field emotion-8 emotion-3"
         >
           <span
             class="components-checkbox-control__input-container"
@@ -197,6 +201,10 @@ exports[`PostPublishPanel should render the post-publish panel if the post is sc
   padding: 0;
 }
 
+.components-panel__row .emotion-8 {
+  margin-bottom: inherit;
+}
+
 <div>
   <div
     class="editor-post-publish-panel"
@@ -307,7 +315,7 @@ exports[`PostPublishPanel should render the post-publish panel if the post is sc
         class="components-base-control components-checkbox-control emotion-0 emotion-1"
       >
         <div
-          class="components-base-control__field emotion-2 emotion-3"
+          class="components-base-control__field emotion-8 emotion-3"
         >
           <span
             class="components-checkbox-control__input-container"
@@ -345,10 +353,6 @@ exports[`PostPublishPanel should render the pre-publish panel if post status is
   box-sizing: inherit;
 }
 
-.emotion-2 {
-  margin-bottom: calc(4px * 2);
-}
-
 .components-panel__row .emotion-2 {
   margin-bottom: inherit;
 }
@@ -472,10 +476,6 @@ exports[`PostPublishPanel should render the pre-publish panel if the post is not
   box-sizing: inherit;
 }
 
-.emotion-2 {
-  margin-bottom: calc(4px * 2);
-}
-
 .components-panel__row .emotion-2 {
   margin-bottom: inherit;
 }
@@ -641,10 +641,6 @@ exports[`PostPublishPanel should render the spinner if the post is being saved 1
   box-sizing: inherit;
 }
 
-.emotion-8 {
-  margin-bottom: calc(4px * 2);
-}
-
 .components-panel__row .emotion-8 {
   margin-bottom: inherit;
 }

diff --git a/packages/editor/src/components/post-sticky/index.js b/packages/editor/src/components/post-sticky/index.js
@@ -16,6 +16,7 @@ export function PostSticky( { onUpdateSticky, postSticky = false } ) {
 	return (
 		<PostStickyCheck>
 			<CheckboxControl
+				__nextHasNoMarginBottom
 				label={ __( 'Stick to the top of the blog' ) }
 				checked={ postSticky }
 				onChange={ () => onUpdateSticky( ! postSticky ) }

diff --git a/packages/editor/src/components/post-taxonomies/hierarchical-term-selector.js b/packages/editor/src/components/post-taxonomies/hierarchical-term-selector.js
@@ -358,6 +358,7 @@ export function HierarchicalTermSelector( { slug } ) {
 					className="editor-post-taxonomies__hierarchical-terms-choice"
 				>
 					<CheckboxControl
+						__nextHasNoMarginBottom
 						checked={ terms.indexOf( term.id ) !== -1 }
 						onChange={ () => {
 							const termId = parseInt( term.id, 10 );