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

remove nested toasters #2153

Merged
merged 26 commits into from
Jul 30, 2024
Merged

remove nested toasters #2153

merged 26 commits into from
Jul 30, 2024

Conversation

mayank99
Copy link
Contributor

@mayank99 mayank99 commented Jul 19, 2024

Changes

This PR updates the PortalContainer logic so that instead of creating a new <Toaster> for every single <ThemeProvider>, the same one will be reused (if found).

This sounds like an optimization, but it is actually a bug fix. Previously, when multiple toasts from different toasters were triggered at the same time, they would end up in different containers that are positioned in the same place and therefore overlap each other. With this change, they use the same container and do not overlap.

Note: This PR does not handle redundancy for the special case when a portalContainer prop is used; which means we still create new toasters even when different ThemeProviders use the same portalContainer (this can be seen if you inspect the <body> element on some docs pages). This is something I'd like to fix in the future.

Testing

Tested manually and added e2e tests to confirm desired behavior.

Before:

image

After:

image

For some reason, test images in Table and DatePicker changed. I have no clue why. I did verify that elements are still correctly focused; the only difference is that the focus ring is sometimes not visible when using mouse (which matches how :focus-visible works).

Docs

Added minor changeset.

@mayank99 mayank99 self-assigned this Jul 19, 2024
@mayank99 mayank99 force-pushed the mayank/remove-redundant-toasters branch 3 times, most recently from ad1969c to 826cadf Compare July 19, 2024 22:02
@mayank99 mayank99 force-pushed the mayank/remove-redundant-toasters branch from 9a51e2a to 46ba2ad Compare July 24, 2024 16:22
@mayank99 mayank99 force-pushed the mayank/remove-redundant-toasters branch from 46ba2ad to 0d31173 Compare July 24, 2024 16:37
@mayank99 mayank99 changed the base branch from main to mayank/popover-initial-focus July 24, 2024 17:44
@mayank99 mayank99 marked this pull request as ready for review July 24, 2024 18:31
@mayank99 mayank99 requested review from a team as code owners July 24, 2024 18:31
@mayank99 mayank99 requested review from r100-stack and Ben-Pusey-Bentley and removed request for a team July 24, 2024 18:31
'@itwin/itwinui-react': minor
---

Nested `ThemeProvider`s will now reuse the same toaster instead of creating new ones.
Copy link
Member

Choose a reason for hiding this comment

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

Should this be "toast wrapper" instead of "toaster"?

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 used "toaster" because that's the terminology that our users are more familiar with, and because it's also more accurate, since we are now actually using the same reducer (rather than just the same DOM element).

Base automatically changed from mayank/popover-initial-focus to main July 30, 2024 17:25
@mayank99 mayank99 merged commit 7d368ac into main Jul 30, 2024
16 checks passed
@mayank99 mayank99 deleted the mayank/remove-redundant-toasters branch July 30, 2024 17:49
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.

None yet

3 participants