[v4] Popover: Arrow offset uses wrong design token

[m-meier]

Describe the bug

The PopoverStyle.js uses the "popover.arrow.left" design token to position the arrow when the popup reaches the screen border. However the Popover component sets the "overlay.arrow.left" design token in the alignOverlay method.

Therefore the arrow is never repositioned.

Reproducer

https://stackblitz.com/edit/vitejs-vite-rameuq?file=src%2FApp.vue

PrimeVue version

4.0.0-beta.3

Vue version

3.x

Language

TypeScript

Build / Runtime

Vue CLI App

Browser(s)

No response

Steps to reproduce the behavior

Add a button with a popover which is limited by the right side and therefore pushed to the left.

Expected behavior

Arrow should be placed in the correct spot and use the correct design token.

[mertsincan]

Good catch! Thanks a lot for your contribution!

[ElysaSrc]

I can still reproduce this issue with v4.0.0-rc.2:

It was working as expected on v3.

[m-meier]

Yeah, they renamed the design token (e7853c5) but didn't adjust the component, so it uses the wrong name again :-(

[leosin]

in 4.0.0 it still wrong offset.

const mydt = ref({
  background: '{amber.500}',
  borderRadius: '2rem',
})

<PvPopover ref="op" :dt="mydt">
....
</PvPopover>

@ElysaSrc
Can you use :dt in popover ?, I just started learning and not sure if I wrote it right but it doesn't work.