Infrastructure/ghost
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-01-06 22:40:14 -05:00
Code Issues Activity

Improved disabled state for "Add comment" button (#21717)

Browse source 
REF
https://linear.app/ghost/issue/PLG-281/change-button-to-being-disabled-without-input
This commit is contained in:
Sanne de Vries 2024-11-25 14:12:49 +01:00 committed by GitHub
parent 6638c6fb8c
commit 5e42c3146d
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 4 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
apps/comments-ui/src/components/content/forms/Form.tsx
View file

@ -57,8 +57,7 @@ const FormEditor: React.FC<FormEditorProps> = ({comment, submit, progress, setPr
}, [editor, comment, openForm, dispatchAction]); }, [editor, comment, openForm, dispatchAction]);
if (progress === 'sending') { if (progress === 'sending') {
submitText = null; buttonIcon = <SpinnerIcon className={`h-[24px] w-[24px] fill-white ${labs.commentImprovements ? '' : 'dark:fill-black'}`} data-testid="button-spinner" />;
buttonIcon = <SpinnerIcon className="h-[24px] w-[24px] fill-white dark:fill-black" data-testid="button-spinner" />;
} }
const stopIfFocused = useCallback((event) => { const stopIfFocused = useCallback((event) => {
@ -156,16 +155,13 @@ const FormEditor: React.FC<FormEditorProps> = ({comment, submit, progress, setPr
} }
{labs.commentImprovements ? ( {labs.commentImprovements ? (
<button <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 ${ 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`}
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'
}`}
data-testid="submit-form-button" data-testid="submit-form-button"
disabled={!hasContent}
type="button" type="button"
onClick={submitForm} onClick={submitForm}
> >
<span>{buttonIcon}</span> {buttonIcon && <span className="mr-1">{buttonIcon}</span>}
{submitText && <span>{submitText}</span>} {submitText && <span>{submitText}</span>}
</button> </button>
) : ( ) : (