message-feedback

Message Feedback

View on MongoDB.design

Installation

Yarn

yarn add @leafygreen-ui/message-feedback

NPM

npm install @leafygreen-ui/message-feedback

Examples

InlineMessageFeedback

<InlineMessageFeedback {...props} />

PopoverMessageFeedback

const triggerRef = useRef(null);
const [isActive, setIsActive] = useState<boolean>(false);

const closePopover = () => setIsActive(false);

const handleRatingChange: ChangeEventHandler<HTMLInputElement> = e => {
  const rating = e.target.value as MessageRatingValue;
  setIsActive(rating === 'disliked');
};


return (
  <>
    <MessageRating
      ref={triggerRef}
      onChange={handleRatingChange}
    />
    <PopoverMessageFeedback
      popoverProps={{
        ...popoverProps,
        active: isActive,
        refEl: triggerRef,
      }}
      onCancel={closePopover}
      onSubmit={closePopover}
    />
  </>
);

Properties

InlineMessageFeedback

Properties

Prop	Type	Description	Default
cancelButtonText	string	Text displayed inside the cancel Button	'Cancel'
onCancel	MouseEventHandler<HTMLElement>	Click event handler for the cancel Button
cancelButtonProps	ButtonProps	Override props for the cancel Button
submitButtonText	string	Text displayed inside the submit Button
submitButtonProps	ButtonProps	Override props for the submit Button
onSubmit	FormEventHandler<HTMLFormElement>	Event handler called when the form is submitted
textareaProps	TextAreaProps	Props passed directly to the Textarea
isSubmitted	boolean	Indicates if the component should render in its submitted state	false
submittedMessage	string	Message rendered in submitted state	'Submitted! Thanks for your feedback.'
label	TextAreaProps['label']
onClose	string	Event handler called on close button click. Close button will not be rendered when undefined. This is mainly for internal use as most instances of InlineMessageFeedback should be closed solely by onCancel.

PopoverMessageFeedback

Prop	Type	Description	Default
popoverZIndex	number	Z-index of the Popover

PopoverMessageFeedback extends all InlineMessageFeedback props excluding isSubmitted and submittedMessage. To provide feedback to the end user after a successful submit, refer to our design guidelines for the appropriate design pattern.

PopoverMessageFeedback also extends all Popover props excluding children.