Filament•5mo ago

Modal submit action button is white text on white background - I can't figure out how to change that

I may have done something wrong but I haven't yet customized any CSS in this application - I can't figure out why my modal button is showing this way. This is the code:

Action::make('scan-item')
  ->label('Scan Items')
  ->modalContent(fn(Order $order) => view('livewire.scanning.bar-code-scanner-wrapper', ['order' => $order]))
  ->action(function (Order $record): void {})
  ->modalWidth('Screen')
  ->modalSubmitActionLabel('Link item to inventory')
  ->modalSubmitAction(Action::make('submit')
    ->button()
    ->label('Foo Bar bam')
    ->color('red')
  )
  ->slideOver()

Action::make('scan-item')
  ->label('Scan Items')
  ->modalContent(fn(Order $order) => view('livewire.scanning.bar-code-scanner-wrapper', ['order' => $order]))
  ->action(function (Order $record): void {})
  ->modalWidth('Screen')
  ->modalSubmitActionLabel('Link item to inventory')
  ->modalSubmitAction(Action::make('submit')
    ->button()
    ->label('Foo Bar bam')
    ->color('red')
  )
  ->slideOver()

I know that using modalSubmitAction is overriding my modalSubmitActionLabel, I've just been trying several different things. I also know that I can use css to fix the button, but I can't help but think I've just done something wrong in my setup. I'm attaching screenshots of the button (one normal, one after selecting all text)

Solution:

If you’re not in a panel then you will need to follow the forms installation instructions to setup up tailwind correctly and load the appropriate filament directives in you layout.

Jump to solution

14 Replies

LeandroFerreira•5mo ago

->color('danger')

ChrisROP•5mo ago

That does not fix the issue, but it leads me to believe I have a configuration issue. I see the style being applied to the element:

ChrisROP•5mo ago

I've tried one of the default colors as well, stone

ChrisROP•5mo ago

In other places of the app, the primary color is used - is maybe the styles not being loaded in the modal?

LeandroFerreira•5mo ago

danger is default also. Did you customize something?

ChrisROP•5mo ago

It's possible, but I haven't worked on this app in awhile until this week. I think it's mostly stock. I even tried to add a custom color to my tailwind.config.css:

export default {
    content: [
        './vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php',
        './vendor/laravel/jetstream/**/*.blade.php',
        './storage/framework/views/*.php',
        './resources/views/**/*.blade.php',
    ],

    theme: {
        extend: {
            fontFamily: {
                sans: ['Figtree', ...defaultTheme.fontFamily.sans],
            },
        },
        colors: {
            'red' : '#FF0000',
        }
    },

    safelist: [
        {
            pattern: /max-w-(sm|md|lg|xl|2xl|3xl|4xl|5xl|6xl|7xl)/,
            variants: ['sm', 'md', 'lg', 'xl', '2xl'],
        },
    ],

    plugins: [forms, typography],
};

export default {
    content: [
        './vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php',
        './vendor/laravel/jetstream/**/*.blade.php',
        './storage/framework/views/*.php',
        './resources/views/**/*.blade.php',
    ],

    theme: {
        extend: {
            fontFamily: {
                sans: ['Figtree', ...defaultTheme.fontFamily.sans],
            },
        },
        colors: {
            'red' : '#FF0000',
        }
    },

    safelist: [
        {
            pattern: /max-w-(sm|md|lg|xl|2xl|3xl|4xl|5xl|6xl|7xl)/,
            variants: ['sm', 'md', 'lg', 'xl', '2xl'],
        },
    ],

    plugins: [forms, typography],
};

That broke things with this error:

[vite] Internal server error: [postcss] /app/resources/css/app.css:1:1: 'colors.gray.400' does not exist in your theme config. 'colors' has the following keys: 'red'

Which makes me think it's a stock configuration

LeandroFerreira•5mo ago

hum no, you should do this: https://filamentphp.com/docs/3.x/support/colors#customizing-the-default-colors

Colors - Core Concepts - Filament

ChrisROP•5mo ago

I don't want to customize the colors - I just wanted to see what would happen if I did (I'm just learning how these work, really)

LeandroFerreira•5mo ago

in this case, are you using panel builder or is it a custom LW component?

ChrisROP•5mo ago

It is a LW component:

class OrderList extends Component implements HasTable, HasForms
{
    use InteractsWithTable;
    use InteractsWithForms;

    public function table(Table $table): Table
    {
        $query = Order::query()->whereIn('order_fullfillment_status', ['NOT_STARTED']);

        return $table
            ->query($query)
            ->actions([
                Action::make('scan-item')
                    ->label('Scan Items')
                    ->modalContent(fn(Order $order) => view('livewire.scanning.bar-code-scanner-wrapper', ['order' => $order]))
                    ->modalWidth('Screen')
//                            ->modalSubmitActionLabel('Link item to inventory')
                    ->modalSubmitAction(function(Order $order) {
                        $this->dispatch('order-scanner-modal-closed', true);
                    })
                    ->modalCancelAction(function() {
                        $this->dispatch('order-scanner-modal-closed', false);
                    })
                    ->slideOver()
            ])
            ->columns([
                TextColumn::make('order_id'),
                TextColumn::make('ship_full_name'),
                TextColumn::make('line_item_titles')
                    ->label('Items')
                    ->state(function ($record) {
                        return $record->lineItems->pluck('title')->join(', ');
                    }),
                TextColumn::make('ship_address_postal'),
                TextColumn::make('ship_address_country')
            ]);
    }

    public function render()
    {
        return view('livewire.order-list');
    }
}

class OrderList extends Component implements HasTable, HasForms
{
    use InteractsWithTable;
    use InteractsWithForms;

    public function table(Table $table): Table
    {
        $query = Order::query()->whereIn('order_fullfillment_status', ['NOT_STARTED']);

        return $table
            ->query($query)
            ->actions([
                Action::make('scan-item')
                    ->label('Scan Items')
                    ->modalContent(fn(Order $order) => view('livewire.scanning.bar-code-scanner-wrapper', ['order' => $order]))
                    ->modalWidth('Screen')
//                            ->modalSubmitActionLabel('Link item to inventory')
                    ->modalSubmitAction(function(Order $order) {
                        $this->dispatch('order-scanner-modal-closed', true);
                    })
                    ->modalCancelAction(function() {
                        $this->dispatch('order-scanner-modal-closed', false);
                    })
                    ->slideOver()
            ])
            ->columns([
                TextColumn::make('order_id'),
                TextColumn::make('ship_full_name'),
                TextColumn::make('line_item_titles')
                    ->label('Items')
                    ->state(function ($record) {
                        return $record->lineItems->pluck('title')->join(', ');
                    }),
                TextColumn::make('ship_address_postal'),
                TextColumn::make('ship_address_country')
            ]);
    }

    public function render()
    {
        return view('livewire.order-list');
    }
}

Barcode scanner wrapper is just a way to display my livewire component in the modal

<livewire:scanning.bar-code-scanner :order="$order ?? null" />

<livewire:scanning.bar-code-scanner :order="$order ?? null" />

Something is telling me that I've botched this up, though.
I would expect this code to be executed when either the submit or cancel button on the modal is clicked:

->modalSubmitAction(function(Order $order) {
                        $this->dispatch('order-scanner-modal-closed', true);
                    })
                    ->modalCancelAction(function() {
                        $this->dispatch('order-scanner-modal-closed', false);
                    })

->modalSubmitAction(function(Order $order) {
                        $this->dispatch('order-scanner-modal-closed', true);
                    })
                    ->modalCancelAction(function() {
                        $this->dispatch('order-scanner-modal-closed', false);
                    })

However, it is executed when I click "Scan items", i.e. the element that opens the modal - both the submit and cancel In other words, I'm wondering if the color is just a symptom of a larger issue I'm having with setting this up

LeandroFerreira•5mo ago

if you are using this inside the panel builder, this should show the default filament colors, primary, danger, etc..

ChrisROP•5mo ago

You're right - I added the action to an existing Resource that I have, OrderResource, and the color is correct. I'll have to just make this work and then come back to why it wasn't working in a custom LW component. Thank you for your help!

Solution

awcodes•5mo ago

If you’re not in a panel then you will need to follow the forms installation instructions to setup up tailwind correctly and load the appropriate filament directives in you layout.

ChrisROP•5mo ago

Ah! Thanks @awcodes - that did it :). I was missing @filamentStyles and @filamentScripts

Gaming

Programming

Modal submit action button is white text on white background - I can't figure out how to change that