Add modal screenshots

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

@@ -61,6 +61,15 @@ class Actions extends Component implements HasActions
             ->iconPosition('after');
     }
 
+    public function confirmationModalAction(): Action
+    {
+        return Action::make('confirmationModalAction')
+            ->label('Delete')
+            ->color('danger')
+            ->requiresConfirmation()
+            ->action(fn () => null);
+    }
+
     public function render()
     {
         return view('livewire.actions');

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

@@ -1,29 +1,39 @@
-<div>
-    <div id="buttonAction" class="p-16 flex items-center justify-center max-w-xl">
-        {{ $this->buttonAction }}
-    </div>
+<div class="min-h-screen">
+    @if (! $this->mountedAction)
+        <div id="buttonAction" class="p-16 flex items-center justify-center max-w-xl">
+            {{ $this->buttonAction }}
+        </div>
 
-    <div id="linkAction" class="p-16 flex items-center justify-center max-w-xl">
-        {{ $this->linkAction }}
-    </div>
+        <div id="linkAction" class="p-16 flex items-center justify-center max-w-xl">
+            {{ $this->linkAction }}
+        </div>
 
-    <div id="iconButtonAction" class="p-16 flex items-center justify-center max-w-xl">
-        {{ $this->iconButtonAction }}
-    </div>
+        <div id="iconButtonAction" class="p-16 flex items-center justify-center max-w-xl">
+            {{ $this->iconButtonAction }}
+        </div>
 
-    <div id="dangerAction" class="p-16 flex items-center justify-center max-w-xl">
-        {{ $this->dangerAction }}
-    </div>
+        <div id="dangerAction" class="p-16 flex items-center justify-center max-w-xl">
+            {{ $this->dangerAction }}
+        </div>
 
-    <div id="largeAction" class="p-16 flex items-center justify-center max-w-xl">
-        {{ $this->largeAction }}
-    </div>
+        <div id="largeAction" class="p-16 flex items-center justify-center max-w-xl">
+            {{ $this->largeAction }}
+        </div>
 
-    <div id="iconAction" class="p-16 flex items-center justify-center max-w-xl">
-        {{ $this->iconAction }}
-    </div>
+        <div id="iconAction" class="p-16 flex items-center justify-center max-w-xl">
+            {{ $this->iconAction }}
+        </div>
 
-    <div id="iconAfterAction" class="p-16 flex items-center justify-center max-w-xl">
-        {{ $this->iconAfterAction }}
+        <div id="iconAfterAction" class="p-16 flex items-center justify-center max-w-xl">
+            {{ $this->iconAfterAction }}
+        </div>
+
+        <div id="confirmationModalAction" class="p-16 flex items-center justify-center max-w-xl">
+            {{ $this->confirmationModalAction }}
+        </div>
+    @endif
+
+    <div id="modal">
+        <x-filament-actions::modals />
     </div>
 </div>

docs-assets/screenshots/schema.js

@@ -27,6 +27,21 @@ export default {
         url: 'actions',
         selector: '#iconAfterAction',
     },
+    'actions/modal/confirmation': {
+        url: 'actions',
+        viewport: {
+            width: 640,
+            height: 480,
+            deviceScaleFactor: 3,
+        },
+        before: async (page, browser) => {
+            await page.click('#confirmationModalAction button')
+            await page.waitForSelector('#modal h2')
+
+            await page.waitForTimeout(300)
+        },
+        selector: 'body',
+    },
     'app/dashboard': {
         url: 'admin',
         selector: 'body',

docs-assets/screenshots/script.js

@@ -27,6 +27,10 @@ for (const [file, options] of Object.entries(schema)) {
             waitUntil: 'networkidle2',
         })
 
+        if (options.before) {
+            await options.before(page, browser)
+        }
+
         const element = await page.waitForSelector(options.selector)
         await element.screenshot({ path: `images/${file}.jpg` })
 

packages/actions/docs/04-modals.md

@@ -14,6 +14,8 @@ Action::make('delete')
     ->requiresConfirmation()
 ```
 
+![Confirmation modal](https://github.com/filamentphp/filament/blob/3.x/docs-assets/screenshots/images/actions/modal/confirmation.jpg?raw=true)
+
 > Note: The confirmation modal is not available when a `url()` is set instead of an `action()`. Instead, you should redirect to the URL within the `action()` callback.
 
 ## Setting a modal heading, subheading, and button label
@@ -136,4 +138,4 @@ Action::make('create')
     ->action('create')
     ->modalHidden(fn (): bool => $this->role !== 'admin')
     ->modalContent(view('filament.pages.actions.create'))
-```
+```