Add setIconLeft/setIconRight (rappasoft#1877)

* Add setIconLeft/setIconRight

* Fix styling

* Adjust Test

* Adjust ActionTest

---------

Co-authored-by: lrljoe <[email protected]>

Author: lrljoe

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.

resources/views/includes/actions/button.blade.php

@@ -1,5 +1,5 @@
 <a {{ $attributes->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())
+            <span>{{ $action->getLabel() }}</span>
             <i {{ $action->getIconAttributes()
-                ->class(["ms-1 ". $action->getIcon() => $isBootstrap])
-                ->class(["ml-1 ". $action->getIcon() => $isTailwind])
-                ->except('default-styling')
-            }}></i>
+                    ->class(["ms-1 ". $action->getIcon() => $isBootstrap])
+                    ->class(["ml-1 ". $action->getIcon() => $isTailwind])
+                    ->except('default-styling')
+                }}
+            ></i>
+        @elseif($action->hasIcon() && !$action->getIconRight())
+            <i {{ $action->getIconAttributes()
+                    ->class(["ms-1 ". $action->getIcon() => $isBootstrap])
+                    ->class(["ml-1 ". $action->getIcon() => $isTailwind])
+                    ->except('default-styling')
+                }}
+            ></i>
+            <span>{{ $action->getLabel() }}</span>
         @endif
 </a>

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;
+    }
 }

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('<a class="focus:border-indigo-300 focus:ring-indigo-200 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 dark:bg-green-500 dark:text-white dark:border-green-600 dark:hover:border-green-900 dark:hover:bg-green-800" href="dashboard22"', $action->render());
+        $this->assertStringContainsString('<a class="focus:border-indigo-300 focus:ring-indigo-200 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 dark:bg-green-500 dark:text-white dark:border-green-600 dark:hover:border-green-900 dark:hover:bg-green-800" href="dashboard22"', $action->render());
     }
 }