bug: Hover for buttons in groups is inconsistently highlighting borders

[alxgsv]

Reproduction URL (Required)

https://daisyui.com/components/join/

What version of daisyUI are you using?

v5.5.5

Which browsers are you seeing the problem on?

Firefox

Describe your issue

Example from daisyui.com. Right border/outline is not highlighted. Feels odd. Is it by design?

[github-actions[bot]]

Thank you @alxgsv for reporting issues. It helps daisyUI a lot 💚
I'll be working on issues one by one. I will help with this one as soon as a I find a solution.
In the meantime providing more details and reproduction links would be helpful.

[pdanpdan]

At a quick inspection it looks like .join needs more tweaks after 5.0.22/5.0.24

~https://play.tailwindcss.com/s1OtKkXwGE?file=css~

I'll try to add more test cases (please add if you can think of some and post the play URL)

What I have identified:

• .btn before input - focus outline below input
• .btn right border below right element on hover

Assumptions when I played with a fix:

• a .btn:focus-visible should be top-most (2)
• a .btn:hover should be in the middle (1)
• a .btn should be on bottom (0)

~Updated play: https://play.tailwindcss.com/BL1MPK12lF?file=css~

• allow testing with/without fix

~Updated play: https://play.tailwindcss.com/u6M7117HQA?file=css~

• improve the fix (z-index should be applied only to direct children of .join)
• fixed:
  • outline on .btn in front
  • borders on .btn
  • potential problem with content above indicator

Updated play: https://play.tailwindcss.com/ThgzpaBZRY?file=css

• add more cases
• refine fix

Alternative to above: https://play.tailwindcss.com/rPIwkmOqKn?file=css

[alxgsv]

Thanks so much! I'm happy to help, but I'm a backend developer working with DaisyUI because of it's simplicity, so I'm not sure I can be useful :-(

[saadeghi]

Will be fixed soon

[pdanpdan]

@saadeghi if you can think of more test cases please improve the codepen - we can't fix everything, and I'd like to find the best set of things that can be improved.

[pdanpdan]

If we decide on what should work and what not I can make the final tweaks and create a PR

[saadeghi]

Thanks @pdanpdan

Alternative to above: https://play.tailwindcss.com/rPIwkmOqKn?file=css

I think your last solution is better. It would make more sense to only increase the z-index of join-item (not the whole join)

If we decide on what should work and what not I can make the final tweaks and create a PR

That would be great 🙏