Merge pull request #21581 from Yoast/d-claassen/disable-autocomplete-…

…field-desc Improve disabled state of UI library field components
Yoast · Sep 3, 2024 · 674f65d · 674f65d
2 parents d26269b + a86132e
commit 674f65d
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 4 deletions.
diff --git a/packages/ui-library/src/components/autocomplete-field/index.js b/packages/ui-library/src/components/autocomplete-field/index.js
@@ -10,13 +10,15 @@ import { useDescribedBy } from "../../hooks";
  * @param {Object} validation The validation state.
  * @param {string} [className] Optional CSS class.
  * @param {string} label Label.
+ * @param {Boolean} [disabled] Disabled state.
  * @param {JSX.node} [description] Optional description.
  * @param {Object} [props] Any extra props.
  * @returns {JSX.Element} AutocompleteField component.
  */
 const AutocompleteField = forwardRef( ( {
 	id,
 	label,
+	disabled,
 	description,
 	validation,
 	className,
@@ -25,7 +27,7 @@ const AutocompleteField = forwardRef( ( {
 	const { ids, describedBy } = useDescribedBy( id, { validation: validation?.message, description } );
 
 	return (
-		<div className={ classNames( "yst-autocomplete-field", className ) }>
+		<div className={ classNames( "yst-autocomplete-field", disabled && "yst-autocomplete-field--disabled", className ) }>
 			<Autocomplete
 				ref={ ref }
 				id={ id }
@@ -37,6 +39,7 @@ const AutocompleteField = forwardRef( ( {
 				validation={ validation }
 				className="yst-autocomplete-field__select"
 				buttonProps={ { "aria-describedby": describedBy } }
+				disabled={ disabled }
 				{ ...props }
 			/>
 			{ validation?.message && (
@@ -55,6 +58,7 @@ AutocompleteField.displayName = "AutocompleteField";
 AutocompleteField.propTypes = {
 	id: PropTypes.string.isRequired,
 	label: PropTypes.string.isRequired,
+	disabled: PropTypes.bool,
 	description: PropTypes.node,
 	validation: PropTypes.shape( {
 		variant: PropTypes.string,
@@ -63,6 +67,7 @@ AutocompleteField.propTypes = {
 	className: PropTypes.string,
 };
 AutocompleteField.defaultProps = {
+	disabled: false,
 	description: null,
 	validation: {},
 	className: "",

diff --git a/packages/ui-library/src/components/autocomplete-field/style.css b/packages/ui-library/src/components/autocomplete-field/style.css
@@ -1,5 +1,16 @@
 @layer components {
 	.yst-root {
+		.yst-autocomplete-field--disabled {
+			.yst-autocomplete-field__label,
+			.yst-autocomplete-field__description {
+				@apply yst-opacity-50;
+			}
+
+			.yst-autocomplete-field__label {
+				@apply yst-cursor-not-allowed;
+			}
+		}
+
 		.yst-autocomplete-field__description {
 			@apply yst-mt-2;
 		}

diff --git a/packages/ui-library/src/components/tag-field/style.css b/packages/ui-library/src/components/tag-field/style.css
@@ -3,7 +3,11 @@
 		.yst-tag-field--disabled {
 			.yst-tag-field__label,
 			.yst-tag-field__description {
-				@apply yst-opacity-50 yst-cursor-not-allowed;
+				@apply yst-opacity-50;
+			}
+
+			.yst-tag-field__label {
+				@apply yst-cursor-not-allowed;
 			}
 		}
 

diff --git a/packages/ui-library/src/components/toggle-field/style.css b/packages/ui-library/src/components/toggle-field/style.css
@@ -14,8 +14,7 @@
 			}
 
 			.yst-toggle-field__label,
-			.yst-toggle-field__label-wrapper,
-			.yst-toggle-field__description {
+			.yst-toggle-field__label-wrapper {
 				@apply yst-cursor-not-allowed;
 			}
 		}