It’s no secret that we love Filament, so we’re naturally excited to see what’s new with our go-to admin builder. That is why, in today’s post, we will take a quick look at what is new in Filament PHP.
New Panel Layout
The new layout moves the entire toolbar from the top of the page to the left side, basically integrating it into the existing sidebar.
The feature works great for apps looking for a cleaner, less cluttered look, and it will probably be the go-to layout for smaller apps.
As with most things in Filament, it’s very easy to enable by simply adding one line of code to the panel configuration.
use Filament\Panel;
public function panel(Panel $panel): Panel
{
return $panel
// ...
->topbar(false);
}New toolbar buttons for the Rich Editor Grid Tool
A new addition to the buttons available in the toolbar of the Rich Editor field is the grid and text color option.
You can define a responsive grid up to 12 columns wide. In addition to this, you have access to a list of presents, the ability to define a breakpoint, and to use asymmetric columns. It’s worth noting that if you choose asymmetric, then you are limited to only 2 columns instead of the maximum of 12 available.
Another great feature is the ability to create grids within an existing grid, making this new addition quite versatile.
use Filament\Forms\Components\RichEditor;
RichEditor::make('content')
->toolbarButtons([
'grid'
])If the grids might be a nice-to-have, the Text Color tool is a huge step forward for the Rich Editor, which now allows you to change text color by simply selecting it and clicking the text color button.
To enable this feature, you have to add “textColor” to the toolbar buttons array.
The component offers you a set of predefined text colors to choose from, but if that list is not enough, you can define custom text colors via an array.
use Filament\Forms\Components\RichEditor;
RichEditor::make('content')
->toolbarButtons([
'grid'
])
->textColors([
'#ef4444' => 'Red',
'#10b981' => 'Green',
'#0ea5e9' => 'Sky',
])This doesn’t take into account the light/dark mode; thus, it’s recommended to use the TextColor object when defining new colors.
It’s also worth noting that, by adding your own colors, you essentially override the original colors provided, so you may use the PHP spread operator to spread the defaults array into your custom array.
use Filament\Forms\Components\RichEditor;
RichEditor::make('content')
->toolbarButtons([
'grid'
])
->textColors([
'brand' => TextColor::make('Brand', '#0ea5e9'),
'warning' => TextColor::make('Warning', '#f59e0b', darkColor: '#fbbf24'),
...TextColor::getDefaults(),
])One extra small but powerful option you can enable is the ability to define custom text colors that are not defined as a preset.
use Filament\Forms\Components\RichEditor;
RichEditor::make('content')
->toolbarButtons([
'grid'
])
->textColors([
'brand' => TextColor::make('Brand', '#0ea5e9'),
'warning' => TextColor::make('Warning', '#f59e0b', darkColor: '#fbbf24'),
...TextColor::getDefaults(),
])
->customTextColors()Compact Design for the Table Repeater
Introduced in v4, the table repeater helps you render each field in its own table cell, kind of like you do with some no-code solutions. In addition to this, you can now have compact designs for some fields like Select and TextInput, making them blend better with the table cells by essentially replacing the default form design with one that fits a table better.
Enabling this feature is easy and requires a single line of code.
use Filament\Forms\Components\Repeater;
Repeater::make('members')
->table([
// ...
])
->compact()
->schema([
// ...
])Similar to the table repeater, we can do the same for the RepeaterEntry inside an infolist page. To enable this feature, simply use the table() method and pass an array defining the table schema for it.
use Filament\Infolists\Components\IconEntry;
use Filament\Infolists\Components\RepeatableEntry;
use Filament\Infolists\Components\RepeatableEntry\TableColumn;
use Filament\Infolists\Components\TextEntry;
RepeatableEntry::make('comments')
->table([
TableColumn::make('Author'),
TableColumn::make('Title'),
TableColumn::make('Published'),
])
->schema([
TextEntry::make('author.name'),
TextEntry::make('title'),
IconEntry::make('is_published')
->boolean(),
])Empty State Schema Component
This schema component is meant to be used anywhere in your app where you want to prompt the user to insert data, specifically where there is no data yet.
use Filament\Actions\Action;
use Filament\Schemas\Components\EmptyState;
use Filament\Support\Icons\Heroicon;
EmptyState::make('No users yet')
->description('Get started by creating a new user.')
->icon(Heroicon::OutlinedUser)
->footer([
Action::make('createUser')
->icon(Heroicon::Plus),
])
Leave a Reply