AI Assistant: Fix input z-index on moving block with inline extension (…

…#37322) * add class with z-index to the input wrapper * changelog
Automattic · May 9, 2024 · 9ccd6bb · 9ccd6bb
1 parent e352523
commit 9ccd6bb
Show file tree

Hide file tree

Showing 6 changed files with 22 additions and 1 deletion.
diff --git a/projects/js-packages/ai-client/changelog/fix-jetpack-ai-inline-extension-z-index b/projects/js-packages/ai-client/changelog/fix-jetpack-ai-inline-extension-z-index
@@ -0,0 +1,4 @@
+Significance: patch
+Type: added
+
+AI Client: Add className to AI Control component
diff --git a/projects/js-packages/ai-client/src/components/ai-control/ai-control.tsx b/projects/js-packages/ai-client/src/components/ai-control/ai-control.tsx
@@ -16,6 +16,7 @@ import type { RequestingStateProp } from '../../types.js';
 import type { ReactElement } from 'react';
 
 type AIControlProps = {
+	className?: string;
 	disabled?: boolean;
 	value: string;
 	placeholder?: string;
@@ -37,6 +38,7 @@ type AIControlProps = {
  * @returns {ReactElement}       Rendered component
  */
 export default function AIControl( {
+	className,
 	disabled = false,
 	value = '',
 	placeholder = '',
@@ -51,7 +53,10 @@ export default function AIControl( {
 	wrapperRef = null,
 }: AIControlProps ): ReactElement {
 	return (
-		<div className="jetpack-components-ai-control__container-wrapper" ref={ wrapperRef }>
+		<div
+			className={ classNames( 'jetpack-components-ai-control__container-wrapper', className ) }
+			ref={ wrapperRef }
+		>
 			{ error }
 			<div className="jetpack-components-ai-control__container">
 				{ banner }

diff --git a/projects/js-packages/ai-client/src/components/ai-control/extension-ai-control.tsx b/projects/js-packages/ai-client/src/components/ai-control/extension-ai-control.tsx
@@ -20,6 +20,7 @@ import type { RequestingStateProp } from '../../types.js';
 import type { ReactElement, MouseEvent } from 'react';
 
 type ExtensionAIControlProps = {
+	className?: string;
 	disabled?: boolean;
 	value: string;
 	placeholder?: string;
@@ -49,6 +50,7 @@ type ExtensionAIControlProps = {
  */
 export function ExtensionAIControl(
 	{
+		className,
 		disabled = false,
 		value = '',
 		placeholder = '',
@@ -212,6 +214,7 @@ export function ExtensionAIControl(
 
 	return (
 		<AIControl
+			className={ className }
 			disabled={ disabled || loading }
 			value={ value }
 			placeholder={ placeholder }

diff --git a/projects/plugins/jetpack/changelog/fix-jetpack-ai-inline-extension-z-index b/projects/plugins/jetpack/changelog/fix-jetpack-ai-inline-extension-z-index
@@ -0,0 +1,4 @@
+Significance: patch
+Type: other
+
+AI Assistant: Fix input z-index on moving block with inline extension
diff --git a/.../extensions/blocks/ai-assistant/inline-extensions/components/ai-assistant-input/index.tsx b/.../extensions/blocks/ai-assistant/inline-extensions/components/ai-assistant-input/index.tsx
@@ -11,6 +11,7 @@ import React from 'react';
  */
 import useAICheckout from '../../../hooks/use-ai-checkout';
 import useAiFeature from '../../../hooks/use-ai-feature';
+import './style.scss';
 /*
  * Types
  */
@@ -157,6 +158,7 @@ export default function AiAssistantInput( {
 
 	return (
 		<ExtensionAIControl
+			className="jetpack-ai-assistant-extension-ai-input"
 			placeholder={ placeholder }
 			disabled={ disabled }
 			value={ value }

diff --git a/...extensions/blocks/ai-assistant/inline-extensions/components/ai-assistant-input/style.scss b/...extensions/blocks/ai-assistant/inline-extensions/components/ai-assistant-input/style.scss
@@ -0,0 +1,3 @@
+.jetpack-ai-assistant-extension-ai-input {
+  z-index: 1;
+}