Skip to content

Commit

Permalink
fix(dialog): fix menu positioning when when overlayPositioning is 'fi…
Browse files Browse the repository at this point in the history
…xed' and menuOpen is true (#9891)

**Related Issue:** #9876

## Summary

- This corrects an issue with the transform animation on the dialog.  
- The issue is that having a transform animation with a floating-ui
element inside of it can cause positioning issues.
- Some notes about it can be read here:
https://floating-ui.com/docs/usefloating#transform
- In our case, a wrapper won't work because the floating ui element is
inside of the transform animation.
- As a workaround, the transform animation is removed when menuOpen is
true.
  • Loading branch information
driskull authored and github-actions[bot] committed Jul 30, 2024
1 parent d9695e9 commit 4390177
Showing 1 changed file with 6 additions and 0 deletions.
6 changes: 6 additions & 0 deletions packages/calcite-components/src/components/dialog/dialog.scss
Original file line number Diff line number Diff line change
Expand Up @@ -162,6 +162,12 @@ calcite-panel {
}
}

:host([menu-open]) .dialog {
transition:
visibility 0ms linear var(--calcite-internal-animation-timing-slow),
opacity var(--calcite-internal-animation-timing-slow) $easing-function;
}

.panel {
@apply rounded;
}
Expand Down

0 comments on commit 4390177

Please sign in to comment.