Merge pull request #14974 from filamentphp/feature/better-relation-manager-tab-customizations

feature: Better relation manager tab customization

packages/forms/src/Components/Builder.php

@@ -681,7 +681,7 @@ class Builder extends Field implements CanConcealComponents, HasExtraItemActions
                 $component->partiallyRender();
             })
             ->iconButton()
-            ->icon('heroicon-s-cog-6-tooth')
+            ->icon('heroicon-m-cog-6-tooth')
             ->size(ActionSize::Small)
             ->visible(fn (Builder $component): bool => (! $component->isDisabled()) && $component->hasBlockPreviews());
 

packages/panels/docs/02-resources/07-relation-managers.md

@@ -662,14 +662,17 @@ public function hasCombinedRelationManagerTabsWithContent(): bool
 }
 ```
 
-### Setting an icon for the form tab
+### Customizing the content tab
 
-On the Edit or View page class, override the `getContentTabIcon()` method:
+On the Edit or View page class, override the `getContentTabComponent()` method, and use any [Tab](../../schemas/layout/tabs) customization methods:
 
 ```php
-public function getContentTabIcon(): ?string
+use Filament\Schemas\Components\Tabs\Tab;
+
+public function getContentTabComponent(): Tab
 {
-    return 'heroicon-m-cog';
+    return Tab::make('Settings')
+        ->icon('heroicon-m-cog');
 }
 ```
 
@@ -686,91 +689,39 @@ public function getContentTabPosition(): ?ContentTabPosition
 }
 ```
 
-## Adding badges to relation manager tabs
+## Customizing relation manager tabs
 
-You can add a badge to a relation manager tab by setting the `$badge` property:
-
-```php
-protected static ?string $badge = 'new';
-```
-
-Alternatively, you can override the `getBadge()` method:
+To customize the tab for a relation manager, override the `getTabComponent()` method, and use any [Tab](../../schemas/layout/tabs) customization methods:
 
 ```php
+use Filament\Schemas\Components\Tabs\Tab;
 use Illuminate\Database\Eloquent\Model;
 
-public static function getBadge(Model $ownerRecord, string $pageClass): ?string
+public static function getTabComponent(Model $ownerRecord, string $pageClass): Tab
 {
-    return static::$badge;
+    return Tab::make('Blog posts')
+        ->badge($ownerRecord->posts()->count())
+        ->badgeColor('info')
+        ->badgeTooltip('The number of posts in this category')
+        ->icon('heroicon-m-document-text');
 }
 ```
 
-Or, if you are using a [relation group](#grouping-relation-managers), you can use the `badge()` method:
+If you are using a [relation group](#grouping-relation-managers), you can use the `tab()` method:
 
 ```php
 use Filament\Resources\RelationManagers\RelationGroup;
-
-RelationGroup::make('Contacts', [
-    // ...
-])->badge('new');
-```
-
-### Changing the color of relation manager tab badges
-
-If a badge value is defined, it will display using the primary color by default. To style the badge contextually, set the `$badgeColor` to be a [registered color](../../styling/colors):
-
-```php
-protected static ?string $badgeColor = 'danger';
-```
-
-Alternatively, you can override the `getBadgeColor()` method:
-
-```php
+use Filament\Schemas\Components\Tabs\Tab;
 use Illuminate\Database\Eloquent\Model;
 
-public static function getBadgeColor(Model $ownerRecord, string $pageClass): ?string
-{
-    return 'danger';
-}
-```
-
-Or, if you are using a [relation group](#grouping-relation-managers), you can use the `badgeColor()` method:
-
-```php
-use Filament\Resources\RelationManagers\RelationGroup;
-
 RelationGroup::make('Contacts', [
     // ...
-])->badgeColor('danger');
-```
-
-### Adding a tooltip to relation manager tab badges
-
-If a badge value is defined, you can add a tooltip to it by setting the `$badgeTooltip` property:
-
-```php
-protected static ?string $badgeTooltip = 'There are new posts';
-```
-
-Alternatively, you can override the `getBadgeTooltip()` method:
-
-```php
-use Illuminate\Database\Eloquent\Model;
-
-public static function getBadgeTooltip(Model $ownerRecord, string $pageClass): ?string
-{
-    return 'There are new posts';
-}
-```
-
-Or, if you are using a [relation group](#grouping-relation-managers), you can use the `badgeTooltip()` method:
-
-```php
-use Filament\Resources\RelationManagers\RelationGroup;
-
-RelationGroup::make('Contacts', [
-    // ...
-])->badgeTooltip('There are new posts');
+])
+    ->tab(fn (Model $ownerRecord): Tab => Tab::make('Blog posts')
+        ->badge($ownerRecord->posts()->count())
+        ->badgeColor('info')
+        ->badgeTooltip('The number of posts in this category')
+        ->icon('heroicon-m-document-text'));
 ```
 
 ## Sharing a resource's form and table with a relation manager

packages/panels/src/Resources/Pages/Concerns/HasRelationManagers.php

@@ -71,6 +71,12 @@ trait HasRelationManagers
         return false;
     }
 
+    public function getContentTabComponent(): Tab
+    {
+        return Tab::make($this->getContentTabLabel())
+            ->icon($this->getContentTabIcon());
+    }
+
     public function getContentTabLabel(): ?string
     {
         return null;
@@ -121,8 +127,7 @@ trait HasRelationManagers
                     $tabKey = strval($tabKey);
 
                     if (blank($tabKey) && $hasCombinedRelationManagerTabsWithContent) {
-                        return Tab::make($this->getContentTabLabel())
-                            ->icon($this->getContentTabIcon())
+                        return $this->getContentTabComponent()
                             ->schema($this->getContentComponents());
                     }
 
@@ -130,12 +135,7 @@ trait HasRelationManagers
                         $manager->ownerRecord($ownerRecord);
                         $manager->pageClass(static::class);
 
-                        return Tab::make($manager->getLabel())
-                            ->badge($manager->getBadge())
-                            ->badgeColor($manager->getBadgeColor())
-                            ->badgeTooltip($manager->getBadgeTooltip())
-                            ->icon($manager->getIcon())
-                            ->iconPosition($manager->getIconPosition())
+                        return $manager->getTabComponent()
                             ->schema(fn (): array => collect($manager->getManagers())
                                 ->map(fn ($groupedManager, $groupedManagerKey): Livewire => Livewire::make(
                                     $normalizedGroupedManagerClass = $this->normalizeRelationManagerClass($groupedManager),
@@ -146,12 +146,7 @@ trait HasRelationManagers
 
                     $normalizedManagerClass = $this->normalizeRelationManagerClass($manager);
 
-                    return Tab::make($normalizedManagerClass::getTitle($ownerRecord, static::class))
-                        ->badge($normalizedManagerClass::getBadge($ownerRecord, static::class))
-                        ->badgeColor($normalizedManagerClass::getBadgeColor($ownerRecord, static::class))
-                        ->badgeTooltip($normalizedManagerClass::getBadgeTooltip($ownerRecord, static::class))
-                        ->icon($normalizedManagerClass::getIcon($ownerRecord, static::class))
-                        ->iconPosition($normalizedManagerClass::getIconPosition($ownerRecord, static::class))
+                    return $normalizedManagerClass::getTabComponent($ownerRecord, static::class)
                         ->schema(fn (): array => [
                             Livewire::make(
                                 $normalizedManagerClass,

packages/panels/src/Resources/RelationManagers/RelationGroup.php

@@ -3,6 +3,7 @@
 namespace Filament\Resources\RelationManagers;
 
 use Closure;
+use Filament\Schemas\Components\Tabs\Tab;
 use Filament\Support\Components\Component;
 use Filament\Support\Concerns\HasIcon;
 use Illuminate\Database\Eloquent\Model;
@@ -21,6 +22,8 @@ class RelationGroup extends Component
 
     protected ?string $pageClass = null;
 
+    protected ?Closure $modifyTabUsing = null;
+
     /**
      * @param  array<class-string<RelationManager> | RelationManagerConfiguration>  $managers
      */
@@ -80,6 +83,13 @@ class RelationGroup extends Component
         return $this->evaluate($this->label);
     }
 
+    public function tab(?Closure $callback): static
+    {
+        $this->modifyTabUsing = $callback;
+
+        return $this;
+    }
+
     /**
      * @return array<class-string<RelationManager> | RelationManagerConfiguration>
      */
@@ -164,4 +174,18 @@ class RelationGroup extends Component
             default => parent::resolveDefaultClosureDependencyForEvaluationByType($parameterType),
         };
     }
+
+    public function getTabComponent(): Tab
+    {
+        $tab = Tab::make($this->getLabel())
+            ->badge($this->getBadge())
+            ->badgeColor($this->getBadgeColor())
+            ->badgeTooltip($this->getBadgeTooltip())
+            ->icon($this->getIcon())
+            ->iconPosition($this->getIconPosition());
+
+        return $this->evaluate($this->modifyTabUsing, [
+            'tab' => $tab,
+        ]) ?? $tab;
+    }
 }

packages/panels/src/Resources/RelationManagers/RelationManager.php

@@ -13,6 +13,7 @@ use Filament\Resources\Concerns\InteractsWithRelationshipTable;
 use Filament\Resources\Pages\ViewRecord;
 use Filament\Schemas\Components\RenderHook;
 use Filament\Schemas\Components\TableBuilder;
+use Filament\Schemas\Components\Tabs\Tab;
 use Filament\Schemas\Schema;
 use Filament\Support\Concerns\CanBeLazy;
 use Filament\Support\Enums\IconPosition;
@@ -136,6 +137,16 @@ class RelationManager extends Component implements Actions\Contracts\HasActions,
         return [];
     }
 
+    public static function getTabComponent(Model $ownerRecord, string $pageClass): Tab
+    {
+        return Tab::make(static::class::getTitle($ownerRecord, $pageClass))
+            ->badge(static::class::getBadge($ownerRecord, $pageClass))
+            ->badgeColor(static::class::getBadgeColor($ownerRecord, $pageClass))
+            ->badgeTooltip(static::class::getBadgeTooltip($ownerRecord, $pageClass))
+            ->icon(static::class::getIcon($ownerRecord, $pageClass))
+            ->iconPosition(static::class::getIconPosition($ownerRecord, $pageClass));
+    }
+
     public static function getIcon(Model $ownerRecord, string $pageClass): ?string
     {
         return static::$icon;

packages/tables/src/Filters/QueryBuilder/Forms/Components/RuleBuilder.php

@@ -69,7 +69,7 @@ class RuleBuilder extends Builder
                                 ])
                                 ->addAction(fn (Action $action) => $action
                                     ->label(__('filament-tables::filters/query-builder.actions.add_rule_group.label'))
-                                    ->icon('heroicon-s-plus'))
+                                    ->icon('heroicon-m-plus'))
                                 ->labelBetweenItems(__('filament-tables::filters/query-builder.item_separators.or'))
                                 ->collapsible()
                                 ->expandAllAction(fn (Action $action) => $action->hidden())
@@ -112,7 +112,7 @@ class RuleBuilder extends Builder
             })
             ->addAction(fn (Action $action) => $action
                 ->label(__('filament-tables::filters/query-builder.actions.add_rule.label'))
-                ->icon('heroicon-s-plus'))
+                ->icon('heroicon-m-plus'))
             ->addBetweenAction(fn (Action $action) => $action->hidden())
             ->label(__('filament-tables::filters/query-builder.form.rules.label'))
             ->hiddenLabel()