fix(#2003): popover remove relative prop

[BumbleB2na]

Also see related ui-components-docs PR: GovAlta/ui-components-docs#305

Before (the change)

Popover had prop: "relative" that when enabled would add style, "position: relative;" to the popover container to help with positioning flow. Dropdown and DatePicker had "relative" prop that would be passed down to child popover component. Code was adjusted to always set style, "position: relative;" and to calculate the position of popover when displaying upwards.

After (the change)

Popover always has "position: relative" (related to #2003):

2025-01-20-popover-position-relative.mp4

Popover positioning is still okay when scrolling within a modal (related to #2466):

2025-03-12-popover-in-scrollable-modal-fix.mp4

Note: a popover cannot appear over top of modal because of z-index layer hierarchy

• E.g. basic or filterable Dropdown (E.g. <goa-dropdown filterable="true">) cannot have its contents "drop down" outside of modal like a native Dropdown can, because native html select is not affected by z-index layering and will always show over top
• this was already the behavior of popover when relative property was used before these changes (E.g. <goa-dropdown relative="true">)

Make sure that you've checked the boxes below before you submit the PR

• I have read and followed the setup steps
• I have created necessary unit tests
• I have tested the functionality in both React and Angular.

Steps needed to test

Try dropdown and datepicker, some with a wrapper that has "position: relative" and some inside a modal -- try resizing the viewport to see how it calculates space below to determine if it dropdown or datepicker should expand upwards -- and try this in the different playgrounds:

• angular-modal.component.html.txt
• react-modal.tsx.txt
• ModalPage.svelte.txt
  • Alternative ModalPage.svelte.txt related to Popover position in scrollable modal #2466

[ArakTaiRoth]

This PR needs to be rebased with alpha after #2344 is merged in, and then needs to be re-tested

[BumbleB2na]

This PR needs to be rebased with alpha after #2344 is merged in, and then needs to be re-tested

This is done. Then linked a second issue, #2466 and updated this PR description with a second video to demonstrate how that got resolved.

[ArakTaiRoth]

@vanessatran-ddi When testing this, can you also verify that everything works on a page, as well as within a modal?

[vanessatran-ddi]

@vanessatran-ddi When testing this, can you also verify that everything works on a page, as well as within a modal?

@ArakTaiRoth Yes I will do

[BumbleB2na]

Updated PR to deprecate relative property instead of removing it. However, the property no longer has any effect (every popover now has postion: relative by default) and developers will see a console warning if using either of the 3 affected components:

[minhthytran]

Issue #2466 is fixed on this PR. Has been tested with:

• new angular
• new react
• firefox
• chrome (mac) and Edge (windows)
• safari
• safari/chrome on iOS

Issue #2003 is fixed.

I tested with:

• Dropdown (angular new, react new) has warning message.

@BumbleB2na I recommended you to add jsdocs with deprecated such as below:

(Instead of add a comment next to it)

So the IDE can help developers to understand that the property can still be used but should be removed.

[dustin-nielsen-goa]

@BumbleB2na There's a problem using the Dropdown in the AppHeaderMenu component, it appears that the width isn't being calculated properly
Before:

After:

[BumbleB2na]

@BumbleB2na There's a problem using the Dropdown in the AppHeaderMenu component, it appears that the width isn't being calculated properly

Was not able to reproduce width problem but, this aided in the discovery that AppHeader and AppHeaderMenu depended on popover not having position: relative so, these two components override that style to turn it off, allowing them to display the same as before.

[ArakTaiRoth]

Tested and looks good now

[chrisolsen]

I am seeing the following

1. When a non-native dropdown is at the bottom of a modal (this was the reason for previously having the relative prop)
   

2. When wrapping the dropdown within an absolutely positioned parent element (the calendar belongs to the left most element)
   

[chrisolsen]

See my most recent comment

[BumbleB2na]

I am seeing the following

1. When a non-native dropdown is at the bottom of a modal (this was the reason for previously having the relative prop)

Yes when the dropdown expands down at bottom of modal it increases the modal contents height. Your screenshot doesn't show the entire modal but, with this fix that makes popover part of the same z-index layering as modal, it's normal to have to scroll down:

I've created a new follow up issue, that depends on this PR, to take care of the issue you're seeing: #2655

2. When wrapping the [date picker[ within an absolutely positioned parent element (the calendar belongs to the left most element)

Please provide a code example because, I could not reproduce the same problem:

[chrisolsen]

@BumbleB2na

• I never noticed the scroll 👍
• As for the position: absolute, the first test I made was to make it right: 0, which does result with the popover off the screen, but since using right is very much an edge case I removed the right attribute and saw the image that I posted after the screen auto-update, but I don't see it if I manually reload the page. So it everything now looks good to me.

[tzuge]

🎉 This PR is included in version 4.2.2-alpha.7 🎉

The release is available on:

• npm package (@alpha dist-tag)
• GitHub release

Your semantic-release bot 📦🚀

[tzuge]

🎉 This PR is included in version 1.2.2-alpha.3 🎉

The release is available on:

• npm package (@alpha dist-tag)
• GitHub release

Your semantic-release bot 📦🚀

[tzuge]

🎉 This PR is included in version 1.33.0-alpha.8 🎉

The release is available on:

• npm package (@alpha dist-tag)
• GitHub release

Your semantic-release bot 📦🚀

[tzuge]

🎉 This PR is included in version 6.2.2-alpha.6 🎉

The release is available on:

• npm package (@alpha dist-tag)
• GitHub release

Your semantic-release bot 📦🚀

[tzuge]

🎉 This PR is included in version 1.3.0 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀

[tzuge]

🎉 This PR is included in version 4.3.0 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀

[tzuge]

🎉 This PR is included in version 1.33.0 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀

[tzuge]

🎉 This PR is included in version 6.3.0 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀