From ea7f37d674f480b3986eb7982140d7811aa5102a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Maikel=20David=20P=C3=A9rez=20G=C3=B3mez?=
 <mdperez86@gmail.com>
Date: Fri, 24 Feb 2023 18:21:08 -0300
Subject: [PATCH] Rebasing from trunk

---
 .../changelog/add-35851-tree-control-expander |   2 +-
 .../stories/index.tsx                         | 102 +-----------------
 .../experimental-tree-control/tree-item.scss  |   3 +-
 3 files changed, 4 insertions(+), 103 deletions(-)

diff --git a/packages/js/components/changelog/add-35851-tree-control-expander b/packages/js/components/changelog/add-35851-tree-control-expander
index 6ab735b76db3..943ea1225d56 100644
--- a/packages/js/components/changelog/add-35851-tree-control-expander
+++ b/packages/js/components/changelog/add-35851-tree-control-expander
@@ -1,4 +1,4 @@
 Significance: minor
 Type: dev
 
-Add tree-control expand/collapse on click the expander button or by a custom logic
+Add TreeControl expand/collapse functionality.
diff --git a/packages/js/components/src/experimental-tree-control/stories/index.tsx b/packages/js/components/src/experimental-tree-control/stories/index.tsx
index 53fbbaed854b..5ec34fdb1459 100644
--- a/packages/js/components/src/experimental-tree-control/stories/index.tsx
+++ b/packages/js/components/src/experimental-tree-control/stories/index.tsx
@@ -10,6 +10,7 @@ import React, { createElement, useCallback, useState } from 'react';
  */
 import { TreeControl } from '../tree-control';
 import { Item, LinkedTree } from '../types';
+import '../tree.scss';
 
 const listItems: Item[] = [
 	{ value: '1', label: 'Technology' },
@@ -120,107 +121,6 @@ function getItemLabel( item: LinkedTree, text: string ) {
 	);
 }
 
-export const CustomItemLabelOnSearch: React.FC = () => {
-	const [ filter, setFilter ] = useState( '' );
-
-	return (
-		<>
-			<TextControl value={ filter } onChange={ setFilter } />
-			<BaseControl
-				label="Custom item label on search"
-				id="custom-item-label-on-search"
-			>
-				<TreeControl
-					id="custom-item-label-on-search"
-					items={ listItems }
-					getItemLabel={ ( item ) => getItemLabel( item, filter ) }
-					shouldItemBeExpanded={ ( item ) =>
-						shouldItemBeExpanded( item, filter )
-					}
-				/>
-			</BaseControl>
-		</>
-	);
-};
-
-export const CustomItemLabel: React.FC = () => {
-	function renderCustomItemLabel( item: LinkedTree ) {
-		return (
-			<div style={ { display: 'flex', gap: 8 } }>
-				<div
-					style={ {
-						width: 36,
-						height: 36,
-						backgroundColor: '#ccc',
-						borderRadius: 2,
-					} }
-				/>
-				<div
-					style={ {
-						display: 'flex',
-						flexDirection: 'column',
-					} }
-				>
-					<strong>{ item.data.label }</strong>
-					<small>Some item description</small>
-				</div>
-			</div>
-		);
-	}
-
-	return (
-		<BaseControl label="Custom item label" id="custom-item-label">
-			<TreeControl
-				id="custom-item-label"
-				items={ listItems }
-				getItemLabel={ renderCustomItemLabel }
-			/>
-		</BaseControl>
-	);
-};
-
-function getItemLabel( item: LinkedTree, text: string ) {
-	return (
-		<span>
-			{ text
-				? interpolate( {
-						mixedString: item.data.label.replace(
-							new RegExp( text, 'ig' ),
-							( group ) => `{{bold}}${ group }{{/bold}}`
-						),
-						components: {
-							bold: <b />,
-						},
-				  } )
-				: item.data.label }
-		</span>
-	);
-}
-
-export const CustomItemLabelOnSearch: React.FC = () => {
-	const [ text, setText ] = useState( '' );
-
-	return (
-		<>
-			<TextControl value={ text } onChange={ setText } />
-			<BaseControl
-				label="Custom item label on search"
-				id="custom-item-label-on-search"
-			>
-				<TreeControl
-					id="custom-item-label-on-search"
-					items={ listItems }
-					getItemLabel={ ( item ) => getItemLabel( item, text ) }
-					isItemExpanded={ useCallback(
-						( item ) => isItemExpanded( item, text ),
-						[ text ]
-					) }
-				/>
-			</BaseControl>
-		</>
-	);
-};
-
 export const SelectionSingle: React.FC = () => {
 	const [ selected, setSelected ] = useState( listItems[ 1 ] );
 
diff --git a/packages/js/components/src/experimental-tree-control/tree-item.scss b/packages/js/components/src/experimental-tree-control/tree-item.scss
index fa8d50498541..44f7258158f7 100644
--- a/packages/js/components/src/experimental-tree-control/tree-item.scss
+++ b/packages/js/components/src/experimental-tree-control/tree-item.scss
@@ -1,4 +1,4 @@
-$control-size: clac( $gap - $gap-smaller );
+$control-size: $gap-large;
 
 .experimental-woocommerce-tree-item {
 	margin: 0;
@@ -62,6 +62,7 @@ $control-size: clac( $gap - $gap-smaller );
 		svg.components-checkbox-control__checked,
 		svg.components-checkbox-control__indeterminate,
 		.components-checkbox-control__input[type='checkbox'] {
+			position: absolute;
 			border-color: $gray-700;
 			width: $control-size;
 			height: $control-size;