Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Show tooltip for disabled action button #13671

Draft
wants to merge 4 commits into
base: 3.x
Choose a base branch
from
Draft

Conversation

ericmp33
Copy link
Contributor

@ericmp33 ericmp33 commented Jul 23, 2024

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
Copy link
Member

danharrin commented Jul 24, 2024

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.

@danharrin danharrin added the bug Something isn't working label Jul 24, 2024
@danharrin danharrin added this to the v3 milestone Jul 24, 2024
@danharrin danharrin self-assigned this Jul 24, 2024
@ericmp33
Copy link
Contributor Author

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
Copy link
Contributor

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
Copy link
Contributor Author

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
Copy link
Contributor Author

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
Copy link
Member

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
Copy link
Contributor Author

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
Copy link
Member

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

@danharrin danharrin added enhancement New feature or request and removed bug Something isn't working labels Jul 31, 2024
@danharrin danharrin modified the milestones: v3, v4 Jul 31, 2024
@zepfietje zepfietje marked this pull request as draft August 6, 2024 07:05
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
Status: Todo
Development

Successfully merging this pull request may close these issues.

5 participants