From ec5401a02129a32018419cd59c08c476e1b480cc Mon Sep 17 00:00:00 2001 From: Joe <104938042+lrljoe@users.noreply.github.com> Date: Fri, 23 Aug 2024 19:59:17 +0100 Subject: [PATCH] Add setIconLeft/setIconRight (#1877) * Add setIconLeft/setIconRight * Fix styling * Adjust Test * Adjust ActionTest --------- Co-authored-by: lrljoe --- docs/misc/actions.md | 32 ++++++++++++++++ .../views/includes/actions/button.blade.php | 23 +++++++---- src/Views/Traits/Core/HasIcon.php | 21 ++++++++++ tests/Views/Actions/ActionTest.php | 38 ++++++++++++++++++- 4 files changed, 106 insertions(+), 8 deletions(-) diff --git a/docs/misc/actions.md b/docs/misc/actions.md index 34850a090..8a46a7b0c 100644 --- a/docs/misc/actions.md +++ b/docs/misc/actions.md @@ -84,6 +84,38 @@ public function actions(): array } ``` +### setIconLeft + +setIconLeft is used to prepend the Icon to the Text (Non-Default Behaviour) + +```php +public function actions(): array +{ + return [ + Action::make('Edit Item') + ->setIcon("fas fa-edit") + ->setIconAttributes(['class' => 'font-4xl text-4xl']) + ->setIconLeft(), + ]; +} +``` + +### setIconRight + +setIconRight is used to append the Icon to the Text (Default Behaviour) + +```php +public function actions(): array +{ + return [ + Action::make('Edit Item') + ->setIcon("fas fa-edit") + ->setIconAttributes(['class' => 'font-4xl text-4xl']) + ->setIconRight(), + ]; +} +``` + ### setRoute Used for non-wireable butons, to set the route that the action button should take the user to upon clicking. diff --git a/resources/views/includes/actions/button.blade.php b/resources/views/includes/actions/button.blade.php index 0d22c2c91..878be5b0b 100644 --- a/resources/views/includes/actions/button.blade.php +++ b/resources/views/includes/actions/button.blade.php @@ -1,5 +1,5 @@ merge() - ->class(['justify-center text-center items-center inline-flex rounded-md border shadow-sm px-4 py-2 text-sm font-medium focus:ring focus:ring-opacity-50' => $isTailwind && $attributes['default-styling'] ?? true]) + ->class(['justify-center text-center items-center inline-flex space-x-2 rounded-md border shadow-sm px-4 py-2 text-sm font-medium focus:ring focus:ring-opacity-50' => $isTailwind && $attributes['default-styling'] ?? true]) ->class(['focus:border-indigo-300 focus:ring-indigo-200' => $isTailwind && $attributes['default-colors'] ?? true]) ->class(['btn btn-sm btn-success' => $isBootstrap && $attributes['default-styling'] ?? true]) ->class(['' => $isBootstrap && $attributes['default-colors'] ?? true]) @@ -12,13 +12,22 @@ wire:navigate @endif > - {{ $action->getLabel() }} - @if($action->hasIcon()) + @if($action->hasIcon() && $action->getIconRight()) + {{ $action->getLabel() }} getIconAttributes() - ->class(["ms-1 ". $action->getIcon() => $isBootstrap]) - ->class(["ml-1 ". $action->getIcon() => $isTailwind]) - ->except('default-styling') - }}> + ->class(["ms-1 ". $action->getIcon() => $isBootstrap]) + ->class(["ml-1 ". $action->getIcon() => $isTailwind]) + ->except('default-styling') + }} + > + @elseif($action->hasIcon() && !$action->getIconRight()) + getIconAttributes() + ->class(["ms-1 ". $action->getIcon() => $isBootstrap]) + ->class(["ml-1 ". $action->getIcon() => $isTailwind]) + ->except('default-styling') + }} + > + {{ $action->getLabel() }} @endif \ No newline at end of file diff --git a/src/Views/Traits/Core/HasIcon.php b/src/Views/Traits/Core/HasIcon.php index bd80ca841..3056e45c5 100644 --- a/src/Views/Traits/Core/HasIcon.php +++ b/src/Views/Traits/Core/HasIcon.php @@ -11,6 +11,8 @@ trait HasIcon public array $iconAttributes = ['default-styling' => true]; + public bool $iconRight = true; + public function setIcon(string $icon): self { $this->icon = $icon; @@ -39,4 +41,23 @@ public function getIconAttributes(): ComponentAttributeBag { return new ComponentAttributeBag([...['default-styling' => true], ...$this->iconAttributes]); } + + public function getIconRight(): bool + { + return $this->iconRight ?? true; + } + + public function setIconLeft(): self + { + $this->iconRight = false; + + return $this; + } + + public function setIconRight(): self + { + $this->iconRight = true; + + return $this; + } } diff --git a/tests/Views/Actions/ActionTest.php b/tests/Views/Actions/ActionTest.php index 9e262803b..f33d30bcb 100644 --- a/tests/Views/Actions/ActionTest.php +++ b/tests/Views/Actions/ActionTest.php @@ -296,6 +296,42 @@ public function exportBulk($items) } + public function test_can_set_icon_to_right_default(): void + { + $action = Action::make('Update Summaries') + ->setActionAttributes(['class' => 'dark:bg-green-500 dark:text-white dark:border-green-600 dark:hover:border-green-900 dark:hover:bg-green-800', 'default-styling' => true, 'default-colors' => true]) + ->setIcon('fas fa-minus') + ->setIconAttributes(['class' => 'font-sm text-sm']) + ->setWireAction('wire:click') + ->setWireActionParams('testactionparams'); + $this->assertTrue($action->getIconRight()); + } + + public function test_can_set_icon_to_left(): void + { + $action = Action::make('Update Summaries') + ->setActionAttributes(['class' => 'dark:bg-green-500 dark:text-white dark:border-green-600 dark:hover:border-green-900 dark:hover:bg-green-800', 'default-styling' => true, 'default-colors' => true]) + ->setIcon('fas fa-minus') + ->setIconAttributes(['class' => 'font-sm text-sm']) + ->setIconLeft() + ->setWireAction('wire:click') + ->setWireActionParams('testactionparams'); + $this->assertFalse($action->getIconRight()); + } + + public function test_can_set_icon_to_right(): void + { + $action = Action::make('Update Summaries') + ->setActionAttributes(['class' => 'dark:bg-green-500 dark:text-white dark:border-green-600 dark:hover:border-green-900 dark:hover:bg-green-800', 'default-styling' => true, 'default-colors' => true]) + ->setIcon('fas fa-minus') + ->setIconAttributes(['class' => 'font-sm text-sm']) + ->setWireAction('wire:click') + ->setWireActionParams('testactionparams') + ->setIconLeft() + ->setIconRight(); + $this->assertTrue($action->getIconRight()); + } + public function test_action_renders_correctly(): void { $action = Action::make('Update Summaries') @@ -305,6 +341,6 @@ public function test_action_renders_correctly(): void ) ->route('dashboard22'); - $this->assertStringContainsString('render()); + $this->assertStringContainsString('render()); } }