Rebasing from trunk

woocommerce · Feb 24, 2023 · e2268f7 · e2268f7
1 parent 915fc36
commit e2268f7
Show file tree

Hide file tree

Showing 2 changed files with 3 additions and 102 deletions.
diff --git 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
@@ -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;