diff --git a/docs-assets/app/app/Http/Livewire/Actions.php b/docs-assets/app/app/Http/Livewire/Actions.php index 00ca03b710..324bedc98f 100644 --- a/docs-assets/app/app/Http/Livewire/Actions.php +++ b/docs-assets/app/app/Http/Livewire/Actions.php @@ -62,6 +62,39 @@ class Actions extends Component implements HasActions ->iconPosition('after'); } + public function indicatorAction(): Action + { + return Action::make('indicatorAction') + ->iconButton() + ->icon('heroicon-m-funnel') + ->indicator(5); + } + + public function successIndicatorAction(): Action + { + return Action::make('successIndicatorAction') + ->iconButton() + ->icon('heroicon-m-funnel') + ->indicator(5) + ->indicatorColor('success'); + } + + public function outlinedAction(): Action + { + return Action::make('outlinedAction') + ->label('Edit') + ->button() + ->outlined(); + } + + public function inlineIconAction(): Action + { + return Action::make('inlineIconAction') + ->icon('heroicon-o-pencil-square') + ->iconButton() + ->inline(); + } + public function confirmationModalAction(): Action { return Action::make('confirmationModalAction') diff --git a/docs-assets/app/resources/views/livewire/actions.blade.php b/docs-assets/app/resources/views/livewire/actions.blade.php index e358364c88..564b5e929f 100644 --- a/docs-assets/app/resources/views/livewire/actions.blade.php +++ b/docs-assets/app/resources/views/livewire/actions.blade.php @@ -28,6 +28,22 @@ {{ $this->iconAfterAction }} +
+ {{ $this->indicatorAction }} +
+ +
+ {{ $this->successIndicatorAction }} +
+ +
+ {{ $this->outlinedAction }} +
+ +
+ {{ $this->inlineIconAction }} +
+
{{ $this->confirmationModalAction }}
diff --git a/docs-assets/screenshots/schema.js b/docs-assets/screenshots/schema.js index fab0903d18..5792e09d7d 100644 --- a/docs-assets/screenshots/schema.js +++ b/docs-assets/screenshots/schema.js @@ -25,6 +25,9 @@ export default { height: 640, deviceScaleFactor: 3, }, + before: async (page) => { + await page.hover('#iconButtonAction button') + }, }, 'actions/trigger-button/danger': { url: 'actions', @@ -62,6 +65,42 @@ export default { deviceScaleFactor: 3, }, }, + 'actions/trigger-button/indicator': { + url: 'actions', + selector: '#indicatorAction', + viewport: { + width: 1920, + height: 640, + deviceScaleFactor: 3, + }, + }, + 'actions/trigger-button/success-indicator': { + url: 'actions', + selector: '#successIndicatorAction', + viewport: { + width: 1920, + height: 640, + deviceScaleFactor: 3, + }, + }, + 'actions/trigger-button/outlined': { + url: 'actions', + selector: '#outlinedAction', + viewport: { + width: 1920, + height: 640, + deviceScaleFactor: 3, + }, + }, + 'actions/trigger-button/inline-icon': { + url: 'actions', + selector: '#inlineIconAction', + viewport: { + width: 1920, + height: 640, + deviceScaleFactor: 3, + }, + }, 'actions/modal/confirmation': { url: 'actions', viewport: { diff --git a/docs-assets/screenshots/script.js b/docs-assets/screenshots/script.js index a87f4adc91..603e20c20a 100644 --- a/docs-assets/screenshots/script.js +++ b/docs-assets/screenshots/script.js @@ -20,7 +20,9 @@ themes.forEach((theme) => { } ;(async () => { - const browser = await puppeteer.launch() + const browser = await puppeteer.launch({ + executablePath: '/opt/homebrew/bin/chromium', + }) const page = await browser.newPage() await page.setViewport( options.viewport ?? { diff --git a/packages/actions/docs/03-trigger-button.md b/packages/actions/docs/03-trigger-button.md index 80923f68ad..2a52b40a2b 100644 --- a/packages/actions/docs/03-trigger-button.md +++ b/packages/actions/docs/03-trigger-button.md @@ -49,7 +49,7 @@ Action::make('edit') ->url(fn (): string => route('posts.edit', ['post' => $this->post])) ``` -Optionally, you can have the label automatically translated by using the `translateLabel()` method: +Optionally, you can have the label automatically translated [using Laravel's localization features](https://laravel.com/docs/localization) by using the `translateLabel()` method: ```php Action::make('edit') @@ -66,7 +66,7 @@ Action::make('delete') ->color('danger') ``` - + ## Setting a size @@ -118,7 +118,23 @@ Action::make('edit') This is useful for authorization of certain actions to only users who have permission. -## Keybindings +### Disabling a button + +If you want to disable a button instead of hiding it, you can use the `disabled()` method: + +```php +Action::make('delete') + ->disabled() +``` + +You can conditionally disable a button by passing a boolean to it: + +```php +Action::make('delete') + ->disabled(! auth()->user()->can('delete', $this->post)) +``` + +## Registering keybindings You can attach keyboard shortcuts to trigger buttons. These use the same key codes as [Mousetrap](https://craig.is/killing/mice): @@ -129,3 +145,88 @@ Action::make('save') ->action(fn () => $this->save()) ->keyBindings(['command+s', 'ctrl+s']) ``` + +## Adding an indicator in the corner of the button + +You can add an indicator to the corner of the button, to display whatever you want. It's useful for displaying a count of something, or a status indicator: + +```php +use Filament\Actions\Action; + +Action::make('filter') + ->iconButton() + ->icon('heroicon-m-funnel') + ->indicator(5) +``` + + + +You can also pass a color to be used for the indicator, which can be either `primary`, `secondary`, `success`, `warning` or `danger`: + +```php +use Filament\Actions\Action; + +Action::make('filter') + ->iconButton() + ->icon('heroicon-m-funnel') + ->indicator(5) + ->indicatorColor('success') +``` + + + +## Outlined button style + +When you're using the "button" trigger style, you might wish to make it less prominent. You could use a different [color](#setting-a-color), but sometimes you might want to make it outlined instead. You can do this with the `outlined()` method: + +```php +use Filament\Actions\Action; + +Action::make('edit') + ->url(fn (): string => route('posts.edit', ['post' => $this->post])) + ->button() + ->outlined() +``` + + + +## Inline icon button style + +When you're using the "icon button" trigger style, you might wish to make it fit inline with other content. You can do this with the `inline()` method, which removes the background color when it the button is hovered over: + +```php +use Filament\Actions\Action; + +Action::make('edit') + ->url(fn (): string => route('posts.edit', ['post' => $this->post])) + ->iconButton() + ->inline() +``` + + + +## Passing extra attributes + +You can pass extra HTML attributes to the button which will be merged onto the outer DOM element. Pass an array of attributes to the `extraAttributes()` method, where the key is the attribute name and the value is the attribute value: + +```php +use Filament\Actions\Action; + +Action::make('edit') + ->url(fn (): string => route('posts.edit', ['post' => $this->post])) + ->extraAttributes([ + 'title' => 'Edit this post', + ]) +``` + +If you pass CSS classes in a string, they will be merged with the default classes that already apply to the other HTML element of the button: + +```php +use Filament\Actions\Action; + +Action::make('edit') + ->url(fn (): string => route('posts.edit', ['post' => $this->post])) + ->extraAttributes([ + 'class' => 'mx-auto my-8', + ]) +``` diff --git a/packages/actions/src/Modal/Actions/Action.php b/packages/actions/src/Modal/Actions/Action.php index 513ad3b4fe..e4ae997e1b 100644 --- a/packages/actions/src/Modal/Actions/Action.php +++ b/packages/actions/src/Modal/Actions/Action.php @@ -10,8 +10,6 @@ use Filament\Actions\StaticAction; class Action extends StaticAction implements SubmitsForm { - use CanBeOutlined; - use CanOpenUrl; use CanSubmitForm; use Concerns\CanCancelAction; use Concerns\HasAction; diff --git a/packages/actions/src/MountableAction.php b/packages/actions/src/MountableAction.php index 3dd69a73f6..ed7a420843 100644 --- a/packages/actions/src/MountableAction.php +++ b/packages/actions/src/MountableAction.php @@ -10,23 +10,16 @@ use Livewire\Component; abstract class MountableAction extends StaticAction { - use Concerns\CanBeDisabled; - use CanBeInline; use Concerns\CanBeMounted; - use Concerns\CanBeOutlined; use Concerns\CanNotify; use Concerns\CanOpenModal; - use Concerns\CanOpenUrl; use Concerns\CanRedirect; use Concerns\CanRequireConfirmation; use Concerns\HasAction; use Concerns\HasArguments; use Concerns\HasForm; - use Concerns\HasGroupedIcon; use Concerns\HasInfolist; - use Concerns\HasKeyBindings; use Concerns\HasLifecycleHooks; - use Concerns\HasTooltip; use Concerns\HasWizard; protected function setUp(): void diff --git a/packages/actions/src/StaticAction.php b/packages/actions/src/StaticAction.php index 75f7afe9fc..70c607f1b0 100644 --- a/packages/actions/src/StaticAction.php +++ b/packages/actions/src/StaticAction.php @@ -10,12 +10,18 @@ abstract class StaticAction extends ViewComponent { use Concerns\CanBeDisabled; use Concerns\CanBeHidden; + use Concerns\CanBeInline; + use Concerns\CanOpenUrl; use Concerns\HasColor; + use Concerns\HasGroupedIcon; use Concerns\HasIcon; use Concerns\HasIndicator; + use Concerns\HasKeyBindings; use Concerns\HasLabel; use Concerns\HasName; + use Concerns\CanBeOutlined; use Concerns\HasSize; + use Concerns\HasTooltip; use Conditionable; use HasExtraAttributes; diff --git a/packages/app/src/GlobalSearch/Actions/Action.php b/packages/app/src/GlobalSearch/Actions/Action.php index c56370ff3f..4350aa0f84 100644 --- a/packages/app/src/GlobalSearch/Actions/Action.php +++ b/packages/app/src/GlobalSearch/Actions/Action.php @@ -14,12 +14,7 @@ use Illuminate\Support\Js; class Action extends StaticAction { - use CanBeInline; - use CanBeOutlined; use CanEmitEvent; - use CanOpenUrl; - use HasKeyBindings; - use HasTooltip; protected function setUp(): void { diff --git a/packages/notifications/src/Actions/Action.php b/packages/notifications/src/Actions/Action.php index c628597f4f..029e62fe90 100644 --- a/packages/notifications/src/Actions/Action.php +++ b/packages/notifications/src/Actions/Action.php @@ -18,13 +18,8 @@ use Illuminate\Support\Str; class Action extends StaticAction implements Arrayable, Groupable { - use CanBeInline; - use CanBeOutlined; use CanCloseNotification; use CanEmitEvent; - use CanOpenUrl; - use HasKeyBindings; - use HasTooltip; protected string $viewIdentifier = 'action';