From 17d6398e221e2f2d9b853f2797dbf768419e99ed Mon Sep 17 00:00:00 2001 From: Charles de Dreuille Date: Sat, 14 Mar 2026 10:22:13 +0000 Subject: [PATCH] fix(ui): fix Container bottom margin clash in Header - Changed Container default bottom spacing from padding-bottom to margin-bottom - Prevented the Container margin-bottom from applying when used as the Header root element via mb="0" - Renamed Header CSS classes from bui-HeaderPage* to bui-Header* to match the component name Fixes https://linear.app/spotify/issue/BACUI-249 Signed-off-by: Charles de Dreuille Made-with: Cursor --- .changeset/fix-header-container-padding.md | 5 +++++ .changeset/rename-header-css-classes.md | 15 ++++++++++++++ packages/ui/report.api.md | 20 +++++++++---------- .../components/Container/Container.module.css | 2 +- .../src/components/Header/Header.module.css | 10 +++++----- packages/ui/src/components/Header/Header.tsx | 2 +- .../ui/src/components/Header/definition.ts | 10 +++++----- 7 files changed, 42 insertions(+), 22 deletions(-) create mode 100644 .changeset/fix-header-container-padding.md create mode 100644 .changeset/rename-header-css-classes.md diff --git a/.changeset/fix-header-container-padding.md b/.changeset/fix-header-container-padding.md new file mode 100644 index 0000000000..fdad424ef5 --- /dev/null +++ b/.changeset/fix-header-container-padding.md @@ -0,0 +1,5 @@ +--- +'@backstage/ui': patch +--- + +Fixed incorrect bottom spacing caused by `Container` using `padding-bottom` for its default bottom spacing. Changed to `margin-bottom` and prevented it from applying when `Container` is used as the `Header` root element. diff --git a/.changeset/rename-header-css-classes.md b/.changeset/rename-header-css-classes.md new file mode 100644 index 0000000000..3e57717c8e --- /dev/null +++ b/.changeset/rename-header-css-classes.md @@ -0,0 +1,15 @@ +--- +'@backstage/ui': minor +--- + +**BREAKING**: Renamed internal CSS classes to match the `Header` component name. + +**Migration notes**: If you are targeting these classes directly in your styles, update the following: + +- `bui-HeaderPage` → `bui-Header` +- `bui-HeaderPageContent` → `bui-HeaderContent` +- `bui-HeaderPageBreadcrumbs` → `bui-HeaderBreadcrumbs` +- `bui-HeaderPageTabsWrapper` → `bui-HeaderTabsWrapper` +- `bui-HeaderPageControls` → `bui-HeaderControls` + +**Affected components**: Header diff --git a/packages/ui/report.api.md b/packages/ui/report.api.md index 834251f088..95bc6d86b8 100644 --- a/packages/ui/report.api.md +++ b/packages/ui/report.api.md @@ -1409,11 +1409,11 @@ export const HeaderDefinition: { 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 root: 'bui-Header'; + readonly content: 'bui-HeaderContent'; + readonly breadcrumbs: 'bui-HeaderBreadcrumbs'; + readonly tabsWrapper: 'bui-HeaderTabsWrapper'; + readonly controls: 'bui-HeaderControls'; }; readonly propDefs: { readonly title: {}; @@ -1450,11 +1450,11 @@ export const HeaderPageDefinition: { 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 root: 'bui-Header'; + readonly content: 'bui-HeaderContent'; + readonly breadcrumbs: 'bui-HeaderBreadcrumbs'; + readonly tabsWrapper: 'bui-HeaderTabsWrapper'; + readonly controls: 'bui-HeaderControls'; }; readonly propDefs: { readonly title: {}; diff --git a/packages/ui/src/components/Container/Container.module.css b/packages/ui/src/components/Container/Container.module.css index b93665525f..1ebf52ccf3 100644 --- a/packages/ui/src/components/Container/Container.module.css +++ b/packages/ui/src/components/Container/Container.module.css @@ -21,7 +21,7 @@ max-width: 120rem; padding-inline: var(--bui-space-4); margin-inline: auto; - padding-bottom: var(--bui-space-8); + margin-bottom: var(--bui-space-8); } @media (min-width: 640px) { diff --git a/packages/ui/src/components/Header/Header.module.css b/packages/ui/src/components/Header/Header.module.css index 4a81c6dcb0..7f12f5adf8 100644 --- a/packages/ui/src/components/Header/Header.module.css +++ b/packages/ui/src/components/Header/Header.module.css @@ -17,7 +17,7 @@ @layer tokens, base, components, utilities; @layer components { - .bui-HeaderPage { + .bui-Header { display: flex; flex-direction: column; gap: var(--bui-space-1); @@ -25,24 +25,24 @@ margin-bottom: var(--bui-space-6); } - .bui-HeaderPageContent { + .bui-HeaderContent { display: flex; flex-direction: row; justify-content: space-between; } - .bui-HeaderPageTabsWrapper { + .bui-HeaderTabsWrapper { margin-left: -8px; } - .bui-HeaderPageControls { + .bui-HeaderControls { display: flex; flex-direction: row; align-items: center; gap: var(--bui-space-2); } - .bui-HeaderPageBreadcrumbs { + .bui-HeaderBreadcrumbs { display: flex; flex-direction: row; align-items: center; diff --git a/packages/ui/src/components/Header/Header.tsx b/packages/ui/src/components/Header/Header.tsx index d9d96eb7af..139604147a 100644 --- a/packages/ui/src/components/Header/Header.tsx +++ b/packages/ui/src/components/Header/Header.tsx @@ -34,7 +34,7 @@ export const Header = (props: HeaderProps) => { const { classes, title, tabs, customActions, breadcrumbs } = ownProps; return ( - +
{breadcrumbs && diff --git a/packages/ui/src/components/Header/definition.ts b/packages/ui/src/components/Header/definition.ts index 0eb3ad33a3..66fccf2f49 100644 --- a/packages/ui/src/components/Header/definition.ts +++ b/packages/ui/src/components/Header/definition.ts @@ -25,11 +25,11 @@ import styles from './Header.module.css'; export const HeaderDefinition = defineComponent()({ styles, classNames: { - root: 'bui-HeaderPage', - content: 'bui-HeaderPageContent', - breadcrumbs: 'bui-HeaderPageBreadcrumbs', - tabsWrapper: 'bui-HeaderPageTabsWrapper', - controls: 'bui-HeaderPageControls', + root: 'bui-Header', + content: 'bui-HeaderContent', + breadcrumbs: 'bui-HeaderBreadcrumbs', + tabsWrapper: 'bui-HeaderTabsWrapper', + controls: 'bui-HeaderControls', }, propDefs: { title: {},