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

fix(toast): switches toast[open] to use visibility hidden to fix overlay handling #3511

Merged
merged 4 commits into from Aug 7, 2023

Conversation

benjamind
Copy link
Contributor

Description

Switches sp-toast to use the same behavior as sp-tooltip for controlling visibility with the [open] attribute. This switches from display: none to visibility:hidden which means the element now has size when hidden allowing the overlay behavior to properly measure it and therefore position it.

Related issue(s)

#3510

Motivation and context

Fixes the placement in overlays.

How has this been tested?

Added storybook to cover this case, and tested locally in Chrome.

Screenshots (if appropriate)

Types of changes

  • Bug fix (non-breaking change which fixes an issue)
  • New feature (non-breaking change which adds functionality)
  • Breaking change (fix or feature that would cause existing functionality to change)
  • Chore (minor updates related to the tooling or maintenance of the repository, does not impact compiled assets)

Checklist

  • I have signed the Adobe Open Source CLA.
  • My code follows the code style of this project.
  • If my change required a change to the documentation, I have updated the documentation in this pull request.
  • I have read the CONTRIBUTING document.
  • I have added tests to cover my changes.
  • All new and existing tests passed.
  • I have reviewed at the Accessibility Practices for this feature, see: Aria Practices

Best practices

This repository uses conventional commit syntax for each commit message; note that the GitHub UI does not use this by default so be cautious when accepting suggested changes. Avoid the "Update branch" button on the pull request and opt instead for rebasing your branch against main.

@github-actions
Copy link

github-actions bot commented Aug 3, 2023

Tachometer results

Chrome

toast permalink

Version Bytes Avg Time vs remote vs branch
npm latest 426 kB 43.53ms - 44.09ms - faster ✔
35% - 36%
23.32ms - 24.22ms
branch 422 kB 67.22ms - 67.94ms slower ❌
53% - 56%
23.32ms - 24.22ms
-
Firefox

toast permalink

Version Bytes Avg Time vs remote vs branch
npm latest 426 kB 114.68ms - 131.36ms - faster ✔
29% - 40%
51.91ms - 77.77ms
branch 422 kB 177.98ms - 197.74ms slower ❌
40% - 66%
51.91ms - 77.77ms
-

] as [Placement, string][]
).map(([placement, variant]) => {
return html`
<overlay-trigger
Copy link
Collaborator

Choose a reason for hiding this comment

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

We probably should not insinuate that Toast elements can/should be opened on hover. I think if this was set up at type="click" and the slot was slot="click-content" that we'd be pretty good to go here!

Copy link
Contributor Author

Choose a reason for hiding this comment

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

haha yes good point.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

addressed in 592bdbd

Copy link
Collaborator

@Westbrook Westbrook left a comment

Choose a reason for hiding this comment

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

Looks a little unique, but otherwise looks pretty good to go!

If you could cycle the VRTs, we'll be able to merge this and have it out to you sometime next week.

Copy link
Collaborator

@Westbrook Westbrook left a comment

Choose a reason for hiding this comment

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

LGTM! Thanks @benjamind :shipit:

@Westbrook Westbrook merged commit 8428cad into main Aug 7, 2023
47 checks passed
@Westbrook Westbrook deleted the delarre/toast-3510 branch August 7, 2023 17:31
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

2 participants