From 3ff334bec9aa62d14f5ccf3f7beaa7451a11d665 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Maikel=20David=20P=C3=A9rez=20G=C3=B3mez?=
 <mdperez86@gmail.com>
Date: Thu, 24 Nov 2022 14:32:20 -0300
Subject: [PATCH] Fade the value selection field in the Attributes modal when
 no attribute is added (#35700)

* Fade the value selection field in the Attributes modal when no attribute is added

* Fix linter errors
---
 packages/js/components/changelog/enhancement-35568       | 4 ++++
 .../src/experimental-select-control/combo-box.scss       | 4 ++++
 .../src/experimental-select-control/combo-box.tsx        | 9 ++++++++-
 3 files changed, 16 insertions(+), 1 deletion(-)
 create mode 100644 packages/js/components/changelog/enhancement-35568

diff --git a/packages/js/components/changelog/enhancement-35568 b/packages/js/components/changelog/enhancement-35568
new file mode 100644
index 00000000000..5c6dabeaa7e
--- /dev/null
+++ b/packages/js/components/changelog/enhancement-35568
@@ -0,0 +1,4 @@
+Significance: patch
+Type: enhancement
+
+Fade the value selection field in the Attributes modal when no attribute is added
diff --git a/packages/js/components/src/experimental-select-control/combo-box.scss b/packages/js/components/src/experimental-select-control/combo-box.scss
index cf5268ed26c..329d38b7fb6 100644
--- a/packages/js/components/src/experimental-select-control/combo-box.scss
+++ b/packages/js/components/src/experimental-select-control/combo-box.scss
@@ -13,6 +13,10 @@
 	> * {
 		display: inline-flex;
 	}
+
+	&--disabled {
+		opacity: 0.5;
+	}
 }
 
 .woocommerce-experimental-select-control__combox-box {
diff --git a/packages/js/components/src/experimental-select-control/combo-box.tsx b/packages/js/components/src/experimental-select-control/combo-box.tsx
index 6226da4518d..f42f5024d5b 100644
--- a/packages/js/components/src/experimental-select-control/combo-box.tsx
+++ b/packages/js/components/src/experimental-select-control/combo-box.tsx
@@ -3,6 +3,7 @@
  */
 import { createElement, MouseEvent, useRef } from 'react';
 import { Icon, search } from '@wordpress/icons';
+import classNames from 'classnames';
 
 /**
  * Internal dependencies
@@ -40,7 +41,13 @@ export const ComboBox = ( {
 		// Keyboard users are still able to tab to and interact with elements in the combobox.
 		/* eslint-disable jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events */
 		<div
-			className="woocommerce-experimental-select-control__combo-box-wrapper"
+			className={ classNames(
+				'woocommerce-experimental-select-control__combo-box-wrapper',
+				{
+					'woocommerce-experimental-select-control__combo-box-wrapper--disabled':
+						inputProps.disabled,
+				}
+			) }
 			onMouseDown={ maybeFocusInput }
 		>
 			{ children }