Show tooltip for disabled action button

[ericmp33]

Description

We would like to show a tooltip on a disabled action button to explain why that button is disabled. #4271

One thing to note is that this change might be an unexpected behavior for developers who previously had tooltips configured to display only when actions were enabled. We should consider mentioning this update in the What's Changed section of the release notes to avoid confusion.

Visual changes

If the action has a tooltip, despite being disabled, the tooltip will be shown.

Functional changes

• Code style has been fixed by running the composer cs command.
• Changes have been tested to not break existing functionality.
• Documentation is up-to-date.

[danharrin]

Please test this by adding two buttons inside <div class="grid grid-cols-2"> and <div class="flex justify-end"> and <div class="flex justify-between">. Please screenshot each case and post them here, so we can review if there are any impacts of having a wrapper.

[ericmp33]

Please test this by adding two buttons inside <div class="grid grid-cols-2"> and <div class="flex justify-end"> and <div class="flex justify-between">. Please screenshot each case and post them here, so we can review if there are any impacts of having a wrapper.

I created 3 different full page lw components with 2 action buttons per each. Both actions have tooltip, but one action is enabled and the other one is disabled (I also tried disabling it both actions, results look the same).

The class part looks the same for all 3. The view part changes on the classes used.

@danharrin is this what you expected me to try out?

test.mp4

Component classes:

<?php

namespace App\Livewire;

use App\View\Components\AppLayout;
use Filament\Forms\Concerns\InteractsWithForms;
use Filament\Forms\Components\Actions;
use Filament\Forms\Components\Actions\Action;
use Filament\Forms\Contracts\HasForms;
use Filament\Forms\Form;
use Illuminate\Contracts\View\View;
use Livewire\Component;

class Test1 extends Component implements HasForms
{
    use InteractsWithForms;

    public function render(): View
    {
        return view('livewire.test1')->layout(AppLayout::class);
    }

    public function form(Form $form): Form
    {
        return $form->schema([
            Actions::make([
                Action::make('star')
                    ->icon('heroicon-m-star')
                    ->tooltip('First tooltip'),
                Action::make('resetStars')
                    ->icon('heroicon-m-x-mark')
                    ->color('danger')
                    ->tooltip('Second tooltip')
                    ->disabled(),
            ]),
        ]);
    }
}

Component views:

// test 1
<div class="grid grid-cols-2">
    {{ $this->form }}
</div>

// test 2
<div class="flex justify-end">
    {{ $this->form }}
</div>

// test 3
<div class="flex justify-between">
    {{ $this->form }}
</div>

[wychoong]

is this what you expected

Probably is to directly using actions https://filamentphp.com/docs/3.x/actions/adding-an-action-to-a-livewire-component#adding-the-action

[ericmp33]

is this what you expected

Probably is to directly using actions https://filamentphp.com/docs/3.x/actions/adding-an-action-to-a-livewire-component#adding-the-action

Oh yeah I see. Okay, I test it again.

[ericmp33]

New tests:

test2.mp4

Classes:

<?php

namespace App\Livewire;

use App\View\Components\AppLayout;
use Filament\Actions\Concerns\InteractsWithActions;
use Filament\Actions\Contracts\HasActions;
use Filament\Forms\Concerns\InteractsWithForms;
use Filament\Forms\Components\Actions;
use Filament\Actions\Action;
use Filament\Forms\Contracts\HasForms;
use Filament\Forms\Form;
use Illuminate\Contracts\View\View;
use Livewire\Component;

class Test1 extends Component implements HasForms, HasActions
{
    use InteractsWithForms;
    use InteractsWithActions;

    public function render(): View
    {
        return view('livewire.test1')->layout(AppLayout::class);
    }

    public function oneAction(): Action
    {
        return Action::make('one')
            ->disabled()
            ->tooltip('One');
    }

    public function twoAction(): Action
    {
        return Action::make('two')
            // ->disabled()
            ->tooltip('Two');
    }
}

Views:

// test 1
<div class="grid grid-cols-2">
    {{ $this->oneAction }}
    {{ $this->twoAction }}

    <x-filament-actions::modals />
</div>

// test 2
<div class="flex justify-end">
    {{ $this->oneAction }}
    {{ $this->twoAction }}

    <x-filament-actions::modals />
</div>

// test 3
<div class="flex justify-between">
    {{ $this->oneAction }}
    {{ $this->twoAction }}

    <x-filament-actions::modals />
</div>

[zepfietje]

Could you please do the same video for icon button actions, @ericmp33?
Currently those have a negative margin to account for spacing, which this PR might break.
Not sure though, hence I'm asking for the video :)

[ericmp33]

I updated the tests & fixed the code. Here you have a table to know what functions I used for both actions in each test.

	->icon('heroicon-s-pencil')	->iconButton()
TestX	false	false
TestXb	true	false
TestXc	true	true

*For each test, the 1st action is always disabled and the 2nd it's not.

Before:

before_my_changes.mp4

After:

after_my_changes.mp4

[danharrin]

Think I'm going to push this to v4 since it does have some capability to be a breaking change with certain style customizations