ui: rename Header to PluginHeader

Renamed the Header component to PluginHeader for clarity, along with
all associated exports (HeaderProps, HeaderDefinition) and CSS class
names. Updated docs-ui documentation to match.

Signed-off-by: Patrik Oldsberg <poldsberg@gmail.com>

packages/ui/report.api.md

@@ -1153,23 +1153,6 @@ export interface GridProps extends SpaceProps {
   style?: React.CSSProperties;
 }
 
-// @public
-export const Header: (props: HeaderProps) => JSX_2.Element;
-
-// @public
-export const HeaderDefinition: {
-  readonly classNames: {
-    readonly root: 'bui-Header';
-    readonly toolbar: 'bui-HeaderToolbar';
-    readonly toolbarWrapper: 'bui-HeaderToolbarWrapper';
-    readonly toolbarContent: 'bui-HeaderToolbarContent';
-    readonly toolbarControls: 'bui-HeaderToolbarControls';
-    readonly toolbarIcon: 'bui-HeaderToolbarIcon';
-    readonly toolbarName: 'bui-HeaderToolbarName';
-    readonly tabsWrapper: 'bui-HeaderTabsWrapper';
-  };
-};
-
 // @public
 export const HeaderPage: (props: HeaderPageProps) => JSX_2.Element;
 
@@ -1206,24 +1189,6 @@ export interface HeaderPageProps {
   title?: string;
 }
 
-// @public
-export interface HeaderProps {
-  // (undocumented)
-  className?: string;
-  // (undocumented)
-  customActions?: React.ReactNode;
-  // (undocumented)
-  icon?: React.ReactNode;
-  // (undocumented)
-  onTabSelectionChange?: TabsProps_2['onSelectionChange'];
-  // (undocumented)
-  tabs?: HeaderTab[];
-  // (undocumented)
-  title?: string;
-  // (undocumented)
-  titleLink?: string;
-}
-
 // @public
 export interface HeaderTab {
   // (undocumented)
@@ -1574,6 +1539,41 @@ export interface PasswordFieldProps
   size?: 'small' | 'medium' | Partial<Record<Breakpoint, 'small' | 'medium'>>;
 }
 
+// @public
+export const PluginHeader: (props: PluginHeaderProps) => JSX_2.Element;
+
+// @public
+export const PluginHeaderDefinition: {
+  readonly classNames: {
+    readonly root: 'bui-PluginHeader';
+    readonly toolbar: 'bui-PluginHeaderToolbar';
+    readonly toolbarWrapper: 'bui-PluginHeaderToolbarWrapper';
+    readonly toolbarContent: 'bui-PluginHeaderToolbarContent';
+    readonly toolbarControls: 'bui-PluginHeaderToolbarControls';
+    readonly toolbarIcon: 'bui-PluginHeaderToolbarIcon';
+    readonly toolbarName: 'bui-PluginHeaderToolbarName';
+    readonly tabsWrapper: 'bui-PluginHeaderTabsWrapper';
+  };
+};
+
+// @public
+export interface PluginHeaderProps {
+  // (undocumented)
+  className?: string;
+  // (undocumented)
+  customActions?: React.ReactNode;
+  // (undocumented)
+  icon?: React.ReactNode;
+  // (undocumented)
+  onTabSelectionChange?: TabsProps_2['onSelectionChange'];
+  // (undocumented)
+  tabs?: HeaderTab[];
+  // (undocumented)
+  title?: string;
+  // (undocumented)
+  titleLink?: string;
+}
+
 // @public
 export const Popover: ForwardRefExoticComponent<
   PopoverProps & RefAttributes<HTMLDivElement>

packages/ui/src/components/FullPage/FullPage.stories.tsx

@@ -17,10 +17,10 @@
 import preview from '../../../../../.storybook/preview';
 import type { StoryFn } from '@storybook/react-vite';
 import { FullPage } from './FullPage';
-import { Header } from '../Header';
+import { PluginHeader } from '../PluginHeader';
 import { Container } from '../Container';
 import { Text } from '../Text';
-import type { HeaderTab } from '../Header/types';
+import type { HeaderTab } from '../PluginHeader/types';
 import { MemoryRouter } from 'react-router-dom';
 
 const meta = preview.meta({
@@ -57,7 +57,7 @@ export const Default = meta.story({
   decorators: [withRouter],
   render: () => (
     <>
-      <Header title="My Plugin" />
+      <PluginHeader title="My Plugin" />
       <FullPage style={{ backgroundColor: '#c3f0ff' }}>
         <Container>
           <Text as="p">
@@ -73,7 +73,7 @@ export const WithScrollableContent = meta.story({
   decorators: [withRouter],
   render: () => (
     <>
-      <Header title="My Plugin" />
+      <PluginHeader title="My Plugin" />
       <FullPage>
         <Container>
           <Text as="h2" variant="title-medium">
@@ -94,7 +94,7 @@ export const WithTabs = meta.story({
   decorators: [withRouter],
   render: () => (
     <>
-      <Header title="My Plugin" tabs={tabs} />
+      <PluginHeader title="My Plugin" tabs={tabs} />
       <FullPage>
         <Container>
           <Text as="p">

packages/ui/src/components/HeaderPage/HeaderPage.stories.tsx

@@ -17,7 +17,7 @@
 import preview from '../../../../../.storybook/preview';
 import type { StoryFn } from '@storybook/react-vite';
 import { HeaderPage } from './HeaderPage';
-import type { HeaderTab } from '../Header/types';
+import type { HeaderTab } from '../PluginHeader/types';
 import { MemoryRouter } from 'react-router-dom';
 import {
   Button,

packages/ui/src/components/HeaderPage/types.ts

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import type { HeaderTab } from '../Header/types';
+import type { HeaderTab } from '../PluginHeader/types';
 
 /**
  * Props for the main HeaderPage component.

packages/ui/src/components/PluginHeader/PluginHeader.module.css

@@ -17,11 +17,11 @@
 @layer tokens, base, components, utilities;
 
 @layer components {
-  .bui-Header {
+  .bui-PluginHeader {
     display: block;
   }
 
-  .bui-HeaderToolbar {
+  .bui-PluginHeaderToolbar {
     &::before {
       content: '';
       position: absolute;
@@ -34,7 +34,7 @@
     }
   }
 
-  .bui-HeaderToolbarWrapper {
+  .bui-PluginHeaderToolbarWrapper {
     position: relative;
     z-index: 1;
     display: flex;
@@ -48,14 +48,14 @@
     height: 52px;
   }
 
-  .bui-HeaderToolbarContent {
+  .bui-PluginHeaderToolbarContent {
     display: flex;
     flex-direction: row;
     align-items: center;
     gap: var(--bui-space-2);
   }
 
-  .bui-HeaderToolbarName {
+  .bui-PluginHeaderToolbarName {
     display: flex;
     flex-direction: row;
     align-items: center;
@@ -65,7 +65,7 @@
     flex-shrink: 0;
   }
 
-  .bui-HeaderToolbarIcon {
+  .bui-PluginHeaderToolbarIcon {
     width: 16px;
     height: 16px;
     color: var(--bui-fg-primary);
@@ -76,7 +76,7 @@
     }
   }
 
-  .bui-HeaderToolbarControls {
+  .bui-PluginHeaderToolbarControls {
     position: absolute;
     right: var(--bui-space-5);
     top: 50%;
@@ -87,7 +87,7 @@
     gap: var(--bui-space-2);
   }
 
-  .bui-HeaderTabsWrapper {
+  .bui-PluginHeaderTabsWrapper {
     padding-inline: var(--bui-space-3);
     border-bottom: 1px solid var(--bui-border-1);
     background-color: var(--bui-bg-neutral-1);

packages/ui/src/components/PluginHeader/PluginHeader.stories.tsx

@@ -16,7 +16,7 @@
 
 import preview from '../../../../../.storybook/preview';
 import type { StoryFn } from '@storybook/react-vite';
-import { Header } from './Header';
+import { PluginHeader } from './PluginHeader';
 import type { HeaderTab } from './types';
 import {
   Button,
@@ -38,8 +38,8 @@ import {
 import { HeaderPageBreadcrumb } from '../HeaderPage/types';
 
 const meta = preview.meta({
-  title: 'Backstage UI/Header',
-  component: Header,
+  title: 'Backstage UI/PluginHeader',
+  component: PluginHeader,
   parameters: {
     layout: 'fullscreen',
   },
@@ -213,7 +213,7 @@ export const WithCustomActions = meta.story({
   args: {},
   decorators: [withRouter],
   render: args => (
-    <Header
+    <PluginHeader
       {...args}
       customActions={
         <>
@@ -253,7 +253,7 @@ export const WithHeaderPage = meta.story({
   decorators: [withRouter],
   render: args => (
     <>
-      <Header
+      <PluginHeader
         {...args}
         customActions={
           <>
@@ -277,7 +277,7 @@ export const WithLayout = meta.story({
   decorators: layoutDecorator,
   render: args => (
     <>
-      <Header {...args} tabs={tabs} />
+      <PluginHeader {...args} tabs={tabs} />
       <HeaderPage
         title="Page title"
         tabs={tabs2}
@@ -292,7 +292,7 @@ export const WithLayoutNoTabs = meta.story({
   decorators: layoutDecorator,
   render: args => (
     <>
-      <Header {...args} />
+      <PluginHeader {...args} />
       <HeaderPage title="Page title" tabs={tabs2} />
     </>
   ),
@@ -306,7 +306,7 @@ export const WithEverything = meta.story({
   decorators: layoutDecorator,
   render: args => (
     <>
-      <Header
+      <PluginHeader
         {...args}
         customActions={
           <>
@@ -336,7 +336,7 @@ export const WithMockedURLCampaigns = meta.story({
   },
   render: args => (
     <MemoryRouter initialEntries={['/campaigns']}>
-      <Header {...args} />
+      <PluginHeader {...args} />
       <Container>
         <Text as="p">
           Current URL is mocked to be: <strong>/campaigns</strong>
@@ -356,7 +356,7 @@ export const WithMockedURLIntegrations = meta.story({
   },
   render: args => (
     <MemoryRouter initialEntries={['/integrations']}>
-      <Header {...args} />
+      <PluginHeader {...args} />
       <Container>
         <Text as="p">
           Current URL is mocked to be: <strong>/integrations</strong>
@@ -376,7 +376,7 @@ export const WithMockedURLNoMatch = meta.story({
   },
   render: args => (
     <MemoryRouter initialEntries={['/some-other-page']}>
-      <Header {...args} />
+      <PluginHeader {...args} />
       <Container>
         <Text as="p">
           Current URL is mocked to be: <strong>/some-other-page</strong>
@@ -424,7 +424,7 @@ export const WithTabsMatchingStrategies = meta.story({
   },
   render: args => (
     <MemoryRouter initialEntries={['/mentorship/events']}>
-      <Header {...args} />
+      <PluginHeader {...args} />
       <Container>
         <Text>
           <strong>Current URL:</strong> /mentorship/events
@@ -477,7 +477,7 @@ export const WithTabsExactMatching = meta.story({
   },
   render: args => (
     <MemoryRouter initialEntries={['/mentorship/events']}>
-      <Header {...args} />
+      <PluginHeader {...args} />
       <Container>
         <Text>
           <strong>Current URL:</strong> /mentorship/events
@@ -519,7 +519,7 @@ export const WithTabsPrefixMatchingDeep = meta.story({
   },
   render: args => (
     <MemoryRouter initialEntries={['/catalog/users/john/details']}>
-      <Header {...args} />
+      <PluginHeader {...args} />
       <Container>
         <Text as="p">
           <strong>Current URL:</strong> /catalog/users/john/details

packages/ui/src/components/PluginHeader/PluginHeader.tsx

@@ -14,15 +14,15 @@
  * limitations under the License.
  */
 
-import type { HeaderProps } from './types';
-import { HeaderToolbar } from './HeaderToolbar';
+import type { PluginHeaderProps } from './types';
+import { PluginHeaderToolbar } from './PluginHeaderToolbar';
 import { Tabs, TabList, Tab } from '../Tabs';
 import { useStyles } from '../../hooks/useStyles';
-import { HeaderDefinition } from './definition';
+import { PluginHeaderDefinition } from './definition';
 import { type NavigateOptions } from 'react-router-dom';
 import { useRef } from 'react';
 import { useIsomorphicLayoutEffect } from '../../hooks/useIsomorphicLayoutEffect';
-import styles from './Header.module.css';
+import styles from './PluginHeader.module.css';
 import clsx from 'clsx';
 
 declare module 'react-aria-components' {
@@ -32,12 +32,13 @@ declare module 'react-aria-components' {
 }
 
 /**
- * A component that renders a toolbar.
+ * A component that renders a plugin header with icon, title, custom actions,
+ * and navigation tabs.
  *
  * @public
  */
-export const Header = (props: HeaderProps) => {
-  const { classNames, cleanedProps } = useStyles(HeaderDefinition, props);
+export const PluginHeader = (props: PluginHeaderProps) => {
+  const { classNames, cleanedProps } = useStyles(PluginHeaderDefinition, props);
   const {
     className,
     tabs,
@@ -88,7 +89,7 @@ export const Header = (props: HeaderProps) => {
       ref={headerRef}
       className={clsx(classNames.root, styles[classNames.root], className)}
     >
-      <HeaderToolbar
+      <PluginHeaderToolbar
         icon={icon}
         title={title}
         titleLink={titleLink}

packages/ui/src/components/PluginHeader/PluginHeaderToolbar.tsx

@@ -16,21 +16,21 @@
 
 import { Link } from 'react-aria-components';
 import { useStyles } from '../../hooks/useStyles';
-import { HeaderDefinition } from './definition';
+import { PluginHeaderDefinition } from './definition';
 import { useRef } from 'react';
 import { RiShapesLine } from '@remixicon/react';
-import type { HeaderToolbarProps } from './types';
+import type { PluginHeaderToolbarProps } from './types';
 import { Text } from '../Text';
-import styles from './Header.module.css';
+import styles from './PluginHeader.module.css';
 import clsx from 'clsx';
 
 /**
- * A component that renders a toolbar.
+ * A component that renders the toolbar section of a plugin header.
  *
  * @internal
  */
-export const HeaderToolbar = (props: HeaderToolbarProps) => {
-  const { classNames, cleanedProps } = useStyles(HeaderDefinition, props);
+export const PluginHeaderToolbar = (props: PluginHeaderToolbarProps) => {
+  const { classNames, cleanedProps } = useStyles(PluginHeaderDefinition, props);
   const { className, icon, title, titleLink, customActions, hasTabs } =
     cleanedProps;
 

packages/ui/src/components/PluginHeader/definition.ts

@@ -17,18 +17,18 @@
 import type { ComponentDefinition } from '../../types';
 
 /**
- * Component definition for Header
+ * Component definition for PluginHeader
  * @public
  */
-export const HeaderDefinition = {
+export const PluginHeaderDefinition = {
   classNames: {
-    root: 'bui-Header',
-    toolbar: 'bui-HeaderToolbar',
-    toolbarWrapper: 'bui-HeaderToolbarWrapper',
-    toolbarContent: 'bui-HeaderToolbarContent',
-    toolbarControls: 'bui-HeaderToolbarControls',
-    toolbarIcon: 'bui-HeaderToolbarIcon',
-    toolbarName: 'bui-HeaderToolbarName',
-    tabsWrapper: 'bui-HeaderTabsWrapper',
+    root: 'bui-PluginHeader',
+    toolbar: 'bui-PluginHeaderToolbar',
+    toolbarWrapper: 'bui-PluginHeaderToolbarWrapper',
+    toolbarContent: 'bui-PluginHeaderToolbarContent',
+    toolbarControls: 'bui-PluginHeaderToolbarControls',
+    toolbarIcon: 'bui-PluginHeaderToolbarIcon',
+    toolbarName: 'bui-PluginHeaderToolbarName',
+    tabsWrapper: 'bui-PluginHeaderTabsWrapper',
   },
 } as const satisfies ComponentDefinition;

packages/ui/src/components/PluginHeader/index.tsx

@@ -14,6 +14,6 @@
  * limitations under the License.
  */
 
-export { Header } from './Header';
-export { HeaderDefinition } from './definition';
-export type { HeaderProps, HeaderTab } from './types';
+export { PluginHeader } from './PluginHeader';
+export { PluginHeaderDefinition } from './definition';
+export type { PluginHeaderProps, HeaderTab } from './types';

packages/ui/src/components/PluginHeader/types.ts

@@ -18,11 +18,11 @@ import { TabsProps } from 'react-aria-components';
 import { TabMatchStrategy } from '../Tabs';
 
 /**
- * Props for the main Header component.
+ * Props for the {@link PluginHeader} component.
  *
  * @public
  */
-export interface HeaderProps {
+export interface PluginHeaderProps {
   icon?: React.ReactNode;
   title?: string;
   titleLink?: string;
@@ -50,15 +50,15 @@ export interface HeaderTab {
 }
 
 /**
- * Props for the HeaderToolbar component.
+ * Props for the PluginHeaderToolbar component.
  *
  * @internal
  */
-export interface HeaderToolbarProps {
-  icon?: HeaderProps['icon'];
-  title?: HeaderProps['title'];
-  titleLink?: HeaderProps['titleLink'];
-  customActions?: HeaderProps['customActions'];
+export interface PluginHeaderToolbarProps {
+  icon?: PluginHeaderProps['icon'];
+  title?: PluginHeaderProps['title'];
+  titleLink?: PluginHeaderProps['titleLink'];
+  customActions?: PluginHeaderProps['customActions'];
   hasTabs?: boolean;
   className?: string;
 }

packages/ui/src/components/SearchField/SearchField.stories.tsx

@@ -23,7 +23,7 @@ import { FieldLabel } from '../FieldLabel';
 import { ButtonIcon } from '../ButtonIcon';
 import { RiCactusLine, RiEBike2Line } from '@remixicon/react';
 import { Button } from '../Button';
-import { Header } from '../Header';
+import { PluginHeader } from '../PluginHeader';
 import { MemoryRouter } from 'react-router-dom';
 
 const meta = preview.meta({
@@ -192,7 +192,7 @@ export const InHeader = meta.story({
   ],
   render: args => (
     <>
-      <Header
+      <PluginHeader
         title="Title"
         customActions={
           <>
@@ -229,7 +229,7 @@ export const StartCollapsedInHeader = meta.story({
   ],
   render: args => (
     <>
-      <Header
+      <PluginHeader
         title="Title"
         customActions={
           <>

packages/ui/src/definitions.ts

@@ -42,7 +42,7 @@ export {
   GridDefinition,
   GridItemDefinition,
 } from './components/Grid/definition';
-export { HeaderDefinition } from './components/Header/definition';
+export { PluginHeaderDefinition } from './components/PluginHeader/definition';
 export { HeaderPageDefinition } from './components/HeaderPage/definition';
 export { LinkDefinition } from './components/Link/definition';
 export { MenuDefinition } from './components/Menu/definition';

packages/ui/src/index.ts

@@ -35,7 +35,7 @@ export * from './components/Button';
 export * from './components/Card';
 export * from './components/Dialog';
 export * from './components/FieldLabel';
-export * from './components/Header';
+export * from './components/PluginHeader';
 export * from './components/HeaderPage';
 export * from './components/ButtonIcon';
 export * from './components/ButtonLink';