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>

docs-ui/src/app/components/plugin-header/components.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { Header } from '../../../../../packages/ui/src/components/Header/Header';
+import { PluginHeader } from '../../../../../packages/ui/src/components/PluginHeader/PluginHeader';
 import { HeaderPage } from '../../../../../packages/ui/src/components/HeaderPage/HeaderPage';
 import { ButtonIcon } from '../../../../../packages/ui/src/components/ButtonIcon/ButtonIcon';
 import { Button } from '../../../../../packages/ui/src/components/Button/Button';
@@ -27,7 +27,7 @@ const tabs2 = [
 
 export const WithAllOptionsAndTabs = () => (
   <MemoryRouter>
-    <Header
+    <PluginHeader
       title="My plugin"
       titleLink="/"
       tabs={tabs}
@@ -44,7 +44,7 @@ export const WithAllOptionsAndTabs = () => (
 
 export const WithAllOptions = () => (
   <MemoryRouter>
-    <Header
+    <PluginHeader
       title="My plugin"
       titleLink="/"
       customActions={
@@ -61,7 +61,7 @@ export const WithAllOptions = () => (
 export const WithHeaderPage = () => (
   <MemoryRouter>
     <>
-      <Header title="My plugin" titleLink="/" tabs={tabs.slice(0, 2)} />
+      <PluginHeader title="My plugin" titleLink="/" tabs={tabs.slice(0, 2)} />
       <HeaderPage
         title="Page title"
         tabs={tabs2}

docs-ui/src/app/components/plugin-header/page.mdx

@@ -16,11 +16,11 @@ import {
 } from './snippets';
 import { PageTitle } from '@/components/PageTitle';
 import { Theming } from '@/components/Theming';
-import { HeaderDefinition } from '../../../utils/definitions';
+import { PluginHeaderDefinition } from '../../../utils/definitions';
 import { ChangelogComponent } from '@/components/ChangelogComponent';
 
 <PageTitle
-  title="Header"
+  title="PluginHeader"
   description="A plugin header with icon, title, custom actions, and navigation tabs."
 />
 
@@ -36,22 +36,22 @@ import { ChangelogComponent } from '@/components/ChangelogComponent';
 
 ## Examples
 
-### Simple header
+### Simple plugin header
 
 <Snippet py={4} preview={<WithAllOptions />} code={simple} open />
 
-### Header with tabs
+### Plugin header with tabs
 
 Tabs use React Router and highlight automatically based on the current route.
 
 <Snippet preview={<WithAllOptionsAndTabs />} code={withTabs} open />
 
-### Header with HeaderPage
+### Plugin header with HeaderPage
 
 Combine with [HeaderPage](/components/header-page) for multi-level navigation.
 
 <Snippet preview={<WithHeaderPage />} code={withHeaderPage} open />
 
-<Theming definition={HeaderDefinition} />
+<Theming definition={PluginHeaderDefinition} />
 
-<ChangelogComponent component="header" />
+<ChangelogComponent component="plugin-header" />

docs-ui/src/app/components/plugin-header/snippets.ts

@@ -1,8 +1,8 @@
-export const usage = `import { Header } from '@backstage/ui';
+export const usage = `import { PluginHeader } from '@backstage/ui';
 
-<Header title="My plugin" />`;
+<PluginHeader title="My plugin" />`;
 
-export const defaultSnippet = `<Header
+export const defaultSnippet = `<PluginHeader
   title="My plugin"
   titleLink="/"
   tabs={[
@@ -19,7 +19,7 @@ export const defaultSnippet = `<Header
   }
 />`;
 
-export const simple = `<Header
+export const simple = `<PluginHeader
   title="My plugin"
   titleLink="/"
   customActions={
@@ -31,7 +31,7 @@ export const simple = `<Header
   }
 />`;
 
-export const withTabs = `<Header
+export const withTabs = `<PluginHeader
   title="My plugin"
   titleLink="/"
   tabs={[
@@ -43,7 +43,7 @@ export const withTabs = `<Header
   ]}
 />`;
 
-export const withHeaderPage = `<Header
+export const withHeaderPage = `<PluginHeader
   title="My plugin"
   titleLink="/"
   tabs={[