Add more screenshots

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

@@ -5,6 +5,7 @@ namespace App\Http\Livewire;
 use Filament\Actions\Action;
 use Filament\Actions\Concerns\InteractsWithActions;
 use Filament\Actions\Contracts\HasActions;
+use Filament\Forms\Components\Select;
 use Livewire\Component;
 
 class Actions extends Component implements HasActions
@@ -70,6 +71,43 @@ class Actions extends Component implements HasActions
             ->action(fn () => null);
     }
 
+    public function confirmationModalCustomTextAction(): Action
+    {
+        return Action::make('confirmationModalCustomTextAction')
+            ->label('Delete')
+            ->color('danger')
+            ->requiresConfirmation()
+            ->modalHeading('Delete post')
+            ->modalSubheading('Are you sure you\'d like to delete this post? This cannot be undone.')
+            ->modalButton('Yes, delete it')
+            ->action(fn () => null);
+    }
+
+    public function modalFormAction(): Action
+    {
+        return Action::make('modalFormAction')
+            ->label('Update author')
+            ->form([
+                Select::make('authorId')
+                    ->label('Author')
+                    ->required(),
+            ])
+            ->action(fn () => null);
+    }
+
+    public function slideOverAction(): Action
+    {
+        return Action::make('slideOverAction')
+            ->label('Update author')
+            ->form([
+                Select::make('authorId')
+                    ->label('Author')
+                    ->required(),
+            ])
+            ->slideOver()
+            ->action(fn () => null);
+    }
+
     public function render()
     {
         return view('livewire.actions');

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

@@ -31,6 +31,18 @@
         <div id="confirmationModalAction" class="p-16 flex items-center justify-center max-w-xl">
             {{ $this->confirmationModalAction }}
         </div>
+
+        <div id="confirmationModalCustomTextAction" class="p-16 flex items-center justify-center max-w-xl">
+            {{ $this->confirmationModalCustomTextAction }}
+        </div>
+
+        <div id="modalFormAction" class="p-16 flex items-center justify-center max-w-xl">
+            {{ $this->modalFormAction }}
+        </div>
+
+        <div id="slideOverAction" class="p-16 flex items-center justify-center max-w-xl">
+            {{ $this->slideOverAction }}
+        </div>
     @endif
 
     <div id="modal">

docs-assets/screenshots/schema.js

@@ -42,6 +42,51 @@ export default {
         },
         selector: 'body',
     },
+    'actions/modal/confirmation-custom-text': {
+        url: 'actions',
+        viewport: {
+            width: 640,
+            height: 480,
+            deviceScaleFactor: 3,
+        },
+        before: async (page) => {
+            await page.click('#confirmationModalCustomTextAction button')
+            await page.waitForSelector('#modal h2')
+
+            await new Promise((resolve) => setTimeout(resolve, 300))
+        },
+        selector: 'body',
+    },
+    'actions/modal/form': {
+        url: 'actions',
+        viewport: {
+            width: 640,
+            height: 480,
+            deviceScaleFactor: 3,
+        },
+        before: async (page) => {
+            await page.click('#modalFormAction button')
+            await page.waitForSelector('#modal h2')
+
+            await new Promise((resolve) => setTimeout(resolve, 300))
+        },
+        selector: 'body',
+    },
+    'actions/modal/slide-over': {
+        url: 'actions',
+        viewport: {
+            width: 1920,
+            height: 640,
+            deviceScaleFactor: 1.5,
+        },
+        before: async (page) => {
+            await page.click('#slideOverAction button')
+            await page.waitForSelector('#modal h2')
+
+            await new Promise((resolve) => setTimeout(resolve, 500))
+        },
+        selector: 'body',
+    },
     'app/dashboard': {
         url: 'admin',
         selector: 'body',

docs-assets/screenshots/script.js

@@ -1,9 +1,12 @@
 import fs from 'fs'
 import puppeteer from 'puppeteer'
 import schema from './schema.js'
+import emitter from 'events'
 
 fs.rmSync('images', { recursive: true, force: true })
 
+emitter.setMaxListeners(1024)
+
 const themes = ['light', 'dark']
 
 themes.forEach((theme) => {

packages/actions/docs/04-modals.md

@@ -32,6 +32,8 @@ Action::make('delete')
     ->modalButton('Yes, delete it')
 ```
 
+<AutoScreenshot name="actions/modal/confirmation-custom-text" alt="Confirmation modal with custom text" version="3.x" />
+
 ## Modal forms
 
 You may also render a form in the modal to collect extra information from the user before the action runs.
@@ -55,6 +57,8 @@ Action::make('updateAuthor')
     })
 ```
 
+<AutoScreenshot name="actions/modal/form" alt="Modal with form" version="3.x" />
+
 ### Filling the form with existing data
 
 You may fill the form with existing data, using the `fillForm()` method:
@@ -68,16 +72,16 @@ Action::make('updateAuthor')
     ->fillForm([
         'authorId' => $this->record->author->id,
     ])
-    ->action(function (array $data): void {
-        $this->record->author()->associate($data['authorId']);
-        $this->record->save();
-    })
     ->form([
         Select::make('authorId')
             ->label('Author')
             ->options(User::query()->pluck('name', 'id'))
             ->required(),
     ])
+    ->action(function (array $data): void {
+        $this->record->author()->associate($data['authorId']);
+        $this->record->save();
+    })
 ```
 
 ## Custom modal content
@@ -113,6 +117,8 @@ Action::make('updateAuthor')
     ->slideOver()
 ```
 
+<AutoScreenshot name="actions/modal/slide-over" alt="Slide over with form" version="3.x" />
+
 Instead of opening in the center of the screen, the modal content will now slide in from the right and consume the entire height of the browser.
 
 ## Changing the modal width