From 3041284e37c9f40759b3c73c9283bf37ed4ee9a0 Mon Sep 17 00:00:00 2001 From: Adam Kudrna Date: Thu, 2 Nov 2023 11:27:42 +0100 Subject: [PATCH 1/4] Feat(web): Allow combining links and buttons in `HeaderDesktopActions` --- .../web/src/scss/components/Header/README.md | 20 ++++++++++-- .../components/Header/_HeaderDialogLink.scss | 2 ++ .../components/Header/_HeaderDialogNav.scss | 1 + .../scss/components/Header/_HeaderLink.scss | 4 +++ .../scss/components/Header/_HeaderNav.scss | 1 + .../components/Header/_HeaderNavItem.scss | 3 ++ .../src/scss/components/Header/_tools.scss | 1 - .../web/src/scss/components/Header/index.html | 32 ++++++++++--------- 8 files changed, 45 insertions(+), 19 deletions(-) diff --git a/packages/web/src/scss/components/Header/README.md b/packages/web/src/scss/components/Header/README.md index bb33517564..ed24185f90 100644 --- a/packages/web/src/scss/components/Header/README.md +++ b/packages/web/src/scss/components/Header/README.md @@ -149,9 +149,11 @@ and `aria-controls` attributes. ### Desktop-Only Actions -As the name suggests, desktop-only actions are intended to display on desktop -screens only. There are two slots you can use: primary actions (aligned to -left in LTR documents), and secondary actions (aligned to right). +As the name suggests, desktop-only actions are intended to display on desktop screens only. They generally work as flex +containers that define vertical alignment and spacing. + +There are two slots you can use: primary actions (aligned to left in LTR documents), and secondary actions (aligned to +right). 👉 It is critical to **make sure all your actions fit the Header on the desktop breakpoint**. Spirit intentionally does not provide any overflow @@ -209,6 +211,18 @@ Both links and buttons are supported by `HeaderLink` class: ``` +#### Other Content + +You can avoid using the [HeaderNav](#navigation) for standalone links. That way, you can combine links and buttons in +the same container: + +```html + +``` + ## Header Dialog Header Dialog is Spirit's solution for responsive navigation and selected use diff --git a/packages/web/src/scss/components/Header/_HeaderDialogLink.scss b/packages/web/src/scss/components/Header/_HeaderDialogLink.scss index 7fd80eea42..5e61386fd6 100644 --- a/packages/web/src/scss/components/Header/_HeaderDialogLink.scss +++ b/packages/web/src/scss/components/Header/_HeaderDialogLink.scss @@ -15,6 +15,8 @@ --header-link-decoration-width: #{theme.$header-dialog-link-current-border-thickness}; --header-link-decoration-scale-y: 1; --header-link-decoration-transform-origin: right center; + + width: 100%; } .HeaderDialogLink--current { diff --git a/packages/web/src/scss/components/Header/_HeaderDialogNav.scss b/packages/web/src/scss/components/Header/_HeaderDialogNav.scss index d9d14b8821..4d05a5af91 100644 --- a/packages/web/src/scss/components/Header/_HeaderDialogNav.scss +++ b/packages/web/src/scss/components/Header/_HeaderDialogNav.scss @@ -4,5 +4,6 @@ .HeaderDialogNav { margin-inline: -1 * theme.$header-dialog-actions-padding-x; // 1. + margin-bottom: 0; list-style: none; } diff --git a/packages/web/src/scss/components/Header/_HeaderLink.scss b/packages/web/src/scss/components/Header/_HeaderLink.scss index 55908e54c8..391ab9df4e 100644 --- a/packages/web/src/scss/components/Header/_HeaderLink.scss +++ b/packages/web/src/scss/components/Header/_HeaderLink.scss @@ -1,3 +1,5 @@ +// 1. Stretch over the entire height of the header. + @use '../../tools/reset'; @use 'theme'; @use 'tools'; @@ -13,6 +15,8 @@ --header-link-decoration-height: #{theme.$header-link-current-border-thickness}; --header-link-decoration-scale-x: 1; --header-link-decoration-transform-origin: bottom center; + + align-self: stretch; // 1. } .HeaderLink--current { diff --git a/packages/web/src/scss/components/Header/_HeaderNav.scss b/packages/web/src/scss/components/Header/_HeaderNav.scss index cc576bd592..931805955d 100644 --- a/packages/web/src/scss/components/Header/_HeaderNav.scss +++ b/packages/web/src/scss/components/Header/_HeaderNav.scss @@ -1,5 +1,6 @@ .HeaderNav { display: flex; align-self: stretch; + margin-bottom: 0; list-style: none; } diff --git a/packages/web/src/scss/components/Header/_HeaderNavItem.scss b/packages/web/src/scss/components/Header/_HeaderNavItem.scss index c61fc26ae4..40abfe4500 100644 --- a/packages/web/src/scss/components/Header/_HeaderNavItem.scss +++ b/packages/web/src/scss/components/Header/_HeaderNavItem.scss @@ -1,3 +1,6 @@ +// 1. By default, align everything to center vertically. + .HeaderNavItem { display: flex; + align-items: center; // 1. } diff --git a/packages/web/src/scss/components/Header/_tools.scss b/packages/web/src/scss/components/Header/_tools.scss index d264136e31..4fcc61cc45 100644 --- a/packages/web/src/scss/components/Header/_tools.scss +++ b/packages/web/src/scss/components/Header/_tools.scss @@ -7,7 +7,6 @@ display: flex; align-items: center; justify-content: flex-start; - width: 100%; padding: var(--header-link-padding-y, #{theme.$header-link-padding-y}) var(--header-link-padding-x, #{theme.$header-link-padding-x}); color: theme.$header-link-color; diff --git a/packages/web/src/scss/components/Header/index.html b/packages/web/src/scss/components/Header/index.html index c8ce78fe48..eef0b6a2ac 100644 --- a/packages/web/src/scss/components/Header/index.html +++ b/packages/web/src/scss/components/Header/index.html @@ -214,23 +214,25 @@

Inverted Header with Actions and Header Dialog

-