diff --git a/docs-assets/app/app/Livewire/Infolists/EntriesDemo.php b/docs-assets/app/app/Livewire/Infolists/EntriesDemo.php index e8c10f9cba..3b56251671 100644 --- a/docs-assets/app/app/Livewire/Infolists/EntriesDemo.php +++ b/docs-assets/app/app/Livewire/Infolists/EntriesDemo.php @@ -38,6 +38,15 @@ class EntriesDemo extends Component implements HasInfolists TextEntry::make('author.name') ->state('Dan Harrin'), ]), + Group::make() + ->id('placeholder') + ->extraAttributes([ + 'class' => 'p-16 max-w-xl', + ]) + ->schema([ + TextEntry::make('title') + ->placeholder('Dan Harrin'), + ]), Group::make() ->id('helperText') ->extraAttributes([ diff --git a/docs-assets/app/app/Livewire/TablesDemo.php b/docs-assets/app/app/Livewire/TablesDemo.php index 0743f2b8af..6ff3bfe7d5 100644 --- a/docs-assets/app/app/Livewire/TablesDemo.php +++ b/docs-assets/app/app/Livewire/TablesDemo.php @@ -46,6 +46,7 @@ use Filament\Tables\Grouping\Group; use Filament\Tables\Table; use Illuminate\Database\Eloquent\Builder; use Livewire\Component; +use stdClass; class TablesDemo extends Component implements HasForms, HasTable { @@ -232,6 +233,17 @@ class TablesDemo extends Component implements HasForms, HasTable ]); } + public function placeholderColumns(Table $table): Table + { + return $this->postsTable($table) + ->columns([ + TextColumn::make('title'), + TextColumn::make('description') + ->getStateUsing(fn (Post $record, stdClass $rowLoop): ?string => $rowLoop->odd ? $record->description : null) + ->placeholder('No description.'), + ]); + } + public function toggleableColumns(Table $table): Table { return $this->usersTable($table) diff --git a/docs-assets/app/database/database.sqlite b/docs-assets/app/database/database.sqlite index ee38cdbdf0..6868856ff1 100644 Binary files a/docs-assets/app/database/database.sqlite and b/docs-assets/app/database/database.sqlite differ diff --git a/docs-assets/screenshots/images/dark/infolists/entries/placeholder.jpg b/docs-assets/screenshots/images/dark/infolists/entries/placeholder.jpg new file mode 100644 index 0000000000..8ad8d28201 Binary files /dev/null and b/docs-assets/screenshots/images/dark/infolists/entries/placeholder.jpg differ diff --git a/docs-assets/screenshots/images/dark/tables/columns/placeholder.jpg b/docs-assets/screenshots/images/dark/tables/columns/placeholder.jpg new file mode 100644 index 0000000000..1141b6eb33 Binary files /dev/null and b/docs-assets/screenshots/images/dark/tables/columns/placeholder.jpg differ diff --git a/docs-assets/screenshots/images/light/infolists/entries/placeholder.jpg b/docs-assets/screenshots/images/light/infolists/entries/placeholder.jpg new file mode 100644 index 0000000000..d1fa1abd64 Binary files /dev/null and b/docs-assets/screenshots/images/light/infolists/entries/placeholder.jpg differ diff --git a/docs-assets/screenshots/images/light/tables/columns/placeholder.jpg b/docs-assets/screenshots/images/light/tables/columns/placeholder.jpg new file mode 100644 index 0000000000..759800ed7b Binary files /dev/null and b/docs-assets/screenshots/images/light/tables/columns/placeholder.jpg differ diff --git a/docs-assets/screenshots/schema.js b/docs-assets/screenshots/schema.js index 7e071c69ac..c5a2c3b80f 100644 --- a/docs-assets/screenshots/schema.js +++ b/docs-assets/screenshots/schema.js @@ -1184,6 +1184,15 @@ export default { deviceScaleFactor: 3, }, }, + 'infolists/entries/placeholder': { + url: 'infolists/entries', + selector: '#placeholder', + viewport: { + width: 1920, + height: 640, + deviceScaleFactor: 3, + }, + }, 'infolists/entries/helper-text': { url: 'infolists/entries', selector: '#helperText', @@ -1832,6 +1841,15 @@ export default { deviceScaleFactor: 3, }, }, + 'tables/columns/placeholder': { + url: 'tables?table=placeholderColumns', + selector: 'body', + viewport: { + width: 1080, + height: 640, + deviceScaleFactor: 3, + }, + }, 'tables/columns/toggleable': { url: 'tables?table=toggleableColumns', selector: 'body', diff --git a/packages/infolists/docs/03-entries/01-getting-started.md b/packages/infolists/docs/03-entries/01-getting-started.md index 8c8a110386..bafd29bfac 100644 --- a/packages/infolists/docs/03-entries/01-getting-started.md +++ b/packages/infolists/docs/03-entries/01-getting-started.md @@ -87,7 +87,7 @@ TextEntry::make('title') ## Setting a default value -To set a default value for fields with a `null` state, you may use the `default()` method: +To set a default value for entries with an empty state, you may use the `default()` method. This method will treat the default state as if it were real, so entries like [image](image) or [color](color) will display the default image or color. ```php use Filament\Infolists\Components\TextEntry; @@ -96,6 +96,19 @@ TextEntry::make('title') ->default('Untitled') ``` +## Adding placeholder text if an entry is empty + +Sometimes you may want to display placeholder text for entries with an empty state, which is styled as a lighter gray text. This differs from the [default value](#setting-a-default-value), as the placeholder is always text and not treated as if it were real state. + +```php +use Filament\Infolists\Components\TextEntry; + +TextEntry::make('title') + ->placeholder('Untitled') +``` + + + ## Adding helper text below the entry Sometimes, you may wish to provide extra information for the user of the infolist. For this purpose, you may add helper text below the entry. diff --git a/packages/infolists/docs/03-entries/02-text.md b/packages/infolists/docs/03-entries/02-text.md index 5eeb715d7e..79a2aba209 100644 --- a/packages/infolists/docs/03-entries/02-text.md +++ b/packages/infolists/docs/03-entries/02-text.md @@ -207,17 +207,6 @@ TextEntry::make('status') ->formatStateUsing(fn (string $state): string => __("statuses.{$state}")) ``` -## Adding a placeholder if the entry is empty - -Sometimes you may want to display a placeholder if the entry's value is empty: - -```php -use Filament\Infolists\Components\TextEntry; - -TextEntry::make('updated_at') - ->placeholder('Never') -``` - ## Customizing the color You may set a color for the text, either `danger`, `gray`, `info`, `primary`, `success` or `warning`: diff --git a/packages/tables/docs/03-columns/01-getting-started.md b/packages/tables/docs/03-columns/01-getting-started.md index 9059808a05..ff2342b458 100644 --- a/packages/tables/docs/03-columns/01-getting-started.md +++ b/packages/tables/docs/03-columns/01-getting-started.md @@ -289,15 +289,28 @@ TextColumn::make('title') ## Setting a default value -To set a default value for fields with a `null` state, you may use the `default()` method: +To set a default value for columns with an empty state, you may use the `default()` method. This method will treat the default state as if it were real, so columns like [image](image) or [color](color) will display the default image or color. ```php use Filament\Tables\Columns\TextColumn; -TextColumn::make('title') - ->default('Untitled') +TextColumn::make('description') + ->default('No description.') ``` +## Adding placeholder text if a column is empty + +Sometimes you may want to display placeholder text for columns with an empty state, which is styled as a lighter gray text. This differs from the [default value](#setting-a-default-value), as the placeholder is always text and not treated as if it were real state. + +```php +use Filament\Tables\Columns\TextColumn; + +TextColumn::make('description') + ->placeholder('No description.') +``` + + + ## Hiding columns To hide a column conditionally, you may use the `hidden()` and `visible()` methods, whichever you prefer: diff --git a/packages/tables/docs/03-columns/02-text.md b/packages/tables/docs/03-columns/02-text.md index 0fdda25995..3e7ea9d6ef 100644 --- a/packages/tables/docs/03-columns/02-text.md +++ b/packages/tables/docs/03-columns/02-text.md @@ -240,17 +240,6 @@ TextColumn::make('status') ->formatStateUsing(fn (string $state): string => __("statuses.{$state}")) ``` -## Adding a placeholder if the cell is empty - -Sometimes you may want to display a placeholder if the cell's value is empty: - -```php -use Filament\Tables\Columns\TextColumn; - -TextColumn::make('updated_at') - ->placeholder('Never') -``` - ## Customizing the color You may set a color for the text, either `danger`, `gray`, `info`, `primary`, `success` or `warning`: