Skip to content

Commit 65f418f

Browse files
danharrindanharrin
authored
feature: Callout component (#19189)
* feature: Callouts * screenshots * more ss * Update LayoutDemo.php
1 parent 0c89e16 commit 65f418f

File tree

42 files changed

+1403
-4
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

42 files changed

+1403
-4
lines changed

‎CLAUDE.md‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -218,3 +218,44 @@ Hook class naming:
218218
- **Headings**: Use gerunds ("Setting the type" not "Type settings", "Enabling search" not "Search")
219219
- **Formatting**: Backticks for code (`method()`, `ClassName`), include `use` statements
220220
- **Asides**: `<Aside variant="tip|info|danger">...</Aside>`
221+
222+
### Documentation Screenshots
223+
224+
Screenshots are in `docs-assets/screenshots/`. To add new screenshots:
225+
226+
1. **Add component examples** to the appropriate Livewire component in `docs-assets/app/app/Livewire/` (e.g., `Schemas/LayoutDemo.php`). Give each example a unique `->id()` for the selector:
227+
```php
228+
Group::make()
229+
->id('myComponent')
230+
->extraAttributes(['class' => 'p-16 max-w-2xl'])
231+
->schema([
232+
// Your component here
233+
]),
234+
```
235+
236+
2. **Add screenshot definitions** to `docs-assets/screenshots/schema.js`:
237+
```js
238+
'schemas/layout/my-component/simple': {
239+
url: 'schemas/layout',
240+
selector: '#myComponent',
241+
viewport: { width: 1920, height: 640, deviceScaleFactor: 3 },
242+
},
243+
```
244+
245+
3. **Generate screenshots**:
246+
```bash
247+
# Terminal 1: Start the app server (must use default port 8000)
248+
cd docs-assets/app && php artisan serve
249+
250+
# Terminal 2: Run from the screenshots directory
251+
cd docs-assets/screenshots
252+
export PUPPETEER_SKIP_CHROMIUM_DOWNLOAD=true
253+
export PUPPETEER_EXECUTABLE_PATH=$(which chromium)
254+
node script.js "schemas/layout/my-component/*" # Filter pattern
255+
```
256+
257+
**Important:** The script expects `http://127.0.0.1:8000`. Don't use a custom port.
258+
259+
4. **Use in docs** with `<AutoScreenshot name="schemas/layout/my-component/simple" alt="Description" version="4.x" />`
260+
261+
Screenshots are generated in `images/light/` and `images/dark/`. Use natural, realistic content - not test-like examples.

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

Lines changed: 114 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@
1313
use Filament\Forms\Components\Toggle;
1414
use Filament\Infolists\Components\TextEntry;
1515
use Filament\Schemas\Components\Actions;
16+
use Filament\Schemas\Components\Callout;
1617
use Filament\Schemas\Components\EmptyState;
1718
use Filament\Schemas\Components\Fieldset;
1819
use Filament\Schemas\Components\Flex;
@@ -21,6 +22,7 @@
2122
use Filament\Schemas\Components\Section;
2223
use Filament\Schemas\Components\Tabs;
2324
use Filament\Schemas\Components\Tabs\Tab;
25+
use Filament\Schemas\Components\Text;
2426
use Filament\Schemas\Components\Wizard;
2527
use Filament\Schemas\Concerns\InteractsWithSchemas;
2628
use Filament\Schemas\Contracts\HasSchemas;
@@ -758,6 +760,118 @@ public function form(Schema $form): Schema
758760
])->verticalAlignment(VerticalAlignment::End),
759761
]),
760762
]),
763+
Group::make()
764+
->id('callout')
765+
->extraAttributes([
766+
'class' => 'p-16 max-w-2xl',
767+
])
768+
->schema([
769+
Callout::make('New version available')
770+
->description('Filament v4 has been released with exciting new features and improvements.')
771+
->info(),
772+
]),
773+
Group::make()
774+
->id('calloutStatuses')
775+
->extraAttributes([
776+
'class' => 'p-16 max-w-2xl space-y-4',
777+
])
778+
->schema([
779+
Callout::make('Payment successful')
780+
->description('Your order has been confirmed and is being processed.')
781+
->success(),
782+
Callout::make('Session expiring soon')
783+
->description('Your session will expire in 5 minutes. Save your work to avoid losing changes.')
784+
->warning(),
785+
Callout::make('Connection failed')
786+
->description('Unable to connect to the server. Please check your internet connection.')
787+
->danger(),
788+
]),
789+
Group::make()
790+
->id('calloutWithoutBackground')
791+
->extraAttributes([
792+
'class' => 'p-16 max-w-2xl',
793+
])
794+
->schema([
795+
Callout::make('Scheduled maintenance')
796+
->description('The system will be unavailable on Sunday from 2:00 AM to 4:00 AM.')
797+
->warning()
798+
->color(null),
799+
]),
800+
Group::make()
801+
->id('calloutCustomColor')
802+
->extraAttributes([
803+
'class' => 'p-16 max-w-2xl',
804+
])
805+
->schema([
806+
Callout::make('Pro tip')
807+
->description('You can use keyboard shortcuts to navigate faster. Press ? to see all available shortcuts.')
808+
->color('primary')
809+
->icon(Heroicon::OutlinedLightBulb)
810+
->iconColor('primary'),
811+
]),
812+
Group::make()
813+
->id('calloutActions')
814+
->extraAttributes([
815+
'class' => 'p-16 max-w-2xl',
816+
])
817+
->schema([
818+
Callout::make('Your trial ends in 3 days')
819+
->description('Upgrade now to keep access to all premium features.')
820+
->warning()
821+
->actions([
822+
Action::make('upgrade')
823+
->label('Upgrade to Pro')
824+
->button(),
825+
Action::make('compare')
826+
->label('Compare plans'),
827+
]),
828+
]),
829+
Group::make()
830+
->id('calloutCustomIcon')
831+
->extraAttributes([
832+
'class' => 'p-16 max-w-2xl',
833+
])
834+
->schema([
835+
Callout::make('Pro tip')
836+
->description('You can use keyboard shortcuts to navigate faster. Press ? to see all available shortcuts.')
837+
->icon(Heroicon::OutlinedLightBulb)
838+
->iconColor('primary'),
839+
]),
840+
Group::make()
841+
->id('calloutFooter')
842+
->extraAttributes([
843+
'class' => 'p-16 max-w-2xl',
844+
])
845+
->schema([
846+
Callout::make('Backup complete')
847+
->description('Your data has been successfully backed up to the cloud.')
848+
->success()
849+
->footer([
850+
Text::make('Last backup: 5 minutes ago')
851+
->color('gray'),
852+
Action::make('viewBackups')
853+
->label('View All Backups')
854+
->button(),
855+
]),
856+
]),
857+
Group::make()
858+
->id('calloutActionsAlignedEnd')
859+
->extraAttributes([
860+
'class' => 'p-16 max-w-2xl',
861+
])
862+
->schema([
863+
Callout::make('Updates available')
864+
->description('New features and improvements are ready to install.')
865+
->info()
866+
->actions([
867+
Action::make('install')
868+
->label('Install Now')
869+
->button(),
870+
Action::make('later')
871+
->label('Remind Me Later'),
872+
])
873+
->footerActionsAlignment(Alignment::End),
874+
]),
761875
Group::make()
762876
->id('emptyState')
763877
->extraAttributes([

‎docs-assets/screenshots/images/dark/schemas/layout/callout/actions-aligned-end.jpg‎

45.2 KB
Loading

‎docs-assets/screenshots/images/dark/schemas/layout/callout/actions.jpg‎

48.9 KB
Loading

‎docs-assets/screenshots/images/dark/schemas/layout/callout/custom-color.jpg‎

38.1 KB
Loading

‎docs-assets/screenshots/images/dark/schemas/layout/callout/custom-icon.jpg‎

35.9 KB
Loading

‎docs-assets/screenshots/images/dark/schemas/layout/callout/footer.jpg‎

48.5 KB
Loading

‎docs-assets/screenshots/images/dark/schemas/layout/callout/simple.jpg‎

39.4 KB
Loading

‎docs-assets/screenshots/images/dark/schemas/layout/callout/statuses.jpg‎

100 KB
Loading

‎docs-assets/screenshots/images/dark/schemas/layout/callout/without-background.jpg‎

35.7 KB
Loading

0 commit comments

Comments
 (0)