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 53fbbaed854b8..5ec34fdb14590 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 (
- <>
-
-
- getItemLabel( item, filter ) }
- shouldItemBeExpanded={ ( item ) =>
- shouldItemBeExpanded( item, filter )
- }
- />
-
- >
- );
-};
-
-export const CustomItemLabel: React.FC = () => {
- function renderCustomItemLabel( item: LinkedTree ) {
- return (
-
-
-
- { item.data.label }
- Some item description
-
-
- );
- }
-
- return (
-
-
-
- );
-};
-
-function getItemLabel( item: LinkedTree, text: string ) {
- return (
-
- { text
- ? interpolate( {
- mixedString: item.data.label.replace(
- new RegExp( text, 'ig' ),
- ( group ) => `{{bold}}${ group }{{/bold}}`
- ),
- components: {
- bold: ,
- },
- } )
- : item.data.label }
-
- );
-}
-
-export const CustomItemLabelOnSearch: React.FC = () => {
- const [ text, setText ] = useState( '' );
-
- return (
- <>
-
-
- getItemLabel( item, text ) }
- isItemExpanded={ useCallback(
- ( item ) => isItemExpanded( item, text ),
- [ text ]
- ) }
- />
-
- >
- );
-};
-
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 fa8d504985410..44f7258158f70 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;