disable feature toggles on main toggle (#38678)

Automattic · Aug 2, 2024 · 362ff62 · 362ff62
1 parent a2a9a9a
commit 362ff62
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 1 deletion.
diff --git a/projects/plugins/jetpack/changelog/add-jetpack-ai-breve-disable-controls-on-toggle b/projects/plugins/jetpack/changelog/add-jetpack-ai-breve-disable-controls-on-toggle
@@ -0,0 +1,4 @@
+Significance: patch
+Type: other
+
+Jetpack AI Breve: disable feature toggles on main toggle
diff --git a/projects/plugins/jetpack/extensions/plugins/ai-assistant-plugin/components/breve/breve.scss b/projects/plugins/jetpack/extensions/plugins/ai-assistant-plugin/components/breve/breve.scss
@@ -4,12 +4,16 @@
 	margin-bottom: 24px;
 
 	.components-checkbox-control {
-		&__input {
+		&__input:not(:disabled) {
 			@include features-colors( ( 'border-color' ) );
 			&:checked {
 				@include features-colors( ( 'background-color' ) );
 			}
 		}
+		&__input:disabled {
+			border-color: #ddd;
+			background-color: #ddd;
+		}
 	}
 
 	.components-toggle-control {

diff --git a/projects/plugins/jetpack/extensions/plugins/ai-assistant-plugin/components/breve/controls.js b/projects/plugins/jetpack/extensions/plugins/ai-assistant-plugin/components/breve/controls.js
@@ -118,6 +118,8 @@ const Controls = ( { blocks, disabledFeatures } ) => {
 					<div className="feature-checkboxes-container">
 						{ features.map( feature => (
 							<CheckboxControl
+								className={ isProofreadEnabled ? '' : 'is-disabled' }
+								disabled={ ! isProofreadEnabled }
 								data-type={ feature.config.name }
 								key={ feature.config.name }
 								label={ feature.config.title }