Modal button order (primary action vs cancel action) is not consistent across action types

[ryanmortier]

Package

filament/filament

Package Version

v3

Laravel Version

v10

Livewire Version

v3

PHP Version

v8.2

Problem description

edit: I've managed to work-around the issue with the following:

Tables\Actions\DeleteAction::make()
    ->modalSubmitAction(fn (StaticAction $action) =>
        $action->extraAttributes(['class' => 'order-first'])),

In a create modal, the button order is primary -> secondary In an edit modal, the button order is primary -> secondary In a delete confirmation modal, the button order is secondary -> primary

I believe this to be a UX issue and could cause a user to misclick an action if not paying attention.

Also, I don't think I can fix this in CSS because fixing it for one modal, reverses it on the other.

Best described in screenshots:

Create:

Edit:

Delete:

Expected behavior

Primary button orders should be consistent across all modals for UX.

Steps to reproduce

Open create/edit/delete modals in the Filament demo app.

Reproduction repository

https://github.com/filamentphp/demo

Relevant log output

No response

[danharrin]

This is to do with if the actions are full width or not. You can observe the same in Tailwind UI:

If you align the actions to the right, they swap position, like Tailwind UI: