fix docs screenshot versioning & schema layout component docs

docs-assets/app/app/Livewire/Infolists/LayoutDemo.php

@@ -1,428 +0,0 @@
-<?php
-
-namespace App\Livewire\Infolists;
-
-use Filament\Actions\Action;
-use Filament\Forms\Concerns\InteractsWithForms;
-use Filament\Forms\Contracts\HasForms;
-use Filament\Infolists\Components\IconEntry;
-use Filament\Infolists\Components\RepeatableEntry;
-use Filament\Infolists\Components\TextEntry;
-use Filament\Infolists\Concerns\InteractsWithInfolists;
-use Filament\Infolists\Contracts\HasInfolists;
-use Filament\Schema\Components\Actions;
-use Filament\Schema\Components\Fieldset;
-use Filament\Schema\Components\Grid;
-use Filament\Schema\Components\Group;
-use Filament\Schema\Components\Section;
-use Filament\Schema\Components\Split;
-use Filament\Schema\Components\Tabs;
-use Filament\Schema\Components\Tabs\Tab;
-use Filament\Schema\Schema;
-use Filament\Support\Enums\Alignment;
-use Filament\Support\Enums\FontWeight;
-use Filament\Support\Enums\IconPosition;
-use Filament\Support\Enums\VerticalAlignment;
-use Livewire\Component;
-
-class LayoutDemo extends Component implements HasForms, HasInfolists
-{
-    use InteractsWithForms;
-    use InteractsWithInfolists;
-
-    public function infolist(Schema $infolist): Schema
-    {
-        return $infolist
-            ->schema([
-                Group::make()
-                    ->id('fieldset')
-                    ->extraAttributes([
-                        'class' => 'p-16 max-w-2xl',
-                    ])
-                    ->schema([
-                        Fieldset::make('Rate limiting')
-                            ->schema([
-                                TextEntry::make('hits')
-                                    ->state(30),
-                                TextEntry::make('period')
-                                    ->state('Hour'),
-                                TextEntry::make('maximum')
-                                    ->state(100),
-                            ])
-                            ->columns(3),
-                    ]),
-                Group::make()
-                    ->id('tabs')
-                    ->extraAttributes([
-                        'class' => 'p-16 max-w-2xl',
-                    ])
-                    ->schema([
-                        Tabs::make('Tabs')
-                            ->schema([
-                                Tab::make('Rate Limiting')
-                                    ->schema([
-                                        TextEntry::make('hits')
-                                            ->state(30),
-                                        TextEntry::make('period')
-                                            ->state('Hour'),
-                                        TextEntry::make('maximum')
-                                            ->state(100),
-                                        TextEntry::make('notes')
-                                            ->state('Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam euismod, nisl eget aliquam ultricies, nunc nisl aliquet nunc, quis aliquam nisl.')
-                                            ->columnSpanFull(),
-                                    ])
-                                    ->columns(3),
-                                Tab::make('Proxy'),
-                                Tab::make('Meta'),
-                            ]),
-                    ]),
-                Group::make()
-                    ->id('tabsIcons')
-                    ->extraAttributes([
-                        'class' => 'p-16 max-w-2xl',
-                    ])
-                    ->schema([
-                        Tabs::make('Tabs')
-                            ->schema([
-                                Tab::make('Notifications')
-                                    ->icon('heroicon-m-bell')
-                                    ->schema([
-                                        IconEntry::make('enabled')
-                                            ->boolean()
-                                            ->state(true),
-                                        TextEntry::make('frequency')
-                                            ->state('Hourly'),
-                                        TextEntry::make('notes')
-                                            ->state('Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam euismod, nisl eget aliquam ultricies, nunc nisl aliquet nunc, quis aliquam nisl.')
-                                            ->columnSpanFull(),
-                                    ])
-                                    ->columns(2),
-                                Tab::make('Security')
-                                    ->icon('heroicon-m-lock-closed'),
-                                Tab::make('Meta')
-                                    ->icon('heroicon-m-bars-3-center-left'),
-                            ]),
-                    ]),
-                Group::make()
-                    ->id('tabsIconsAfter')
-                    ->extraAttributes([
-                        'class' => 'p-16 max-w-2xl',
-                    ])
-                    ->schema([
-                        Tabs::make('Tabs')
-                            ->schema([
-                                Tab::make('Notifications')
-                                    ->icon('heroicon-m-bell')
-                                    ->iconPosition(IconPosition::After)
-                                    ->schema([
-                                        IconEntry::make('enabled')
-                                            ->boolean()
-                                            ->state(true),
-                                        TextEntry::make('frequency')
-                                            ->state('Hourly'),
-                                        TextEntry::make('notes')
-                                            ->state('Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam euismod, nisl eget aliquam ultricies, nunc nisl aliquet nunc, quis aliquam nisl.')
-                                            ->columnSpanFull(),
-                                    ])
-                                    ->columns(2),
-                                Tab::make('Security')
-                                    ->icon('heroicon-m-lock-closed')
-                                    ->iconPosition(IconPosition::After),
-                                Tab::make('Meta')
-                                    ->icon('heroicon-m-bars-3-center-left')
-                                    ->iconPosition(IconPosition::After),
-                            ]),
-                    ]),
-                Group::make()
-                    ->id('tabsBadges')
-                    ->extraAttributes([
-                        'class' => 'p-16 max-w-2xl',
-                    ])
-                    ->schema([
-                        Tabs::make('Tabs')
-                            ->schema([
-                                Tab::make('Notifications')
-                                    ->badge(5)
-                                    ->schema([
-                                        IconEntry::make('enabled')
-                                            ->boolean()
-                                            ->state(true),
-                                        TextEntry::make('frequency')
-                                            ->state('Hourly'),
-                                        TextEntry::make('notes')
-                                            ->state('Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam euismod, nisl eget aliquam ultricies, nunc nisl aliquet nunc, quis aliquam nisl.')
-                                            ->columnSpanFull(),
-                                    ])
-                                    ->columns(2),
-                                Tab::make('Security'),
-                                Tab::make('Meta'),
-                            ]),
-                    ]),
-                Group::make()
-                    ->id('section')
-                    ->extraAttributes([
-                        'class' => 'p-16 max-w-2xl',
-                    ])
-                    ->schema([
-                        Section::make('Rate limiting')
-                            ->description('Prevent abuse by limiting the number of requests per period')
-                            ->schema([
-                                TextEntry::make('hits')
-                                    ->state(30),
-                                TextEntry::make('period')
-                                    ->state('Hour'),
-                                TextEntry::make('maximum')
-                                    ->state(100),
-                                TextEntry::make('notes')
-                                    ->state('Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam euismod, nisl eget aliquam ultricies, nunc nisl aliquet nunc, quis aliquam nisl.')
-                                    ->columnSpanFull(),
-                            ])
-                            ->columns(3),
-                    ]),
-                Group::make()
-                    ->id('sectionHeaderActions')
-                    ->extraAttributes([
-                        'class' => 'p-16 max-w-2xl',
-                    ])
-                    ->schema([
-                        Section::make('Rate limiting')
-                            ->description('Prevent abuse by limiting the number of requests per period')
-                            ->headerActions([
-                                Action::make('edit'),
-                            ])
-                            ->schema([
-                                TextEntry::make('hits')
-                                    ->state(30),
-                                TextEntry::make('period')
-                                    ->state('Hour'),
-                                TextEntry::make('maximum')
-                                    ->state(100),
-                                TextEntry::make('notes')
-                                    ->state('Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam euismod, nisl eget aliquam ultricies, nunc nisl aliquet nunc, quis aliquam nisl.')
-                                    ->columnSpanFull(),
-                            ])
-                            ->columns(3),
-                    ]),
-                Group::make()
-                    ->id('sectionFooterActions')
-                    ->extraAttributes([
-                        'class' => 'p-16 max-w-2xl',
-                    ])
-                    ->schema([
-                        Section::make('Rate limiting')
-                            ->description('Prevent abuse by limiting the number of requests per period')
-                            ->footerActions([
-                                Action::make('edit'),
-                            ])
-                            ->schema([
-                                TextEntry::make('hits')
-                                    ->state(30),
-                                TextEntry::make('period')
-                                    ->state('Hour'),
-                                TextEntry::make('maximum')
-                                    ->state(100),
-                                TextEntry::make('notes')
-                                    ->state('Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam euismod, nisl eget aliquam ultricies, nunc nisl aliquet nunc, quis aliquam nisl.')
-                                    ->columnSpanFull(),
-                            ])
-                            ->columns(3),
-                    ]),
-                Group::make()
-                    ->id('sectionIcons')
-                    ->extraAttributes([
-                        'class' => 'p-16 max-w-2xl',
-                    ])
-                    ->schema([
-                        Section::make('Cart')
-                            ->description('The items you have selected for purchase')
-                            ->icon('heroicon-m-shopping-bag')
-                            ->schema([
-                                RepeatableEntry::make('items')
-                                    ->hiddenLabel()
-                                    ->schema([
-                                        TextEntry::make('product'),
-                                        TextEntry::make('quantity'),
-                                    ])
-                                    ->columns(2),
-                                TextEntry::make('specialOrderNotes')
-                                    ->state('Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam euismod, nisl eget aliquam ultricies, nunc nisl aliquet nunc, quis aliquam nisl.'),
-                            ]),
-                    ]),
-                Group::make()
-                    ->id('sectionAside')
-                    ->extraAttributes([
-                        'class' => 'p-16 max-w-5xl',
-                    ])
-                    ->schema([
-                        Section::make('Rate limiting')
-                            ->description('Prevent abuse by limiting the number of requests per period')
-                            ->aside()
-                            ->schema([
-                                TextEntry::make('hits')
-                                    ->state(30),
-                                TextEntry::make('period')
-                                    ->state('Hour'),
-                                TextEntry::make('maximum')
-                                    ->state(100),
-                                TextEntry::make('notes')
-                                    ->state('Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam euismod, nisl eget aliquam ultricies, nunc nisl aliquet nunc, quis aliquam nisl.')
-                                    ->columnSpanFull(),
-                            ]),
-                    ]),
-                Group::make()
-                    ->id('sectionCollapsed')
-                    ->extraAttributes([
-                        'class' => 'p-16 max-w-2xl',
-                    ])
-                    ->schema([
-                        Section::make('Cart')
-                            ->description('The items you have selected for purchase')
-                            ->collapsed(),
-                    ]),
-                Group::make()
-                    ->id('sectionCompact')
-                    ->extraAttributes([
-                        'class' => 'p-16 max-w-2xl',
-                    ])
-                    ->schema([
-                        Section::make('Rate limiting')
-                            ->description('Prevent abuse by limiting the number of requests per period')
-                            ->compact()
-                            ->schema([
-                                TextEntry::make('hits')
-                                    ->state(30),
-                                TextEntry::make('period')
-                                    ->state('Hour'),
-                                TextEntry::make('maximum')
-                                    ->state(100),
-                                TextEntry::make('notes')
-                                    ->state('Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam euismod, nisl eget aliquam ultricies, nunc nisl aliquet nunc, quis aliquam nisl.')
-                                    ->columnSpanFull(),
-                            ])
-                            ->columns(3),
-                    ]),
-                Group::make()
-                    ->id('sectionWithoutHeader')
-                    ->extraAttributes([
-                        'class' => 'p-16 max-w-2xl',
-                    ])
-                    ->schema([
-                        Section::make([
-                            TextEntry::make('hits')
-                                ->state(30),
-                            TextEntry::make('period')
-                                ->state('Hour'),
-                            TextEntry::make('maximum')
-                                ->state(100),
-                            TextEntry::make('notes')
-                                ->state('Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam euismod, nisl eget aliquam ultricies, nunc nisl aliquet nunc, quis aliquam nisl.')
-                                ->columnSpanFull(),
-                        ])
-                            ->columns(3),
-                    ]),
-                Group::make()
-                    ->id('split')
-                    ->extraAttributes([
-                        'class' => 'p-16 max-w-5xl',
-                    ])
-                    ->schema([
-                        Split::make([
-                            Section::make([
-                                TextEntry::make('title')
-                                    ->state('What is Filament?')
-                                    ->weight(FontWeight::Bold),
-                                TextEntry::make('content')
-                                    ->state(<<<'MARKDOWN'
-                                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non dui eu augue tempor finibus. Vivamus tincidunt malesuada volutpat. Donec ornare euismod est id cursus. Donec dolor nisl, dignissim vitae vulputate accumsan, consequat a lorem.
-
-                                    Praesent nec nulla ut erat mattis tincidunt. Donec dictum nibh at consequat finibus. Donec dignissim velit euismod dui lobortis, ut cursus ante auctor. Donec id placerat felis. Nulla dolor arcu, sodales nec sapien ut, laoreet rhoncus risus. Interdum et malesuada fames ac ante ipsum primis in faucibus.
-                                    MARKDOWN)
-                                    ->markdown()
-                                    ->prose(),
-                            ]),
-                            Section::make([
-                                TextEntry::make('created_at')
-                                    ->dateTime()
-                                    ->state('2022-01-01 14:10:32'),
-                                TextEntry::make('published_at')
-                                    ->dateTime()
-                                    ->state('2023-07-02 23:29:24'),
-                            ])->grow(false),
-                        ]),
-                    ]),
-                Group::make()
-                    ->id('anonymousActions')
-                    ->extraAttributes([
-                        'class' => 'p-16 max-w-2xl',
-                    ])
-                    ->schema([
-                        Actions::make([
-                            Action::make('star')
-                                ->icon('heroicon-m-star'),
-                            Action::make('resetStars')
-                                ->icon('heroicon-m-x-mark')
-                                ->color('danger'),
-                        ]),
-                    ]),
-                Group::make()
-                    ->id('anonymousActionsFullWidth')
-                    ->extraAttributes([
-                        'class' => 'p-16 max-w-2xl',
-                    ])
-                    ->schema([
-                        Actions::make([
-                            Action::make('star')
-                                ->icon('heroicon-m-star'),
-                            Action::make('resetStars')
-                                ->icon('heroicon-m-x-mark')
-                                ->color('danger'),
-                        ])->fullWidth(),
-                    ]),
-                Group::make()
-                    ->id('anonymousActionsHorizontallyAlignedCenter')
-                    ->extraAttributes([
-                        'class' => 'p-16 max-w-2xl',
-                    ])
-                    ->schema([
-                        Actions::make([
-                            Action::make('star')
-                                ->icon('heroicon-m-star'),
-                            Action::make('resetStars')
-                                ->icon('heroicon-m-x-mark')
-                                ->color('danger'),
-                        ])->alignment(Alignment::Center),
-                    ]),
-                Group::make()
-                    ->id('anonymousActionsVerticallyAlignedEnd')
-                    ->extraAttributes([
-                        'class' => 'p-16 max-w-2xl',
-                    ])
-                    ->schema([
-                        Grid::make(2)
-                            ->schema([
-                                TextEntry::make('stars')
-                                    ->state(4572100479)
-                                    ->numeric(),
-                                Actions::make([
-                                    Action::make('star')
-                                        ->icon('heroicon-m-star'),
-                                    Action::make('resetStars')
-                                        ->icon('heroicon-m-x-mark')
-                                        ->color('danger'),
-                                ])->verticalAlignment(VerticalAlignment::End),
-                            ]),
-                    ]),
-            ])
-            ->constantState([
-                'items' => [
-                    ['product' => 'Filament t-shirt', 'quantity' => 3],
-                    ['product' => 'Filament hoodie', 'quantity' => 1],
-                ],
-            ]);
-    }
-
-    public function render()
-    {
-        return view('livewire.infolists.layout');
-    }
-}

docs-assets/app/app/Livewire/Schema/LayoutDemo.php

@@ -1,10 +1,9 @@
 <?php
 
-namespace App\Livewire\Forms;
+namespace App\Livewire\Schema;
 
 use Filament\Actions\Action;
 use Filament\Forms\Components\Checkbox;
-use Filament\Forms\Components\Placeholder;
 use Filament\Forms\Components\Repeater;
 use Filament\Forms\Components\Select;
 use Filament\Forms\Components\Textarea;
@@ -489,15 +488,6 @@ class LayoutDemo extends Component implements HasForms
                             ])
                             ->columns(3),
                     ]),
-                Group::make()
-                    ->id('placeholder')
-                    ->extraAttributes([
-                        'class' => 'p-16 max-w-2xl',
-                    ])
-                    ->schema([
-                        Placeholder::make('created')
-                            ->content('May 21, 2021'),
-                    ]),
                 Group::make()
                     ->id('sectionWithoutHeader')
                     ->extraAttributes([
@@ -607,6 +597,6 @@ class LayoutDemo extends Component implements HasForms
 
     public function render()
     {
-        return view('livewire.forms.layout');
+        return view('livewire.schema.layout');
     }
 }

docs-assets/app/resources/views/livewire/infolists/layout.blade.php

@@ -1,3 +0,0 @@
-<div class="min-h-screen p-16">
-    {{ $this->infolist }}
-</div>

docs-assets/app/routes/web.php

@@ -3,10 +3,11 @@
 use App\Livewire\ActionsDemo;
 use App\Livewire\Forms\FieldsDemo;
 use App\Livewire\Forms\GettingStartedDemo;
-use App\Livewire\Forms\LayoutDemo as FormsLayoutDemo;
 use App\Livewire\Infolists\EntriesDemo;
 use App\Livewire\Infolists\LayoutDemo as InfolistsLayoutDemo;
 use App\Livewire\NotificationsDemo;
+use App\Livewire\Schema\LayoutDemo;
+use App\Livewire\Schema\LayoutDemo as FormsLayoutDemo;
 use App\Livewire\TablesDemo;
 use Illuminate\Support\Facades\Route;
 
@@ -24,8 +25,7 @@ use Illuminate\Support\Facades\Route;
 Route::get('/actions', ActionsDemo::class);
 Route::get('/forms/fields', FieldsDemo::class);
 Route::get('/forms/getting-started', GettingStartedDemo::class);
-Route::get('/forms/layout', FormsLayoutDemo::class);
 Route::get('/infolists/entries', EntriesDemo::class);
-Route::get('/infolists/layout', InfolistsLayoutDemo::class);
+Route::get('/schema/layout', LayoutDemo::class);
 Route::get('/notifications', NotificationsDemo::class);
 Route::get('/tables', TablesDemo::class);

docs-assets/screenshots/schema.js

@@ -1112,8 +1112,8 @@ export default {
             deviceScaleFactor: 3,
         },
     },
-    'forms/layout/fieldset/simple': {
-        url: 'forms/layout',
+    'schema/layout/fieldset/simple': {
+        url: 'schema/layout',
         selector: '#fieldset',
         viewport: {
             width: 1920,
@@ -1121,8 +1121,8 @@ export default {
             deviceScaleFactor: 3,
         },
     },
-    'forms/layout/tabs/simple': {
-        url: 'forms/layout',
+    'schema/layout/tabs/simple': {
+        url: 'schema/layout',
         selector: '#tabs',
         viewport: {
             width: 1920,
@@ -1130,8 +1130,8 @@ export default {
             deviceScaleFactor: 3,
         },
     },
-    'forms/layout/tabs/icons': {
-        url: 'forms/layout',
+    'schema/layout/tabs/icons': {
+        url: 'schema/layout',
         selector: '#tabsIcons',
         viewport: {
             width: 1920,
@@ -1139,8 +1139,8 @@ export default {
             deviceScaleFactor: 3,
         },
     },
-    'forms/layout/tabs/icons-after': {
-        url: 'forms/layout',
+    'schema/layout/tabs/icons-after': {
+        url: 'schema/layout',
         selector: '#tabsIconsAfter',
         viewport: {
             width: 1920,
@@ -1148,8 +1148,8 @@ export default {
             deviceScaleFactor: 3,
         },
     },
-    'forms/layout/tabs/badges': {
-        url: 'forms/layout',
+    'schema/layout/tabs/badges': {
+        url: 'schema/layout',
         selector: '#tabsBadges',
         viewport: {
             width: 1920,
@@ -1157,8 +1157,8 @@ export default {
             deviceScaleFactor: 3,
         },
     },
-    'forms/layout/wizard/simple': {
-        url: 'forms/layout',
+    'schema/layout/wizard/simple': {
+        url: 'schema/layout',
         selector: '#wizard',
         viewport: {
             width: 1920,
@@ -1166,8 +1166,8 @@ export default {
             deviceScaleFactor: 3,
         },
     },
-    'forms/layout/wizard/icons': {
-        url: 'forms/layout',
+    'schema/layout/wizard/icons': {
+        url: 'schema/layout',
         selector: '#wizardIcons',
         viewport: {
             width: 1920,
@@ -1175,8 +1175,8 @@ export default {
             deviceScaleFactor: 3,
         },
     },
-    'forms/layout/wizard/completed-icons': {
-        url: 'forms/layout',
+    'schema/layout/wizard/completed-icons': {
+        url: 'schema/layout',
         selector: '#wizardCompletedIcons',
         viewport: {
             width: 1920,
@@ -1184,8 +1184,8 @@ export default {
             deviceScaleFactor: 3,
         },
     },
-    'forms/layout/wizard/descriptions': {
-        url: 'forms/layout',
+    'schema/layout/wizard/descriptions': {
+        url: 'schema/layout',
         selector: '#wizardDescriptions',
         viewport: {
             width: 1920,
@@ -1193,8 +1193,8 @@ export default {
             deviceScaleFactor: 3,
         },
     },
-    'forms/layout/section/simple': {
-        url: 'forms/layout',
+    'schema/layout/section/simple': {
+        url: 'schema/layout',
         selector: '#section',
         viewport: {
             width: 1920,
@@ -1202,8 +1202,8 @@ export default {
             deviceScaleFactor: 3,
         },
     },
-    'forms/layout/section/header/actions': {
-        url: 'forms/layout',
+    'schema/layout/section/header/actions': {
+        url: 'schema/layout',
         selector: '#sectionHeaderActions',
         viewport: {
             width: 1920,
@@ -1211,8 +1211,8 @@ export default {
             deviceScaleFactor: 3,
         },
     },
-    'forms/layout/section/footer/actions': {
-        url: 'forms/layout',
+    'schema/layout/section/footer/actions': {
+        url: 'schema/layout',
         selector: '#sectionFooterActions',
         viewport: {
             width: 1920,
@@ -1220,8 +1220,8 @@ export default {
             deviceScaleFactor: 3,
         },
     },
-    'forms/layout/section/icons': {
-        url: 'forms/layout',
+    'schema/layout/section/icons': {
+        url: 'schema/layout',
         selector: '#sectionIcons',
         viewport: {
             width: 1920,
@@ -1229,8 +1229,8 @@ export default {
             deviceScaleFactor: 3,
         },
     },
-    'forms/layout/section/aside': {
-        url: 'forms/layout',
+    'schema/layout/section/aside': {
+        url: 'schema/layout',
         selector: '#sectionAside',
         viewport: {
             width: 1920,
@@ -1238,8 +1238,8 @@ export default {
             deviceScaleFactor: 3,
         },
     },
-    'forms/layout/section/collapsed': {
-        url: 'forms/layout',
+    'schema/layout/section/collapsed': {
+        url: 'schema/layout',
         selector: '#sectionCollapsed',
         viewport: {
             width: 1920,
@@ -1247,8 +1247,8 @@ export default {
             deviceScaleFactor: 3,
         },
     },
-    'forms/layout/section/compact': {
-        url: 'forms/layout',
+    'schema/layout/section/compact': {
+        url: 'schema/layout',
         selector: '#sectionCompact',
         viewport: {
             width: 1920,
@@ -1256,8 +1256,8 @@ export default {
             deviceScaleFactor: 3,
         },
     },
-    'forms/layout/section/without-header': {
-        url: 'forms/layout',
+    'schema/layout/section/without-header': {
+        url: 'schema/layout',
         selector: '#sectionWithoutHeader',
         viewport: {
             width: 1920,
@@ -1265,8 +1265,8 @@ export default {
             deviceScaleFactor: 3,
         },
     },
-    'forms/layout/split/simple': {
-        url: 'forms/layout',
+    'schema/layout/split/simple': {
+        url: 'schema/layout',
         selector: '#split',
         viewport: {
             width: 1920,
@@ -1274,17 +1274,8 @@ export default {
             deviceScaleFactor: 3,
         },
     },
-    'forms/layout/placeholder/simple': {
-        url: 'forms/layout',
-        selector: '#placeholder',
-        viewport: {
-            width: 1920,
-            height: 640,
-            deviceScaleFactor: 3,
-        },
-    },
-    'forms/layout/actions/anonymous/simple': {
-        url: 'forms/layout',
+    'schema/layout/actions/anonymous/simple': {
+        url: 'schema/layout',
         selector: '#anonymousActions',
         viewport: {
             width: 1920,
@@ -1292,8 +1283,8 @@ export default {
             deviceScaleFactor: 3,
         },
     },
-    'forms/layout/actions/anonymous/full-width': {
-        url: 'forms/layout',
+    'schema/layout/actions/anonymous/full-width': {
+        url: 'schema/layout',
         selector: '#anonymousActionsFullWidth',
         viewport: {
             width: 1920,
@@ -1301,8 +1292,8 @@ export default {
             deviceScaleFactor: 3,
         },
     },
-    'forms/layout/actions/anonymous/horizontally-aligned-center': {
-        url: 'forms/layout',
+    'schema/layout/actions/anonymous/horizontally-aligned-center': {
+        url: 'schema/layout',
         selector: '#anonymousActionsHorizontallyAlignedCenter',
         viewport: {
             width: 1920,
@@ -1310,8 +1301,8 @@ export default {
             deviceScaleFactor: 3,
         },
     },
-    'forms/layout/actions/anonymous/vertically-aligned-end': {
-        url: 'forms/layout',
+    'schema/layout/actions/anonymous/vertically-aligned-end': {
+        url: 'schema/layout',
         selector: '#anonymousActionsVerticallyAlignedEnd',
         viewport: {
             width: 1920,
@@ -1685,168 +1676,6 @@ export default {
             deviceScaleFactor: 3,
         },
     },
-    'infolists/layout/fieldset/simple': {
-        url: 'infolists/layout',
-        selector: '#fieldset',
-        viewport: {
-            width: 1920,
-            height: 640,
-            deviceScaleFactor: 3,
-        },
-    },
-    'infolists/layout/tabs/simple': {
-        url: 'infolists/layout',
-        selector: '#tabs',
-        viewport: {
-            width: 1920,
-            height: 640,
-            deviceScaleFactor: 3,
-        },
-    },
-    'infolists/layout/tabs/icons': {
-        url: 'infolists/layout',
-        selector: '#tabsIcons',
-        viewport: {
-            width: 1920,
-            height: 640,
-            deviceScaleFactor: 3,
-        },
-    },
-    'infolists/layout/tabs/icons-after': {
-        url: 'infolists/layout',
-        selector: '#tabsIconsAfter',
-        viewport: {
-            width: 1920,
-            height: 640,
-            deviceScaleFactor: 3,
-        },
-    },
-    'infolists/layout/tabs/badges': {
-        url: 'infolists/layout',
-        selector: '#tabsBadges',
-        viewport: {
-            width: 1920,
-            height: 640,
-            deviceScaleFactor: 3,
-        },
-    },
-    'infolists/layout/section/simple': {
-        url: 'infolists/layout',
-        selector: '#section',
-        viewport: {
-            width: 1920,
-            height: 640,
-            deviceScaleFactor: 3,
-        },
-    },
-    'infolists/layout/section/header/actions': {
-        url: 'infolists/layout',
-        selector: '#sectionHeaderActions',
-        viewport: {
-            width: 1920,
-            height: 640,
-            deviceScaleFactor: 3,
-        },
-    },
-    'infolists/layout/section/footer/actions': {
-        url: 'infolists/layout',
-        selector: '#sectionFooterActions',
-        viewport: {
-            width: 1920,
-            height: 640,
-            deviceScaleFactor: 3,
-        },
-    },
-    'infolists/layout/section/icons': {
-        url: 'infolists/layout',
-        selector: '#sectionIcons',
-        viewport: {
-            width: 1920,
-            height: 640,
-            deviceScaleFactor: 3,
-        },
-    },
-    'infolists/layout/section/aside': {
-        url: 'infolists/layout',
-        selector: '#sectionAside',
-        viewport: {
-            width: 1920,
-            height: 640,
-            deviceScaleFactor: 3,
-        },
-    },
-    'infolists/layout/section/collapsed': {
-        url: 'infolists/layout',
-        selector: '#sectionCollapsed',
-        viewport: {
-            width: 1920,
-            height: 640,
-            deviceScaleFactor: 3,
-        },
-    },
-    'infolists/layout/section/compact': {
-        url: 'infolists/layout',
-        selector: '#sectionCompact',
-        viewport: {
-            width: 1920,
-            height: 640,
-            deviceScaleFactor: 3,
-        },
-    },
-    'infolists/layout/section/without-header': {
-        url: 'infolists/layout',
-        selector: '#sectionWithoutHeader',
-        viewport: {
-            width: 1920,
-            height: 640,
-            deviceScaleFactor: 3,
-        },
-    },
-    'infolists/layout/split/simple': {
-        url: 'infolists/layout',
-        selector: '#split',
-        viewport: {
-            width: 1920,
-            height: 640,
-            deviceScaleFactor: 3,
-        },
-    },
-    'infolists/layout/actions/anonymous/simple': {
-        url: 'infolists/layout',
-        selector: '#anonymousActions',
-        viewport: {
-            width: 1920,
-            height: 640,
-            deviceScaleFactor: 3,
-        },
-    },
-    'infolists/layout/actions/anonymous/full-width': {
-        url: 'infolists/layout',
-        selector: '#anonymousActionsFullWidth',
-        viewport: {
-            width: 1920,
-            height: 640,
-            deviceScaleFactor: 3,
-        },
-    },
-    'infolists/layout/actions/anonymous/horizontally-aligned-center': {
-        url: 'infolists/layout',
-        selector: '#anonymousActionsHorizontallyAlignedCenter',
-        viewport: {
-            width: 1920,
-            height: 640,
-            deviceScaleFactor: 3,
-        },
-    },
-    'infolists/layout/actions/anonymous/vertically-aligned-end': {
-        url: 'infolists/layout',
-        selector: '#anonymousActionsVerticallyAlignedEnd',
-        viewport: {
-            width: 1920,
-            height: 640,
-            deviceScaleFactor: 3,
-        },
-    },
     'notifications/success': {
         url: 'notifications?method=success',
         selector: 'body',

docs/04-ui/01-overview.md

@@ -2,8 +2,6 @@
 title: Overview
 ---
 
-## Overview
-
 Filament packages consume a set of core Blade components that aim to provide a consistent and maintainable foundation for all interfaces. Some of these components are also available for use in your own applications and Filament plugins.
 
 ## Available UI components

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

@@ -20,7 +20,7 @@ Action::make('edit')
     ->button()
 ```
 
-<AutoScreenshot name="actions/trigger-button/button" alt="Button trigger" version="3.x" />
+<AutoScreenshot name="actions/trigger-button/button" alt="Button trigger" version="4.x" />
 
 "Link" triggers have no background color. They must have a label and optionally an [icon](#setting-an-icon). They look like a link that you might find embedded within text. You can switch to that style with the `link()` method:
 
@@ -29,7 +29,7 @@ Action::make('edit')
     ->link()
 ```
 
-<AutoScreenshot name="actions/trigger-button/link" alt="Link trigger" version="3.x" />
+<AutoScreenshot name="actions/trigger-button/link" alt="Link trigger" version="4.x" />
 
 "Icon button" triggers are circular buttons with an [icon](#setting-an-icon) and no label. You can switch to that style with the `iconButton()` method:
 
@@ -39,7 +39,7 @@ Action::make('edit')
     ->iconButton()
 ```
 
-<AutoScreenshot name="actions/trigger-button/icon-button" alt="Icon button trigger" version="3.x" />
+<AutoScreenshot name="actions/trigger-button/icon-button" alt="Icon button trigger" version="4.x" />
 
 "Badge" triggers have a background color, label, and optionally an [icon](#setting-an-icon). You can use a badge as trigger using the `badge()` method:
 
@@ -48,7 +48,7 @@ Action::make('edit')
     ->badge()
 ```
 
-<AutoScreenshot name="actions/trigger-button/badge" alt="Badge trigger" version="3.x" />
+<AutoScreenshot name="actions/trigger-button/badge" alt="Badge trigger" version="4.x" />
 
 ### Using an icon button on mobile devices only
 
@@ -88,7 +88,7 @@ Action::make('delete')
     ->color('danger')
 ```
 
-<AutoScreenshot name="actions/trigger-button/danger" alt="Red trigger" version="3.x" />
+<AutoScreenshot name="actions/trigger-button/danger" alt="Red trigger" version="4.x" />
 
 ## Setting a size
 
@@ -101,7 +101,7 @@ Action::make('create')
     ->size(ActionSize::Large)
 ```
 
-<AutoScreenshot name="actions/trigger-button/large" alt="Large trigger" version="3.x" />
+<AutoScreenshot name="actions/trigger-button/large" alt="Large trigger" version="4.x" />
 
 ## Setting an icon
 
@@ -113,7 +113,7 @@ Action::make('edit')
     ->icon('heroicon-m-pencil-square')
 ```
 
-<AutoScreenshot name="actions/trigger-button/icon" alt="Trigger with icon" version="3.x" />
+<AutoScreenshot name="actions/trigger-button/icon" alt="Trigger with icon" version="4.x" />
 
 You can also change the icon's position to be after the label instead of before it, using the `iconPosition()` method:
 
@@ -126,7 +126,7 @@ Action::make('edit')
     ->iconPosition(IconPosition::After)
 ```
 
-<AutoScreenshot name="actions/trigger-button/icon-after" alt="Trigger with icon after the label" version="3.x" />
+<AutoScreenshot name="actions/trigger-button/icon-after" alt="Trigger with icon after the label" version="4.x" />
 
 ## Authorization
 
@@ -185,7 +185,7 @@ Action::make('filter')
     ->badge(5)
 ```
 
-<AutoScreenshot name="actions/trigger-button/badged" alt="Trigger with badge" version="3.x" />
+<AutoScreenshot name="actions/trigger-button/badged" alt="Trigger with badge" version="4.x" />
 
 You can also pass a [color](../styling/colors) to be used for the badge:
 
@@ -199,7 +199,7 @@ Action::make('filter')
     ->badgeColor('success')
 ```
 
-<AutoScreenshot name="actions/trigger-button/success-badged" alt="Trigger with green badge" version="3.x" />
+<AutoScreenshot name="actions/trigger-button/success-badged" alt="Trigger with green badge" version="4.x" />
 
 ## Outlined button style
 
@@ -214,7 +214,7 @@ Action::make('edit')
     ->outlined()
 ```
 
-<AutoScreenshot name="actions/trigger-button/outlined" alt="Outlined trigger button" version="3.x" />
+<AutoScreenshot name="actions/trigger-button/outlined" alt="Outlined trigger button" version="4.x" />
 
 ## Adding extra HTML attributes
 

packages/actions/docs/04-modals.md

@@ -19,7 +19,7 @@ Action::make('delete')
     ->requiresConfirmation()
 ```
 
-<AutoScreenshot name="actions/modal/confirmation" alt="Confirmation modal" version="3.x" />
+<AutoScreenshot name="actions/modal/confirmation" alt="Confirmation modal" version="4.x" />
 
 > 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()` closure.
 
@@ -47,7 +47,7 @@ Action::make('updateAuthor')
     })
 ```
 
-<AutoScreenshot name="actions/modal/form" alt="Modal with form" version="3.x" />
+<AutoScreenshot name="actions/modal/form" alt="Modal with form" version="4.x" />
 
 ### Filling the form with existing data
 
@@ -76,7 +76,7 @@ Action::make('updateAuthor')
 
 ### Using a wizard as a modal form
 
-You may create a [multistep form wizard](../forms/layout/wizard) inside a modal. Instead of using a `form()`, define a `steps()` array and pass your `Step` objects:
+You may create a [multistep form wizard](../schema/layout/wizard) inside a modal. Instead of using a `form()`, define a `steps()` array and pass your `Step` objects:
 
 ```php
 use Filament\Forms\Components\MarkdownEditor;
@@ -114,7 +114,7 @@ Action::make('create')
     ])
 ```
 
-<AutoScreenshot name="actions/modal/wizard" alt="Modal with wizard" version="3.x" />
+<AutoScreenshot name="actions/modal/wizard" alt="Modal with wizard" version="4.x" />
 
 ### Disabling all form fields
 
@@ -156,7 +156,7 @@ Action::make('delete')
     ->modalSubmitActionLabel('Yes, delete it')
 ```
 
-<AutoScreenshot name="actions/modal/confirmation-custom-text" alt="Confirmation modal with custom text" version="3.x" />
+<AutoScreenshot name="actions/modal/confirmation-custom-text" alt="Confirmation modal with custom text" version="4.x" />
 
 ## Adding an icon inside the modal
 
@@ -171,7 +171,7 @@ Action::make('delete')
     ->modalIcon('heroicon-o-trash')
 ```
 
-<AutoScreenshot name="actions/modal/icon" alt="Confirmation modal with icon" version="3.x" />
+<AutoScreenshot name="actions/modal/icon" alt="Confirmation modal with icon" version="4.x" />
 
 By default, the icon will inherit the color of the action button. You may customize the color of the icon using the `modalIconColor()` method:
 
@@ -286,7 +286,7 @@ Action::make('updateAuthor')
     ->slideOver()
 ```
 
-<AutoScreenshot name="actions/modal/slide-over" alt="Slide over with form" version="3.x" />
+<AutoScreenshot name="actions/modal/slide-over" alt="Slide over with form" version="4.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.
 

packages/actions/docs/05-grouping-actions.md

@@ -15,7 +15,7 @@ ActionGroup::make([
 ])
 ```
 
-<AutoScreenshot name="actions/group/simple" alt="Action group" version="3.x" />
+<AutoScreenshot name="actions/group/simple" alt="Action group" version="4.x" />
 
 This page is about customizing the look of the group's trigger button and dropdown.
 
@@ -36,7 +36,7 @@ ActionGroup::make([
     ->button()
 ```
 
-<AutoScreenshot name="actions/group/customized" alt="Action group with custom trigger style" version="3.x" />
+<AutoScreenshot name="actions/group/customized" alt="Action group with custom trigger style" version="4.x" />
 
 ## Setting the placement of the dropdown
 
@@ -49,7 +49,7 @@ ActionGroup::make([
     ->dropdownPlacement('top-start')
 ```
 
-<AutoScreenshot name="actions/group/placement" alt="Action group with top placement style" version="3.x" />
+<AutoScreenshot name="actions/group/placement" alt="Action group with top placement style" version="4.x" />
 
 ## Adding dividers between actions
 
@@ -66,7 +66,7 @@ ActionGroup::make([
 
 The `dropdown(false)` method puts the actions inside the parent dropdown, instead of a new nested dropdown.
 
-<AutoScreenshot name="actions/group/nested" alt="Action groups nested with dividers" version="3.x" />
+<AutoScreenshot name="actions/group/nested" alt="Action groups nested with dividers" version="4.x" />
 
 ## Setting the width of the dropdown
 

packages/forms/docs/02-getting-started.md

@@ -5,17 +5,17 @@ import AutoScreenshot from "@components/AutoScreenshot.astro"
 
 ## Overview
 
-Filament's form package allows you to easily build dynamic forms in your app. You can use it to [add a form to any Livewire component](adding-a-form-to-a-livewire-component). Additionally, it's used within other Filament packages to render forms within [app resources](../panels/resources/getting-started), [action modals](../actions/modals), [table filters](../tables/filters/getting-started), and more. Learning how to build forms is essential to learning how to use these Filament packages.
+Filament's form package allows you to easily build dynamic forms in your app. You can use it to [add a form to any Livewire component](adding-a-form-to-a-livewire-component). Additionally, it's used within other Filament packages to render forms within [app resources](../panels/resources), [action modals](../actions/modals), [table filters](../tables/filters/getting-started), and more. Learning how to build forms is essential to learning how to use these Filament packages.
 
-This guide will walk you through the basics of building forms with Filament's form package. If you're planning to add a new form to your own Livewire component, you should [do that first](adding-a-form-to-a-livewire-component) and then come back. If you're adding a form to an [app resource](../panels/resources/getting-started), or another Filament package, you're ready to go!
+This guide will walk you through the basics of building forms with Filament's form package. If you're planning to add a new form to your own Livewire component, you should [do that first](adding-a-form-to-a-livewire-component) and then come back. If you're adding a form to an [app resource](../panels/resources), or another Filament package, you're ready to go!
 
 ## Form schemas
 
-All Filament forms have a "schema". This is an array, which contains [fields](fields/getting-started#available-fields) and [layout components](layout/getting-started#available-layout-components).
+All Filament forms have a "schema". This is an array, which contains [fields](fields#available-fields) and [layout components](../schema/layout#available-layout-components).
 
-Fields are the inputs that your user will fill their data into. For example, HTML's `<input>` or `<select>` elements. Each field has its own PHP class. For example, the [`TextInput`](fields/text-input) class is used to render a text input field, and the [`Select`](fields/select) class is used to render a select field. You can see a full [list of available fields here](fields/getting-started#available-fields).
+Fields are the inputs that your user will fill their data into. For example, HTML's `<input>` or `<select>` elements. Each field has its own PHP class. For example, the [`TextInput`](fields/text-input) class is used to render a text input field, and the [`Select`](fields/select) class is used to render a select field. You can see a full [list of available fields here](fields#available-fields).
 
-Layout components are used to group fields together, and to control how they are displayed. For example, you can use a [`Grid`](layout/grid#grid-component) component to display multiple fields side-by-side, or a [`Wizard`](layout/wizard) to separate fields into a multistep form. You can deeply nest layout components within each other to create very complex responsive UIs. You can see a full [list of available layout components here](layout/getting-started#available-layout-components).
+Layout components are used to group fields together, and to control how they are displayed. For example, you can use a [`Grid`](../schema/layout/grid#grid-component) component to display multiple fields side-by-side, or a [`Wizard`](layout/wizard) to separate fields into a multistep form. You can deeply nest layout components within each other to create very complex responsive UIs. You can see a full [list of available layout components here](layout#available-layout-components).
 
 ### Adding fields to a form schema
 
@@ -37,7 +37,7 @@ public function form(Schema $form): Schema
 }
 ```
 
-<AutoScreenshot name="forms/getting-started/fields" alt="Form fields" version="3.x" />
+<AutoScreenshot name="forms/getting-started/fields" alt="Form fields" version="4.x" />
 
 Forms within a panel and other packages usually have 2 columns by default. For custom forms, you can use the `columns()` method to achieve the same effect:
 
@@ -49,7 +49,7 @@ $form
     ->columns(2);
 ```
 
-<AutoScreenshot name="forms/getting-started/columns" alt="Form fields in 2 columns" version="3.x" />
+<AutoScreenshot name="forms/getting-started/columns" alt="Form fields in 2 columns" version="4.x" />
 
 Now, the `RichEditor` will only consume half of the available width. We can use the `columnSpan()` method to make it span the full width:
 
@@ -65,13 +65,13 @@ use Filament\Forms\Components\TextInput;
 ]
 ```
 
-<AutoScreenshot name="forms/getting-started/column-span" alt="Form fields in 2 columns, but with the rich editor spanning the full width of the form" version="3.x" />
+<AutoScreenshot name="forms/getting-started/column-span" alt="Form fields in 2 columns, but with the rich editor spanning the full width of the form" version="4.x" />
 
-You can learn more about columns and spans in the [layout documentation](layout/grid). You can even make them responsive!
+You can learn more about columns and spans in the [layout documentation](../schema/layout/grid). You can even make them responsive!
 
 ### Adding layout components to a form schema
 
-Let's add a new [`Section`](layout/section) to our form. `Section` is a layout component, and it allows you to add a heading and description to a set of fields. It can also allow fields inside it to collapse, which saves space in long forms.
+Let's add a new [`Section`](../schema/layout/section) to our form. `Section` is a layout component, and it allows you to add a heading and description to a set of fields. It can also allow fields inside it to collapse, which saves space in long forms.
 
 ```php
 use Filament\Forms\Components\RichEditor;
@@ -111,7 +111,7 @@ Section::make('Publishing')
     ])
 ```
 
-<AutoScreenshot name="forms/getting-started/section" alt="Form with section component" version="3.x" />
+<AutoScreenshot name="forms/getting-started/section" alt="Form with section component" version="4.x" />
 
 This section now contains a [`Select` field](fields/select) and a [`DateTimePicker` field](fields/date-time-picker). You can learn more about those fields and their functionalities on the respective docs pages.
 
@@ -207,7 +207,7 @@ use Illuminate\Support\Str;
 
 Now you've finished reading this guide, where to next? Here are some suggestions:
 
-- [Explore the available fields to collect input from your users.](fields/getting-started#available-fields)
-- [Check out the list of layout components to craft intuitive form structures with.](fields/getting-started#available-fields)
+- [Explore the available fields to collect input from your users.](fields#available-fields)
+- [Check out the list of layout components to craft intuitive form structures with.](fields#available-fields)
 - [Find out about all advanced techniques that you can customize forms to your needs.](advanced)
 - [Write automated tests for your forms using our suite of helper methods.](testing)

packages/forms/docs/03-fields/01-overview.md

@@ -1,5 +1,5 @@
 ---
-title: Getting started
+title: Overview
 ---
 import AutoScreenshot from "@components/AutoScreenshot.astro"
 
@@ -7,7 +7,7 @@ import AutoScreenshot from "@components/AutoScreenshot.astro"
 
 Field classes can be found in the `Filament\Form\Components` namespace.
 
-Fields reside within the schema of your form, alongside any [layout components](layout/getting-started).
+Fields reside within the schema of your form, alongside any [layout components](../schema/layout).
 
 Fields may be created using the static `make()` method, passing its unique name. The name of the field should correspond to a property on your Livewire component. You may use "dot notation" to bind fields to keys in arrays.
 
@@ -17,7 +17,7 @@ use Filament\Forms\Components\TextInput;
 TextInput::make('name')
 ```
 
-<AutoScreenshot name="forms/fields/simple" alt="Form field" version="3.x" />
+<AutoScreenshot name="forms/fields/simple" alt="Form field" version="4.x" />
 
 ## Available fields
 
@@ -77,7 +77,7 @@ TextInput::make('name')
 
 ## Setting a default value
 
-Fields may have a default value. This will be filled if the [form's `fill()` method](getting-started#default-data) is called without any arguments. To define a default value, use the `default()` method:
+Fields may have a default value. This will be filled if the form's `fill()` method is called without any arguments. To define a default value, use the `default()` method:
 
 ```php
 use Filament\Forms\Components\TextInput;
@@ -117,7 +117,7 @@ TextInput::make('name')
     ->helperText(view('name-helper-text'))
 ```
 
-<AutoScreenshot name="forms/fields/helper-text" alt="Form field with helper text" version="3.x" />
+<AutoScreenshot name="forms/fields/helper-text" alt="Form field with helper text" version="4.x" />
 
 ## Adding a hint next to the label
 
@@ -148,7 +148,7 @@ TextInput::make('password')
     ->hint(view('forgotten-password-hint'))
 ```
 
-<AutoScreenshot name="forms/fields/hint" alt="Form field with hint" version="3.x" />
+<AutoScreenshot name="forms/fields/hint" alt="Form field with hint" version="4.x" />
 
 ### Changing the text color of the hint
 
@@ -162,7 +162,7 @@ RichEditor::make('content')
     ->hintColor('primary')
 ```
 
-<AutoScreenshot name="forms/fields/hint-color" alt="Form field with hint color" version="3.x" />
+<AutoScreenshot name="forms/fields/hint-color" alt="Form field with hint color" version="4.x" />
 
 ### Adding an icon aside the hint
 
@@ -176,7 +176,7 @@ RichEditor::make('content')
     ->hintIcon('heroicon-m-language')
 ```
 
-<AutoScreenshot name="forms/fields/hint-icon" alt="Form field with hint icon" version="3.x" />
+<AutoScreenshot name="forms/fields/hint-icon" alt="Form field with hint icon" version="4.x" />
 
 #### Adding a tooltip to a hint icon
 
@@ -229,7 +229,7 @@ TextInput::make('name')
     ->disabled()
 ```
 
-<AutoScreenshot name="forms/fields/disabled" alt="Disabled form field" version="3.x" />
+<AutoScreenshot name="forms/fields/disabled" alt="Disabled form field" version="4.x" />
 
 Optionally, you may pass a boolean value to control if the field should be disabled or not:
 
@@ -292,7 +292,7 @@ TextInput::make('name')
     ->placeholder('John Doe')
 ```
 
-<AutoScreenshot name="forms/fields/placeholder" alt="Form field with placeholder" version="3.x" />
+<AutoScreenshot name="forms/fields/placeholder" alt="Form field with placeholder" version="4.x" />
 
 ## Marking a field as required
 

packages/forms/docs/03-fields/02-text-input.md

@@ -13,7 +13,7 @@ use Filament\Forms\Components\TextInput;
 TextInput::make('name')
 ```
 
-<AutoScreenshot name="forms/fields/text-input/simple" alt="Text input" version="3.x" />
+<AutoScreenshot name="forms/fields/text-input/simple" alt="Text input" version="4.x" />
 
 ## Setting the HTML input type
 
@@ -130,7 +130,7 @@ TextInput::make('domain')
     ->suffix('.com')
 ```
 
-<AutoScreenshot name="forms/fields/text-input/affix" alt="Text input with affixes" version="3.x" />
+<AutoScreenshot name="forms/fields/text-input/affix" alt="Text input with affixes" version="4.x" />
 
 ### Using icons as affixes
 
@@ -144,7 +144,7 @@ TextInput::make('domain')
     ->suffixIcon('heroicon-m-globe-alt')
 ```
 
-<AutoScreenshot name="forms/fields/text-input/suffix-icon" alt="Text input with suffix icon" version="3.x" />
+<AutoScreenshot name="forms/fields/text-input/suffix-icon" alt="Text input with suffix icon" version="4.x" />
 
 #### Setting the affix icon's color
 
@@ -171,7 +171,7 @@ TextInput::make('password')
     ->revealable()
 ```
 
-<AutoScreenshot name="forms/fields/text-input/revealable-password" alt="Text input with revealable password" version="3.x" />
+<AutoScreenshot name="forms/fields/text-input/revealable-password" alt="Text input with revealable password" version="4.x" />
 
 ## Input masking
 
@@ -213,7 +213,7 @@ TextInput::make('amount')
 
 ## Making the field read-only
 
-Not to be confused with [disabling the field](getting-started#disabling-a-field), you may make the field "read-only" using the `readOnly()` method:
+Not to be confused with [disabling the field](overview#disabling-a-field), you may make the field "read-only" using the `readOnly()` method:
 
 ```php
 use Filament\Forms\Components\TextInput;
@@ -222,7 +222,7 @@ TextInput::make('name')
     ->readOnly()
 ```
 
-There are a few differences, compared to [`disabled()`](getting-started#disabling-a-field):
+There are a few differences, compared to [`disabled()`](overview#disabling-a-field):
 
 - When using `readOnly()`, the field will still be sent to the server when the form is submitted. It can be mutated with the browser console, or via JavaScript. You can use [`dehydrated(false)`](advanced#preventing-a-field-from-being-dehydrated) to prevent this.
 - There are no styling changes, such as less opacity, when using `readOnly()`.

packages/forms/docs/03-fields/03-select.md

@@ -26,7 +26,7 @@ Select::make('status')
     ])
 ```
 
-<AutoScreenshot name="forms/fields/select/simple" alt="Select" version="3.x" />
+<AutoScreenshot name="forms/fields/select/simple" alt="Select" version="4.x" />
 
 ## Enabling the JavaScript select
 
@@ -44,7 +44,7 @@ Select::make('status')
     ->native(false)
 ```
 
-<AutoScreenshot name="forms/fields/select/javascript" alt="JavaScript select" version="3.x" />
+<AutoScreenshot name="forms/fields/select/javascript" alt="JavaScript select" version="4.x" />
 
 ## Searching options
 
@@ -59,7 +59,7 @@ Select::make('author_id')
     ->searchable()
 ```
 
-<AutoScreenshot name="forms/fields/select/searchable" alt="Searchable select" version="3.x" />
+<AutoScreenshot name="forms/fields/select/searchable" alt="Searchable select" version="4.x" />
 
 ### Returning custom search results
 
@@ -95,7 +95,7 @@ Select::make('technologies')
     ])
 ```
 
-<AutoScreenshot name="forms/fields/select/multiple" alt="Multi-select" version="3.x" />
+<AutoScreenshot name="forms/fields/select/multiple" alt="Multi-select" version="4.x" />
 
 These options are returned in JSON format. If you're saving them using Eloquent, you should be sure to add an `array` [cast](https://laravel.com/docs/eloquent-mutators#array-and-json-casting) to the model property:
 
@@ -143,7 +143,7 @@ Select::make('status')
     ])
 ```
 
-<AutoScreenshot name="forms/fields/select/grouped" alt="Grouped select" version="3.x" />
+<AutoScreenshot name="forms/fields/select/grouped" alt="Grouped select" version="4.x" />
 
 ## Integrating with an Eloquent relationship
 
@@ -299,11 +299,11 @@ Select::make('author_id')
     ]),
 ```
 
-<AutoScreenshot name="forms/fields/select/create-option" alt="Select with create option button" version="3.x" />
+<AutoScreenshot name="forms/fields/select/create-option" alt="Select with create option button" version="4.x" />
 
 The form opens in a modal, where the user can fill it with data. Upon form submission, the new record is selected by the field.
 
-<AutoScreenshot name="forms/fields/select/create-option-modal" alt="Select with create option modal" version="3.x" />
+<AutoScreenshot name="forms/fields/select/create-option-modal" alt="Select with create option modal" version="4.x" />
 
 #### Customizing new option creation
 
@@ -340,11 +340,11 @@ Select::make('author_id')
     ]),
 ```
 
-<AutoScreenshot name="forms/fields/select/edit-option" alt="Select with edit option button" version="3.x" />
+<AutoScreenshot name="forms/fields/select/edit-option" alt="Select with edit option button" version="4.x" />
 
 The form opens in a modal, where the user can fill it with data. Upon form submission, the data from the form is saved back to the record.
 
-<AutoScreenshot name="forms/fields/select/edit-option-modal" alt="Select with edit option modal" version="3.x" />
+<AutoScreenshot name="forms/fields/select/edit-option-modal" alt="Select with edit option modal" version="4.x" />
 
 ### Handling `MorphTo` relationships
 
@@ -483,7 +483,7 @@ Select::make('domain')
     ->suffix('.com')
 ```
 
-<AutoScreenshot name="forms/fields/select/affix" alt="Select with affixes" version="3.x" />
+<AutoScreenshot name="forms/fields/select/affix" alt="Select with affixes" version="4.x" />
 
 ### Using icons as affixes
 
@@ -496,7 +496,7 @@ Select::make('domain')
     ->suffixIcon('heroicon-m-globe-alt')
 ```
 
-<AutoScreenshot name="forms/fields/select/suffix-icon" alt="Select with suffix icon" version="3.x" />
+<AutoScreenshot name="forms/fields/select/suffix-icon" alt="Select with suffix icon" version="4.x" />
 
 #### Setting the affix icon's color