Skip to content

Commit

Permalink
Simplify icon sizing
Browse files Browse the repository at this point in the history
  • Loading branch information
@danharrin
danharrin committed Jan 31, 2025
1 parent bc5c8fa commit be7c26f
Show file tree
Hide file tree
Showing 21 changed files with 726 additions and 55 deletions.
2 changes: 1 addition & 1 deletion docs-assets/app/public/css/filament/support/support.css
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion packages/panels/src/Pages/Page.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,7 @@ abstract class Page extends BasePage

protected static string | BackedEnum | null $navigationIcon = null;

protected static string | BackedEnum|null $activeNavigationIcon = null;
protected static string | BackedEnum | null $activeNavigationIcon = null;

protected static ?string $navigationLabel = null;

Expand Down
2 changes: 1 addition & 1 deletion packages/support/dist/index.css
View file

Large diffs are not rendered by default.

4 changes: 2 additions & 2 deletions packages/support/resources/css/components/button.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -78,7 +78,7 @@
}

& > .fi-icon {
@apply text-white;
@apply text-(--text) dark:text-(--dark-text);
}
}

Expand Down Expand Up @@ -108,7 +108,7 @@
@apply cursor-pointer;

& > .fi-icon:is(:checked + label > .fi-icon) {
@apply text-white;
@apply text-(--text) dark:text-(--dark-text);
}
}

Expand Down
4 changes: 0 additions & 4 deletions packages/support/resources/css/components/icon.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,10 +5,6 @@
@apply size-3;
}

&.fi-size-xs-sm {
@apply size-3.5;
}

&.fi-size-sm {
@apply size-4;
}
Expand Down
10 changes: 5 additions & 5 deletions packages/support/resources/views/components/badge.blade.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -100,7 +100,7 @@
\Filament\Support\generate_icon_html($icon, $iconAlias, (new \Illuminate\View\ComponentAttributeBag([
'wire:loading.remove.delay.' . config('filament.livewire_loading_delay', 'default') => $hasLoadingIndicator,
'wire:target' => $hasLoadingIndicator ? $loadingIndicatorTarget : false,
]))->class([$iconClasses]), size: $iconSize, defaultSize: \Filament\Support\Enums\IconSize::Small)
]))->class([$iconClasses]), size: $iconSize ?? \Filament\Support\Enums\IconSize::Small)
}}
@endif

Expand Down Expand Up @@ -142,18 +142,18 @@
}}
>
{{
\Filament\Support\generate_icon_html('heroicon-m-x-mark', alias: 'badge.delete-button', attributes: (new \Illuminate\View\ComponentAttributeBag([
\Filament\Support\generate_icon_html('heroicon-c-x-mark', alias: 'badge.delete-button', attributes: (new \Illuminate\View\ComponentAttributeBag([
'wire:loading.remove.delay.' . config('filament.livewire_loading_delay', 'default') => $deleteButtonHasLoadingIndicator,
'wire:target' => $deleteButtonHasLoadingIndicator ? $deleteButtonLoadingIndicatorTarget : false,
])), defaultSize: 'fi-size-xs-sm')
])), size: \Filament\Support\Enums\IconSize::ExtraSmall)
}}

@if ($deleteButtonHasLoadingIndicator)
{{
\Filament\Support\generate_loading_indicator_html((new \Illuminate\View\ComponentAttributeBag([
'wire:loading.delay.' . config('filament.livewire_loading_delay', 'default') => '',
'wire:target' => $deleteButtonLoadingIndicatorTarget,
])), size: 'fi-size-xs-sm')
])), size: \Filament\Support\Enums\IconSize::ExtraSmall)
}}
@endif

Expand All @@ -169,7 +169,7 @@
\Filament\Support\generate_icon_html($icon, $iconAlias, (new \Illuminate\View\ComponentAttributeBag([
'wire:loading.remove.delay.' . config('filament.livewire_loading_delay', 'default') => $hasLoadingIndicator,
'wire:target' => $hasLoadingIndicator ? $loadingIndicatorTarget : false,
]))->class([$iconClasses]), size: $iconSize, defaultSize: \Filament\Support\Enums\IconSize::Small)
]))->class([$iconClasses]), size: $iconSize ?? \Filament\Support\Enums\IconSize::Small)
}}
@endif

Expand Down
14 changes: 7 additions & 7 deletions packages/support/resources/views/components/button/index.blade.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,7 @@
$iconSize = IconSize::tryFrom($iconSize) ?? $iconSize;
}
$defaultIconSize = $iconSize ?? match ($size) {
$iconSize ??= match ($size) {
ActionSize::ExtraSmall, ActionSize::Small => IconSize::Small,
default => null,
};
Expand Down Expand Up @@ -137,7 +137,7 @@
\Filament\Support\generate_icon_html($icon, $iconAlias, (new \Illuminate\View\ComponentAttributeBag([
'wire:loading.remove.delay.' . config('filament.livewire_loading_delay', 'default') => $hasLoadingIndicator,
'wire:target' => $hasLoadingIndicator ? $loadingIndicatorTarget : false,
])), size: $iconSize, defaultSize: $defaultIconSize)
])), size: $iconSize)
}}
@endif

Expand All @@ -146,7 +146,7 @@
\Filament\Support\generate_loading_indicator_html((new \Illuminate\View\ComponentAttributeBag([
'wire:loading.delay.' . config('filament.livewire_loading_delay', 'default') => '',
'wire:target' => $loadingIndicatorTarget,
])), size: $iconSize ?? $defaultIconSize)
])), size: $iconSize)
}}
@endif

Expand All @@ -155,7 +155,7 @@
\Filament\Support\generate_loading_indicator_html((new \Illuminate\View\ComponentAttributeBag([
'x-cloak' => 'x-cloak',
'x-show' => 'isProcessing',
])), size: $iconSize ?? $defaultIconSize)
])), size: $iconSize)
}}
@endif
@endif
Expand Down Expand Up @@ -184,7 +184,7 @@
\Filament\Support\generate_icon_html($icon, $iconAlias, (new \Illuminate\View\ComponentAttributeBag([
'wire:loading.remove.delay.' . config('filament.livewire_loading_delay', 'default') => $hasLoadingIndicator,
'wire:target' => $hasLoadingIndicator ? $loadingIndicatorTarget : false,
])), size: $iconSize, defaultSize: $defaultIconSize)
])), size: $iconSize)
}}
@endif

Expand All @@ -193,7 +193,7 @@
\Filament\Support\generate_loading_indicator_html((new \Illuminate\View\ComponentAttributeBag([
'wire:loading.delay.' . config('filament.livewire_loading_delay', 'default') => '',
'wire:target' => $loadingIndicatorTarget,
])), size: $iconSize ?? $defaultIconSize)
])), size: $iconSize)
}}
@endif

Expand All @@ -202,7 +202,7 @@
\Filament\Support\generate_loading_indicator_html((new \Illuminate\View\ComponentAttributeBag([
'x-cloak' => 'x-cloak',
'x-show' => 'isProcessing',
])), size: $iconSize ?? $defaultIconSize)
])), size: $iconSize)
}}
@endif
@endif
Expand Down
6 changes: 3 additions & 3 deletions packages/support/resources/views/components/icon-button.blade.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@
$iconSize = IconSize::tryFrom($iconSize) ?? $iconSize;
}
$defaultIconSize = $iconSize ?? match ($size) {
$iconSize ??= match ($size) {
ActionSize::ExtraSmall => IconSize::Small,
ActionSize::Large, ActionSize::ExtraLarge => IconSize::Large,
default => null,
Expand Down Expand Up @@ -108,15 +108,15 @@
\Filament\Support\generate_icon_html($icon, $iconAlias, (new \Illuminate\View\ComponentAttributeBag([
'wire:loading.remove.delay.' . config('filament.livewire_loading_delay', 'default') => $hasLoadingIndicator,
'wire:target' => $hasLoadingIndicator ? $loadingIndicatorTarget : false,
])), size: $iconSize, defaultSize: $defaultIconSize)
])), size: $iconSize)
}}

@if ($hasLoadingIndicator)
{{
\Filament\Support\generate_loading_indicator_html((new \Illuminate\View\ComponentAttributeBag([
'wire:loading.delay.' . config('filament.livewire_loading_delay', 'default') => '',
'wire:target' => $loadingIndicatorTarget,
])), size: $iconSize ?? $defaultIconSize)
])), size: $iconSize)
}}
@endif

Expand Down
10 changes: 5 additions & 5 deletions packages/support/resources/views/components/link.blade.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,7 @@
$iconSize = IconSize::tryFrom($iconSize) ?? $iconSize;
}
$defaultIconSize = $iconSize ?? match ($size) {
$iconSize ??= match ($size) {
ActionSize::ExtraSmall, ActionSize::Small => IconSize::Small,
default => null,
};
Expand Down Expand Up @@ -114,7 +114,7 @@
\Filament\Support\generate_icon_html($icon, $iconAlias, (new \Illuminate\View\ComponentAttributeBag([
'wire:loading.remove.delay.' . config('filament.livewire_loading_delay', 'default') => $hasLoadingIndicator,
'wire:target' => $hasLoadingIndicator ? $loadingIndicatorTarget : false,
])), size: $iconSize, defaultSize: $defaultIconSize)
])), size: $iconSize)
}}
@endif

Expand All @@ -123,7 +123,7 @@
\Filament\Support\generate_loading_indicator_html((new \Illuminate\View\ComponentAttributeBag([
'wire:loading.delay.' . config('filament.livewire_loading_delay', 'default') => '',
'wire:target' => $loadingIndicatorTarget,
])), size: $iconSize ?? $defaultIconSize)
])), size: $iconSize)
}}
@endif
@endif
Expand All @@ -138,7 +138,7 @@
\Filament\Support\generate_icon_html($icon, $iconAlias, (new \Illuminate\View\ComponentAttributeBag([
'wire:loading.remove.delay.' . config('filament.livewire_loading_delay', 'default') => $hasLoadingIndicator,
'wire:target' => $hasLoadingIndicator ? $loadingIndicatorTarget : false,
])), size: $iconSize, defaultSize: $defaultIconSize)
])), size: $iconSize)
}}
@endif

Expand All @@ -147,7 +147,7 @@
\Filament\Support\generate_loading_indicator_html((new \Illuminate\View\ComponentAttributeBag([
'wire:loading.delay.' . config('filament.livewire_loading_delay', 'default') => '',
'wire:target' => $loadingIndicatorTarget,
])), size: $iconSize ?? $defaultIconSize)
])), size: $iconSize)
}}
@endif
@endif
Expand Down
2 changes: 1 addition & 1 deletion packages/support/resources/views/components/modal/index.blade.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -187,7 +187,7 @@ class="fi-modal-close-btn"
...\Filament\Support\get_component_color_classes(Icon::class, $iconColor),
])
>
{{ \Filament\Support\generate_icon_html($icon, $iconAlias, defaultSize: \Filament\Support\Enums\IconSize::Large) }}
{{ \Filament\Support\generate_icon_html($icon, $iconAlias, size: \Filament\Support\Enums\IconSize::Large) }}
</div>
</div>
@endif
Expand Down
2 changes: 1 addition & 1 deletion packages/support/resources/views/components/section/index.blade.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -75,7 +75,7 @@ class="fi-section-header"
\Filament\Support\generate_icon_html($icon, attributes: (new \Illuminate\View\ComponentAttributeBag)
->class([
...\Filament\Support\get_component_color_classes(Icon::class, $iconColor),
]), size: $iconSize, defaultSize: IconSize::Large)
]), size: $iconSize ?? IconSize::Large)
}}

@if ($hasHeading || $hasDescription)
Expand Down
4 changes: 2 additions & 2 deletions packages/support/resources/views/components/toggle.blade.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,15 +35,15 @@
>
<div>
<div aria-hidden="true">
{{ \Filament\Support\generate_icon_html($offIcon) }}
{{ \Filament\Support\generate_icon_html($offIcon, size: \Filament\Support\Enums\IconSize::ExtraSmall) }}
</div>

<div aria-hidden="true">
{{
\Filament\Support\generate_icon_html(
$onIcon,
attributes: (new \Illuminate\View\ComponentattributeBag)->merge(['x-cloak' => true], escape: false),
defaultSize: 'fi-size-xs',
size: \Filament\Support\Enums\IconSize::ExtraSmall,
)
}}
</div>
Expand Down
4 changes: 2 additions & 2 deletions ...ges/support/src/Contracts/HasIconSize.php → ...es/support/src/Contracts/ScalableIcon.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@

use Filament\Support\Enums\IconSize;

interface HasIconSize
interface ScalableIcon
{
public function getIconSize(): ?IconSize;
public function getIconForSize(IconSize $size): string;
}
6 changes: 6 additions & 0 deletions packages/support/src/Enums/IconSize.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,9 +4,15 @@

enum IconSize: string
{
case ExtraSmall = 'xs';

case Small = 'sm';

case Medium = 'md';

case Large = 'lg';

case ExtraLarge = 'xl';

case TwoExtraLarge = '2xl';
}
Loading

0 comments on commit be7c26f

Please sign in to comment.