Merge pull request #10587 from WilgnerFSDev/feature/tagsinput-inline

Support tags color in `TagsInput`

packages/forms/docs/03-fields/14-tags-input.md

@@ -85,6 +85,28 @@ TagsInput::make('percentages')
     ->tagSuffix('%')
 ```
 
+## Reordering tags
+
+You can allow the user to reorder tags within the field using the `reorderable()` method:
+
+```php
+use Filament\Forms\Components\TagsInput;
+
+TagsInput::make('tags')
+    ->reorderable()
+```
+
+## Changing the color of tags
+
+You can change the color of the tags by passing a color to the `color()` method. It may be either `danger`, `gray`, `info`, `primary`, `success` or `warning`:
+
+```php
+use Filament\Forms\Components\TagsInput;
+
+TagsInput::make('tags')
+    ->color('danger')
+```
+
 ## Tags validation
 
 You may add validation rules for each tag by passing an array of rules to the `nestedRecursiveRules()` method:
@@ -98,14 +120,3 @@ TagsInput::make('tags')
         'max:255',
     ])
 ```
-
-## Reordering tags
-
-You can allow the user to reorder tags within the field using the `reorderable()` method:
-
-```php
-use Filament\Forms\Components\TagsInput;
-
-TagsInput::make('tags')
-    ->reorderable()
-```

packages/forms/resources/views/components/tags-input.blade.php

@@ -1,6 +1,7 @@
 @php
     use Filament\Support\Facades\FilamentView;
 
+    $color = $getColor();
     $hasInlineLabel = $hasInlineLabel();
     $id = $getId();
     $isDisabled = $isDisabled();
@@ -92,6 +93,7 @@
                                 class="hidden"
                             >
                                 <x-filament::badge
+                                    :color="$color"
                                     :x-bind:x-sortable-item="$isReorderable ? 'index' : null"
                                     :x-sortable-handle="$isReorderable ? '' : null"
                                     @class([

packages/forms/src/Components/TagsInput.php

@@ -3,6 +3,7 @@
 namespace Filament\Forms\Components;
 
 use Closure;
+use Filament\Support\Concerns\HasColor;
 use Filament\Support\Concerns\HasExtraAlpineAttributes;
 use Filament\Support\Concerns\HasReorderAnimationDuration;
 use Illuminate\Contracts\Support\Arrayable;
@@ -12,6 +13,7 @@ class TagsInput extends Field implements Contracts\HasNestedRecursiveValidationR
     use Concerns\HasExtraInputAttributes;
     use Concerns\HasNestedRecursiveValidationRules;
     use Concerns\HasPlaceholder;
+    use HasColor;
     use HasExtraAlpineAttributes;
     use HasReorderAnimationDuration;