Refactor dropdown item and add tests

filamentphp · Jan 30, 2025 · ecdd821 · ecdd821
1 parent b491a15
commit ecdd821
Show file tree

Hide file tree

Showing 53 changed files with 414 additions and 72 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/list/item.css b/packages/support/resources/css/components/dropdown/list/item.css
@@ -72,7 +72,7 @@
         }
 
         & .fi-dropdown-list-item-label {
-            @apply text-color-600 dark:text-color-400;
+            @apply text-(--text) hover:text-(--hover-text) dark:text-(--dark-text) dark:hover:text-(--dark-hover-text);
         }
     }
 

diff --git a/packages/support/resources/views/components/dropdown/list/item.blade.php b/packages/support/resources/views/components/dropdown/list/item.blade.php
@@ -1,6 +1,9 @@
 @php
     use Filament\Support\Enums\ActionSize;
     use Filament\Support\Enums\IconSize;
+    use Filament\Support\View\Components\Badge;
+    use Filament\Support\View\Components\Dropdown\Item;
+    use Filament\Support\View\Components\Dropdown\Item\Icon;
     use Illuminate\View\ComponentAttributeBag;
 @endphp
 
@@ -34,19 +37,7 @@
     $iconClasses = \Illuminate\Support\Arr::toCssClasses([
         'fi-dropdown-list-item-icon',
         ($iconSize instanceof IconSize) ? ('fi-size-' . $iconSize->value) : (is_string($iconSize) ? $iconSize : ''),
-        match ($iconColor) {
-            'gray' => '',
-            default => 'fi-color',
-        },
-        is_string($iconColor) ? "fi-color-{$iconColor}" : null,
-    ]);
-
-    $iconStyles = \Illuminate\Support\Arr::toCssStyles([
-        \Filament\Support\get_color_css_variables(
-            $iconColor,
-            shades: [400, 500],
-            alias: 'dropdown.list.item.icon',
-        ) => $iconColor !== 'gray',
+        ...\Filament\Support\get_component_color_classes(Icon::class, $iconColor),
     ]);
 
     $wireTarget = $loadingIndicator ? $attributes->whereStartsWith(['wire:target', 'wire:click'])->filter(fn ($value): bool => filled($value))->first() : null;
@@ -104,27 +95,16 @@
             ->class([
                 'fi-dropdown-list-item',
                 'fi-disabled' => $disabled,
-                match ($color) {
-                    'gray' => '',
-                    default => 'fi-color',
-                },
-                is_string($color) ? "fi-color-{$color}" : null,
-            ])
-            ->style([
-                \Filament\Support\get_color_css_variables(
-                    $color,
-                    shades: [50, 400],
-                    alias: 'dropdown.list.item',
-                ) => $color !== 'gray',
             ])
+            ->color(Item::class, $color)
     }}
 >
     @if ($icon)
         {{
             \Filament\Support\generate_icon_html($icon, $iconAlias, (new ComponentAttributeBag([
                 'wire:loading.remove.delay.' . config('filament.livewire_loading_delay', 'default') => $hasLoadingIndicator,
                 'wire:target' => $hasLoadingIndicator ? $loadingIndicatorTarget : false,
-            ]))->class([$iconClasses])->style([$iconStyles]))
+            ]))->class([$iconClasses]))
         }}
     @endif
 
@@ -144,20 +124,11 @@ class="fi-dropdown-list-item-image"
             \Filament\Support\generate_loading_indicator_html((new ComponentAttributeBag([
                 'wire:loading.delay.' . config('filament.livewire_loading_delay', 'default') => '',
                 'wire:target' => $loadingIndicatorTarget,
-            ]))->class([$iconClasses])->style([$iconStyles]))
+            ]))->class([$iconClasses]))
         }}
     @endif
 
-    <span
-        class="fi-dropdown-list-item-label"
-        @style([
-            \Filament\Support\get_color_css_variables(
-                $color,
-                shades: [400, 600],
-                alias: 'dropdown.list.item.label',
-            ) => $color !== 'gray',
-        ])
-    >
+    <span class="fi-dropdown-list-item-label">
         {{ $slot }}
     </span>
 
@@ -171,22 +142,7 @@ class="fi-dropdown-list-item-label"
             @endif
             @class([
                 'fi-badge',
-                match ($badgeColor) {
-                    'gray' => '',
-                    default => 'fi-color',
-                },
-                is_string($badgeColor) ? "fi-color-{$badgeColor}" : null,
-            ])
-            @style([
-                \Filament\Support\get_color_css_variables(
-                    $badgeColor,
-                    shades: [
-                        50,
-                        400,
-                        600,
-                    ],
-                    alias: 'badge',
-                ) => $badgeColor !== 'gray',
+                ...\Filament\Support\get_component_color_classes(Badge::class, $badgeColor),
             ])
         >
             {{ $badge }}

diff --git a/packages/support/src/View/Components/Badge.php b/packages/support/src/View/Components/Badge.php
@@ -17,8 +17,8 @@ public function getColorClasses(array $color): array
     {
         ksort($color);
 
-        foreach ($color as $shade => $shadeValue) {
-            if (Color::isIconContrastRatioAccessible($color[50], $shadeValue)) {
+        foreach (array_keys($color) as $shade) {
+            if (Color::isIconContrastRatioAccessible($color[50], $color[$shade])) {
                 $text = $shade;
 
                 break;
@@ -32,12 +32,12 @@ public function getColorClasses(array $color): array
         $gray = FilamentColor::getColor('gray');
         $lightestDarkGrayBg = $gray[500];
 
-        foreach ($color as $shade => $shadeValue) {
+        foreach (array_keys($color) as $shade) {
             if ($shade > 500) {
                 continue;
             }
 
-            if (Color::isIconContrastRatioAccessible($lightestDarkGrayBg, $shadeValue)) {
+            if (Color::isIconContrastRatioAccessible($lightestDarkGrayBg, $color[$shade])) {
                 $darkText = $shade;
 
                 break;

diff --git a/packages/support/src/View/Components/Button.php b/packages/support/src/View/Components/Button.php
@@ -108,8 +108,8 @@ public function getOutlinedColorClasses(array $color): array
 
         $darkestLightGrayBg = $gray[50];
 
-        foreach ($color as $shade => $shadeValue) {
-            if (Color::isTextContrastRatioAccessible($darkestLightGrayBg, $shadeValue)) {
+        foreach (array_keys($color) as $shade) {
+            if (Color::isTextContrastRatioAccessible($darkestLightGrayBg, $color[$shade])) {
                 $text = $shade;
 
                 break;
@@ -122,12 +122,12 @@ public function getOutlinedColorClasses(array $color): array
 
         $lightestDarkGrayBg = $gray[700];
 
-        foreach ($color as $shade => $shadeValue) {
+        foreach (array_keys($color) as $shade) {
             if ($shade > 500) {
                 continue;
             }
 
-            if (Color::isTextContrastRatioAccessible($lightestDarkGrayBg, $shadeValue)) {
+            if (Color::isTextContrastRatioAccessible($lightestDarkGrayBg, $color[$shade])) {
                 $darkText = $shade;
 
                 break;

diff --git a/packages/support/src/View/Components/Dropdown/Item.php b/packages/support/src/View/Components/Dropdown/Item.php
@@ -0,0 +1,87 @@
+<?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 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 ($shade < 600) {
+                continue;
+            }
+
+            if (Color::isTextContrastRatioAccessible('oklch(1 0 0)', $color[$shade])) {
+                $text = $shade;
+
+                break;
+            }
+        }
+
+        $text ??= 950;
+
+        foreach (array_keys($color) as $shade) {
+            if ($shade < 600) {
+                continue;
+            }
+
+            if (Color::isTextContrastRatioAccessible($color[50], $color[$shade])) {
+                $hoverText = $shade;
+
+                break;
+            }
+        }
+
+        $hoverText ??= 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;
+
+        foreach (array_keys($color) as $shade) {
+            if ($shade > 400) {
+                continue;
+            }
+
+            if (Color::isTextContrastRatioAccessible($color[950], $color[$shade])) {
+                $darkHoverText = $shade;
+
+                break;
+            }
+        }
+
+        $darkHoverText ??= 100;
+
+        return [
+            "fi-text-color-{$text}",
+            "hover:fi-text-color-{$hoverText}",
+            "dark:fi-text-color-{$darkText}",
+            "dark:hover:fi-text-color-{$darkHoverText}",
+        ];
+    }
+}
diff --git a/packages/support/src/View/Components/Dropdown/Item/Icon.php b/packages/support/src/View/Components/Dropdown/Item/Icon.php
@@ -0,0 +1,15 @@
+<?php
+
+namespace Filament\Support\View\Components\Dropdown\Item;
+
+class Icon
+{
+    /**
+     * @param  array<int, string>  $color
+     * @return array<string>
+     */
+    public function getColorClasses(array $color): array
+    {
+        return [];
+    }
+}
diff --git a/packages/support/src/View/Components/IconButton.php b/packages/support/src/View/Components/IconButton.php
@@ -28,8 +28,8 @@ public function getColorClasses(array $color): array
 
         $darkestLightGrayBg = $gray[50];
 
-        foreach ($color as $shade => $shadeValue) {
-            if (Color::isIconContrastRatioAccessible($darkestLightGrayBg, $shadeValue)) {
+        foreach (array_keys($color) as $shade) {
+            if (Color::isIconContrastRatioAccessible($darkestLightGrayBg, $color[$shade])) {
                 if ($shade > 500) {
                     // Shades above 500 are likely to be quite dark, so instead of lightening the button
                     // when it is hovered, we darken it.
@@ -51,12 +51,12 @@ public function getColorClasses(array $color): array
 
         $lightestDarkGrayBg = $gray[700];
 
-        foreach ($color as $shade => $shadeValue) {
+        foreach (array_keys($color) as $shade) {
             if ($shade > 500) {
                 continue;
             }
 
-            if (Color::isIconContrastRatioAccessible($lightestDarkGrayBg, $shadeValue)) {
+            if (Color::isIconContrastRatioAccessible($lightestDarkGrayBg, $color[$shade])) {
                 $darkText = $shade;
                 $darkHoverText = $shade - 100;
 

diff --git a/packages/support/src/View/Components/Link.php b/packages/support/src/View/Components/Link.php
@@ -21,8 +21,8 @@ public function getColorClasses(array $color): array
 
         $darkestLightGrayBg = $gray[50];
 
-        foreach ($color as $shade => $shadeValue) {
-            if (Color::isTextContrastRatioAccessible($darkestLightGrayBg, $shadeValue)) {
+        foreach (array_keys($color) as $shade) {
+            if (Color::isTextContrastRatioAccessible($darkestLightGrayBg, $color[$shade])) {
                 $text = $shade;
 
                 break;
@@ -35,12 +35,12 @@ public function getColorClasses(array $color): array
 
         $lightestDarkGrayBg = $gray[700];
 
-        foreach ($color as $shade => $shadeValue) {
+        foreach (array_keys($color) as $shade) {
             if ($shade > 400) {
                 continue;
             }
 
-            if (Color::isTextContrastRatioAccessible($lightestDarkGrayBg, $shadeValue)) {
+            if (Color::isTextContrastRatioAccessible($lightestDarkGrayBg, $color[$shade])) {
                 $darkText = $shade;
 
                 break;

diff --git a/...__dataset__badge______danger______Filament_Support_View_Components_Badge____danger__.snap b/...__dataset__badge______danger______Filament_Support_View_Components_Badge____danger__.snap
@@ -0,0 +1,6 @@
+[
+    "fi-color",
+    "fi-color-danger",
+    "fi-text-color-500",
+    "dark:fi-text-color-200"
+]
diff --git a/..._set__dataset__badge______gray______Filament_Support_View_Components_Badge____gray__.snap b/..._set__dataset__badge______gray______Filament_Support_View_Components_Badge____gray__.snap
@@ -0,0 +1 @@
+[]
diff --git a/..._set__dataset__badge______info______Filament_Support_View_Components_Badge____info__.snap b/..._set__dataset__badge______info______Filament_Support_View_Components_Badge____info__.snap
@@ -0,0 +1,6 @@
+[
+    "fi-color",
+    "fi-color-info",
+    "fi-text-color-500",
+    "dark:fi-text-color-200"
+]
diff --git a/...dataset__badge______primary______Filament_Support_View_Components_Badge____primary__.snap b/...dataset__badge______primary______Filament_Support_View_Components_Badge____primary__.snap
@@ -0,0 +1,6 @@
+[
+    "fi-color",
+    "fi-color-primary",
+    "fi-text-color-600",
+    "dark:fi-text-color-300"
+]
diff --git a/...dataset__badge______success______Filament_Support_View_Components_Badge____success__.snap b/...dataset__badge______success______Filament_Support_View_Components_Badge____success__.snap
@@ -0,0 +1,6 @@
+[
+    "fi-color",
+    "fi-color-success",
+    "fi-text-color-600",
+    "dark:fi-text-color-300"
+]
diff --git a/...dataset__badge______warning______Filament_Support_View_Components_Badge____warning__.snap b/...dataset__badge______warning______Filament_Support_View_Components_Badge____warning__.snap
@@ -0,0 +1,6 @@
+[
+    "fi-color",
+    "fi-color-warning",
+    "fi-text-color-600",
+    "dark:fi-text-color-300"
+]
diff --git a/...tton______danger_____Filament_Support_View_Components_Button_Object_________danger__.snap b/...tton______danger_____Filament_Support_View_Components_Button_Object_________danger__.snap
@@ -0,0 +1,12 @@
+[
+    "fi-color",
+    "fi-color-danger",
+    "fi-bg-color-600",
+    "hover:fi-bg-color-500",
+    "dark:fi-bg-color-600",
+    "dark:hover:fi-bg-color-500",
+    "fi-text-color-0",
+    "hover:fi-text-color-0",
+    "dark:fi-text-color-0",
+    "dark:hover:fi-text-color-0"
+]
diff --git a/...__button______gray_____Filament_Support_View_Components_Button_Object_________gray__.snap b/...__button______gray_____Filament_Support_View_Components_Button_Object_________gray__.snap
@@ -0,0 +1 @@
+[]
diff --git a/...__button______info_____Filament_Support_View_Components_Button_Object_________info__.snap b/...__button______info_____Filament_Support_View_Components_Button_Object_________info__.snap
@@ -0,0 +1,12 @@
+[
+    "fi-color",
+    "fi-color-info",
+    "fi-bg-color-600",
+    "hover:fi-bg-color-500",
+    "dark:fi-bg-color-600",
+    "dark:hover:fi-bg-color-500",
+    "fi-text-color-0",
+    "hover:fi-text-color-0",
+    "dark:fi-text-color-0",
+    "dark:hover:fi-text-color-0"
+]
-Original file line number
+Diff line change
@@ Expand Up / @@ -72,7 +72,7 @@ @@
             }
             & .fi-dropdown-list-item-label {
-                @apply text-color-600 dark:text-color-400;
+                @apply text-(--text) hover:text-(--hover-text) dark:text-(--dark-text) dark:hover:text-(--dark-hover-text);
             }
         }
@@ Expand Down @@