Highlight selected item when it's a single selection tree

woocommerce · Jan 16, 2023 · 2a0480e · 2a0480e
1 parent 42e6d06
commit 2a0480e
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 1 deletion.
diff --git a/packages/js/components/src/experimental-tree-control/tree-item.scss b/packages/js/components/src/experimental-tree-control/tree-item.scss
@@ -3,6 +3,12 @@ $control-size: clac( $gap - $gap-smaller );
 .experimental-woocommerce-tree-item {
 	margin: 0;
 
+	&--highlighted {
+		> .experimental-woocommerce-tree-item__heading {
+			background-color: #f6f7f7;
+		}
+	}
+
 	&__heading {
 		display: flex;
 		flex-grow: 1;

diff --git a/packages/js/components/src/experimental-tree-control/tree-item.tsx b/packages/js/components/src/experimental-tree-control/tree-item.tsx
@@ -35,7 +35,12 @@ export const TreeItem = forwardRef( function ForwardedTreeItem(
 			{ ...treeItemProps }
 			className={ classNames(
 				treeItemProps.className,
-				'experimental-woocommerce-tree-item'
+				'experimental-woocommerce-tree-item',
+				{
+					'experimental-woocommerce-tree-item--highlighted':
+						! selection.multiple &&
+						selection.checkedStatus === 'checked',
+				}
 			) }
 		>
 			<div