add option to align add action

filamentphp · Oct 3, 2024 · b5ec10c · b5ec10c
1 parent 85af81c
commit b5ec10c
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 1 deletion.
diff --git a/packages/forms/docs/03-fields/12-repeater.md b/packages/forms/docs/03-fields/12-repeater.md
@@ -79,6 +79,21 @@ Repeater::make('members')
     ->addActionLabel('Add member')
 ```
 
+## Setting the add action button's label
+
+By default, the add action is align in the center. You may adjust this using the `addActionAlignment()` method:
+
+```php
+use Filament\Forms\Components\Repeater;
+use Filament\Support\Enums\Alignment;
+
+Repeater::make('members')
+    ->schema([
+        // ...
+    ])
+    ->addActionAlignment(Alignment::Left)
+```
+
 ### Preventing the user from adding items
 
 You may prevent the user from adding items to the repeater using the `addable(false)` method:

diff --git a/packages/forms/resources/views/components/repeater/index.blade.php b/packages/forms/resources/views/components/repeater/index.blade.php
@@ -1,5 +1,6 @@
 @php
     use Filament\Forms\Components\Actions\Action;
+    use Filament\Support\Enums\Alignment;
 
     $containers = $getChildComponentContainers();
 
@@ -238,7 +239,16 @@ class="absolute -top-3 left-3 px-1 text-sm font-medium"
         @endif
 
         @if ($isAddable && $addAction->isVisible())
-            <div class="flex justify-center">
+            <div @class([
+                "flex",
+                match ($getAddActionAlignment()) {
+                    Alignment::Start, Alignment::Left => 'justify-start',
+                    Alignment::Center, null => 'justify-center',
+                    Alignment::End, Alignment::Right => 'flex-row-reverse',
+                    Alignment::Between, Alignment::Justify => 'justify-between',
+                    default => $alignment,
+                },
+            ])>
                 {{ $addAction }}
             </div>
         @endif

diff --git a/packages/forms/src/Components/Repeater.php b/packages/forms/src/Components/Repeater.php
@@ -8,6 +8,7 @@
 use Filament\Forms\Contracts\HasForms;
 use Filament\Support\Concerns\HasReorderAnimationDuration;
 use Filament\Support\Enums\ActionSize;
+use Filament\Support\Enums\Alignment;
 use Filament\Support\Facades\FilamentIcon;
 use Illuminate\Contracts\Support\Htmlable;
 use Illuminate\Database\Eloquent\Collection;
@@ -55,6 +56,8 @@ class Repeater extends Field implements Contracts\CanConcealComponents, Contract
 
     protected Field | Closure | null $simpleField = null;
 
+    protected Alignment | string | Closure | null $addActionAlignment = null;
+
     protected ?Closure $modifyRelationshipQueryUsing = null;
 
     protected ?Closure $modifyAddActionUsing = null;
@@ -196,6 +199,18 @@ public function getAddAction(): Action
         return $action;
     }
 
+    public function addActionAlignment(Alignment | string | Closure | null $addActionAlignment): static
+    {
+        $this->addActionAlignment = $addActionAlignment;
+
+        return $this;
+    }
+
+    public function getAddActionAlignment(): Alignment | string | null
+    {
+        return $this->evaluate($this->addActionAlignment);
+    }
+
     public function addAction(?Closure $callback): static
     {
         $this->modifyAddActionUsing = $callback;