RocketCommunicationsInc / astro

Astro UXDS is a collection of guidelines, patterns and components for designing space-based user interface applications.
https://astrouxds.com
Other
115 stars 25 forks source link

fix(pop-up): Popup auto placement no longer set by default, enabled via prop #864

Closed FMorrison87 closed 2 years ago

FMorrison87 commented 2 years ago

Brief Description

This fix changes some core functionality in pop-up that was causing the pop-up to migrate around its trigger depending on scroll position and allowed space between the trigger and the browser window. This behavior can now be set via prop and default to false.

JIRA Link

ASTRO-4779

Related Issue

General Notes

This functionality is handled mostly using floating-ui. In order to make this toggle-able a prop was added that the developer can add onto the component to initiate the behavior (basically turning it back into what it was before), but without this prop the pop-up will open based on settings using the placement prop. Some tweaks were made to the logic within the floating-ui functions and helper functions to make this possible. Thanks to @kiley-mitti for her help in working through some of the logic!

Motivation and Context

After conferring with design, it was learned that this behavior where the pop-up moves depending on scroll or position to the browser edge was not necessarily desired, but since it's in there already instead of removing it entirely it should default to OFF but then be toggle-able.

Issues and Limitations

Types of changes

Checklist

changeset-bot[bot] commented 2 years ago

🦋 Changeset detected

Latest commit: 61e98b495f609bb6ed8ef6651dfd9d7c41be8f15

The changes in this PR will be included in the next version bump.

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

netlify[bot] commented 2 years ago

Deploy Preview for astrouxds canceled.

Name Link
Latest commit 26b8eaf9e06d0446a6e3aa3c348ae7c7627fcb44
Latest deploy log https://app.netlify.com/sites/astrouxds/deploys/635fda4873f3ec0008908598
netlify[bot] commented 2 years ago

Deploy Preview for blissful-hugle-92e0cf canceled.

Name Link
Latest commit 26b8eaf9e06d0446a6e3aa3c348ae7c7627fcb44
Latest deploy log https://app.netlify.com/sites/blissful-hugle-92e0cf/deploys/635fda48ab0865000dcc2c59
netlify[bot] commented 2 years ago

Deploy Preview for zealous-almeida-d12345 ready!

Name Link
Latest commit 26b8eaf9e06d0446a6e3aa3c348ae7c7627fcb44
Latest deploy log https://app.netlify.com/sites/zealous-almeida-d12345/deploys/635fda48920b8700088e0bb5
Deploy Preview https://deploy-preview-864--zealous-almeida-d12345.netlify.app
Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site settings.

FMorrison87 commented 2 years ago

@markacianfrani that change is made. Default is now to have that behavior be on and the bool turns it off.

netlify[bot] commented 2 years ago

Deploy Preview for astro-preview ready!

Name Link
Latest commit 61e98b495f609bb6ed8ef6651dfd9d7c41be8f15
Latest deploy log https://app.netlify.com/sites/astro-preview/deploys/63616ab5e03df20008da7d48
Deploy Preview https://deploy-preview-864--astro-preview.netlify.app
Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site settings.