fix: issues with header with wrong spacings and dividers based on slots

db-ui · May 6, 2024 · 79b9bd9 · 79b9bd9
1 parent ae10e54
commit 79b9bd9
Show file tree

Hide file tree

Showing 13 changed files with 251 additions and 63 deletions.
diff --git a/docs/migration/alpha-beta.md b/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`
diff --git a/packages/components/src/components/brand/brand.scss b/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;
 

diff --git a/packages/components/src/components/header/docs/HTML.md b/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"

diff --git a/packages/components/src/components/header/header.lite.tsx b/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>

diff --git a/packages/components/src/components/header/header.scss b/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") {

diff --git a/packages/components/src/components/header/model.ts b/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.

diff --git a/packages/components/src/components/page/page.lite.tsx b/packages/components/src/components/page/page.lite.tsx
@@ -1,8 +1,6 @@
 import {
 	onInit,
 	onMount,
-	onUnMount,
-	onUpdate,
 	Slot,
 	useMetadata,
 	useRef,

diff --git a/packages/components/src/components/page/page.scss b/packages/components/src/components/page/page.scss
@@ -18,15 +18,15 @@
 		display: flex;
 		flex-direction: column;
 
-		header,
-		footer {
+		header:first-of-type,
+		footer:first-of-type {
 			display: flex;
 			flex: 0 1 auto;
 			flex-grow: 0;
 			flex-shrink: 0;
 		}
 
-		main {
+		main:first-of-type {
 			display: flex;
 			flex-direction: column;
 			overflow: auto;

diff --git a/showcases/react-showcase/src/app.tsx b/showcases/react-showcase/src/app.tsx
@@ -35,7 +35,7 @@ const App = () => {
 							onDensityChange={setDensity}
 						/>
 					}
-					callToAction={
+					primaryAction={
 						/* TODO: Use DBSearchBar in future */
 						<DBButton
 							icon="magnifying_glass"
@@ -44,7 +44,7 @@ const App = () => {
 							Search
 						</DBButton>
 					}
-					actionBar={
+					secondaryAction={
 						<>
 							<DBButton icon="user" variant="ghost" noText>
 								Profile