Document gap and dense layout options (#18222)

* Document gap and dense options

* Add dense gap screenshot

* chore: fix code style

* consistency

---------

Co-authored-by: Dan Harrin <git@danharrin.com>

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

@@ -11,6 +11,7 @@ use Filament\Forms\Components\Select;
 use Filament\Forms\Components\Textarea;
 use Filament\Forms\Components\TextInput;
 use Filament\Forms\Components\Toggle;
+use Filament\Infolists\Components\TextEntry;
 use Filament\Schemas\Components\Actions;
 use Filament\Schemas\Components\EmptyState;
 use Filament\Schemas\Components\Fieldset;
@@ -90,6 +91,38 @@ class LayoutDemo extends Component implements HasActions, HasSchemas
                             ])
                             ->columns(3),
                     ]),
+                Group::make()
+                    ->id('dense')
+                    ->extraAttributes([
+                        'class' => 'p-16 max-w-2xl',
+                    ])
+                    ->schema([
+                        Fieldset::make('Dense')
+                            ->columns(1)
+                            ->dense()
+                            ->schema([
+                                TextEntry::make('name')
+                                    ->state('Dan Harrin'),
+                                TextEntry::make('role')
+                                    ->state('Admin'),
+                            ]),
+                    ]),
+                Group::make()
+                    ->id('noGap')
+                    ->extraAttributes([
+                        'class' => 'p-16 max-w-2xl',
+                    ])
+                    ->schema([
+                        Fieldset::make('No gap')
+                            ->columns(1)
+                            ->gap(false)
+                            ->schema([
+                                TextEntry::make('name')
+                                    ->state('Dan Harrin'),
+                                TextEntry::make('role')
+                                    ->state('Admin'),
+                            ]),
+                    ]),
                 Group::make()
                     ->id('tabs')
                     ->extraAttributes([

docs-assets/screenshots/schema.js

@@ -1538,6 +1538,24 @@ export default {
             deviceScaleFactor: 3,
         },
     },
+    'schemas/layout/dense': {
+        url: 'schemas/layout',
+        selector: '#dense',
+        viewport: {
+            width: 1920,
+            height: 640,
+            deviceScaleFactor: 3,
+        },
+    },
+    'schemas/layout/no-gap': {
+        url: 'schemas/layout',
+        selector: '#noGap',
+        viewport: {
+            width: 1920,
+            height: 640,
+            deviceScaleFactor: 3,
+        },
+    },
     'schemas/layout/tabs/simple': {
         url: 'schemas/layout',
         selector: '#tabs',

packages/schemas/docs/02-layouts.md

@@ -404,6 +404,40 @@ Grid::make()
 
 In this example, the fallback breakpoints ensure that even in browsers that don't support container queries, the layout will still respond to viewport size changes, with the name field appearing first and the email field second on larger screens.
 
+## Controlling spacing between components
+
+### Reducing space between components
+
+The `dense()` method creates a more compact layout by reducing the spacing between components by 50%:
+
+```php
+use Filament\Schemas\Components\Grid;
+
+Grid::make()
+    ->dense()
+    ->schema([
+        // ...
+    ])
+```
+
+<AutoScreenshot name="schemas/layout/dense" alt="A layout with dense spacing" version="4.x" />
+
+### Removing space between components
+
+The `gap(false)` method removes space between components:
+
+```php
+use Filament\Schemas\Components\Grid;
+
+Grid::make()
+    ->gap(false)
+    ->schema([
+        // ...
+    ])
+```
+
+<AutoScreenshot name="schemas/layout/no-gap" alt="A layout with no gap" version="4.x" />
+
 ## Adding extra HTML attributes to a layout component
 
 You can pass extra HTML attributes to the component via the `extraAttributes()` method, which will be merged onto its outer HTML element. The attributes should be represented by an array, where the key is the attribute name and the value is the attribute value: