Fade the value selection field in the Attributes modal when no attrib…

…ute is added (woocommerce#35700) * Fade the value selection field in the Attributes modal when no attribute is added * Fix linter errors
vikcon · Nov 24, 2022 · 3ff334b · 3ff334b
1 parent ee0a21e
commit 3ff334b
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 1 deletion.
diff --git a/packages/js/components/changelog/enhancement-35568 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
@@ -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
@@ -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 }