Merge pull request #33354 from backstage/charlesdedreuille/bacui-249-fix-container-bottom-margin-clash-in-bui-oss

fix(ui): fix Container bottom margin clash in Header

.changeset/fix-header-container-padding.md

@@ -0,0 +1,7 @@
+---
+'@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.
+
+**Affected components:** Container, Header

.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:**: 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

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: {};

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) {

packages/ui/src/components/Header/Header.module.css

@@ -17,32 +17,31 @@
 @layer tokens, base, components, utilities;
 
 @layer components {
-  .bui-HeaderPage {
+  .bui-Header {
     display: flex;
     flex-direction: column;
     gap: var(--bui-space-1);
     margin-top: var(--bui-space-6);
-    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;

packages/ui/src/components/Header/definition.ts

@@ -25,11 +25,11 @@ import styles from './Header.module.css';
 export const HeaderDefinition = defineComponent<HeaderOwnProps>()({
   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: {},