Skip to content
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

Merged
merged 3 commits into from
Sep 19, 2023

Conversation

billyvg
Copy link
Member

@billyvg billyvg commented Sep 19, 2023

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)

@vercel
Copy link

vercel bot commented Sep 19, 2023

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
sentry-docs ✅ Ready (Inspect) Visit Preview 💬 Add feedback Sep 19, 2023 5:25pm

billyvg and others added 3 commits September 19, 2023 13:04
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)
Comment on lines +109 to +110
<Header>{title}</Header>
{open && <FeedbackForm onSubmit={handleSubmit} onClose={handleClose} />}
Copy link
Member

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 👍

Copy link
Member Author

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

@billyvg billyvg merged commit 94e8a2b into master Sep 19, 2023
6 checks passed
@billyvg billyvg deleted the ref-feedback-decouple-feedback-button-and-modal branch September 19, 2023 22:09
@github-actions github-actions bot locked and limited conversation to collaborators Oct 5, 2023
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants