[4.x] feat: ModalTableSelect badge() and badgeColor() (#17687)

* feat: ModalTableSelect badge() and badgeColor()

* clean up

* Update modal-table-select.blade.php

---------

Signed-off-by: ghsgabriel <ghs.gabe@gmail.com>
Co-authored-by: Dan Harrin <git@danharrin.com>

packages/forms/docs/03-select.md

@@ -926,6 +926,35 @@ ModalTableSelect::make('category_id')
     ->getOptionLabelFromRecordUsing(fn (Category $record): string => "{$record->name} ({$record->slug})")
 ```
 
+By default, `multiple()` options are listed in a "badge" design, and singular options are listed in plain text. The `badge()` method can be used to define whether the option label should appear inside a badge:
+
+```php
+use Filament\Forms\Components\ModalTableSelect;
+
+ModalTableSelect::make('category_id')
+    ->relationship('category', 'name')
+    ->tableConfiguration(CategoriesTable::class)
+    ->badge()
+
+ModalTableSelect::make('categories')
+    ->relationship('categories', 'name')
+    ->multiple()
+    ->tableConfiguration(CategoriesTable::class)
+    ->badge(false)
+```
+
+The `badgeColor()` method can be used to set the badge [color](../styling/colors):
+
+```php
+use Filament\Forms\Components\ModalTableSelect;
+
+ModalTableSelect::make('categories')
+    ->relationship('categories', 'name')
+    ->multiple()
+    ->tableConfiguration(CategoriesTable::class)
+    ->badgeColor('success')
+```
+
 ### Passing additional arguments to the table in a modal select
 
 You can pass arguments from your form to the table configuration class using the `tableArguments()` method. For example, this can be used to modify the table's query based on previously filled form fields:

packages/forms/resources/views/components/modal-table-select.blade.php

@@ -6,6 +6,8 @@
     $id = $getId();
     $isDisabled = $isDisabled();
     $isMultiple = $isMultiple();
+    $hasBadges = $hasBadges();
+    $badgeColor = $getBadgeColor();
 @endphp
 
 <x-dynamic-component :component="$fieldWrapperView" :field="$field">
@@ -23,38 +25,45 @@
                 ])
         }}
     >
-        @if ($isMultiple)
-            @if (filled($optionLabels = $getOptionLabels()))
+        @if (((! $isMultiple) && filled($optionLabel = $getOptionLabel())) ||
+             ($isMultiple && filled($optionLabels = $getOptionLabels())))
+            @if ($isMultiple && $hasBadges)
                 <div class="fi-fo-modal-table-select-badges-ctn">
                     @foreach ($optionLabels as $optionLabel)
-                        <x-filament::badge>
+                        @if ($hasBadges)
+                            <x-filament::badge :color="$badgeColor">
+                                {{ $optionLabel }}
+                            </x-filament::badge>
+                        @else
                             {{ $optionLabel }}
-                        </x-filament::badge>
+                        @endif
                     @endforeach
                 </div>
-            @elseif (filled($placeholder = $getPlaceholder()))
-                <div class="fi-fo-modal-table-select-placeholder">
-                    {{ $placeholder }}
-                </div>
-            @endif
-
-            @if (! $isDisabled)
+            @else
                 <div>
-                    {{ $getAction('select') }}
-                </div>
-            @endif
-        @else
-            @if (filled($optionLabel = $getOptionLabel()))
-                {{ $optionLabel }}
-            @elseif (filled($placeholder = $getPlaceholder()))
-                <div class="fi-fo-modal-table-select-placeholder">
-                    {{ $placeholder }}
+                    @if ($hasBadges)
+                        <x-filament::badge :color="$badgeColor">
+                            {{ $optionLabel }}
+                        </x-filament::badge>
+                    @elseif ($isMultiple)
+                        @foreach ($optionLabels as $optionLabel)
+                            {{ $optionLabel . ($loop->last ? '' : ', ') }}
+                        @endforeach
+                    @else
+                        {{ $optionLabel }}
+                    @endif
                 </div>
             @endif
+        @elseif (filled($placeholder = $getPlaceholder()))
+            <div class="fi-fo-modal-table-select-placeholder">
+                {{ $placeholder }}
+            </div>
+        @endif
 
-            @if (! $isDisabled)
+        @if (! $isDisabled)
+            <div>
                 {{ $getAction('select') }}
-            @endif
+            </div>
         @endif
     </div>
 </x-dynamic-component>

packages/forms/src/Components/ModalTableSelect.php

@@ -59,6 +59,10 @@ class ModalTableSelect extends Field
 
     protected ?Closure $modifySelectActionUsing = null;
 
+    protected bool | Closure | null $hasBadges = null;
+
+    protected string | Closure | null $badgeColor = null;
+
     /**
      * @var array<mixed> | Closure
      */
@@ -669,6 +673,30 @@ class ModalTableSelect extends Field
         return $this->evaluate($this->tableArguments) ?? [];
     }
 
+    public function badge(bool | Closure | null $condition = true): static
+    {
+        $this->hasBadges = $condition;
+
+        return $this;
+    }
+
+    public function hasBadges(): bool
+    {
+        return $this->evaluate($this->hasBadges) ?? $this->isMultiple();
+    }
+
+    public function badgeColor(string | Closure | null $color): static
+    {
+        $this->badgeColor = $color;
+
+        return $this;
+    }
+
+    public function getBadgeColor(): ?string
+    {
+        return $this->evaluate($this->badgeColor);
+    }
+
     /**
      * @return array<StateCast>
      */