diff --git a/.changeset/deprecate-headerpage-to-header.md b/.changeset/deprecate-headerpage-to-header.md new file mode 100644 index 0000000000..83f673a422 --- /dev/null +++ b/.changeset/deprecate-headerpage-to-header.md @@ -0,0 +1,5 @@ +--- +'@backstage/ui': patch +--- + +Deprecated the `HeaderPage` component name in favor of `Header`. The old `HeaderPage`, `HeaderPageProps`, `HeaderPageOwnProps`, `HeaderPageBreadcrumb`, and `HeaderPageDefinition` exports are still available as deprecated aliases. diff --git a/.changeset/mui-to-bui-header.md b/.changeset/mui-to-bui-header.md new file mode 100644 index 0000000000..2efa147e29 --- /dev/null +++ b/.changeset/mui-to-bui-header.md @@ -0,0 +1,5 @@ +--- +'@backstage/plugin-mui-to-bui': patch +--- + +Updated the MUI to BUI theme converter page to use the renamed `Header` component from `@backstage/ui`. diff --git a/docs-ui/src/app/components/header-page/components.tsx b/docs-ui/src/app/components/header/components.tsx similarity index 84% rename from docs-ui/src/app/components/header-page/components.tsx rename to docs-ui/src/app/components/header/components.tsx index 791afc5bbe..dc32bdd6cb 100644 --- a/docs-ui/src/app/components/header-page/components.tsx +++ b/docs-ui/src/app/components/header/components.tsx @@ -1,6 +1,6 @@ 'use client'; -import { HeaderPage } from '../../../../../packages/ui/src/components/HeaderPage/HeaderPage'; +import { Header } from '../../../../../packages/ui/src/components/Header/Header'; import { Button } from '../../../../../packages/ui/src/components/Button/Button'; import { ButtonIcon } from '../../../../../packages/ui/src/components/ButtonIcon/ButtonIcon'; import { @@ -31,7 +31,7 @@ const breadcrumbs = [ export const WithEverything = () => ( - ( export const WithLongBreadcrumbs = () => ( - +
); export const WithTabs = () => ( - +
); export const WithCustomActions = () => ( - Custom action} - /> +
Custom action} /> ); export const WithMenu = () => ( - diff --git a/docs-ui/src/app/components/header-page/page.mdx b/docs-ui/src/app/components/header/page.mdx similarity index 88% rename from docs-ui/src/app/components/header-page/page.mdx rename to docs-ui/src/app/components/header/page.mdx index ac99fb1af0..65dd8f2ea8 100644 --- a/docs-ui/src/app/components/header-page/page.mdx +++ b/docs-ui/src/app/components/header/page.mdx @@ -19,11 +19,11 @@ import { } from './snippets'; import { PageTitle } from '@/components/PageTitle'; import { Theming } from '@/components/Theming'; -import { HeaderPageDefinition } from '../../../utils/definitions'; +import { HeaderDefinition } from '../../../utils/definitions'; import { ChangelogComponent } from '@/components/ChangelogComponent'; @@ -61,6 +61,6 @@ Use `customActions` to add a dropdown menu. } code={withMenu} /> - + - + diff --git a/docs-ui/src/app/components/header-page/props-definition.tsx b/docs-ui/src/app/components/header/props-definition.tsx similarity index 97% rename from docs-ui/src/app/components/header-page/props-definition.tsx rename to docs-ui/src/app/components/header/props-definition.tsx index 393141870f..1b7a309b17 100644 --- a/docs-ui/src/app/components/header-page/props-definition.tsx +++ b/docs-ui/src/app/components/header/props-definition.tsx @@ -50,7 +50,7 @@ export const headerPagePropDefs: Record = { type: 'complex', description: 'Breadcrumb trail displayed above the title.', complexType: { - name: 'HeaderPageBreadcrumb[]', + name: 'HeaderBreadcrumb[]', properties: { label: { type: 'string', diff --git a/docs-ui/src/app/components/header-page/snippets.ts b/docs-ui/src/app/components/header/snippets.ts similarity index 78% rename from docs-ui/src/app/components/header-page/snippets.ts rename to docs-ui/src/app/components/header/snippets.ts index 607675717c..8dfef0e69e 100644 --- a/docs-ui/src/app/components/header-page/snippets.ts +++ b/docs-ui/src/app/components/header/snippets.ts @@ -1,8 +1,8 @@ -export const usage = `import { HeaderPage } from '@backstage/ui'; +export const usage = `import { Header } from '@backstage/ui'; -`; +
`; -export const defaultSnippet = ``; -export const withBreadcrumbs = ``; -export const withTabs = ``; -export const withCustomActions = `Custom action} />`; -export const withMenu = ` diff --git a/docs-ui/src/app/components/plugin-header/components.tsx b/docs-ui/src/app/components/plugin-header/components.tsx index b3d831e718..045d0956c4 100644 --- a/docs-ui/src/app/components/plugin-header/components.tsx +++ b/docs-ui/src/app/components/plugin-header/components.tsx @@ -1,7 +1,7 @@ 'use client'; import { PluginHeader } from '../../../../../packages/ui/src/components/PluginHeader/PluginHeader'; -import { HeaderPage } from '../../../../../packages/ui/src/components/HeaderPage/HeaderPage'; +import { Header } from '../../../../../packages/ui/src/components/Header/Header'; import { ButtonIcon } from '../../../../../packages/ui/src/components/ButtonIcon/ButtonIcon'; import { Button } from '../../../../../packages/ui/src/components/Button/Button'; import { MemoryRouter } from 'react-router-dom'; @@ -58,11 +58,11 @@ export const WithAllOptions = () => ( ); -export const WithHeaderPage = () => ( +export const WithHeader = () => ( <> - Custom action} diff --git a/docs-ui/src/app/components/plugin-header/page.mdx b/docs-ui/src/app/components/plugin-header/page.mdx index 5f8e02bfc4..cbe4dfe141 100644 --- a/docs-ui/src/app/components/plugin-header/page.mdx +++ b/docs-ui/src/app/components/plugin-header/page.mdx @@ -4,7 +4,7 @@ import { Snippet } from '@/components/Snippet'; import { WithAllOptionsAndTabs, WithAllOptions, - WithHeaderPage, + WithHeader, } from './components'; import { headerPropDefs } from './props-definition'; import { @@ -12,7 +12,7 @@ import { simple, defaultSnippet, withTabs, - withHeaderPage, + withHeader, } from './snippets'; import { PageTitle } from '@/components/PageTitle'; import { Theming } from '@/components/Theming'; @@ -46,11 +46,11 @@ Tabs use React Router and highlight automatically based on the current route. } code={withTabs} open /> -### Plugin header with HeaderPage +### Plugin header with Header -Combine with [HeaderPage](/components/header-page) for multi-level navigation. +Combine with [Header](/components/header) for multi-level navigation. -} code={withHeaderPage} open /> +} code={withHeader} open /> diff --git a/docs-ui/src/app/components/plugin-header/snippets.ts b/docs-ui/src/app/components/plugin-header/snippets.ts index 4e9518af73..874a16184a 100644 --- a/docs-ui/src/app/components/plugin-header/snippets.ts +++ b/docs-ui/src/app/components/plugin-header/snippets.ts @@ -43,7 +43,7 @@ export const withTabs = ``; -export const withHeaderPage = ` - JSX_2.Element; +export const Header: (props: HeaderProps) => JSX_2.Element; // @public -export interface HeaderPageBreadcrumb { +export interface HeaderBreadcrumb { // (undocumented) href: string; // (undocumented) @@ -1412,7 +1412,7 @@ export interface HeaderPageBreadcrumb { } // @public -export const HeaderPageDefinition: { +export const HeaderDefinition: { readonly styles: { readonly [key: string]: string; }; @@ -1433,9 +1433,9 @@ export const HeaderPageDefinition: { }; // @public -export interface HeaderPageOwnProps { +export interface HeaderOwnProps { // (undocumented) - breadcrumbs?: HeaderPageBreadcrumb[]; + breadcrumbs?: HeaderBreadcrumb[]; // (undocumented) className?: string; // (undocumented) @@ -1446,8 +1446,41 @@ export interface HeaderPageOwnProps { title?: string; } +// @public @deprecated (undocumented) +export const HeaderPage: (props: HeaderProps) => JSX_2.Element; + +// @public @deprecated (undocumented) +export type HeaderPageBreadcrumb = HeaderBreadcrumb; + +// @public @deprecated (undocumented) +export const HeaderPageDefinition: { + readonly styles: { + readonly [key: string]: string; + }; + readonly classNames: { + readonly root: 'bui-HeaderPage'; + readonly content: 'bui-HeaderPageContent'; + readonly breadcrumbs: 'bui-HeaderPageBreadcrumbs'; + readonly tabsWrapper: 'bui-HeaderPageTabsWrapper'; + readonly controls: 'bui-HeaderPageControls'; + }; + readonly propDefs: { + readonly title: {}; + readonly customActions: {}; + readonly tabs: {}; + readonly breadcrumbs: {}; + readonly className: {}; + }; +}; + +// @public @deprecated (undocumented) +export type HeaderPageOwnProps = HeaderOwnProps; + +// @public @deprecated (undocumented) +export type HeaderPageProps = HeaderProps; + // @public -export interface HeaderPageProps extends HeaderPageOwnProps {} +export interface HeaderProps extends HeaderOwnProps {} // @public export interface HeaderTab { diff --git a/packages/ui/src/components/HeaderPage/HeaderPage.module.css b/packages/ui/src/components/Header/Header.module.css similarity index 100% rename from packages/ui/src/components/HeaderPage/HeaderPage.module.css rename to packages/ui/src/components/Header/Header.module.css diff --git a/packages/ui/src/components/HeaderPage/HeaderPage.stories.tsx b/packages/ui/src/components/Header/Header.stories.tsx similarity index 97% rename from packages/ui/src/components/HeaderPage/HeaderPage.stories.tsx rename to packages/ui/src/components/Header/Header.stories.tsx index 0c027477e3..e605f2ed58 100644 --- a/packages/ui/src/components/HeaderPage/HeaderPage.stories.tsx +++ b/packages/ui/src/components/Header/Header.stories.tsx @@ -16,7 +16,7 @@ import preview from '../../../../../.storybook/preview'; import type { StoryFn } from '@storybook/react-vite'; -import { HeaderPage } from './HeaderPage'; +import { Header } from './Header'; import type { HeaderTab } from '../PluginHeader/types'; import { MemoryRouter } from 'react-router-dom'; import { @@ -31,8 +31,8 @@ import { import { RiMore2Line } from '@remixicon/react'; const meta = preview.meta({ - title: 'Backstage UI/HeaderPage', - component: HeaderPage, + title: 'Backstage UI/Header', + component: Header, parameters: { layout: 'fullscreen', }, @@ -145,7 +145,7 @@ export const WithTabs = meta.story({ export const WithCustomActions = meta.story({ decorators: [withRouter], render: () => ( - @@ -196,7 +196,7 @@ export const WithLongBreadcrumbs = meta.story({ export const WithEverything = meta.story({ decorators: [withRouter], render: () => ( - Custom action} @@ -239,7 +239,7 @@ export const WithTabsMatchingStrategies = meta.story({ }, render: args => ( - +
Current URL: /mentorship/events @@ -292,7 +292,7 @@ export const WithTabsExactMatching = meta.story({ }, render: args => ( - +
Current URL: /mentorship/events @@ -334,7 +334,7 @@ export const WithTabsPrefixMatchingDeep = meta.story({ }, render: args => ( - +
Current URL: /catalog/users/john/details diff --git a/packages/ui/src/components/HeaderPage/HeaderPage.tsx b/packages/ui/src/components/Header/Header.tsx similarity index 86% rename from packages/ui/src/components/HeaderPage/HeaderPage.tsx rename to packages/ui/src/components/Header/Header.tsx index d1cd146567..d9d96eb7af 100644 --- a/packages/ui/src/components/HeaderPage/HeaderPage.tsx +++ b/packages/ui/src/components/Header/Header.tsx @@ -14,23 +14,23 @@ * limitations under the License. */ -import type { HeaderPageProps } from './types'; +import type { HeaderProps } from './types'; import { Text } from '../Text'; import { RiArrowRightSLine } from '@remixicon/react'; import { Tabs, TabList, Tab } from '../Tabs'; import { useDefinition } from '../../hooks/useDefinition'; -import { HeaderPageDefinition } from './definition'; +import { HeaderDefinition } from './definition'; import { Container } from '../Container'; import { Link } from '../Link'; import { Fragment } from 'react/jsx-runtime'; /** - * A component that renders a header page. + * A secondary header with title, breadcrumbs, tabs, and actions. * * @public */ -export const HeaderPage = (props: HeaderPageProps) => { - const { ownProps } = useDefinition(HeaderPageDefinition, props); +export const Header = (props: HeaderProps) => { + const { ownProps } = useDefinition(HeaderDefinition, props); const { classes, title, tabs, customActions, breadcrumbs } = ownProps; return ( @@ -81,3 +81,9 @@ export const HeaderPage = (props: HeaderPageProps) => { ); }; + +/** + * @public + * @deprecated Use {@link Header} instead. + */ +export const HeaderPage = Header; diff --git a/packages/ui/src/components/HeaderPage/definition.ts b/packages/ui/src/components/Header/definition.ts similarity index 76% rename from packages/ui/src/components/HeaderPage/definition.ts rename to packages/ui/src/components/Header/definition.ts index 16fc5c9c67..0eb3ad33a3 100644 --- a/packages/ui/src/components/HeaderPage/definition.ts +++ b/packages/ui/src/components/Header/definition.ts @@ -15,14 +15,14 @@ */ import { defineComponent } from '../../hooks/useDefinition'; -import type { HeaderPageOwnProps } from './types'; -import styles from './HeaderPage.module.css'; +import type { HeaderOwnProps } from './types'; +import styles from './Header.module.css'; /** - * Component definition for HeaderPage + * Component definition for Header * @public */ -export const HeaderPageDefinition = defineComponent()({ +export const HeaderDefinition = defineComponent()({ styles, classNames: { root: 'bui-HeaderPage', @@ -39,3 +39,9 @@ export const HeaderPageDefinition = defineComponent()({ className: {}, }, }); + +/** + * @public + * @deprecated Use {@link HeaderDefinition} instead. + */ +export const HeaderPageDefinition = HeaderDefinition; diff --git a/packages/ui/src/components/HeaderPage/index.tsx b/packages/ui/src/components/Header/index.tsx similarity index 80% rename from packages/ui/src/components/HeaderPage/index.tsx rename to packages/ui/src/components/Header/index.tsx index 781a061a83..8738114e7d 100644 --- a/packages/ui/src/components/HeaderPage/index.tsx +++ b/packages/ui/src/components/Header/index.tsx @@ -14,9 +14,12 @@ * limitations under the License. */ -export { HeaderPage } from './HeaderPage'; -export { HeaderPageDefinition } from './definition'; +export { Header, HeaderPage } from './Header'; +export { HeaderDefinition, HeaderPageDefinition } from './definition'; export type { + HeaderOwnProps, + HeaderProps, + HeaderBreadcrumb, HeaderPageOwnProps, HeaderPageProps, HeaderPageBreadcrumb, diff --git a/packages/ui/src/components/HeaderPage/types.ts b/packages/ui/src/components/Header/types.ts similarity index 60% rename from packages/ui/src/components/HeaderPage/types.ts rename to packages/ui/src/components/Header/types.ts index b603cb7084..1b62ee2538 100644 --- a/packages/ui/src/components/HeaderPage/types.ts +++ b/packages/ui/src/components/Header/types.ts @@ -17,31 +17,49 @@ import type { HeaderTab } from '../PluginHeader/types'; /** - * Own props for the HeaderPage component. + * Own props for the Header component. * * @public */ -export interface HeaderPageOwnProps { +export interface HeaderOwnProps { title?: string; customActions?: React.ReactNode; tabs?: HeaderTab[]; - breadcrumbs?: HeaderPageBreadcrumb[]; + breadcrumbs?: HeaderBreadcrumb[]; className?: string; } /** - * Props for the main HeaderPage component. + * Props for the Header component. * * @public */ -export interface HeaderPageProps extends HeaderPageOwnProps {} +export interface HeaderProps extends HeaderOwnProps {} /** * Represents a breadcrumb item in the header. * * @public */ -export interface HeaderPageBreadcrumb { +export interface HeaderBreadcrumb { label: string; href: string; } + +/** + * @public + * @deprecated Use {@link HeaderOwnProps} instead. + */ +export type HeaderPageOwnProps = HeaderOwnProps; + +/** + * @public + * @deprecated Use {@link HeaderProps} instead. + */ +export type HeaderPageProps = HeaderProps; + +/** + * @public + * @deprecated Use {@link HeaderBreadcrumb} instead. + */ +export type HeaderPageBreadcrumb = HeaderBreadcrumb; diff --git a/packages/ui/src/components/PluginHeader/PluginHeader.stories.tsx b/packages/ui/src/components/PluginHeader/PluginHeader.stories.tsx index 91cb69b2a8..151c48aab6 100644 --- a/packages/ui/src/components/PluginHeader/PluginHeader.stories.tsx +++ b/packages/ui/src/components/PluginHeader/PluginHeader.stories.tsx @@ -20,7 +20,7 @@ import { PluginHeader } from './PluginHeader'; import type { HeaderTab } from './types'; import { Button, - HeaderPage, + Header, Container, Text, ButtonIcon, @@ -35,7 +35,7 @@ import { RiCloudy2Line, RiMore2Line, } from '@remixicon/react'; -import { HeaderPageBreadcrumb } from '../HeaderPage/types'; +import { HeaderBreadcrumb } from '../Header/types'; const meta = preview.meta({ title: 'Backstage UI/PluginHeader', @@ -117,7 +117,7 @@ const menuItems = [ }, ]; -const breadcrumbs: HeaderPageBreadcrumb[] = [ +const breadcrumbs: HeaderBreadcrumb[] = [ { label: 'Home', href: '/', @@ -246,7 +246,7 @@ export const WithAllOptionsAndTabs = WithCustomActions.extend({ }, }); -export const WithHeaderPage = meta.story({ +export const WithHeader = meta.story({ args: { ...WithAllOptionsAndTabs.input.args, }, @@ -263,7 +263,7 @@ export const WithHeaderPage = meta.story({ } /> - Custom action} @@ -278,7 +278,7 @@ export const WithLayout = meta.story({ render: args => ( <> - Custom action} @@ -293,7 +293,7 @@ export const WithLayoutNoTabs = meta.story({ render: args => ( <> - +
), }); @@ -316,7 +316,7 @@ export const WithEverything = meta.story({ } /> - { return ( <> - Custom action} /> diff --git a/packages/ui/src/index.ts b/packages/ui/src/index.ts index ca16a07886..290ae2a80f 100644 --- a/packages/ui/src/index.ts +++ b/packages/ui/src/index.ts @@ -36,7 +36,7 @@ export * from './components/Card'; export * from './components/Dialog'; export * from './components/FieldLabel'; export * from './components/PluginHeader'; -export * from './components/HeaderPage'; +export * from './components/Header'; export * from './components/ButtonIcon'; export * from './components/ButtonLink'; export * from './components/Checkbox'; diff --git a/plugins/mui-to-bui/src/components/BuiThemerPage/BuiThemerPage.tsx b/plugins/mui-to-bui/src/components/BuiThemerPage/BuiThemerPage.tsx index 7f0e9f32fc..a9b2c07318 100644 --- a/plugins/mui-to-bui/src/components/BuiThemerPage/BuiThemerPage.tsx +++ b/plugins/mui-to-bui/src/components/BuiThemerPage/BuiThemerPage.tsx @@ -16,7 +16,7 @@ import { useApi } from '@backstage/core-plugin-api'; import { appThemeApiRef } from '@backstage/core-plugin-api'; -import { Box, Card, Container, Flex, HeaderPage, Text } from '@backstage/ui'; +import { Box, Card, Container, Flex, Header, Text } from '@backstage/ui'; import { ThemeContent } from './ThemeContent'; import { MuiThemeExtractor } from './MuiThemeExtractor'; @@ -26,7 +26,7 @@ export const BuiThemerPage = () => { return ( - +
Convert your MUI v5 theme into BUI CSS variables. Pick a theme to view