Merge pull request #14975 from thethunderturner/feature/uncontained-fieldset

Feature: Uncontained Fieldset

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

@@ -67,6 +67,28 @@ class LayoutDemo extends Component implements HasActions, HasSchemas
                             ])
                             ->columns(3),
                     ]),
+                Group::make()
+                    ->id('fieldsetNotContained')
+                    ->extraAttributes([
+                        'class' => 'p-16 max-w-2xl',
+                    ])
+                    ->schema([
+                        Fieldset::make('Rate limiting')
+                            ->statePath('fieldsetNotContained')
+                            ->contained(false)
+                            ->schema([
+                                TextInput::make('hits')
+                                    ->default(30),
+                                Select::make('period')
+                                    ->default('hour')
+                                    ->options([
+                                        'hour' => 'Hour',
+                                    ]),
+                                TextInput::make('maximum')
+                                    ->default(100),
+                            ])
+                            ->columns(3),
+                    ]),
                 Group::make()
                     ->id('tabs')
                     ->extraAttributes([

docs-assets/screenshots/schema.js

@@ -1517,6 +1517,15 @@ export default {
             deviceScaleFactor: 3,
         },
     },
+    'schemas/layout/fieldset/not-contained': {
+        url: 'schemas/layout',
+        selector: '#fieldsetNotContained',
+        viewport: {
+            width: 1920,
+            height: 640,
+            deviceScaleFactor: 3,
+        },
+    },
     'schemas/layout/tabs/simple': {
         url: 'schemas/layout',
         selector: '#tabs',

packages/schemas/docs/02-layouts.md

@@ -175,6 +175,22 @@ Fieldset::make('Label')
 
 <AutoScreenshot name="schemas/layout/fieldset/simple" alt="Fieldset" version="4.x" />
 
+### Removing the border from a fieldset
+
+You can remove the container border from a fieldset using the `contained(false)` method:
+
+```php
+use Filament\Schemas\Components\Fieldset;
+
+Fieldset::make('Label')
+    ->contained(false)
+    ->schema([
+        // ...
+    ])
+```
+
+<AutoScreenshot name="schemas/layout/fieldset/not-contained" alt="Fieldset without a container border" version="4.x" />
+
 ## Using container queries
 
 In addition to traditional breakpoints based on the size of the viewport, you can also use [container queries](https://tailwindcss.com/docs/responsive-design#container-queries) to create responsive layouts based on the size of a parent container. This is particularly useful when the size of the parent container is not directly tied to the size of the viewport. For example, when using a collapsible sidebar alongside the content, the content area dynamically adjusts its size depending on the collapse state of the sidebar.

packages/schemas/resources/views/components/fieldset.blade.php

@@ -3,9 +3,11 @@
     $id = $getId();
     $isLabelHidden = $isLabelHidden();
     $label = $getLabel();
+    $isContained = $isContained();
 @endphp
 
 <x-filament::fieldset
+    :contained="$isContained"
     :label="$label"
     :label-hidden="$isLabelHidden"
     :required="isset($isMarkedAsRequired) ? $isMarkedAsRequired() : false"

packages/schemas/src/Components/Fieldset.php

@@ -7,10 +7,12 @@ use Filament\Forms\Components\Concerns\CanBeMarkedAsRequired;
 use Filament\Schemas\Components\Concerns\EntanglesStateWithSingularRelationship;
 use Filament\Schemas\Components\Concerns\HasLabel;
 use Filament\Schemas\Components\Contracts\CanEntangleWithSingularRelationships;
+use Filament\Support\Concerns\CanBeContained;
 use Illuminate\Contracts\Support\Htmlable;
 
 class Fieldset extends Component implements CanEntangleWithSingularRelationships
 {
+    use CanBeContained;
     use CanBeMarkedAsRequired;
     use EntanglesStateWithSingularRelationship;
     use HasLabel;

packages/support/resources/css/components/fieldset.css

@@ -1,6 +1,4 @@
 .fi-fieldset {
-    @apply rounded-xl border border-gray-200 p-6 dark:border-white/10;
-
     & > legend {
         @apply -ms-2 px-2 text-sm leading-6 font-medium text-gray-950 dark:text-white;
 
@@ -14,4 +12,12 @@
             @apply sr-only;
         }
     }
+
+    &:not(.fi-fieldset-not-contained) {
+        @apply rounded-xl border border-gray-200 p-6 dark:border-white/10;
+    }
+
+    &.fi-fieldset-not-contained {
+        @apply pt-6;
+    }
 }

packages/support/resources/views/components/fieldset.blade.php

@@ -1,4 +1,5 @@
 @props([
+    'contained' => true,
     'label' => null,
     'labelHidden' => false,
     'required' => false,
@@ -9,6 +10,7 @@
         $attributes->class([
             'fi-fieldset',
             'fi-fieldset-label-hidden' => $labelHidden,
+            'fi-fieldset-not-contained' => ! $contained,
         ])
     }}
 >