fix: issues with header with wrong spacings and dividers based on slo…

…ts (#2611)

docs/migration/alpha-beta.md

@@ -42,6 +42,7 @@ The prop labelVariant for form-components (input, checkbox, ...) has been rename
 | ❌ removed `data-variant="information/critical/..."` for form-components like `input`, `select` and `textarea` | We don't support the colors changes anymore. Use `required`, `pattern`, `min` etc. to trigger `user-valid` for green and red components | `data-variant` changes the label variant now                                                                                                                                                                                                              |
 | 🔄 changed `db-accordion` title                                                                                | We replaced `title` with `headlinePlain` because there is already a html default `title`, which caused trouble                          | Rename `title` to `headlinePlain` or use the slot `headline`                                                                                                                                                                                              |
 | ❌ removed prop `areaPopup` from `db-navigation-item`                                                          | We no longer support opening sub-navigations from via prop.                                                                             | There is no alternative at the moment.                                                                                                                                                                                                                    |
+| 🔄 changed `db-header` slot names                                                                              | The slot names for "action" containers changed                                                                                          | 1. `callToAction` ➡ `primaryAction` <br/>2. `actionBar` ➡ `secondaryAction`                                                                                                                                                                             |
 
 ### React
 
@@ -62,8 +63,8 @@ This is related to the following properties:
 -   `slotHeader`
 -   `slotBrand`
 -   `slotMetaNavigation`
--   `slotCallToAction`
--   `slotActionBar`
+-   `slotCallToAction` (`primaryAction`)
+-   `slotActionBar` (`secondaryAction`)
 -   `slotHeadline`
 -   `slotDrawerHeader`
 -   `slotSubNavigation`

packages/components/scripts/post-build/components.js

@@ -229,8 +229,8 @@ const getComponents = () => [
 			angular: {
 				directives: [
 					{
-						name: 'ActionBar',
-						ngContentName: 'action-bar'
+						name: 'SecondaryAction',
+						ngContentName: 'secondary-action'
 					},
 					{
 						name: 'MetaNavigation',

packages/components/src/components/brand/brand.scss

@@ -3,7 +3,7 @@
 
 .db-brand {
 	display: flex;
-	gap: variables.$db-spacing-fixed-md;
+	gap: variables.$db-spacing-fixed-sm;
 	align-items: center;
 	font-weight: 700;
 

packages/components/src/components/header/docs/HTML.md

@@ -74,7 +74,7 @@ For general installation and configuration take a look at the [components](https
 							>
 						</div>
 					</div>
-					<div class="db-header-action-bar">
+					<div class="db-header-secondary-action">
 						<button
 							id="button-65ba5268-2f08-47e3-9884-283c7f3e0be8"
 							class="db-button is-icon-text-replace"
@@ -158,7 +158,7 @@ For general installation and configuration take a look at the [components](https
 						</menu>
 					</nav>
 				</div>
-				<div class="db-header-call-to-action">
+				<div class="db-header-primary-action">
 					<button
 						id="button-46f070bc-adb3-4729-97ae-bfa41e62e51b"
 						class="db-button is-icon-text-replace"
@@ -180,7 +180,7 @@ For general installation and configuration take a look at the [components](https
 						BurgerMenu
 					</button>
 				</div>
-				<div class="db-header-action-bar">
+				<div class="db-header-secondary-action">
 					<button
 						id="button-cad51b9a-a428-42ea-91e7-ec52539f8f37"
 						class="db-button is-icon-text-replace"

packages/components/src/components/header/header.lite.tsx

@@ -68,6 +68,7 @@ export default function DBHeader(props: DBHeaderProps) {
 			ref={ref}
 			class={cls('db-header', props.className)}
 			id={state._id}
+			data-width={props.width}
 			data-on-forcing-mobile={props.forceMobile && !state.forcedToMobile}>
 			<DBDrawer
 				className="db-header-drawer"
@@ -88,8 +89,8 @@ export default function DBHeader(props: DBHeaderProps) {
 						<Slot name="metaNavigation" />
 					</div>
 				</div>
-				<div class="db-header-action-bar">
-					<Slot name="actionBar" />
+				<div class="db-header-secondary-action">
+					<Slot name="secondaryAction" />
 				</div>
 			</DBDrawer>
 
@@ -102,8 +103,8 @@ export default function DBHeader(props: DBHeaderProps) {
 				</div>
 				<div class="db-header-navigation-container">
 					<div class="db-header-navigation">{props.children}</div>
-					<div class="db-header-call-to-action">
-						<Slot name="callToAction" />
+					<div class="db-header-primary-action">
+						<Slot name="primaryAction" />
 					</div>
 				</div>
 				<div class="db-header-action-container">
@@ -118,8 +119,8 @@ export default function DBHeader(props: DBHeaderProps) {
 								state.defaultValues.burgerMenuLabel}
 						</DBButton>
 					</div>
-					<div class="db-header-action-bar">
-						<Slot name="actionBar" />
+					<div class="db-header-secondary-action">
+						<Slot name="secondaryAction" />
 					</div>
 				</div>
 			</div>

packages/components/src/components/header/header.scss

@@ -19,6 +19,16 @@
 		--db-drawer-max-width: #{screen-sizes.$db-breakpoint-sm};
 	}
 
+	&[data-width="medium"] {
+		margin-inline: auto;
+		max-inline-size: screen-sizes.$db-breakpoint-md;
+	}
+
+	&[data-width="large"] {
+		margin-inline: auto;
+		max-inline-size: screen-sizes.$db-breakpoint-lg;
+	}
+
 	.db-link {
 		display: inline-block;
 	}
@@ -30,18 +40,25 @@
 		*/
 		visibility: hidden;
 	}
+
+	// All use-cases where we hide the divider
+	&:has(.db-header-navigation:empty),
+	&:has(.db-brand:empty) {
+		.db-header-navigation-container::before {
+			display: none;
+		}
+	}
 }
 
 .db-header-navigation-bar {
 	display: flex;
 	position: relative;
 	padding: variables.$db-spacing-fixed-xs variables.$db-spacing-fixed-md;
-	gap: variables.$db-spacing-fixed-xs;
 	inline-size: 100%;
 	align-items: center;
 
 	@include screen-sizes.screen("md") {
-		padding: variables.$db-spacing-fixed-md;
+		padding: variables.$db-spacing-fixed-md variables.$db-spacing-fixed-lg;
 	}
 }
 
@@ -57,10 +74,15 @@
 	padding: variables.$db-spacing-fixed-md;
 
 	@include screen-sizes.screen("md") {
-		padding: variables.$db-spacing-fixed-xs variables.$db-spacing-fixed-md;
+		padding: variables.$db-spacing-fixed-xs variables.$db-spacing-fixed-lg;
 		margin: 0;
+		gap: variables.$db-spacing-fixed-md;
 		flex-direction: row;
 
+		&::before {
+			display: none;
+		}
+
 		&:empty {
 			display: none;
 		}
@@ -75,7 +97,6 @@
 	display: inherit;
 	flex: 1 1 auto;
 	inline-size: 100%;
-	gap: inherit;
 	align-items: center;
 	block-size: 100%;
 
@@ -85,20 +106,20 @@
 		&::before {
 			position: inherit;
 			block-size: 100%;
-			margin-inline-start: variables.$db-spacing-fixed-sm;
+			margin-inline-start: variables.$db-spacing-fixed-lg;
 		}
 	}
 }
 
-.db-header-call-to-action {
+.db-header-primary-action {
 	margin-inline-start: auto;
 }
 
 .db-header-brand-container:not(:has(> :nth-child(1))) {
 	display: none;
 }
 
-.db-header-action-container:has(> .db-header-action-bar:empty) {
+.db-header-action-container:has(> .db-header-secondary-action:empty) {
 	@include screen-sizes.screen("md") {
 		display: none;
 	}
@@ -110,12 +131,17 @@
 
 .db-header-action-container {
 	@include helpers.divider("left");
+
 	@include screen-sizes.screen("md") {
 		&::before {
-			margin-inline-end: variables.$db-spacing-fixed-sm;
+			margin-inline: variables.$db-spacing-fixed-sm;
 		}
 	}
 
+	&::before {
+		margin-inline: variables.$db-spacing-fixed-xs;
+	}
+
 	&::before {
 		position: inherit;
 		block-size: 100%;
@@ -133,7 +159,7 @@
 	flex-shrink: 0;
 }
 
-.db-header-action-bar {
+.db-header-secondary-action {
 	@include helpers.divider("top");
 	flex: 0 1 auto;
 	flex-grow: 0;
@@ -158,10 +184,14 @@
 
 .db-header-navigation {
 	padding-block: variables.$db-spacing-fixed-md;
+
+	@include screen-sizes.screen("md") {
+		margin-inline: variables.$db-spacing-fixed-lg;
+	}
 }
 
 .db-header-navigation,
-.db-header-action-bar {
+.db-header-secondary-action {
 	display: flex;
 	gap: variables.$db-spacing-fixed-sm;
 	padding-inline: variables.$db-spacing-fixed-md;
@@ -191,7 +221,7 @@
 /* Only for Desktop */
 .db-header-meta-navigation,
 .db-header-navigation-container > .db-header-navigation,
-.db-header-action-container > .db-header-action-bar {
+.db-header-action-container > .db-header-secondary-action {
 	display: none;
 
 	@include screen-sizes.screen("md") {

packages/components/src/components/header/model.ts

@@ -10,10 +10,15 @@ import {
 export interface DBHeaderDefaultProps {
 	brand?: unknown;
 	metaNavigation?: unknown;
-	callToAction?: unknown;
-	actionBar?: unknown;
+	primaryAction?: unknown;
+	secondaryAction?: unknown;
 	drawerOpen?: boolean;
 
+	/**
+	 * Set max width for header
+	 */
+	width?: 'full' | 'medium' | 'large';
+
 	/**
 	 * Forces the header to use mobile layout for desktop as well.
 	 * You should only use this setting if you really can't provide a smaller navigation.

packages/components/src/components/page/page.lite.tsx

@@ -1,8 +1,6 @@
 import {
 	onInit,
 	onMount,
-	onUnMount,
-	onUpdate,
 	Slot,
 	useMetadata,
 	useRef,

packages/components/src/components/page/page.scss

@@ -1,5 +1,14 @@
 @use "@db-ui/foundations/build/scss/variables";
 
+@mixin header-footer-style {
+	> :is(.db-header, .db-footer, header, footer) {
+		display: flex;
+		flex: 0 1 auto;
+		flex-grow: 0;
+		flex-shrink: 0;
+	}
+}
+
 .db-page {
 	opacity: 0;
 
@@ -13,20 +22,18 @@
 	}
 
 	&[data-variant="fixed"] {
+
+		@include header-footer-style();
 		block-size: 100%;
 		min-block-size: 100%;
 		display: flex;
 		flex-direction: column;
-
-		header,
-		footer {
-			display: flex;
-			flex: 0 1 auto;
-			flex-grow: 0;
-			flex-shrink: 0;
+		/* workaround for angular */
+		> :is(db-header, dbheader, dbfooter, db-footer) {
+			@include header-footer-style();
 		}
 
-		main {
+		> .db-main {
 			display: flex;
 			flex-direction: column;
 			overflow: auto;

showcases/angular-showcase/src/app/app.component.html

@@ -42,15 +42,15 @@
 					}
 				</db-select>
 			</ng-container>
-			<ng-container call-to-action>
+			<ng-container primary-action>
 				<DBButton
 					icon="magnifying_glass"
 					variant="ghost"
 					[noText]="true"
 					>Search</DBButton
 				>
 			</ng-container>
-			<ng-container *dbActionBar>
+			<ng-container secondary-action>
 				<DBButton icon="user" variant="ghost" [noText]="true">
 					Profile
 				</DBButton>

showcases/angular-showcase/src/app/app.component.ts

@@ -2,7 +2,7 @@ import { Component, OnInit } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { ActivatedRoute, Router, RouterOutlet } from '@angular/router';
 import {
-	ActionBarDirective,
+	SecondaryActionDirective,
 	NavigationDirective,
 	MetaNavigationDirective,
 	NavigationContentDirective,
@@ -39,7 +39,7 @@ import {
 		DBNavigation,
 		DBSelect,
 		DBButton,
-		ActionBarDirective,
+		SecondaryActionDirective,
 		NavigationDirective,
 		MetaNavigationDirective,
 		NavigationContentDirective