Extending Button class with icon

[eafarooqi]

Have you searched through other issues to see if your problem is already reported or has been fixed?

Yes, I did not find it.

Did you read the documentation?

Yes, I did not find it.

Have you tried to publish the views?

Yes - I didn't work.

Is there an error in the console?

No

PHP Version

8.1.0

PowerGrid

5.0.3

Laravel

10.23.1

Livewire

3.0.3

Alpine JS

No response

Theme

Bootstrap

Describe the bug.

Extending the button class as per documentation change anchor tag to button and then href will not work on button and also how to add the dynamic property to the action like font Awesome icon. There is no detail like V4.

To Reproduce...

AppServiceProvider boot function

Button::macro('icon', function (string $name) {
    $this->dynamicProperties['icon'] = $name;
    return $this;
});

Table actions.

public function actions(Advice $row): array
{
   return [
       Button::add('edit')
           ->slot('Edit')
           ->icon('fa-window')
           ->class('btn btn-primary btn-sm float-start')
           ->route('advices.edit', ['advice' => $row->id]),
    ];
}

This will result in the following html

<div wire:key="action-1-render-action.0.edit">
    <button href="http://project.local/advices/1/edit" class="btn btn-primary btn-sm float-start">Edit</button>
</div>

now the click will not work. As href on button has no affect and also how can we add the icon to the rendering html. There is no information about this in the documentation.

Extra information

<?php
 //...

[luanfreitasdev]

Sometimes it can be more complicated. I need to find a way to document this.

Can you take a look at this example?

https://github.com/Power-Components/powergrid-demo-misc/blob/534eb163891c4effe5681b86ae6629af69f4d8cd/app/Livewire/ExtendButtonTable.php#L10C5-L10C5

https://github.com/Power-Components/powergrid-demo-misc/blob/534eb163891c4effe5681b86ae6629af69f4d8cd/app/Providers/AppServiceProvider.php#L18-L31

[BoGnY]

Sometimes it can be more complicated. I need to find a way to document this.

Can you take a look at this example?

https://github.com/Power-Components/powergrid-demo-misc/blob/534eb163891c4effe5681b86ae6629af69f4d8cd/app/Livewire/ExtendButtonTable.php#L10C5-L10C5

https://github.com/Power-Components/powergrid-demo-misc/blob/534eb163891c4effe5681b86ae6629af69f4d8cd/app/Providers/AppServiceProvider.php#L18-L31

With this examples it works!

@eafarooqi keep in mind that macro method MUST be put AFTER add() and slot() method and BEFORE everyelse method, or not work.

I was able to add wire:navigate Livewire feature on a tag using this code:

Datatables:

public function actions($row): array
{
    return [
        Button::add('show')
            ->slot('Show')
            ->wire() // <--- HERE
            ->class('bg-indigo-500 text-white')
            ->route('balance.show', [
                'balance' => $row->id,
            ])
            ->target('_self'),
    ];
}

AppServiceProvider:

public function boot(): void
{
    ....

    Button::macro('wire', function () {
        $this->dynamicProperties['wire'] = [
            'component' => 'a wire:navigate',
        ];

        return $this;
    });
}

It was rendered as:

<div wire:key="action-21-render-action.0.show">
    <a wire:navigate target="_self" class="bg-indigo-500 text-white" href="https://localhost/balance/21">Show</a>
</div>