Giters

filamentphp / filament

A collection of beautiful full-stack components for Laravel. The perfect starting point for your next app. Using Livewire, Alpine.js and Tailwind CSS.

Home Page:https://filamentphp.com

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Revealable password button does not fill expected area

johnbacon opened this issue · comments

commented

Package

filament/forms

Package Version

Latest

Laravel Version

v10.x

Livewire Version

Latest

PHP Version

PHP 8.1.x

Problem description

image

The revealable password button's click target is smaller than the expected area (the "suffix" section).

Expected behavior

I would expect to be able to click all the way to the suffix container's borders.

Steps to reproduce

  1. Go to demo.filamentphp.com
  2. Review the revealable button's bounds (fi-ac-icon-btn-action)

Reproduction repository

https://github.com/filamentphp/demo

Relevant log output

No response

Donate 💰 to fund this issue

  • You can donate funding to this issue. We receive the money once the issue is completed & confirmed by you.
  • 100% of the funding will be distributed between the Filament core team to run all aspects of the project.
  • Thank you in advance for helping us make maintenance sustainable!
Fund with Polar
commented

Thanks for opening this issue, @johnbacon!

While I do understand some may expect the entire box to be clickable, the current behavior is by design. The suffix action is just an icon button, so that icon button determines its size. Spanning the full container would be very tricky, since devs may add additional actions, an icon or label there too.

commented

@zepfietje I hear you on that!

I know that you're limited somewhat, but I feel there must be a way. I'm not at a machine right now to examine the markup, but if the concern is for multiple actions, could that be handled instead with a sibling selector or grid spacing for only those cases where there are multiple elements?

commented

Honestly I don't think it's worth the complexity.

Potentially we could introduce another action type (just like button, link, icon button, badge, dropdown item) to be used inside input affixes. It'd need to support all inputs and combinations of suffixes and actions though.

Feel free to have a look and create a pull request if you think you've found a solid solution that takes into account all variables and edge cases here. 🙂