Skip to content

Commit

Permalink
Icon components
Browse files Browse the repository at this point in the history
  • Loading branch information
@danharrin
danharrin committed Jan 30, 2025
1 parent 8ea0efa commit 35cda4b
Show file tree
Hide file tree
Showing 25 changed files with 135 additions and 46 deletions.
24 changes: 6 additions & 18 deletions packages/support/resources/views/components/input/wrapper.blade.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,8 @@
])

@php
use Filament\Support\View\Components\Input\Wrapper\Icon;
$prefixActions = array_filter(
$prefixActions,
fn (\Filament\Actions\Action $prefixAction): bool => $prefixAction->isVisible(),
Expand All @@ -35,21 +37,9 @@
$hasAlpineValidClasses = filled($alpineValid);
$hasAlpineClasses = $hasAlpineDisabledClasses || $hasAlpineValidClasses;
$getIconClasses = fn (string | array $color = 'gray'): string => \Illuminate\Support\Arr::toCssClasses([
$getIconClasses = fn (string $color = 'gray'): string => \Illuminate\Support\Arr::toCssClasses([
'fi-input-wrp-icon',
match ($color) {
'gray' => '',
default => 'fi-color',
},
is_string($color) ? "fi-color-{$color}" : null,
]);
$getIconStyles = fn (string | array $color = 'gray'): string => \Illuminate\Support\Arr::toCssStyles([
\Filament\Support\get_color_css_variables(
$color,
shades: [500],
alias: 'input-wrapper.icon',
) => $color !== 'gray',
...\Filament\Support\get_component_color_classes(Icon::class, $color),
]);
$wireTarget = $attributes->whereStartsWith(['wire:target'])->first();
Expand Down Expand Up @@ -106,8 +96,7 @@
'wire:loading.remove.delay.' . config('filament.livewire_loading_delay', 'default') => $hasLoadingIndicator,
'wire:target' => $hasLoadingIndicator ? $loadingIndicatorTarget : false,
], escape: false)
->class([$getIconClasses($prefixIconColor)])
->style([$getIconStyles($prefixIconColor)]))
->class([$getIconClasses($prefixIconColor)]))
}}

@if ($hasLoadingIndicator)
Expand Down Expand Up @@ -163,8 +152,7 @@
'wire:loading.remove.delay.' . config('filament.livewire_loading_delay', 'default') => $hasLoadingIndicator,
'wire:target' => $hasLoadingIndicator ? $loadingIndicatorTarget : false,
], escape: false)
->class([$getIconClasses($suffixIconColor)])
->style([$getIconStyles($suffixIconColor)]))
->class([$getIconClasses($suffixIconColor)]))
}}

@if (count($suffixActions))
Expand Down
14 changes: 2 additions & 12 deletions packages/support/resources/views/components/modal/index.blade.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@
use Filament\Support\Enums\Alignment;
use Filament\Support\Enums\MaxWidth;
use Filament\Support\Facades\FilamentView;
use Filament\Support\View\Components\Modal\Icon;
@endphp

@props([
Expand Down Expand Up @@ -183,18 +184,7 @@ class="fi-modal-close-btn"
<div
@class([
'fi-modal-icon-wrp',
match ($iconColor) {
'gray' => null,
default => 'fi-color',
},
is_string($iconColor) ? "fi-color-{$iconColor}" : null,
])
@style([
\Filament\Support\get_color_css_variables(
$iconColor,
shades: [100, 400, 500, 600],
alias: 'modal.icon',
) => $iconColor !== 'gray',
...\Filament\Support\get_component_color_classes(Icon::class, $iconColor),
])
>
{{ \Filament\Support\generate_icon_html($icon, $iconAlias, (new \Illuminate\View\ComponentAttributeBag)->class(['fi-modal-icon'])) }}
Expand Down
20 changes: 4 additions & 16 deletions packages/support/resources/views/components/section/index.blade.php
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
@php
use Filament\Support\Enums\Alignment;
use Filament\Support\Enums\IconSize;
use Filament\Support\View\Components\Section\Icon;
use function Filament\Support\is_slot_empty;
@endphp
Expand Down Expand Up @@ -66,25 +67,12 @@
@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',
match ($iconColor) {
'gray' => null,
default => 'fi-color',
},
is_string($iconColor) ? "fi-color-{$iconColor}" : null,
...\Filament\Support\get_component_color_classes(Icon::class, $iconColor),
($iconSize instanceof IconSize) ? "fi-size-{$iconSize->value}" : (is_string($iconSize) ? $iconSize : null),
])
->style([
\Filament\Support\get_color_css_variables(
$iconColor,
shades: [400, 500],
alias: 'section.header.icon',
) => $iconColor !== 'gray',
]))
}}
]) }}
@if ($hasHeading || $hasDescription)
<div class="fi-section-header-text-ctn">
Expand Down
18 changes: 18 additions & 0 deletions packages/support/src/View/Components/Input/Wrapper/Icon.php
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
<?php

namespace Filament\Support\View\Components\Input\Wrapper;

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 [];
}
}
18 changes: 18 additions & 0 deletions packages/support/src/View/Components/Modal/Icon.php
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
<?php

namespace Filament\Support\View\Components\Modal;

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 [];
}
}
18 changes: 18 additions & 0 deletions packages/support/src/View/Components/Section/Icon.php
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
<?php

namespace Filament\Support\View\Components\Section;

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 [];
}
}
4 changes: 4 additions & 0 deletions ...put_wrapper_icon______danger______Filament_Support_View_Compone___r_Icon____danger__.snap
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
[
"fi-color",
"fi-color-danger"
]
1 change: 1 addition & 0 deletions ...__input_wrapper_icon______gray______Filament_Support_View_Compone___r_Icon____gray__.snap
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
[]
4 changes: 4 additions & 0 deletions ...__input_wrapper_icon______info______Filament_Support_View_Compone___r_Icon____info__.snap
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
[
"fi-color",
"fi-color-info"
]
4 changes: 4 additions & 0 deletions ...t_wrapper_icon______primary______Filament_Support_View_Compone___r_Icon____primary__.snap
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
[
"fi-color",
"fi-color-primary"
]
4 changes: 4 additions & 0 deletions ...t_wrapper_icon______success______Filament_Support_View_Compone___r_Icon____success__.snap
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
[
"fi-color",
"fi-color-success"
]
4 changes: 4 additions & 0 deletions ...t_wrapper_icon______warning______Filament_Support_View_Compone___r_Icon____warning__.snap
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
[
"fi-color",
"fi-color-warning"
]
4 changes: 4 additions & 0 deletions ...aset__modal_icon______danger______Filament_Support_View_Compone___l_Icon____danger__.snap
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
[
"fi-color",
"fi-color-danger"
]
1 change: 1 addition & 0 deletions ..._dataset__modal_icon______gray______Filament_Support_View_Compone___l_Icon____gray__.snap
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
[]
4 changes: 4 additions & 0 deletions ..._dataset__modal_icon______info______Filament_Support_View_Compone___l_Icon____info__.snap
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
[
"fi-color",
"fi-color-info"
]
4 changes: 4 additions & 0 deletions ...et__modal_icon______primary______Filament_Support_View_Compone___l_Icon____primary__.snap
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
[
"fi-color",
"fi-color-primary"
]
4 changes: 4 additions & 0 deletions ...et__modal_icon______success______Filament_Support_View_Compone___l_Icon____success__.snap
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
[
"fi-color",
"fi-color-success"
]
4 changes: 4 additions & 0 deletions ...et__modal_icon______warning______Filament_Support_View_Compone___l_Icon____warning__.snap
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
[
"fi-color",
"fi-color-warning"
]
4 changes: 4 additions & 0 deletions ...et__section_icon______danger______Filament_Support_View_Compone___n_Icon____danger__.snap
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
[
"fi-color",
"fi-color-danger"
]
1 change: 1 addition & 0 deletions ...ataset__section_icon______gray______Filament_Support_View_Compone___n_Icon____gray__.snap
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
[]
4 changes: 4 additions & 0 deletions ...ataset__section_icon______info______Filament_Support_View_Compone___n_Icon____info__.snap
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
[
"fi-color",
"fi-color-info"
]
4 changes: 4 additions & 0 deletions ...__section_icon______primary______Filament_Support_View_Compone___n_Icon____primary__.snap
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
[
"fi-color",
"fi-color-primary"
]
4 changes: 4 additions & 0 deletions ...__section_icon______success______Filament_Support_View_Compone___n_Icon____success__.snap
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
[
"fi-color",
"fi-color-success"
]
4 changes: 4 additions & 0 deletions ...__section_icon______warning______Filament_Support_View_Compone___n_Icon____warning__.snap
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
[
"fi-color",
"fi-color-warning"
]
6 changes: 6 additions & 0 deletions tests/src/Support/ColorTest.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,10 @@
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;
use Filament\Support\View\Components\Input\Wrapper\Icon as InputWrapperIcon;
use Filament\Support\View\Components\Link;
use Filament\Support\View\Components\Modal\Icon as ModalIcon;
use Filament\Support\View\Components\Section\Icon as SectionIcon;
use Filament\Support\View\Components\Toggle;
use Filament\Tests\TestCase;
use Illuminate\Support\Str;
Expand Down Expand Up @@ -62,7 +65,10 @@
'dropdown item icon' => DropdownItemIcon::class,
'dropdown item' => DropdownItem::class,
'icon button' => IconButton::class,
'input wrapper icon' => InputWrapperIcon::class,
'link' => Link::class,
'modal icon' => ModalIcon::class,
'section icon' => SectionIcon::class,
'toggle' => Toggle::class,
])
->with(fn (): array => array_keys(app(ColorManager::class)->getColors()));

0 comments on commit 35cda4b

Please sign in to comment.