Fixes the checkbox appearance (#17571)

* Fixes the checkbox appearance

* using checkbox control

* fixing issues found by review

* fix for e2e

* fix test selector

* fix test selector pretty please

* fix test o' c'mon!

packages/e2e-tests/specs/taxonomies.test.js

@@ -31,11 +31,9 @@ describe( 'Taxonomies', () => {
 		return page.evaluate(
 			() => {
 				return Array.from( document.querySelectorAll(
-					'.editor-post-taxonomies__hierarchical-terms-input:checked'
+					'.editor-post-taxonomies__hierarchical-terms-choice .components-checkbox-control__input:checked'
 				) ).map( ( node ) => {
-					return node.parentElement.querySelector(
-						'label'
-					).innerText;
+					return node.parentElement.nextSibling.innerText;
 				} );
 			}
 		);
@@ -83,7 +81,7 @@ describe( 'Taxonomies', () => {
 		await page.click( '.editor-post-taxonomies__hierarchical-terms-submit' );
 
 		// Wait for the categories to load.
-		await page.waitForSelector( '.editor-post-taxonomies__hierarchical-terms-input:checked' );
+		await page.waitForSelector( '.editor-post-taxonomies__hierarchical-terms-choice .components-checkbox-control__input:checked' );
 
 		let selectedCategories = await getSelectCategories();
 
@@ -101,7 +99,7 @@ describe( 'Taxonomies', () => {
 		await page.reload();
 
 		// Wait for the categories to load.
-		await page.waitForSelector( '.editor-post-taxonomies__hierarchical-terms-input:checked' );
+		await page.waitForSelector( '.editor-post-taxonomies__hierarchical-terms-choice .components-checkbox-control__input:checked' );
 
 		selectedCategories = await getSelectCategories();
 

packages/editor/src/components/post-taxonomies/hierarchical-term-selector.js

@@ -8,7 +8,7 @@ import { get, unescape as unescapeString, without, find, some, invoke } from 'lo
  */
 import { __, _x, _n, sprintf } from '@wordpress/i18n';
 import { Component } from '@wordpress/element';
-import { TreeSelect, withSpokenMessages, withFilters, Button } from '@wordpress/components';
+import { CheckboxControl, TreeSelect, withSpokenMessages, withFilters, Button } from '@wordpress/components';
 import { withSelect, withDispatch } from '@wordpress/data';
 import { withInstanceId, compose } from '@wordpress/compose';
 import apiFetch from '@wordpress/api-fetch';
@@ -55,9 +55,8 @@ class HierarchicalTermSelector extends Component {
 		};
 	}
 
-	onChange( event ) {
+	onChange( termId ) {
 		const { onUpdateTerms, terms = [], taxonomy } = this.props;
-		const termId = parseInt( event.target.value, 10 );
 		const hasTerm = terms.indexOf( termId ) !== -1;
 		const newTerms = hasTerm ?
 			without( terms, termId ) :
@@ -316,18 +315,16 @@ class HierarchicalTermSelector extends Component {
 	renderTerms( renderedTerms ) {
 		const { terms = [] } = this.props;
 		return renderedTerms.map( ( term ) => {
-			const id = `editor-post-taxonomies-hierarchical-term-${ term.id }`;
 			return (
 				<div key={ term.id } className="editor-post-taxonomies__hierarchical-terms-choice">
-					<input
-						id={ id }
-						className="editor-post-taxonomies__hierarchical-terms-input"
-						type="checkbox"
+					<CheckboxControl
 						checked={ terms.indexOf( term.id ) !== -1 }
-						value={ term.id }
-						onChange={ this.onChange }
+						onChange={ () => {
+							const termId = parseInt( term.id, 10 );
+							this.onChange( termId );
+						} }
+						label={ unescapeString( term.name ) }
 					/>
-					<label htmlFor={ id }>{ unescapeString( term.name ) }</label>
 					{ !! term.children.length && (
 						<div className="editor-post-taxonomies__hierarchical-terms-subchoices">
 							{ this.renderTerms( term.children ) }

packages/editor/src/components/post-taxonomies/style.scss

@@ -10,10 +10,6 @@
 	margin-bottom: 8px;
 }
 
-.editor-post-taxonomies__hierarchical-terms-input[type="checkbox"] {
-	margin-top: 0;
-}
-
 .editor-post-taxonomies__hierarchical-terms-subchoices {
 	margin-top: 8px;
 	margin-left: $panel-padding;