From 5e42c3146d49b3f80aaa4db116b5123fcc6d1202 Mon Sep 17 00:00:00 2001
From: Sanne de Vries <65487235+sanne-san@users.noreply.github.com>
Date: Mon, 25 Nov 2024 14:12:49 +0100
Subject: [PATCH] Improved disabled state for "Add comment" button (#21717)

REF
https://linear.app/ghost/issue/PLG-281/change-button-to-being-disabled-without-input
---
 .../src/components/content/forms/Form.tsx            | 12 ++++--------
 1 file changed, 4 insertions(+), 8 deletions(-)

diff --git a/apps/comments-ui/src/components/content/forms/Form.tsx b/apps/comments-ui/src/components/content/forms/Form.tsx
index a8107b9b17..3cb53e1f3e 100644
--- a/apps/comments-ui/src/components/content/forms/Form.tsx
+++ b/apps/comments-ui/src/components/content/forms/Form.tsx
@@ -57,8 +57,7 @@ const FormEditor: React.FC<FormEditorProps> = ({comment, submit, progress, setPr
     }, [editor, comment, openForm, dispatchAction]);
 
     if (progress === 'sending') {
-        submitText = null;
-        buttonIcon = <SpinnerIcon className="h-[24px] w-[24px] fill-white dark:fill-black" data-testid="button-spinner" />;
+        buttonIcon = <SpinnerIcon className={`h-[24px] w-[24px] fill-white ${labs.commentImprovements ? '' : 'dark:fill-black'}`} data-testid="button-spinner" />;
     }
 
     const stopIfFocused = useCallback((event) => {
@@ -156,16 +155,13 @@ const FormEditor: React.FC<FormEditorProps> = ({comment, submit, progress, setPr
                 }
                 {labs.commentImprovements ? (
                     <button
-                        className={`flex w-auto items-center justify-center ${submitSize === 'medium' && 'sm:min-w-[100px]'} ${submitSize === 'small' && 'sm:min-w-[64px]'} h-[40px] rounded-md px-3 py-2 text-center font-sans text-base font-medium outline-0 transition-all duration-200 sm:text-sm ${
-                            hasContent
-                                ? 'bg-[var(--gh-accent-color)] text-white hover:brightness-105'
-                                : 'bg-black/5 text-neutral-900 dark:bg-white/15 dark:text-neutral-300'
-                        }`}
+                        className={`flex w-auto items-center justify-center ${submitSize === 'medium' && 'sm:min-w-[100px]'} ${submitSize === 'small' && 'sm:min-w-[64px]'} h-[40px] rounded-md bg-[var(--gh-accent-color)] px-3 py-2 text-center font-sans text-base font-medium text-white outline-0 transition-colors duration-200 hover:brightness-105 disabled:bg-black/5 disabled:text-neutral-900/30 sm:text-sm dark:disabled:bg-white/15 dark:disabled:text-white/35`}
                         data-testid="submit-form-button"
+                        disabled={!hasContent}
                         type="button"
                         onClick={submitForm}
                     >
-                        <span>{buttonIcon}</span>
+                        {buttonIcon && <span className="mr-1">{buttonIcon}</span>}
                         {submitText && <span>{submitText}</span>}
                     </button>
                 ) : (