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

@@ -0,0 +1,4 @@
+Significance: patch
+Type: enhancement
+
+Fade the value selection field in the Attributes modal when no attribute is added

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 {

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 }