diff --git a/.changeset/funny-fans-punch.md b/.changeset/funny-fans-punch.md new file mode 100644 index 0000000000..f286552c46 --- /dev/null +++ b/.changeset/funny-fans-punch.md @@ -0,0 +1,5 @@ +--- +'@lg-chat/message-feedback': minor +--- + +Adds `disabledSend` prop to disable submit button diff --git a/chat/message-feedback/src/InlineMessageFeedback/InlineMessageFeedback.spec.tsx b/chat/message-feedback/src/InlineMessageFeedback/InlineMessageFeedback.spec.tsx index 836855de10..da915c906d 100644 --- a/chat/message-feedback/src/InlineMessageFeedback/InlineMessageFeedback.spec.tsx +++ b/chat/message-feedback/src/InlineMessageFeedback/InlineMessageFeedback.spec.tsx @@ -90,6 +90,15 @@ describe('packages/inline-message-feedback', () => { expect(cancelButton).toHaveAttribute('aria-disabled', 'true'); } }); + + test('disables form elements when disabledSend prop is true', () => { + const { container } = render( + , + ); + + const submitButton = container.querySelector('button[type="submit"]'); + expect(submitButton).toHaveAttribute('aria-disabled', 'true'); + }); }); describe('error state', () => { diff --git a/chat/message-feedback/src/InlineMessageFeedback/InlineMessageFeedback.tsx b/chat/message-feedback/src/InlineMessageFeedback/InlineMessageFeedback.tsx index e8d9cbb99b..418e425582 100644 --- a/chat/message-feedback/src/InlineMessageFeedback/InlineMessageFeedback.tsx +++ b/chat/message-feedback/src/InlineMessageFeedback/InlineMessageFeedback.tsx @@ -12,7 +12,8 @@ import { Variant, } from '@lg-chat/leafygreen-chat-provider'; -import Button, { +import { + Button, Size as ButtonSize, Variant as ButtonVariant, } from '@leafygreen-ui/button'; @@ -52,6 +53,7 @@ export const InlineMessageFeedback = forwardRef( submittedMessage = 'Submitted! Thanks for your feedback.', onSubmit: onSubmitProp, darkMode: darkModeProp, + disabledSend = false, onClose, textareaProps, errorMessage = 'Oops, please try again.', @@ -170,7 +172,9 @@ export const InlineMessageFeedback = forwardRef( type="submit" variant={ButtonVariant[isCompact ? 'Default' : 'Primary']} size={ButtonSize[isCompact ? 'Default' : 'Small']} - disabled={!!hasEmptyTextarea || isSubmitting} + disabled={ + !!hasEmptyTextarea || isSubmitting || disabledSend + } {...submitButtonProps} > {submitButtonText} diff --git a/chat/message-feedback/src/InlineMessageFeedback/InlineMessageFeedback.types.ts b/chat/message-feedback/src/InlineMessageFeedback/InlineMessageFeedback.types.ts index 1edec63751..8a1917b3b5 100644 --- a/chat/message-feedback/src/InlineMessageFeedback/InlineMessageFeedback.types.ts +++ b/chat/message-feedback/src/InlineMessageFeedback/InlineMessageFeedback.types.ts @@ -101,4 +101,10 @@ export type InlineMessageFeedbackProps = Required< * This is mainly for internal use as most instances of InlineMessageFeedback should be closed solely by onCancel. */ onClose?: MouseEventHandler; + + /** + * Whether the submit button should be disabled + * @default false + */ + disabledSend?: boolean; };