Xiaohou
Xiaohou
Explore posts from servers
FFilament
Created by Xiaohou on 10/31/2024 in #❓┊help
Filament color is not reactive
I've run composer update on both livewire an filament, still not sure where exactlly the issue were, but it seems to fixed. Thanks!
13 replies
FFilament
Created by Xiaohou on 10/31/2024 in #❓┊help
Filament color is not reactive
I don't know if this will help, but when the button rerender, everything inside <button> tag updates, excepts for style, which of course decide the color.
<button style="--c-400:var(--success-400);--c-500:var(--success-500);--c-600:var(--success-600);" class="fi-btn relative grid-flow-col items-center justify-center font-semibold outline-none transition duration-75 focus-visible:ring-2 rounded-lg fi-color-custom fi-btn-color-success fi-color-success fi-size-md fi-btn-size-md gap-1.5 px-3 py-2 text-sm inline-grid shadow-sm bg-custom-600 text-white hover:bg-custom-500 focus-visible:ring-custom-500/50 dark:bg-custom-500 dark:hover:bg-custom-400 dark:focus-visible:ring-custom-400/50 fi-ac-action fi-ac-btn-action" type="button" wire:loading.attr="disabled" wire:click="mountAction('unban')">
<button style="--c-400:var(--success-400);--c-500:var(--success-500);--c-600:var(--success-600);" class="fi-btn relative grid-flow-col items-center justify-center font-semibold outline-none transition duration-75 focus-visible:ring-2 rounded-lg fi-color-custom fi-btn-color-success fi-color-success fi-size-md fi-btn-size-md gap-1.5 px-3 py-2 text-sm inline-grid shadow-sm bg-custom-600 text-white hover:bg-custom-500 focus-visible:ring-custom-500/50 dark:bg-custom-500 dark:hover:bg-custom-400 dark:focus-visible:ring-custom-400/50 fi-ac-action fi-ac-btn-action" type="button" wire:loading.attr="disabled" wire:click="mountAction('unban')">
13 replies
FFilament
Created by Xiaohou on 10/31/2024 in #❓┊help
Filament color is not reactive
Yes, i'm on "filament/filament": "^3.2", and livewire v3.5.12
13 replies
FFilament
Created by Xiaohou on 10/31/2024 in #❓┊help
Filament color is not reactive
Actions\Action::make('ban')
->label('ban')
->color('danger')
->visible(fn(User $record) => $record->status !== UserStatus::Banned)
->action(fn(User $record) => UserService::ban($record)),

Actions\Action::make('unban')
->label('uban')
->color('success')
->visible(fn(User $record) => $record->status === UserStatus::Banned)
->action(fn(User $record) => UserService::unban($record)),
Actions\Action::make('ban')
->label('ban')
->color('danger')
->visible(fn(User $record) => $record->status !== UserStatus::Banned)
->action(fn(User $record) => UserService::ban($record)),

Actions\Action::make('unban')
->label('uban')
->color('success')
->visible(fn(User $record) => $record->status === UserStatus::Banned)
->action(fn(User $record) => UserService::unban($record)),
Even hard coding to color into action result the same, action will render correct label, the color doesn't change. For example, when ban button (red color) is triggered, now it updates and should render unban button (green color), it does update the text to unban, but color is still red. After a page refresh, it correctlly display the color to green.
13 replies
FFilament
Created by Xiaohou on 10/31/2024 in #❓┊help
Filament color is not reactive
Actions\Action::make('toggle')
->label(fn(User $record) => $record->status === UserStatus::Banned ? 'unban' : 'ban')
->color(fn(User $record) => $record->status === UserStatus::Banned ? 'danger' : 'success')
->action(fn(User $record) => $record->status === UserStatus::Banned ? UserService::unban($record) : UserService::ban($record)),
Actions\Action::make('toggle')
->label(fn(User $record) => $record->status === UserStatus::Banned ? 'unban' : 'ban')
->color(fn(User $record) => $record->status === UserStatus::Banned ? 'danger' : 'success')
->action(fn(User $record) => $record->status === UserStatus::Banned ? UserService::unban($record) : UserService::ban($record)),
I have tried toggle, same thing happend. The ban and unban label will update according to user status, and the badge label on table and infolist will update too, but none of the color update unless the page refresh.
13 replies
FFilament
Created by Xiaohou on 10/31/2024 in #❓┊help
Filament color is not reactive
The color will render correctly initially, both badge and action text label, icon works fine, its just the color doesn't update unless the whole page refresh.
13 replies
FFilament
Created by Xiaohou on 10/31/2024 in #❓┊help
Filament color is not reactive
Actions\ActionGroup::make([
...
$this->getUpdateStatusAction(),
]);

public function getUpdateStatusAction()
{
if ($this->record->status != UserStatus::Banned) {
return Actions\Action::make('ban_user')
->color('danger')
->action(function (User $record, array $data, $action) {
...
});
} else {
return Actions\Action::make('unban_user')
->color('success')
->action(function (User $record, array $data, $action) {
...
});
}
}
Actions\ActionGroup::make([
...
$this->getUpdateStatusAction(),
]);

public function getUpdateStatusAction()
{
if ($this->record->status != UserStatus::Banned) {
return Actions\Action::make('ban_user')
->color('danger')
->action(function (User $record, array $data, $action) {
...
});
} else {
return Actions\Action::make('unban_user')
->color('success')
->action(function (User $record, array $data, $action) {
...
});
}
}
13 replies
FFilament
Created by Xiaohou on 10/23/2024 in #❓┊help
Badge color doesn't update using Enum status
Does anyone have idea?
4 replies
FFilament
Created by Xiaohou on 10/14/2024 in #❓┊help
How to refer to filament semantic color in blade file?
I looked into the filament button blade file, it seems to use CSS variables to display to colors. You can get the variable by color use support method from filament.
$color = 'primary';
$styles = \Illuminate\Support\Arr::toCssStyles([
\Filament\Support\get_color_css_variables($color, shades: [50, 400, 600]),
]);
$color = 'primary';
$styles = \Illuminate\Support\Arr::toCssStyles([
\Filament\Support\get_color_css_variables($color, shades: [50, 400, 600]),
]);
it will give you the custom css variables, something like this --c-50:var(--primary-50);--c-400:var(--primary-400);--c-600:var(--primary-600); once you have the css variables by color, just apply the variables to html element, then you can use it by refering it as custom
<div class="bg-custom-50 text-custom-600 ring-custom-600/10 dark:bg-custom-400/10 dark:text-custom-400 dark:ring-custom-400/30" style="{{ $styles }}">
content here
</div>
<div class="bg-custom-50 text-custom-600 ring-custom-600/10 dark:bg-custom-400/10 dark:text-custom-400 dark:ring-custom-400/30" style="{{ $styles }}">
content here
</div>
Now if the primary color changes in filament, it will reflect in our custom component as well. I'm sure if this is the best way to use the color registered by filament, but I hope it can help anyone who has the same problem.
8 replies
FFilament
Created by Xiaohou on 10/14/2024 in #❓┊help
How to refer to filament semantic color in blade file?
Thanks for helping me out, but I'm not sure if I understand correctly. I'm happy with the current colors, i don't need a custom theme to replace the default ones. I just need to render elements with the current registered color in filament. For example. i want to make a div with the 'warning' color filament has registered. without having to refer it as tailwind color. So when I change the filament register color from warning' => Color::Amber to warning => Color::Orange, my component color would update alone with filament.
8 replies
FFilament
Created by Xiaohou on 10/14/2024 in #❓┊help
How to refer to filament semantic color in blade file?
I do have the colors registered.
FilamentColor::register([
'danger' => Color::Red,
'gray' => Color::Zinc,
'info' => Color::Blue,
'primary' => Color::Rose,
'success' => Color::Green,
'warning' => Color::Amber,
'blue' => Color::Blue,
]);
FilamentColor::register([
'danger' => Color::Red,
'gray' => Color::Zinc,
'info' => Color::Blue,
'primary' => Color::Rose,
'success' => Color::Green,
'warning' => Color::Amber,
'blue' => Color::Blue,
]);
but i cant refer to them, for example this just render a div with no background color
<div class="bg-warning-500">
This is a alert.
</div>
<div class="bg-warning-500">
This is a alert.
</div>
8 replies