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

Add reusable ToastMessages component #1272

Merged
merged 1 commit into from
Sep 27, 2023
Merged

Add reusable ToastMessages component #1272

merged 1 commit into from
Sep 27, 2023

Conversation

acelaya
Copy link
Contributor

@acelaya acelaya commented Sep 27, 2023

Closes #1075

This PR brings the ToastMessages component from client/via, and adds the corresponding documentation to the pattern library.

image

Once this is merged, we can start using it in frontend apps and remove duplicated code.

Testing steps

  1. Check out this branch.
  2. Start dev server (make dev)
  3. Go to http://localhost:4001/feedback-toast-messages

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Brought verbatim from client https://github.com/hypothesis/client/blob/2fa444e05d806893606a9181423d9d4f35bfbc7f/src/shared/components/test/ToastMessages-test.js

I only added a small fix to make sure there are no components left in the DOM that have side effects in other tests.

@codecov
Copy link

codecov bot commented Sep 27, 2023

Codecov Report

Merging #1272 (ca64c11) into main (217e4e4) will not change coverage.
The diff coverage is 100.00%.

@@            Coverage Diff            @@
##              main     #1272   +/-   ##
=========================================
  Coverage   100.00%   100.00%           
=========================================
  Files           61        62    +1     
  Lines          844       895   +51     
  Branches       332       344   +12     
=========================================
+ Hits           844       895   +51     
Files Coverage Δ
src/components/feedback/ToastMessages.tsx 100.00% <100.00%> (ø)

📣 We’re building smart automated test selection to slash your CI/CD build times. Learn more

Copy link
Member

@robertknight robertknight left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM with some minor comments. I would leave the ones about changing the arguments to the onDismiss callback for a subsequent revision.

src/components/feedback/ToastMessages.tsx Outdated Show resolved Hide resolved

export type ToastMessagesProps = {
messages: ToastMessage[];
onMessageDismiss: (id: string) => void;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The fact that we pass a list of ToastMessages as input, but only emit the id in onMessageDismiss feels a little incoherent and is mainly a relic of use in the client. It would probably make more sense to emit the ToastMessage or index itself. Probably best to get the initial shared iteration landed first though.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'll create a follow-up issue to change this for next major version

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

src/components/feedback/ToastMessages.tsx Show resolved Hide resolved
src/components/feedback/ToastMessages.tsx Show resolved Hide resolved
src/pattern-library/routes.ts Outdated Show resolved Hide resolved
@acelaya acelaya force-pushed the toast-messages branch 2 times, most recently from 8cd2e19 to 7b6624f Compare September 27, 2023 11:22
Copy link
Member

@robertknight robertknight left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I had a few minor corrections and comments, otherwise looks good.

src/components/feedback/ToastMessages.tsx Show resolved Hide resolved
src/components/feedback/ToastMessages.tsx Outdated Show resolved Hide resolved
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Add reusable toast messages component
2 participants