Dropdown header

filamentphp · Jan 30, 2025 · ec79d6c · ec79d6c
1 parent dc432f7
commit ec79d6c
Show file tree

Hide file tree

Showing 12 changed files with 99 additions and 27 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/dropdown/header.css b/packages/support/resources/css/components/dropdown/header.css
@@ -1,5 +1,5 @@
 .fi-dropdown-header {
-    @apply flex w-full gap-2 p-3 text-sm;
+    @apply flex font-medium w-full gap-2 p-3 text-sm;
 
     & .fi-icon {
         @apply size-5 text-gray-400 dark:text-gray-500;
@@ -23,7 +23,7 @@
         }
 
         & span {
-            @apply text-color-600 dark:text-color-400;
+            @apply text-(--text) dark:text-(--dark-text);
         }
     }
 }
diff --git a/packages/support/resources/views/components/dropdown/header.blade.php b/packages/support/resources/views/components/dropdown/header.blade.php
@@ -1,5 +1,6 @@
 @php
     use Filament\Support\Enums\IconSize;
+    use Filament\Support\View\Components\Dropdown\Header;
     use Illuminate\View\ComponentAttributeBag;
 @endphp
 
@@ -21,37 +22,18 @@
         $attributes
             ->class([
                 'fi-dropdown-header',
-                match ($color) {
-                    'gray' => '',
-                    default => 'fi-color',
-                },
-                is_string($color) ? "fi-color-{$color}" : null,
             ])
+            ->color(Header::class, $color)
     }}
 >
     {{
         \Filament\Support\generate_icon_html($icon, attributes: (new ComponentAttributeBag)
             ->class([
                 ($iconSize instanceof IconSize) ? "fi-size-{$iconSize->value}" : (is_string($iconSize) ? $iconSize : null),
-            ])
-            ->style([
-                \Filament\Support\get_color_css_variables(
-                    $color,
-                    shades: [400, 500],
-                    alias: 'dropdown.header.icon',
-                ) => $color !== 'gray',
             ]))
     }}
 
-    <span
-        @style([
-            \Filament\Support\get_color_css_variables(
-                $color,
-                shades: [400, 600],
-                alias: 'dropdown.header.label',
-            ) => $color !== 'gray',
-        ])
-    >
+    <span>
         {{ $slot }}
     </span>
 </{{ $tag }}>
diff --git a/packages/support/src/View/Components/Dropdown/Header.php b/packages/support/src/View/Components/Dropdown/Header.php
@@ -0,0 +1,57 @@
+<?php
+
+namespace Filament\Support\View\Components\Dropdown;
+
+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 Header 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/..._dropdown_header______danger______Filament_Support_View_Compone___Header____danger__.snap b/..._dropdown_header______danger______Filament_Support_View_Compone___Header____danger__.snap
@@ -0,0 +1,6 @@
+[
+    "fi-color",
+    "fi-color-danger",
+    "fi-text-color-600",
+    "dark:fi-text-color-400"
+]
diff --git a/...set__dropdown_header______gray______Filament_Support_View_Compone___Header____gray__.snap b/...set__dropdown_header______gray______Filament_Support_View_Compone___Header____gray__.snap
@@ -0,0 +1 @@
+[]
diff --git a/...set__dropdown_header______info______Filament_Support_View_Compone___Header____info__.snap b/...set__dropdown_header______info______Filament_Support_View_Compone___Header____info__.snap
@@ -0,0 +1,6 @@
+[
+    "fi-color",
+    "fi-color-info",
+    "fi-text-color-600",
+    "dark:fi-text-color-400"
+]
diff --git a/...ropdown_header______primary______Filament_Support_View_Compone___Header____primary__.snap b/...ropdown_header______primary______Filament_Support_View_Compone___Header____primary__.snap
@@ -0,0 +1,6 @@
+[
+    "fi-color",
+    "fi-color-primary",
+    "fi-text-color-700",
+    "dark:fi-text-color-400"
+]
diff --git a/...ropdown_header______success______Filament_Support_View_Compone___Header____success__.snap b/...ropdown_header______success______Filament_Support_View_Compone___Header____success__.snap
@@ -0,0 +1,6 @@
+[
+    "fi-color",
+    "fi-color-success",
+    "fi-text-color-700",
+    "dark:fi-text-color-400"
+]
diff --git a/...ropdown_header______warning______Filament_Support_View_Compone___Header____warning__.snap b/...ropdown_header______warning______Filament_Support_View_Compone___Header____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
@@ -6,6 +6,7 @@
 use Filament\Support\View\Components\Badge;
 use Filament\Support\View\Components\Button;
 use Filament\Support\View\Components\Contracts\HasColor;
+use Filament\Support\View\Components\Dropdown\Header as DropdownHeader;
 use Filament\Support\View\Components\Dropdown\Item as DropdownItem;
 use Filament\Support\View\Components\Dropdown\Item\Icon as DropdownItemIcon;
 use Filament\Support\View\Components\IconButton;
@@ -53,11 +54,12 @@
         ->toMatchSnapshot();
 })
     ->with([
-        'dropdown item icon' => DropdownItemIcon::class,
-        'dropdown item' => DropdownItem::class,
         'badge' => Badge::class,
         'button' => new Button(isOutlined: false),
         'outlined button' => new Button(isOutlined: true),
+        'dropdown header' => DropdownHeader::class,
+        'dropdown item icon' => DropdownItemIcon::class,
+        'dropdown item' => DropdownItem::class,
         'icon button' => IconButton::class,
         'link' => Link::class,
     ])