Widgets

filamentphp · Jan 30, 2025 · 8109e10 · 8109e10
1 parent 6e54f06
commit 8109e10
Show file tree

Hide file tree

Showing 28 changed files with 175 additions and 50 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/widgets/stats-overview-widget.css b/packages/support/resources/css/components/widgets/stats-overview-widget.css
@@ -24,19 +24,19 @@
     & .fi-wi-stats-overview-stat-description {
         @apply flex items-center gap-x-1 text-sm text-gray-500 dark:text-gray-400;
 
+        & .fi-icon {
+            @apply size-5 text-gray-400 dark:text-gray-500;
+        }
+
         &.fi-color {
-            @apply text-color-600 dark:text-color-400;
+            @apply text-(--text) dark:text-(--dark-text);
 
-            & .fi-wi-stats-overview-stat-description-icon {
+            & .fi-icon {
                 @apply text-color-500;
             }
         }
     }
 
-    & .fi-wi-stats-overview-stat-description-icon {
-        @apply size-5 text-gray-400 dark:text-gray-500;
-    }
-
     & .fi-wi-stats-overview-stat-chart {
         @apply absolute inset-x-0 bottom-0 overflow-hidden rounded-b-xl;
 

diff --git a/packages/support/resources/views/components/section/index.blade.php b/packages/support/resources/views/components/section/index.blade.php
@@ -67,12 +67,14 @@
             @endif
             class="fi-section-header"
         >
-            {{ \Filament\Support\generate_icon_html($icon, attributes: (new \Illuminate\View\ComponentAttributeBag)
+            {{
+                \Filament\Support\generate_icon_html($icon, attributes: (new \Illuminate\View\ComponentAttributeBag)
                     ->class([
                         'fi-section-header-icon',
                         ...\Filament\Support\get_component_color_classes(Icon::class, $iconColor),
                         ($iconSize instanceof IconSize) ? "fi-size-{$iconSize->value}" : (is_string($iconSize) ? $iconSize : null),
-                    ])) }}
+                    ]))
+            }}
 
             @if ($hasHeading || $hasDescription)
                 <div class="fi-section-header-text-ctn">

diff --git a/packages/widgets/resources/views/chart-widget.blade.php b/packages/widgets/resources/views/chart-widget.blade.php
@@ -1,6 +1,6 @@
 @php
     use Filament\Support\Facades\FilamentView;
-    use Filament\Widgets\View\Components\Chart;
+    use Filament\Widgets\View\Components\ChartWidget;
 
     $color = $this->getColor();
     $heading = $this->getHeading();
@@ -69,7 +69,7 @@ class="fi-wi-chart-filter"
                             type: @js($this->getType()),
                         })"
                 @class([
-                    ...\Filament\Support\get_component_color_classes(Chart::class, $color),
+                    ...\Filament\Support\get_component_color_classes(ChartWidget::class, $color),
                 ])
             >
                 <canvas

diff --git a/packages/widgets/resources/views/stats-overview-widget/stat.blade.php b/packages/widgets/resources/views/stats-overview-widget/stat.blade.php
@@ -1,6 +1,8 @@
 @php
     use Filament\Support\Enums\IconPosition;
     use Filament\Support\Facades\FilamentView;
+    use Filament\Widgets\View\Components\StatsOverviewWidget\Stat\Description;
+    use Filament\Widgets\View\Components\StatsOverviewWidget\Stat\StatsOverviewWidgetStatChart;
 
     $chartColor = $getChartColor() ?? 'gray';
     $descriptionColor = $getDescriptionColor() ?? 'gray';
@@ -9,14 +11,6 @@
     $url = $getUrl();
     $tag = $url ? 'a' : 'div';
     $chartDataChecksum = $generateChartDataChecksum();
-
-    $descriptionIconStyles = \Illuminate\Support\Arr::toCssStyles([
-        \Filament\Support\get_color_css_variables(
-            $descriptionColor,
-            shades: [500],
-            alias: 'widgets::stats-overview-widget.stat.description.icon',
-        ) => $descriptionColor !== 'gray',
-    ]);
 @endphp
 
 <{!! $tag !!}
@@ -47,30 +41,19 @@
             <div
                 @class([
                     'fi-wi-stats-overview-stat-description',
-                    match ($descriptionColor) {
-                        'gray' => null,
-                        default => 'fi-color',
-                    },
-                    is_string($descriptionColor) ? "fi-color-{$descriptionColor}" : null,
-                ])
-                @style([
-                    \Filament\Support\get_color_css_variables(
-                        $descriptionColor,
-                        shades: [400, 600],
-                        alias: 'widgets::stats-overview-widget.stat.description',
-                    ) => $descriptionColor !== 'gray',
+                    ...\Filament\Support\get_component_color_classes(Description::class, $descriptionColor),
                 ])
             >
                 @if ($descriptionIcon && in_array($descriptionIconPosition, [IconPosition::Before, 'before']))
-                    {{ \Filament\Support\generate_icon_html($descriptionIcon, attributes: (new \Illuminate\View\ComponentAttributeBag)->class(['fi-wi-stats-overview-stat-description-icon'])->style([$descriptionIconStyles])) }}
+                    {{ \Filament\Support\generate_icon_html($descriptionIcon, attributes: (new \Illuminate\View\ComponentAttributeBag)) }}
                 @endif
 
                 <span>
                     {{ $description }}
                 </span>
 
                 @if ($descriptionIcon && in_array($descriptionIconPosition, [IconPosition::After, 'after']))
-                    {{ \Filament\Support\generate_icon_html($descriptionIcon, attributes: (new \Illuminate\View\ComponentAttributeBag)->class(['fi-wi-stats-overview-stat-description-icon'])->style([$descriptionIconStyles])) }}
+                    {{ \Filament\Support\generate_icon_html($descriptionIcon, attributes: (new \Illuminate\View\ComponentAttributeBag)) }}
                 @endif
             </div>
         @endif
@@ -93,18 +76,7 @@
                         })"
                 @class([
                     'fi-wi-stats-overview-stat-chart',
-                    match ($chartColor) {
-                        'gray' => null,
-                        default => 'fi-color',
-                    },
-                    is_string($chartColor) ? "fi-color-{$chartColor}" : null,
-                ])
-                @style([
-                    \Filament\Support\get_color_css_variables(
-                        $chartColor,
-                        shades: [50, 400, 500],
-                        alias: 'widgets::stats-overview-widget.stat.chart',
-                    ) => $chartColor !== 'gray',
+                    ...\Filament\Support\get_component_color_classes(StatsOverviewWidgetStatChart::class, $chartColor),
                 ])
             >
                 <canvas x-ref="canvas"></canvas>

diff --git a/...ges/widgets/src/View/Components/Chart.php → ...dgets/src/View/Components/ChartWidget.php b/...ges/widgets/src/View/Components/Chart.php → ...dgets/src/View/Components/ChartWidget.php
@@ -5,7 +5,7 @@
 use Filament\Support\View\Components\Contracts\HasColor;
 use Filament\Support\View\Components\Contracts\HasDefaultGrayColor;
 
-class Chart implements HasColor, HasDefaultGrayColor
+class ChartWidget implements HasColor, HasDefaultGrayColor
 {
     /**
      * @param  array<int, string>  $color

diff --git a/packages/widgets/src/View/Components/StatsOverviewWidget/Stat/Description.php b/packages/widgets/src/View/Components/StatsOverviewWidget/Stat/Description.php
@@ -0,0 +1,57 @@
+<?php
+
+namespace Filament\Widgets\View\Components\StatsOverviewWidget\Stat;
+
+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 Description 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 ($shade < 600) {
+                continue;
+            }
+
+            if (Color::isTextContrastRatioAccessible('oklch(1 0 0)', $color[$shade])) {
+                $text = $shade;
+
+                break;
+            }
+        }
+
+        $text ??= 950;
+
+        krsort($color);
+
+        foreach (array_keys($color) as $shade) {
+            if ($shade > 400) {
+                continue;
+            }
+
+            if (Color::isTextContrastRatioAccessible($gray[900], $color[$shade])) {
+                $darkText = $shade;
+
+                break;
+            }
+        }
+
+        $darkText ??= 200;
+
+        return [
+            "fi-text-color-{$text}",
+            "dark:fi-text-color-{$darkText}",
+        ];
+    }
+}
diff --git a/...ges/widgets/src/View/Components/StatsOverviewWidget/Stat/StatsOverviewWidgetStatChart.php b/...ges/widgets/src/View/Components/StatsOverviewWidget/Stat/StatsOverviewWidgetStatChart.php
@@ -0,0 +1,18 @@
+<?php
+
+namespace Filament\Widgets\View\Components\StatsOverviewWidget\Stat;
+
+use Filament\Support\View\Components\Contracts\HasColor;
+use Filament\Support\View\Components\Contracts\HasDefaultGrayColor;
+
+class StatsOverviewWidgetStatChart implements HasColor, HasDefaultGrayColor
+{
+    /**
+     * @param  array<int, string>  $color
+     * @return array<string>
+     */
+    public function getColorClasses(array $color): array
+    {
+        return [];
+    }
+}
diff --git a/...et__chart_widget______danger______Filament_Widgets_View_Compone___Widget____danger__.snap b/...et__chart_widget______danger______Filament_Widgets_View_Compone___Widget____danger__.snap
@@ -0,0 +1,4 @@
+[
+    "fi-color",
+    "fi-color-danger"
+]
diff --git a/...ataset__chart_widget______gray______Filament_Widgets_View_Compone___Widget____gray__.snap b/...ataset__chart_widget______gray______Filament_Widgets_View_Compone___Widget____gray__.snap
@@ -0,0 +1 @@
+[]
diff --git a/...ataset__chart_widget______info______Filament_Widgets_View_Compone___Widget____info__.snap b/...ataset__chart_widget______info______Filament_Widgets_View_Compone___Widget____info__.snap
@@ -0,0 +1,4 @@
+[
+    "fi-color",
+    "fi-color-info"
+]
diff --git a/...__chart_widget______primary______Filament_Widgets_View_Compone___Widget____primary__.snap b/...__chart_widget______primary______Filament_Widgets_View_Compone___Widget____primary__.snap
@@ -0,0 +1,4 @@
+[
+    "fi-color",
+    "fi-color-primary"
+]
diff --git a/...__chart_widget______success______Filament_Widgets_View_Compone___Widget____success__.snap b/...__chart_widget______success______Filament_Widgets_View_Compone___Widget____success__.snap
@@ -0,0 +1,4 @@
+[
+    "fi-color",
+    "fi-color-success"
+]
diff --git a/...__chart_widget______warning______Filament_Widgets_View_Compone___Widget____warning__.snap b/...__chart_widget______warning______Filament_Widgets_View_Compone___Widget____warning__.snap
@@ -0,0 +1,4 @@
+[
+    "fi-color",
+    "fi-color-warning"
+]
diff --git a/...idget_stat_chart______danger______Filament_Widgets_View_Compone___tChart____danger__.snap b/...idget_stat_chart______danger______Filament_Widgets_View_Compone___tChart____danger__.snap
@@ -0,0 +1,4 @@
+[
+    "fi-color",
+    "fi-color-danger"
+]
diff --git a/...ew_widget_stat_chart______gray______Filament_Widgets_View_Compone___tChart____gray__.snap b/...ew_widget_stat_chart______gray______Filament_Widgets_View_Compone___tChart____gray__.snap
@@ -0,0 +1 @@
+[]
diff --git a/...ew_widget_stat_chart______info______Filament_Widgets_View_Compone___tChart____info__.snap b/...ew_widget_stat_chart______info______Filament_Widgets_View_Compone___tChart____info__.snap
@@ -0,0 +1,4 @@
+[
+    "fi-color",
+    "fi-color-info"
+]
diff --git a/...get_stat_chart______primary______Filament_Widgets_View_Compone___tChart____primary__.snap b/...get_stat_chart______primary______Filament_Widgets_View_Compone___tChart____primary__.snap
@@ -0,0 +1,4 @@
+[
+    "fi-color",
+    "fi-color-primary"
+]
diff --git a/...get_stat_chart______success______Filament_Widgets_View_Compone___tChart____success__.snap b/...get_stat_chart______success______Filament_Widgets_View_Compone___tChart____success__.snap
@@ -0,0 +1,4 @@
+[
+    "fi-color",
+    "fi-color-success"
+]
diff --git a/...get_stat_chart______warning______Filament_Widgets_View_Compone___tChart____warning__.snap b/...get_stat_chart______warning______Filament_Widgets_View_Compone___tChart____warning__.snap
@@ -0,0 +1,4 @@
+[
+    "fi-color",
+    "fi-color-warning"
+]
diff --git a/...stat_description______danger______Filament_Widgets_View_Compone___iption____danger__.snap b/...stat_description______danger______Filament_Widgets_View_Compone___iption____danger__.snap
@@ -0,0 +1,6 @@
+[
+    "fi-color",
+    "fi-color-danger",
+    "fi-text-color-600",
+    "dark:fi-text-color-400"
+]
diff --git a/...get_stat_description______gray______Filament_Widgets_View_Compone___iption____gray__.snap b/...get_stat_description______gray______Filament_Widgets_View_Compone___iption____gray__.snap
@@ -0,0 +1 @@
+[]
diff --git a/...get_stat_description______info______Filament_Widgets_View_Compone___iption____info__.snap b/...get_stat_description______info______Filament_Widgets_View_Compone___iption____info__.snap
@@ -0,0 +1,6 @@
+[
+    "fi-color",
+    "fi-color-info",
+    "fi-text-color-600",
+    "dark:fi-text-color-400"
+]
diff --git a/...at_description______primary______Filament_Widgets_View_Compone___iption____primary__.snap b/...at_description______primary______Filament_Widgets_View_Compone___iption____primary__.snap
@@ -0,0 +1,6 @@
+[
+    "fi-color",
+    "fi-color-primary",
+    "fi-text-color-700",
+    "dark:fi-text-color-400"
+]
diff --git a/...at_description______success______Filament_Widgets_View_Compone___iption____success__.snap b/...at_description______success______Filament_Widgets_View_Compone___iption____success__.snap
@@ -0,0 +1,6 @@
+[
+    "fi-color",
+    "fi-color-success",
+    "fi-text-color-700",
+    "dark:fi-text-color-400"
+]
diff --git a/...at_description______warning______Filament_Widgets_View_Compone___iption____warning__.snap b/...at_description______warning______Filament_Widgets_View_Compone___iption____warning__.snap
@@ -0,0 +1,6 @@
+[
+    "fi-color",
+    "fi-color-warning",
+    "fi-text-color-700",
+    "dark:fi-text-color-400"
+]
diff --git a/tests/src/Support/ColorTest.php b/tests/src/Support/ColorTest.php
@@ -16,7 +16,9 @@
 use Filament\Support\View\Components\Section\Icon as SectionIcon;
 use Filament\Support\View\Components\Toggle;
 use Filament\Tests\TestCase;
-use Filament\Widgets\View\Components\Chart;
+use Filament\Widgets\View\Components\ChartWidget;
+use Filament\Widgets\View\Components\StatsOverviewWidget\Stat\Description as StatsOverviewWidgetStatDescription;
+use Filament\Widgets\View\Components\StatsOverviewWidget\Stat\StatsOverviewWidgetStatChart;
 use Illuminate\Support\Str;
 
 uses(TestCase::class);
@@ -59,11 +61,10 @@
         ->toMatchSnapshot();
 })
     ->with([
-        // Support
         'badge' => Badge::class,
         'button' => new Button(isOutlined: false),
         'outlined button' => new Button(isOutlined: true),
-        'chart widget' => Chart::class,
+        'chart widget' => ChartWidget::class,
         'dropdown header' => DropdownHeader::class,
         'dropdown item icon' => DropdownItemIcon::class,
         'dropdown item' => DropdownItem::class,
@@ -72,6 +73,8 @@
         'link' => Link::class,
         'modal icon' => ModalIcon::class,
         'section icon' => SectionIcon::class,
+        'stats overview widget stat description' => StatsOverviewWidgetStatDescription::class,
+        'stats overview widget stat chart' => StatsOverviewWidgetStatChart::class,
         'toggle' => Toggle::class,
     ])
     ->with(fn (): array => array_keys(app(ColorManager::class)->getColors()));