Text column

filamentphp · Jan 30, 2025 · b6ee723 · b6ee723
1 parent 74cb825
commit b6ee723
Show file tree

Hide file tree

Showing 20 changed files with 150 additions and 71 deletions.
diff --git a/docs-assets/app/public/css/filament/support/support.css b/docs-assets/app/public/css/filament/support/support.css
diff --git a/packages/support/dist/index.css b/packages/support/dist/index.css
diff --git a/packages/support/resources/css/components/tables/columns/text.css b/packages/support/resources/css/components/tables/columns/text.css
@@ -194,7 +194,7 @@
     }
 
     &.fi-color {
-        @apply text-color-600 dark:text-color-400;
+        @apply text-(--text) dark:text-(--dark-text);
 
         &li::marker {
             @apply text-gray-950 dark:text-white;

diff --git a/packages/support/src/SupportServiceProvider.php b/packages/support/src/SupportServiceProvider.php
@@ -158,7 +158,7 @@ public function packageBooted(): void
             return preg_replace('/\s*@trim\s*/m', '', $view);
         });
 
-        ComponentAttributeBag::macro('color', function (string | HasColor $component, string $color): ComponentAttributeBag {
+        ComponentAttributeBag::macro('color', function (string | HasColor $component, ?string $color): ComponentAttributeBag {
             return $this->class(FilamentColor::getComponentClasses($component, $color));
         });
 

diff --git a/packages/tables/src/Columns/TextColumn.php b/packages/tables/src/Columns/TextColumn.php
@@ -11,16 +11,18 @@
 use Filament\Support\Enums\FontFamily;
 use Filament\Support\Enums\FontWeight;
 use Filament\Support\Enums\IconPosition;
+use Filament\Support\View\Components\Badge;
 use Filament\Tables\Columns\TextColumn\Enums\TextColumnSize;
 use Filament\Tables\Contracts\HasTable;
+use Filament\Tables\View\Components\Columns\TextColumn\Item;
+use Filament\Tables\View\Components\Columns\TextColumn\Item\Icon;
 use Illuminate\Support\Arr;
 use Illuminate\Support\Collection;
 use Illuminate\Support\Js;
 use Illuminate\View\ComponentAttributeBag;
 use stdClass;
 
 use function Filament\Support\generate_icon_html;
-use function Filament\Support\get_color_css_variables;
 
 class TextColumn extends Column implements HasEmbeddedView
 {
@@ -261,37 +263,7 @@ public function toEmbeddedHtml(): string
             $iconColor = $this->getIconColor($stateItem);
 
             $iconHtml = generate_icon_html($this->getIcon($stateItem), attributes: (new ComponentAttributeBag)
-                ->class([
-                    match ($iconColor) {
-                        null, 'gray' => null,
-                        default => 'fi-color',
-                    } => filled($iconColor),
-                    is_string($iconColor) ? "fi-color-{$iconColor}" : null,
-                ])
-                ->style([
-                    ...(
-                        $isBadge
-                        ? [
-                            get_color_css_variables(
-                                $color,
-                                shades: [500],
-                                alias: 'badge.icon',
-                            ) => $color !== 'gray',
-                        ]
-                        : []
-                    ),
-                    ...(
-                        ((! $isBadge) && $iconColor)
-                        ? [
-                            get_color_css_variables(
-                                $iconColor,
-                                shades: [400, 500],
-                                alias: 'tables::columns.text-column.item.icon',
-                            ) => ! in_array($iconColor, [null, 'gray']),
-                        ]
-                        : []
-                    ),
-                ]))?->toHtml();
+                ->color(Icon::class, $iconColor))?->toHtml();
 
             $isCopyable = $this->isCopyable($stateItem);
 
@@ -322,50 +294,28 @@ public function toEmbeddedHtml(): string
                     ], escape: false)
                     ->class([
                         'fi-ta-text-item',
-                        ...((! $isBadge) ? [
-                            match ($color) {
-                                null, 'gray' => null,
-                                default => 'fi-color',
-                            },
-                            is_string($color) ? "fi-color-{$color}" : null,
-                            (($size = $this->getSize($stateItem)) instanceof TextColumnSize) ? "fi-size-{$size->value}" : $size,
-                            (($weight = $this->getWeight($stateItem)) instanceof FontWeight) ? "fi-font-{$weight->value}" : (is_string($weight) ? $weight : ''),
-                        ] : []),
                         (($fontFamily = $this->getFontFamily($stateItem)) instanceof FontFamily) ? "fi-font-{$fontFamily->value}" : (is_string($fontFamily) ? $fontFamily : ''),
                         'fi-copyable' => $isCopyable,
                     ])
-                    ->style([
-                        ...((! $isBadge) ? [
-                            get_color_css_variables(
-                                $color,
-                                shades: [400, 600],
-                                alias: 'tables::columns.text-column.item',
-                            ) => ! in_array($color, [null, 'gray']),
-                            "--line-clamp: {$lineClamp}" => $lineClamp,
-                        ] : []),
-                    ]),
+                    ->when(
+                        ! $isBadge,
+                        fn (ComponentAttributeBag $attributes) => $attributes
+                            ->class([
+                                (($size = $this->getSize($stateItem)) instanceof TextColumnSize) ? "fi-size-{$size->value}" : $size,
+                                (($weight = $this->getWeight($stateItem)) instanceof FontWeight) ? "fi-font-{$weight->value}" : (is_string($weight) ? $weight : ''),
+                            ])
+                            ->style([
+                                "--line-clamp: {$lineClamp}" => $lineClamp,
+                            ])
+                            ->color(Item::class, $color)
+                    ),
                 'badgeAttributes' => $isBadge
                     ? (new ComponentAttributeBag)
                         ->class([
                             'fi-badge',
-                            match ($color ?? 'primary') {
-                                'gray' => null,
-                                default => 'fi-color',
-                            },
-                            is_string($color) ? "fi-color-{$color}" : null,
                             (($size = $this->getSize($stateItem)) instanceof TextColumnSize) ? "fi-size-{$size->value}" : $size,
                         ])
-                        ->style([
-                            get_color_css_variables(
-                                $color,
-                                shades: [
-                                    50,
-                                    400,
-                                    600,
-                                ],
-                                alias: 'badge',
-                            ) => $color !== 'gray',
-                        ])
+                        ->color(Badge::class, $color ?? 'primary')
                     : null,
                 'iconAfterHtml' => ($iconPosition === IconPosition::After) ? $iconHtml : '',
                 'iconBeforeHtml' => ($iconPosition === IconPosition::Before) ? $iconHtml : '',

diff --git a/packages/tables/src/View/Components/Columns/TextColumn/Item.php b/packages/tables/src/View/Components/Columns/TextColumn/Item.php
@@ -0,0 +1,55 @@
+<?php
+
+namespace Filament\Tables\View\Components\Columns\TextColumn;
+
+use Filament\Support\Colors\Color;
+use Filament\Support\Facades\FilamentColor;
+use Filament\Support\View\Components\Contracts\HasColor;
+use Filament\Support\View\Components\Contracts\HasDefaultGrayColor;
+
+class Item implements HasColor, HasDefaultGrayColor
+{
+    /**
+     * @param  array<int, string>  $color
+     * @return array<string>
+     */
+    public function getColorClasses(array $color): array
+    {
+        $gray = FilamentColor::getColor('gray');
+
+        ksort($color);
+
+        foreach (array_keys($color) as $shade) {
+            if (Color::isTextContrastRatioAccessible('oklch(1 0 0)', $color[$shade])) {
+                $text = $shade;
+
+                break;
+            }
+        }
+
+        $text ??= 900;
+
+        krsort($color);
+
+        $lightestDarkGrayBg = $gray[800];
+
+        foreach (array_keys($color) as $shade) {
+            if ($shade > 600) {
+                continue;
+            }
+
+            if (Color::isTextContrastRatioAccessible($lightestDarkGrayBg, $color[$shade])) {
+                $darkText = $shade;
+
+                break;
+            }
+        }
+
+        $darkText ??= 200;
+
+        return [
+            "fi-text-color-{$text}",
+            "dark:fi-text-color-{$darkText}",
+        ];
+    }
+}
diff --git a/packages/tables/src/View/Components/Columns/TextColumn/Item/Icon.php b/packages/tables/src/View/Components/Columns/TextColumn/Item/Icon.php
@@ -0,0 +1,18 @@
+<?php
+
+namespace Filament\Tables\View\Components\Columns\TextColumn\Item;
+
+use Filament\Support\View\Components\Contracts\HasColor;
+use Filament\Support\View\Components\Contracts\HasDefaultGrayColor;
+
+class Icon implements HasColor, HasDefaultGrayColor
+{
+    /**
+     * @param  array<int, string>  $color
+     * @return array<string>
+     */
+    public function getColorClasses(array $color): array
+    {
+        return [];
+    }
+}
diff --git a/...text_column_item______danger______Filament_Tables_View_Componen___n_Item____danger__.snap b/...text_column_item______danger______Filament_Tables_View_Componen___n_Item____danger__.snap
@@ -0,0 +1,6 @@
+[
+    "fi-color",
+    "fi-color-danger",
+    "fi-text-color-600",
+    "dark:fi-text-color-400"
+]
diff --git a/...ble_text_column_item______gray______Filament_Tables_View_Componen___n_Item____gray__.snap b/...ble_text_column_item______gray______Filament_Tables_View_Componen___n_Item____gray__.snap
@@ -0,0 +1 @@
+[]
diff --git a/...ble_text_column_item______info______Filament_Tables_View_Componen___n_Item____info__.snap b/...ble_text_column_item______info______Filament_Tables_View_Componen___n_Item____info__.snap
@@ -0,0 +1,6 @@
+[
+    "fi-color",
+    "fi-color-info",
+    "fi-text-color-600",
+    "dark:fi-text-color-400"
+]
diff --git a/...xt_column_item______primary______Filament_Tables_View_Componen___n_Item____primary__.snap b/...xt_column_item______primary______Filament_Tables_View_Componen___n_Item____primary__.snap
@@ -0,0 +1,6 @@
+[
+    "fi-color",
+    "fi-color-primary",
+    "fi-text-color-700",
+    "dark:fi-text-color-600"
+]
diff --git a/...xt_column_item______success______Filament_Tables_View_Componen___n_Item____success__.snap b/...xt_column_item______success______Filament_Tables_View_Componen___n_Item____success__.snap
@@ -0,0 +1,6 @@
+[
+    "fi-color",
+    "fi-color-success",
+    "fi-text-color-700",
+    "dark:fi-text-color-600"
+]
diff --git a/...xt_column_item______warning______Filament_Tables_View_Componen___n_Item____warning__.snap b/...xt_column_item______warning______Filament_Tables_View_Componen___n_Item____warning__.snap
@@ -0,0 +1,6 @@
+[
+    "fi-color",
+    "fi-color-warning",
+    "fi-text-color-700",
+    "dark:fi-text-color-600"
+]
diff --git a/...column_item_icon______danger______Filament_Tables_View_Componen___m_Icon____danger__.snap b/...column_item_icon______danger______Filament_Tables_View_Componen___m_Icon____danger__.snap
@@ -0,0 +1,4 @@
+[
+    "fi-color",
+    "fi-color-danger"
+]
diff --git a/...ext_column_item_icon______gray______Filament_Tables_View_Componen___m_Icon____gray__.snap b/...ext_column_item_icon______gray______Filament_Tables_View_Componen___m_Icon____gray__.snap
@@ -0,0 +1 @@
+[]
diff --git a/...ext_column_item_icon______info______Filament_Tables_View_Componen___m_Icon____info__.snap b/...ext_column_item_icon______info______Filament_Tables_View_Componen___m_Icon____info__.snap
@@ -0,0 +1,4 @@
+[
+    "fi-color",
+    "fi-color-info"
+]
diff --git a/...lumn_item_icon______primary______Filament_Tables_View_Componen___m_Icon____primary__.snap b/...lumn_item_icon______primary______Filament_Tables_View_Componen___m_Icon____primary__.snap
@@ -0,0 +1,4 @@
+[
+    "fi-color",
+    "fi-color-primary"
+]
diff --git a/...lumn_item_icon______success______Filament_Tables_View_Componen___m_Icon____success__.snap b/...lumn_item_icon______success______Filament_Tables_View_Componen___m_Icon____success__.snap
@@ -0,0 +1,4 @@
+[
+    "fi-color",
+    "fi-color-success"
+]
diff --git a/...lumn_item_icon______warning______Filament_Tables_View_Componen___m_Icon____warning__.snap b/...lumn_item_icon______warning______Filament_Tables_View_Componen___m_Icon____warning__.snap
@@ -0,0 +1,4 @@
+[
+    "fi-color",
+    "fi-color-warning"
+]
diff --git a/tests/src/Support/ColorTest.php b/tests/src/Support/ColorTest.php
@@ -17,6 +17,8 @@
 use Filament\Support\View\Components\Toggle;
 use Filament\Tables\View\Components\Columns\IconColumn\Icon as TableIconColumnIcon;
 use Filament\Tables\View\Components\Columns\Summarizers\Count\Icon as TableColumnCountSummarizerIcon;
+use Filament\Tables\View\Components\Columns\TextColumn\Item as TableTextColumnItem;
+use Filament\Tables\View\Components\Columns\TextColumn\Item\Icon as TableTextColumnItemIcon;
 use Filament\Tests\TestCase;
 use Filament\Widgets\View\Components\ChartWidget;
 use Filament\Widgets\View\Components\StatsOverviewWidget\Stat\Description as StatsOverviewWidgetStatDescription;
@@ -79,6 +81,8 @@
         'stats overview widget stat chart' => StatsOverviewWidgetStatChart::class,
         'table column count summarizer icon' => TableColumnCountSummarizerIcon::class,
         'table icon column icon' => TableIconColumnIcon::class,
+        'table text column item' => TableTextColumnItem::class,
+        'table text column item icon' => TableTextColumnItemIcon::class,
         'toggle' => Toggle::class,
     ])
     ->with(fn (): array => array_keys(app(ColorManager::class)->getColors()));