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={[

docs-ui/src/utils/changelogs/v0.9.0.ts

@@ -109,7 +109,14 @@ After:
     commitSha: 'a67670d',
   },
   {
-    components: ['menu', 'switch', 'skeleton', 'header', 'header-page', 'tabs'],
+    components: [
+      'menu',
+      'switch',
+      'skeleton',
+      'plugin-header',
+      'header-page',
+      'tabs',
+    ],
     version: '0.9.0',
     prs: ['31496'],
     description: `**BREAKING**: Changed className prop behavior to augment default styles instead of being ignored or overriding them.
@@ -171,10 +178,10 @@ import { Disclosure, Button, DisclosurePanel } from 'react-aria-components';
     commitSha: '816af0f',
   },
   {
-    components: ['header'],
+    components: ['plugin-header'],
     version: '0.9.0',
     prs: ['31525'],
-    description: `Fix broken external links in Backstage UI Header component.`,
+    description: `Fix broken external links in Backstage UI PluginHeader component.`,
 
     commitSha: 'd01de00',
   },

docs-ui/src/utils/data.ts

@@ -58,8 +58,8 @@ export const components: Page[] = [
     slug: 'grid',
   },
   {
-    title: 'Header',
-    slug: 'header',
+    title: 'PluginHeader',
+    slug: 'plugin-header',
   },
   {
     title: 'HeaderPage',

docs-ui/src/utils/types.ts

@@ -14,7 +14,7 @@ export type Component =
   | 'dialog'
   | 'flex'
   | 'grid'
-  | 'header'
+  | 'plugin-header'
   | 'header-page'
   | 'heading'
   | 'icon'