fix(modal)!: use fixed positioning on host to prevent Safari from clipping content in certain layouts #9545

jcfranco · 2024-06-08T01:39:33Z

Related Issue: #9416

Summary

This restores modal's host positioning to fixed to avoid a Safari bug that causes content to be clipped.

Note: screenshot test was not added for this scenario since our testing environment uses Chrome.

BREAKING CHANGE: This should not require changes, but we are including this in the breaking change release due to the different modal configurations that could be impacted by the default position change.

…ping content in certain layouts

driskull · 2024-06-11T16:59:00Z

packages/calcite-components/src/components/modal/modal.scss

- * Conditional styles for when Modal is slotted in Shell
- */
-
-.container.slotted-in-shell {


Are these no longer needed? if so, what about the class for slotted-in-shell? We can remove it if not necessary. I think there is a prop as well.

At least based on screenshot tests and shallow, local testing, it doesn't look like these are needed anymore after the modal style tweaks. This could benefit from some additional testing too. cc @geospatialem

Good catch on the prop. I'll take a look. 👀

I managed to eliminate the prop by dynamically checking if the overflowing container is the document body.

macandcheese

Looks good - this could potentially have some impact on consumers because of the variety of ways Modals are placed on a page, would this be good to land in a major release due to the risk?

macandcheese · 2024-06-11T17:08:15Z

packages/calcite-components/src/components/modal/modal.scss

- * Conditional styles for when Modal is slotted in Shell
- */
-
-.container.slotted-in-shell {


We set these classes for Alert and Sheet as well in Shell. Should we change those components as well and remove the internal props we set for these?

I think so. Once we successfully move modal to this pattern, we can look at doing the same for similar components.

Note for future reference: slottedInShell was renamed to embedded in #9778.

macandcheese · 2024-06-11T17:08:40Z

packages/calcite-components/src/components/shell/shell.scss

@@ -129,4 +129,8 @@ slot[name="panel-top"]::slotted(calcite-shell-center-row) {
  inset: 0;
 }

+slot[name="modals"]::slotted(calcite-modal) {
+  position: absolute;


Is there any way to confirm we don't need the pointer-events rule?

pointer-events: none are applied to the modal when closed. Once open, this is set to the default, so I think the shell-slotted override isn't necessary.

macandcheese · 2024-06-11T17:09:26Z

packages/calcite-components/src/components/modal/modal.scss

    inset-0
    flex
    items-center
    justify-center
    overflow-y-hidden
-    opacity-0
-    z-overlay;


Can we confirm this overlay isn't needed in some complex slot / stack situations?

The overlay z-index is already applied on the host, so modals should already be on that layer. Do you have any examples of complex stacking we could use for testing?

* adds `@floating-ui/utils` dep

jcfranco · 2024-06-12T06:05:13Z

Looks good - this could potentially have some impact on consumers because of the variety of ways Modals are placed on a page, would this be good to land in a major release due to the risk?

Yeah, I can see this being risky because of all the different modal configurations and changes going into this. Since the associated issue does have a workaround, we could consider this for v3. cc @geospatialem

github-actions · 2024-06-23T01:50:23Z

This PR has been automatically marked as stale because it has not had recent activity. Please close your PR if it is no longer relevant. Thank you for your contributions.

github-actions · 2024-07-29T01:51:55Z

This PR has been automatically marked as stale because it has not had recent activity. Please close your PR if it is no longer relevant. Thank you for your contributions.

driskull · 2024-11-18T18:10:37Z

packages/calcite-components/src/components/modal/modal.scss

@@ -18,7 +18,7 @@
 }

 :host {
-  @apply absolute flex inset-0 opacity-0 z-overlay;
+  @apply fixed flex inset-0 opacity-0 z-overlay;


Would we need to do this for the dialog component as well?

We're going to test drive this with modal first. If everything works out smoothly, we could apply to other components before 4.0 since it wouldn't be breaking (see #9545 (comment)).

jcfranco · 2024-11-19T19:28:25Z

@macandcheese @driskull Care to take another look at this one?

jcfranco · 2024-11-19T19:31:08Z

Failing E2E test should be stabilized by #10748.

driskull

Code changes look good to me 👍

macandcheese · 2024-11-19T19:39:21Z

Looks good 👍 - this Chromatic test seems to cover the case I was curious about - when Modal is slotted elsewhere and not page-level : https://6266d45509d7eb004aa254fb-xnausuyubl.chromatic.com/?path=/story/components-shell--slotted-modal-and-alert

…pping content in certain layouts (#9545) **Related Issue:** #9416 ## Summary This restores `modal`'s host positioning to `fixed` to avoid a [Safari bug](https://bugs.webkit.org/show_bug.cgi?id=160953) that causes content to be clipped. **Note**: screenshot test was not added for this scenario since our testing environment uses Chrome. BREAKING CHANGE: This should not require changes, but we are including this in the breaking change release due to the different modal configurations that could be impacted by the default `position` change.

fix(modal): use fixed positioning on host to prevent Safari from clip…

15ab733

…ping content in certain layouts

jcfranco added the pr ready for visual snapshots Adding this label will run visual snapshot testing. label Jun 8, 2024

github-actions bot assigned jcfranco Jun 8, 2024

github-actions bot added the bug Bug reports for broken functionality. Issues should include a reproduction of the bug. label Jun 8, 2024

jcfranco mentioned this pull request Jun 8, 2024

calcite-modal is being blocked by another element, but only in Safari #9416

Closed

6 tasks

benelan changed the base branch from main to dev June 10, 2024 09:06

jcfranco marked this pull request as ready for review June 11, 2024 16:51

jcfranco requested a review from a team as a code owner June 11, 2024 16:51

jcfranco requested a review from macandcheese June 11, 2024 16:52

driskull reviewed Jun 11, 2024

View reviewed changes

macandcheese approved these changes Jun 11, 2024

View reviewed changes

drop slottedInShell prop

b7ce24a

* adds `@floating-ui/utils` dep

jcfranco requested review from benelan and geospatialem as code owners June 12, 2024 06:28

github-actions bot added the Stale Issues or pull requests that have not had recent activity. label Jun 23, 2024

github-actions bot removed the Stale Issues or pull requests that have not had recent activity. label Jul 19, 2024

github-actions bot added the Stale Issues or pull requests that have not had recent activity. label Jul 29, 2024

jcfranco mentioned this pull request Aug 13, 2024

feat(dialog): add CSS variables to offset the position #9904

Merged

github-actions bot removed the Stale Issues or pull requests that have not had recent activity. label Nov 17, 2024

merge pre-lumina dev

2001f50

driskull reviewed Nov 18, 2024

View reviewed changes

migrate modal files

f39a8ed

jcfranco force-pushed the jcfranco/9416-change-modal-host-to-use-fixed-positioning branch from 34ec85b to 4d00d75 Compare November 18, 2024 18:50

merge dev

a96b827

jcfranco force-pushed the jcfranco/9416-change-modal-host-to-use-fixed-positioning branch from 4d00d75 to a96b827 Compare November 18, 2024 18:51

jcfranco added pr ready for visual snapshots Adding this label will run visual snapshot testing. and removed pr ready for visual snapshots Adding this label will run visual snapshot testing. labels Nov 19, 2024

jcfranco changed the title ~~fix(modal): use fixed positioning on host to prevent Safari from clipping content in certain layouts~~ fix(modal)!: use fixed positioning on host to prevent Safari from clipping content in certain layouts Nov 19, 2024

driskull approved these changes Nov 19, 2024

View reviewed changes

jcfranco merged commit f950e28 into dev Nov 19, 2024
18 of 19 checks passed

jcfranco deleted the jcfranco/9416-change-modal-host-to-use-fixed-positioning branch November 19, 2024 19:54

github-actions bot added this to the 2024-11-26 - 3.0.0 Nov Breaking Change Milestone milestone Nov 19, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix(modal)!: use fixed positioning on host to prevent Safari from clipping content in certain layouts #9545

fix(modal)!: use fixed positioning on host to prevent Safari from clipping content in certain layouts #9545

jcfranco commented Jun 8, 2024 •

edited

Loading

driskull Jun 11, 2024

jcfranco Jun 11, 2024

jcfranco Jun 12, 2024

macandcheese left a comment

macandcheese Jun 11, 2024

jcfranco Jun 12, 2024

jcfranco Jul 16, 2024

macandcheese Jun 11, 2024

jcfranco Jun 12, 2024

macandcheese Jun 11, 2024

jcfranco Jun 12, 2024

jcfranco commented Jun 12, 2024

github-actions bot commented Jun 23, 2024

github-actions bot commented Jul 29, 2024

driskull Nov 18, 2024

jcfranco Nov 19, 2024

jcfranco commented Nov 19, 2024

jcfranco commented Nov 19, 2024

driskull left a comment

macandcheese commented Nov 19, 2024

fix(modal)!: use fixed positioning on host to prevent Safari from clipping content in certain layouts #9545

fix(modal)!: use fixed positioning on host to prevent Safari from clipping content in certain layouts #9545

Conversation

jcfranco commented Jun 8, 2024 • edited Loading

Summary

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

macandcheese left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

jcfranco commented Jun 12, 2024

github-actions bot commented Jun 23, 2024

github-actions bot commented Jul 29, 2024

Choose a reason for hiding this comment

Choose a reason for hiding this comment

jcfranco commented Nov 19, 2024

jcfranco commented Nov 19, 2024

driskull left a comment

Choose a reason for hiding this comment

macandcheese commented Nov 19, 2024

jcfranco commented Jun 8, 2024 •

edited

Loading