-
-
Notifications
You must be signed in to change notification settings - Fork 1.5k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
ref(feedback): De-couple button from modal #7876
ref(feedback): De-couple button from modal #7876
Conversation
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
De-couple the feedback button from the modal so that we can show the modal using other components as the actor. This change does the following: * Move the form in `<FeedbackModal>` to `<FeedbackForm>` * Move business logic of the modal/form into `<FeedbackModal>` (from `<FeedbackWidget>`) * `<FeedbackModal>` requires `children` as a render function * `<FeedbackWidget>` is refactored to use new `<FeedbackModal>` and remains the same (shows our `<FeedbackButton>` which controls the modal)
ef5cd5d
to
f84f57a
Compare
<Header>{title}</Header> | ||
{open && <FeedbackForm onSubmit={handleSubmit} onClose={handleClose} />} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
nit: but i'd put the Header inside the form.
{open &&
seems like it's in a weird spot.. but not a problem. Lets see, the Dialog also has it's open, which is driving the animation (also Content animation).. so this open is controlling what extra dom nodes are on the page. So proof i read everything 👍
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I opted to not render the form when it's not visible as to also kill the form state when the modal is closed (there was some useEffect/ref shenanigans going on from the hackweek project).
I had Header in Form initially, but moved into into modal to avoid passing title
to another component
De-couple the feedback button from the modal so that we can show the modal using other components as the actor.
This change does the following:
<FeedbackModal>
to<FeedbackForm>
<FeedbackModal>
(from<FeedbackWidget>
)<FeedbackModal>
requireschildren
as a render function<FeedbackWidget>
is refactored to use new<FeedbackModal>
and remains the same (shows our<FeedbackButton>
which controls the modal)