more action trigger buttons docs

docs-assets/app/app/Http/Livewire/Actions.php

@@ -62,6 +62,39 @@ class Actions extends Component implements HasActions
             ->iconPosition('after');
     }
 
+    public function indicatorAction(): Action
+    {
+        return Action::make('indicatorAction')
+            ->iconButton()
+            ->icon('heroicon-m-funnel')
+            ->indicator(5);
+    }
+
+    public function successIndicatorAction(): Action
+    {
+        return Action::make('successIndicatorAction')
+            ->iconButton()
+            ->icon('heroicon-m-funnel')
+            ->indicator(5)
+            ->indicatorColor('success');
+    }
+
+    public function outlinedAction(): Action
+    {
+        return Action::make('outlinedAction')
+            ->label('Edit')
+            ->button()
+            ->outlined();
+    }
+
+    public function inlineIconAction(): Action
+    {
+        return Action::make('inlineIconAction')
+            ->icon('heroicon-o-pencil-square')
+            ->iconButton()
+            ->inline();
+    }
+
     public function confirmationModalAction(): Action
     {
         return Action::make('confirmationModalAction')

docs-assets/app/resources/views/livewire/actions.blade.php

@@ -28,6 +28,22 @@
             {{ $this->iconAfterAction }}
         </div>
 
+        <div id="indicatorAction" class="p-16 flex items-center justify-center max-w-xl">
+            {{ $this->indicatorAction }}
+        </div>
+
+        <div id="successIndicatorAction" class="p-16 flex items-center justify-center max-w-xl">
+            {{ $this->successIndicatorAction }}
+        </div>
+
+        <div id="outlinedAction" class="p-16 flex items-center justify-center max-w-xl">
+            {{ $this->outlinedAction }}
+        </div>
+
+        <div id="inlineIconAction" class="p-16 flex items-center justify-center max-w-xl">
+            {{ $this->inlineIconAction }}
+        </div>
+
         <div id="confirmationModalAction" class="p-16 flex items-center justify-center max-w-xl">
             {{ $this->confirmationModalAction }}
         </div>

docs-assets/screenshots/schema.js

@@ -25,6 +25,9 @@ export default {
             height: 640,
             deviceScaleFactor: 3,
         },
+        before: async (page) => {
+            await page.hover('#iconButtonAction button')
+        },
     },
     'actions/trigger-button/danger': {
         url: 'actions',
@@ -62,6 +65,42 @@ export default {
             deviceScaleFactor: 3,
         },
     },
+    'actions/trigger-button/indicator': {
+        url: 'actions',
+        selector: '#indicatorAction',
+        viewport: {
+            width: 1920,
+            height: 640,
+            deviceScaleFactor: 3,
+        },
+    },
+    'actions/trigger-button/success-indicator': {
+        url: 'actions',
+        selector: '#successIndicatorAction',
+        viewport: {
+            width: 1920,
+            height: 640,
+            deviceScaleFactor: 3,
+        },
+    },
+    'actions/trigger-button/outlined': {
+        url: 'actions',
+        selector: '#outlinedAction',
+        viewport: {
+            width: 1920,
+            height: 640,
+            deviceScaleFactor: 3,
+        },
+    },
+    'actions/trigger-button/inline-icon': {
+        url: 'actions',
+        selector: '#inlineIconAction',
+        viewport: {
+            width: 1920,
+            height: 640,
+            deviceScaleFactor: 3,
+        },
+    },
     'actions/modal/confirmation': {
         url: 'actions',
         viewport: {

docs-assets/screenshots/script.js

@@ -20,7 +20,9 @@ themes.forEach((theme) => {
         }
 
         ;(async () => {
-            const browser = await puppeteer.launch()
+            const browser = await puppeteer.launch({
+                executablePath: '/opt/homebrew/bin/chromium',
+            })
             const page = await browser.newPage()
             await page.setViewport(
                 options.viewport ?? {

packages/actions/docs/03-trigger-button.md

@@ -49,7 +49,7 @@ Action::make('edit')
     ->url(fn (): string => route('posts.edit', ['post' => $this->post]))
 ```
 
-Optionally, you can have the label automatically translated by using the `translateLabel()` method:
+Optionally, you can have the label automatically translated [using Laravel's localization features](https://laravel.com/docs/localization) by using the `translateLabel()` method:
 
 ```php
 Action::make('edit')
@@ -66,7 +66,7 @@ Action::make('delete')
     ->color('danger')
 ```
 
-<PreviewScreenshot name="actions/trigger-button/danger" alt="Danger colored trigger" version="3.x" />
+<PreviewScreenshot name="actions/trigger-button/danger" alt="Red trigger" version="3.x" />
 
 ## Setting a size
 
@@ -118,7 +118,23 @@ Action::make('edit')
 
 This is useful for authorization of certain actions to only users who have permission.
 
-## Keybindings
+### Disabling a button
+
+If you want to disable a button instead of hiding it, you can use the `disabled()` method:
+
+```php
+Action::make('delete')
+    ->disabled()
+```
+
+You can conditionally disable a button by passing a boolean to it:
+
+```php
+Action::make('delete')
+    ->disabled(! auth()->user()->can('delete', $this->post))
+```
+
+## Registering keybindings
 
 You can attach keyboard shortcuts to trigger buttons. These use the same key codes as [Mousetrap](https://craig.is/killing/mice):
 
@@ -129,3 +145,88 @@ Action::make('save')
     ->action(fn () => $this->save())
     ->keyBindings(['command+s', 'ctrl+s'])
 ```
+
+## Adding an indicator in the corner of the button
+
+You can add an indicator to the corner of the button, to display whatever you want. It's useful for displaying a count of something, or a status indicator:
+
+```php
+use Filament\Actions\Action;
+
+Action::make('filter')
+    ->iconButton()
+    ->icon('heroicon-m-funnel')
+    ->indicator(5)
+```
+
+<PreviewScreenshot name="actions/trigger-button/indicator" alt="Trigger with indicator" version="3.x" />
+
+You can also pass a color to be used for the indicator, which can be either `primary`, `secondary`, `success`, `warning` or `danger`:
+
+```php
+use Filament\Actions\Action;
+
+Action::make('filter')
+    ->iconButton()
+    ->icon('heroicon-m-funnel')
+    ->indicator(5)
+    ->indicatorColor('success')
+```
+
+<PreviewScreenshot name="actions/trigger-button/success-indicator" alt="Trigger with green indicator" version="3.x" />
+
+## Outlined button style
+
+When you're using the "button" trigger style, you might wish to make it less prominent. You could use a different [color](#setting-a-color), but sometimes you might want to make it outlined instead. You can do this with the `outlined()` method:
+
+```php
+use Filament\Actions\Action;
+
+Action::make('edit')
+    ->url(fn (): string => route('posts.edit', ['post' => $this->post]))
+    ->button()
+    ->outlined()
+```
+
+<PreviewScreenshot name="actions/trigger-button/outlined" alt="Outlined trigger button" version="3.x" />
+
+## Inline icon button style
+
+When you're using the "icon button" trigger style, you might wish to make it fit inline with other content. You can do this with the `inline()` method, which removes the background color when it the button is hovered over:
+
+```php
+use Filament\Actions\Action;
+
+Action::make('edit')
+    ->url(fn (): string => route('posts.edit', ['post' => $this->post]))
+    ->iconButton()
+    ->inline()
+```
+
+<PreviewScreenshot name="actions/trigger-button/inline-icon" alt="Inline icon button" version="3.x" />
+
+## Passing extra attributes
+
+You can pass extra HTML attributes to the button which will be merged onto the outer DOM element. Pass an array of attributes to the `extraAttributes()` method, where the key is the attribute name and the value is the attribute value:
+
+```php
+use Filament\Actions\Action;
+
+Action::make('edit')
+    ->url(fn (): string => route('posts.edit', ['post' => $this->post]))
+    ->extraAttributes([
+        'title' => 'Edit this post',
+    ])
+```
+
+If you pass CSS classes in a string, they will be merged with the default classes that already apply to the other HTML element of the button:
+
+```php
+use Filament\Actions\Action;
+
+Action::make('edit')
+    ->url(fn (): string => route('posts.edit', ['post' => $this->post]))
+    ->extraAttributes([
+        'class' => 'mx-auto my-8',
+    ])
+```

packages/actions/src/Modal/Actions/Action.php

@@ -10,8 +10,6 @@ use Filament\Actions\StaticAction;
 
 class Action extends StaticAction implements SubmitsForm
 {
-    use CanBeOutlined;
-    use CanOpenUrl;
     use CanSubmitForm;
     use Concerns\CanCancelAction;
     use Concerns\HasAction;

packages/actions/src/MountableAction.php

@@ -10,23 +10,16 @@ use Livewire\Component;
 
 abstract class MountableAction extends StaticAction
 {
-    use Concerns\CanBeDisabled;
-    use CanBeInline;
     use Concerns\CanBeMounted;
-    use Concerns\CanBeOutlined;
     use Concerns\CanNotify;
     use Concerns\CanOpenModal;
-    use Concerns\CanOpenUrl;
     use Concerns\CanRedirect;
     use Concerns\CanRequireConfirmation;
     use Concerns\HasAction;
     use Concerns\HasArguments;
     use Concerns\HasForm;
-    use Concerns\HasGroupedIcon;
     use Concerns\HasInfolist;
-    use Concerns\HasKeyBindings;
     use Concerns\HasLifecycleHooks;
-    use Concerns\HasTooltip;
     use Concerns\HasWizard;
 
     protected function setUp(): void

packages/actions/src/StaticAction.php

@@ -10,12 +10,18 @@ abstract class StaticAction extends ViewComponent
 {
     use Concerns\CanBeDisabled;
     use Concerns\CanBeHidden;
+    use Concerns\CanBeInline;
+    use Concerns\CanOpenUrl;
     use Concerns\HasColor;
+    use Concerns\HasGroupedIcon;
     use Concerns\HasIcon;
     use Concerns\HasIndicator;
+    use Concerns\HasKeyBindings;
     use Concerns\HasLabel;
     use Concerns\HasName;
+    use Concerns\CanBeOutlined;
     use Concerns\HasSize;
+    use Concerns\HasTooltip;
     use Conditionable;
     use HasExtraAttributes;
 

packages/app/src/GlobalSearch/Actions/Action.php

@@ -14,12 +14,7 @@ use Illuminate\Support\Js;
 
 class Action extends StaticAction
 {
-    use CanBeInline;
-    use CanBeOutlined;
     use CanEmitEvent;
-    use CanOpenUrl;
-    use HasKeyBindings;
-    use HasTooltip;
 
     protected function setUp(): void
     {

packages/notifications/src/Actions/Action.php

@@ -18,13 +18,8 @@ use Illuminate\Support\Str;
 
 class Action extends StaticAction implements Arrayable, Groupable
 {
-    use CanBeInline;
-    use CanBeOutlined;
     use CanCloseNotification;
     use CanEmitEvent;
-    use CanOpenUrl;
-    use HasKeyBindings;
-    use HasTooltip;
 
     protected string $viewIdentifier = 'action';