F
Filament•2mo ago
Fireflies

FusedGroup visual inconsistency

So i noticed that if you use FusedGroup insde a Section the background color of the other inputs do not match which creates visual inconsistency (my guess it's caused by box-shadow). It can only be seen when using the dark mode. I recreated it on Filament v4 DEMO repo at app/Filament/Resources/Blog/Links/Schemas/LinkForm.php Code to recreate: 
    public static function configure(Schema $schema): Schema
    {
        return $schema
            ->components([
                Section::make()
                    ->schema([
                        FusedGroup::make()
                            ->schema([
                                TextInput::make('title')
                                    ->maxLength(255)
                                    ->required(),
                                ColorPicker::make('color')
                                    ->required()
                                    ->hex()
                                    ->hexColor(),
                            ])
                            ->label('Test')
                            ->columns(2),
                Textarea::make('description')
                    ->maxLength(1024)
                    ->required()
                    ->columnSpanFull(),
                TextInput::make('url')
                    ->label('URL')
                    ->required()
                    ->maxLength(255)
                    ->columnSpanFull(),
                SpatieMediaLibraryFileUpload::make('image')
                    ->collection('link-images')
                    ->acceptedFileTypes(['image/jpeg']),
                    ]),
            ]);
    }
    public static function configure(Schema $schema): Schema
    {
        return $schema
            ->components([
                Section::make()
                    ->schema([
                        FusedGroup::make()
                            ->schema([
                                TextInput::make('title')
                                    ->maxLength(255)
                                    ->required(),
                                ColorPicker::make('color')
                                    ->required()
                                    ->hex()
                                    ->hexColor(),
                            ])
                            ->label('Test')
                            ->columns(2),
                Textarea::make('description')
                    ->maxLength(1024)
                    ->required()
                    ->columnSpanFull(),
                TextInput::make('url')
                    ->label('URL')
                    ->required()
                    ->maxLength(255)
                    ->columnSpanFull(),
                SpatieMediaLibraryFileUpload::make('image')
                    ->collection('link-images')
                    ->acceptedFileTypes(['image/jpeg']),
                    ]),
            ]);
    }
No description
Solution:
https://github.com/filamentphp/filament/issues/18275
GitHub
FusedGroup visual inconsistency · Issue #18275 · filamentphp/fila...
Package filament/filament Package Version v4 Laravel Version v12 Livewire Version v3 PHP Version PHP 8.4 Problem description When using a FusedGroup inside a Section, the background color of the ot...
Jump to solution
2 Replies
Dennis Koch
Dennis Koch•2mo ago
Can you please open an issue on GitHub?
Solution
Fireflies
Fireflies•5w ago
https://github.com/filamentphp/filament/issues/18275
GitHub
FusedGroup visual inconsistency · Issue #18275 · filamentphp/fila...
Package filament/filament Package Version v4 Laravel Version v12 Livewire Version v3 PHP Version PHP 8.4 Problem description When using a FusedGroup inside a Section, the background color of the ot...

Did you find this page helpful?