feat: add colored badges and filters for tags input (#64)

ManukMinasyan · ManukMinasyan · commit 9b4ed76ca4de · 2026-01-13T17:42:01.000+04:00
- Add TagsFilter for filtering by arbitrary tag values - Add ColorResolver for consistent badge colors across components - Display tags as colored badges in table columns and infolists - Show colored active filter indicators at top of table - Add tags-input to option colors visibility in field form - Extract hasColorOptionsEnabled to AbstractTableFilter base class Closes #64
diff --git a/src/FieldTypeSystem/Definitions/TagsInputFieldType.php b/src/FieldTypeSystem/Definitions/TagsInputFieldType.php
@@ -10,6 +10,7 @@
 use Relaticle\CustomFields\Filament\Integration\Components\Forms\TagsInputComponent;
 use Relaticle\CustomFields\Filament\Integration\Components\Infolists\MultiChoiceEntry;
 use Relaticle\CustomFields\Filament\Integration\Components\Tables\Columns\MultiChoiceColumn;
+use Relaticle\CustomFields\Filament\Integration\Components\Tables\Filters\TagsFilter;
 
 /**
  * ABOUTME: Field type definition for Tags Input fields
@@ -25,6 +26,9 @@ public function configure(): FieldSchema
             ->icon('mdi-tag-multiple')
             ->formComponent(TagsInputComponent::class)
             ->tableColumn(MultiChoiceColumn::class)
+            ->tableFilter(TagsFilter::class)
+            ->filterable()
+            ->searchable(false)
             ->infolistEntry(MultiChoiceEntry::class)
             ->priority(70)
             ->availableValidationRules([
diff --git a/src/Filament/Integration/Base/AbstractTableFilter.php b/src/Filament/Integration/Base/AbstractTableFilter.php
@@ -6,6 +6,8 @@
 
 use Filament\Tables\Filters\BaseFilter;
 use Relaticle\CustomFields\Contracts\TableFilterInterface;
+use Relaticle\CustomFields\Enums\CustomFieldsFeature;
+use Relaticle\CustomFields\FeatureSystem\FeatureManager;
 use Relaticle\CustomFields\Models\CustomField;
 
 /**
@@ -18,4 +20,10 @@ abstract class AbstractTableFilter implements TableFilterInterface
      * Create and configure a table filter.
      */
     abstract public function make(CustomField $customField): BaseFilter;
+
+    protected function hasColorOptionsEnabled(CustomField $customField): bool
+    {
+        return FeatureManager::isEnabled(CustomFieldsFeature::FIELD_OPTION_COLORS)
+            && $customField->settings->enable_option_colors;
+    }
 }
diff --git a/src/Filament/Integration/Components/Tables/Columns/MultiChoiceColumn.php b/src/Filament/Integration/Components/Tables/Columns/MultiChoiceColumn.php
@@ -28,7 +28,6 @@ public function make(CustomField $customField): BaseColumn
 
         $column
             ->sortable(false)
-            ->searchable(false)
             ->getStateUsing(fn (HasCustomFields $record): array => $this->valueResolver->resolve($record, $customField));
 
         return $this->applyBadgeColorsIfEnabled($column, $customField);
diff --git a/src/Filament/Integration/Components/Tables/Filters/SelectFilter.php b/src/Filament/Integration/Components/Tables/Filters/SelectFilter.php
@@ -4,6 +4,8 @@
 
 namespace Relaticle\CustomFields\Filament\Integration\Components\Tables\Filters;
 
+use Filament\Support\Colors\Color;
+use Filament\Tables\Filters\Indicator;
 use Filament\Tables\Filters\SelectFilter as FilamentSelectFilter;
 use Illuminate\Database\Eloquent\Builder;
 use Relaticle\CustomFields\Filament\Integration\Base\AbstractTableFilter;
@@ -16,8 +18,9 @@ public function make(CustomField $customField): FilamentSelectFilter
         $filter = FilamentSelectFilter::make($customField->getFieldName())
             ->multiple()
             ->label($customField->name)
-            ->searchable()
-            ->options($customField->options->pluck('name', 'id')->all());
+            ->searchable();
+
+        $filter->options($customField->options->pluck('name', 'id')->all());
 
         $filter->query(
             fn (array $data, Builder $query): Builder => $query->when(
@@ -30,6 +33,24 @@ public function make(CustomField $customField): FilamentSelectFilter
             )
         );
 
+        if ($this->hasColorOptionsEnabled($customField)) {
+            $filter->indicateUsing(function (array $data) use ($customField): array {
+                if (empty($data['values'])) {
+                    return [];
+                }
+
+                return $customField->options
+                    ->whereIn('id', $data['values'])
+                    ->map(function (mixed $option) use ($customField): Indicator {
+                        $hexColor = $option->settings->color ?? null;
+
+                        return Indicator::make("{$customField->name}: {$option->name}")
+                            ->color($hexColor !== null ? Color::hex($hexColor) : 'gray');
+                    })
+                    ->all();
+            });
+        }
+
         return $filter;
     }
 }
diff --git a/src/Filament/Integration/Components/Tables/Filters/TagsFilter.php b/src/Filament/Integration/Components/Tables/Filters/TagsFilter.php
@@ -0,0 +1,86 @@
+<?php
+
+declare(strict_types=1);
+
+namespace Relaticle\CustomFields\Filament\Integration\Components\Tables\Filters;
+
+use Filament\Support\Colors\Color;
+use Filament\Tables\Filters\Indicator;
+use Filament\Tables\Filters\SelectFilter as FilamentSelectFilter;
+use Illuminate\Database\Eloquent\Builder;
+use Relaticle\CustomFields\CustomFields;
+use Relaticle\CustomFields\Filament\Integration\Base\AbstractTableFilter;
+use Relaticle\CustomFields\Models\CustomField;
+
+final class TagsFilter extends AbstractTableFilter
+{
+    public function make(CustomField $customField): FilamentSelectFilter
+    {
+        $filter = FilamentSelectFilter::make($customField->getFieldName())
+            ->multiple()
+            ->label($customField->name)
+            ->searchable();
+
+        $filter->options(fn (): array => $this->getExistingTags($customField));
+
+        $filter->query(
+            fn (array $data, Builder $query): Builder => $query->when(
+                ! empty($data['values']),
+                fn (Builder $query): Builder => $query->whereHas('customFieldValues', function (Builder $query) use ($customField, $data): void {
+                    $query->where('custom_field_id', $customField->id);
+
+                    foreach ($data['values'] as $tag) {
+                        $query->whereJsonContains('json_value', $tag);
+                    }
+                }),
+            )
+        );
+
+        $filter->indicateUsing(function (array $data) use ($customField): array {
+            if (empty($data['values'])) {
+                return [];
+            }
+
+            $optionColors = $this->hasColorOptionsEnabled($customField)
+                ? $customField->options
+                    ->filter(fn (mixed $option): bool => filled($option->settings->color ?? null))
+                    ->mapWithKeys(fn (mixed $option): array => [$option->name => $option->settings->color])
+                    ->all()
+                : [];
+
+            /** @var array<int, string> $values */
+            $values = $data['values'];
+
+            return collect($values)
+                ->map(function (string $tag) use ($customField, $optionColors): Indicator {
+                    $hexColor = $optionColors[$tag] ?? null;
+
+                    return Indicator::make("{$customField->name}: {$tag}")
+                        ->color($hexColor !== null ? Color::hex($hexColor) : 'gray');
+                })
+                ->all();
+        });
+
+        return $filter;
+    }
+
+    /**
+     * @return array<string, string>
+     */
+    private function getExistingTags(CustomField $customField): array
+    {
+        $valueModel = CustomFields::newValueModel();
+
+        $allTags = $valueModel::query()
+            ->where('custom_field_id', $customField->id)
+            ->whereNotNull('json_value')
+            ->pluck('json_value')
+            ->flatten()
+            ->unique()
+            ->filter()
+            ->sort()
+            ->values();
+
+        return $allTags->mapWithKeys(fn (string $tag): array => [$tag => $tag])->all();
+    }
+}
diff --git a/src/Filament/Integration/Concerns/Shared/ConfiguresBadgeColors.php b/src/Filament/Integration/Concerns/Shared/ConfiguresBadgeColors.php
@@ -13,6 +13,10 @@ trait ConfiguresBadgeColors
 {
     protected function applyBadgeColorsIfEnabled($component, CustomField $customField)
     {
+        if ($customField->typeData->acceptsArbitraryValues) {
+            return $this->applyTagsBadgeColors($component, $customField);
+        }
+
         if (! $this->shouldApplyBadgeColors($customField)) {
             return $component;
         }
@@ -25,6 +29,26 @@ protected function applyBadgeColorsIfEnabled($component, CustomField $customFiel
             });
     }
 
+    /**
+     * Apply badge styling for tags (fields with arbitrary values).
+     * Always displays as badges with predefined option colors or gray fallback.
+     */
+    private function applyTagsBadgeColors($component, CustomField $customField)
+    {
+        return $component->badge()
+            ->color(function ($state) use ($customField): array|string {
+                if ($this->shouldApplyBadgeColors($customField)) {
+                    $option = $customField->options->where('name', $state)->first();
+
+                    if ($option?->settings->color) {
+                        return Color::hex($option->settings->color);
+                    }
+                }
+
+                return 'gray';
+            });
+    }
+
     private function shouldApplyBadgeColors(CustomField $customField): bool
     {
         return FeatureManager::isEnabled(CustomFieldsFeature::FIELD_OPTION_COLORS)
diff --git a/src/Filament/Management/Schemas/FieldForm.php b/src/Filament/Management/Schemas/FieldForm.php
@@ -356,6 +356,7 @@ public static function schema(bool $withOptionsRelationship = true): array
                                 in_array((string) $get('type'), [
                                     'select',
                                     'multi_select',
+                                    'tags-input',
                                 ])
                         ),
                     // Multi-value settings
diff --git a/src/Support/ColorResolver.php b/src/Support/ColorResolver.php
@@ -0,0 +1,109 @@
+<?php
+
+declare(strict_types=1);
+
+namespace Relaticle\CustomFields\Support;
+
+use Filament\Support\Colors\Color;
+use Filament\Support\Facades\FilamentColor;
+use Filament\Support\View\Components\BadgeComponent;
+
+/**
+ * Resolves color values to ensure consistency across all custom field components.
+ *
+ * Supports:
+ * - Semantic colors (primary, danger, gray, etc.)
+ * - Hex colors (#ff0000)
+ * - Color constant arrays (already full palettes)
+ *
+ * This ensures that badges, filters, and other components display the same
+ * color for the same option, using Filament's color system.
+ */
+final class ColorResolver
+{
+    /**
+     * Resolve a hex color to a full Filament color palette.
+     *
+     * @return array<int, string>|null
+     */
+    public static function hexToPalette(?string $hexColor): ?array
+    {
+        if (blank($hexColor)) {
+            return null;
+        }
+
+        if (! str_starts_with($hexColor, '#') || ! preg_match('/^#[0-9A-Fa-f]{6}$/', $hexColor)) {
+            return null;
+        }
+
+        try {
+            return Color::hex($hexColor);
+        } catch (\Exception) {
+            return null;
+        }
+    }
+
+    /**
+     * Get the accessible text color shade for a given color palette.
+     * Uses Filament's BadgeComponent logic to ensure proper contrast.
+     *
+     * @param  array<int, string>  $palette
+     */
+    public static function getTextShade(array $palette): int
+    {
+        $component = new BadgeComponent;
+        $colorMap = $component->getColorMap($palette);
+
+        return $colorMap['text'];
+    }
+
+    /**
+     * Convert an OKLCH color string to RGB format.
+     *
+     * @param  string  $oklch  OKLCH color string from Color palette (e.g., "oklch(0.72 0.11 178)")
+     * @return string RGB color string (e.g., "rgb(107, 114, 128)")
+     */
+    public static function oklchToRgb(string $oklch): string
+    {
+        return Color::convertToRgb($oklch);
+    }
+
+    /**
+     * Get badge-style colors (background and text) for a hex color.
+     * Returns the same colors that Filament badges use for visual consistency.
+     * Returns gray colors if hex color is null or invalid.
+     *
+     * @return array{background: string, text: string}
+     */
+    public static function getBadgeColors(?string $hexColor): array
+    {
+        $palette = self::hexToPalette($hexColor);
+
+        if ($palette === null) {
+            return self::getGrayBadgeColors();
+        }
+
+        $textShade = self::getTextShade($palette);
+
+        return [
+            'background' => self::oklchToRgb($palette[50]),
+            'text' => self::oklchToRgb($palette[$textShade]),
+        ];
+    }
+
+    /**
+     * Get gray badge colors for arbitrary/uncolored values.
+     *
+     * @return array{background: string, text: string}
+     */
+    public static function getGrayBadgeColors(): array
+    {
+        /** @var array<int, string> $grayPalette */
+        $grayPalette = FilamentColor::getColor('gray');
+
+        return [
+            'background' => self::oklchToRgb($grayPalette[100]),
+            'text' => self::oklchToRgb($grayPalette[600]),
+        ];
+    }
+}
