diff --git a/.changeset/core-header-marker.md b/.changeset/core-header-marker.md new file mode 100644 index 0000000000..6260c8d690 --- /dev/null +++ b/.changeset/core-header-marker.md @@ -0,0 +1,5 @@ +--- +'@backstage/core-components': patch +--- + +Added a stable DOM marker to the legacy Header so adjacent layout components can coordinate spacing without relying on generated class names. diff --git a/.changeset/plugin-header-spacing.md b/.changeset/plugin-header-spacing.md index bebf7a5608..a1c370ea19 100644 --- a/.changeset/plugin-header-spacing.md +++ b/.changeset/plugin-header-spacing.md @@ -2,6 +2,6 @@ '@backstage/ui': patch --- -Adjusted PluginHeader spacing so headers with and without tabs align more consistently with surrounding page content. +Adjusted PluginHeader spacing and borders so headers with and without tabs align more consistently with surrounding page content, including when paired with page headers. **Affected components:** PluginHeader, Header diff --git a/packages/core-components/src/layout/Header/Header.tsx b/packages/core-components/src/layout/Header/Header.tsx index f5facda641..3320ba782a 100644 --- a/packages/core-components/src/layout/Header/Header.tsx +++ b/packages/core-components/src/layout/Header/Header.tsx @@ -228,7 +228,11 @@ export function Header(props: PropsWithChildren) { return ( <> -
+
( + <> + } title="APIs" /> + + + + ), +}); + +export const CoreComponentsHeaderWithTabs = meta.story({ + decorators: [withLayout], + render: () => ( + <> + } + title="APIs" + tabs={[ + { id: 'overview', label: 'Overview', href: '/apis' }, + { + id: 'definitions', + label: 'Definitions', + href: '/apis/definitions', + }, + { id: 'consumers', label: 'Consumers', href: '/apis/consumers' }, + ]} + /> + + + + ), +}); + export const WithTabs = meta.story({ decorators: [withLayout], render: () => ( diff --git a/yarn.lock b/yarn.lock index 37c405d2f9..b11895427f 100644 --- a/yarn.lock +++ b/yarn.lock @@ -7949,6 +7949,7 @@ __metadata: resolution: "@backstage/ui@workspace:packages/ui" dependencies: "@backstage/cli": "workspace:^" + "@backstage/core-components": "workspace:^" "@backstage/version-bridge": "workspace:^" "@braintree/sanitize-url": "npm:^7.1.2" "@internationalized/date": "npm:^3.12.0"