fixup! Feat(web): Allow custom content inside HeaderNavItem

lmc-eu · Nov 7, 2023 · ba0d335 · ba0d335
1 parent 787d13d
commit ba0d335
Show file tree

Hide file tree

Showing 6 changed files with 34 additions and 33 deletions.
diff --git 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,14 +211,16 @@ Both links and buttons are supported by `HeaderLink` class:
 </ul>
 ```
 
-Finally, you can put any custom content inside `HeaderNavItem`:
+#### 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
-<ul class="HeaderNav">
-  <li class="HeaderNavItem">
-    <a href="#" class="Button Button--primary Button--medium">Sign in</a>
-  </li>
-</ul>
+<nav class="HeaderDesktopActions HeaderDesktopActions--secondary">
+  <a href="#" class="HeaderLink">Marian</a>
+  <a href="#" class="Button Button--primary Button--medium">Sign in</a>
+</nav>
 ```
 
 ## Header Dialog

diff --git 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
@@ -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/_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/_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
@@ -214,31 +214,25 @@ <h2 class="docs-Heading">Inverted Header with Actions and Header Dialog</h2>
       <!-- HeaderDesktopActions: end -->
 
       <!-- HeaderDesktopActions: start -->
-      <nav class="HeaderDesktopActions HeaderDesktopActions--secondary" aria-label="User area">
+      <nav class="HeaderDesktopActions HeaderDesktopActions--secondary">
 
         <!-- HeaderNav: start -->
-        <ul class="HeaderNav">
-          <li class="HeaderNavItem">
-            <button
-              type="button"
-              class="HeaderLink"
-              data-spirit-toggle="offcanvas"
-              data-spirit-target="#header_dialog_example_2_user_menu"
-              aria-controls="header_dialog_example_2_user_menu"
-              aria-expanded="false"
-            >
-              Marian
-            </button>
-          </li>
-          <li class="HeaderNavItem">
-            <button type="button" class="Button Button--inverted Button--square Button--medium ml-700">
-              <svg width="24" height="24" aria-hidden="true">
-                <use xlink:href="/icons/svg/sprite.svg#search" />
-              </svg>
-              <span class="accessibility-hidden">Search</span>
-            </button>
-          </li>
-        </ul>
+        <button
+          type="button"
+          class="HeaderLink"
+          data-spirit-toggle="offcanvas"
+          data-spirit-target="#header_dialog_example_2_user_menu"
+          aria-controls="header_dialog_example_2_user_menu"
+          aria-expanded="false"
+        >
+          Marian
+        </button>
+        <button type="button" class="Button Button--inverted Button--square Button--medium">
+          <svg width="24" height="24" aria-hidden="true">
+            <use xlink:href="/icons/svg/sprite.svg#search" />
+          </svg>
+          <span class="accessibility-hidden">Search</span>
+        </button>
         <!-- HeaderNav: end -->
 
       </nav>