Skip to content

feat: ActionSeparator for visual dividers between actions#19585

Closed
leek wants to merge 3 commits intofilamentphp:4.xfrom
leek:feature/action-separator
Closed

feat: ActionSeparator for visual dividers between actions#19585
leek wants to merge 3 commits intofilamentphp:4.xfrom
leek:feature/action-separator

Conversation

@leek
Copy link
Copy Markdown
Contributor

@leek leek commented Mar 29, 2026

image

Summary

@danharrin I realize this may not be something you want to include in Filament, but I wanted to submit it as a PR before trying to release it bundled in a plugin or something.

Adds ActionSeparator, a lightweight component that renders a visual divider between actions. Works in page header actions, table header actions, and within action groups — adapting its appearance to the context:

  • Inline (header actions, button groups): Renders a vertical line
  • Dropdown menus: Splits items into separate fi-dropdown-list sections, using the native Filament divider pattern

Usage

use Filament\Actions\ActionSeparator;

// Page header actions
protected function getHeaderActions(): array
{
    return [
        ActionGroup::make([...])
            ->icon('heroicon-o-cog-6-tooth')
            ->color('gray'),
        ActionSeparator::make(),
        Action::make('create')
            ->label('New Record'),
    ];
}

// Inside a dropdown — creates a visual section break
ActionGroup::make([
    Action::make('edit')->label('Edit'),
    Action::make('duplicate')->label('Duplicate'),
    ActionSeparator::make(),
    Action::make('delete')->label('Delete')->color('danger'),
])

Implementation

  • ActionSeparator extends ViewComponent (same base as Action and ActionGroup)
  • Uses BelongsToGroup and CanBeHidden concerns for visibility control and group nesting
  • Overrides isHiddenInGroup() to skip authorization checks (not applicable to separators)
  • Renders as <div class="fi-ac-separator"> with a CSS hook
  • In dropdown ActionGroup, splits the action list into separate fi-dropdown-list sections (same mechanism that nested ActionGroup uses)
  • ActionGroup type unions updated to accept ActionSeparator in actions(), getActions(), toEmbeddedHtml(), and cloneActions()
  • Separators are excluded from flatActions since they are visual-only

Introduces `ActionSeparator`, a lightweight component that renders a vertical line between actions in header actions, table header actions, and action groups.

Usage:

```php
protected function getHeaderActions(): array
{
    return [
        ActionGroup::make([...])
            ->icon('heroicon-o-cog-6-tooth')
            ->color('gray'),
        ActionSeparator::make(),
        Action::make('create')
            ->label('New Record'),
    ];
}
```

- Extends `ViewComponent` (same base as `Action` and `ActionGroup`)
- Uses `BelongsToGroup` and `CanBeHidden` concerns
- Renders as `<div class="fi-ac-separator">` with CSS styling
- Updates `ActionGroup` to handle `ActionSeparator` in type unions
@github-project-automation github-project-automation bot moved this to Todo in Roadmap Mar 29, 2026
@leek leek changed the title Add ActionSeparator for visual dividers between actions feat: ActionSeparator for visual dividers between actions Mar 29, 2026
@leek leek closed this Mar 29, 2026
@github-project-automation github-project-automation bot moved this from Todo to Done in Roadmap Mar 29, 2026
@leek leek deleted the feature/action-separator branch March 29, 2026 22:38
In a dropdown ActionGroup, ActionSeparator now splits the action list
into separate `fi-dropdown-list` sections, creating a native visual
divider between groups of dropdown items.
@leek leek reopened this Mar 29, 2026
@github-project-automation github-project-automation bot moved this from Done to Todo in Roadmap Mar 29, 2026
Updates the grouping actions docs to document ActionSeparator usage
in both inline and dropdown contexts, keeping the existing nested
ActionGroup approach as an alternative.
@archilex
Copy link
Copy Markdown
Contributor

@leek This is already supported in Filament: https://filamentphp.com/docs/5.x/actions/grouping-actions#adding-dividers-between-actions

@danharrin danharrin added the enhancement New feature or request label Mar 30, 2026
@danharrin danharrin added this to the v4 milestone Mar 30, 2026
@danharrin
Copy link
Copy Markdown
Member

Yeah, given the existing syntax in place, I would accept this feature for separating actions without a dropdown, but the syntax would be very different:

use Filament\Actions\ActionGroup;

ActionGroup::make([
    ActionGroup::make([
        // Array of actions
    ])->dropdown(false),
    ActionGroup::make([
        // Array of actions
    ])->dropdown(false),
])->dropdown(false), // Pass this to the outer group too to add separators, maybe?

@danharrin danharrin closed this Mar 30, 2026
@github-project-automation github-project-automation bot moved this from Todo to Done in Roadmap Mar 30, 2026
@leek
Copy link
Copy Markdown
Contributor Author

leek commented Mar 30, 2026

@leek This is already supported in Filament: https://filamentphp.com/docs/5.x/actions/grouping-actions#adding-dividers-between-actions

This PR is more about the vertical one but always something new to learn!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

enhancement New feature or request

Projects

Archived in project

Development

Successfully merging this pull request may close these issues.

3 participants