-
- {icon || }
-
+ {icon &&
{icon}
}
{title || 'Your plugin'}
{breadcrumbs && (
@@ -128,23 +126,24 @@ export const HeaderToolbar = (props: HeaderProps) => {
)}
- {options && (
+
+ {customActions}
+ {menuItems && (
(
}
variant="secondary"
+ {...props}
/>
)}
/>
- {options.map(option => (
+ {menuItems.map(option => (
option.onClick?.()}
diff --git a/packages/canon/src/components/Header/types.ts b/packages/canon/src/components/Header/types.ts
index 6cdd51b7d6..efecf52e4d 100644
--- a/packages/canon/src/components/Header/types.ts
+++ b/packages/canon/src/components/Header/types.ts
@@ -24,9 +24,10 @@ import { MutableRefObject } from 'react';
export interface HeaderProps {
icon?: React.ReactNode;
title?: string;
- tabs?: HeaderTab[];
- options?: HeaderOption[];
breadcrumbs?: HeaderBreadcrumb[];
+ customActions?: React.ReactNode;
+ menuItems?: HeaderOption[];
+ tabs?: HeaderTab[];
}
/**
diff --git a/packages/canon/src/utils/componentDefinitions.ts b/packages/canon/src/utils/componentDefinitions.ts
index 29f6ecb7d1..3dcb19f138 100644
--- a/packages/canon/src/utils/componentDefinitions.ts
+++ b/packages/canon/src/utils/componentDefinitions.ts
@@ -240,7 +240,7 @@ export const componentDefinitions = {
toolbar: 'canon-HeaderToolbar',
toolbarWrapper: 'canon-HeaderToolbarWrapper',
toolbarContent: 'canon-HeaderToolbarContent',
- toolbarOptions: 'canon-HeaderToolbarOptions',
+ toolbarControls: 'canon-HeaderToolbarControls',
toolbarIcon: 'canon-HeaderToolbarIcon',
toolbarName: 'canon-HeaderToolbarName',
breadcrumbs: 'canon-HeaderBreadcrumbs',