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

lmc-eu · Nov 7, 2023 · fdb4144 · fdb4144
1 parent f2d0ee0
commit fdb4144
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 27 deletions.
diff --git a/packages/web-react/src/components/Header/README.md b/packages/web-react/src/components/Header/README.md
@@ -133,9 +133,11 @@ The component implements the [`HTMLElement`][mdn-api-html-element] interface.
 
 ### Desktop-Only Actions
 
-As the name suggests, desktop-only actions are intended to display only on
-desktop screens. There are two slots to use: primary actions (aligned to the
-left in LTR documents) and secondary actions (aligned to the 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
@@ -204,14 +206,16 @@ Both links and buttons are supported:
 </HeaderNav>
 ```
 
-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:
 
 ```jsx
-<HeaderNav>
-  <HeaderNavItem>
-    <ButtonLink href="/login">Sign in</ButtonLink>
-  </HeaderNavItem>
-</HeaderNav>
+<HeaderDesktopActions color="secondary">
+  <HeaderButton>Marian</HeaderButton>
+  <Button color="primary">Sign in</Button>
+</HeaderDesktopActions>
 ```
 
 ##### HeaderNav API

diff --git a/packages/web-react/src/components/Header/demo/HeaderInvertedWithActionsAndDialog.tsx b/packages/web-react/src/components/Header/demo/HeaderInvertedWithActionsAndDialog.tsx
@@ -59,24 +59,18 @@ const HeaderInvertedWithActionsAndDialog = () => {
             </HeaderNavItem>
           </HeaderNav>
         </HeaderDesktopActions>
-        <HeaderDesktopActions color="secondary" aria-label="User area">
-          <HeaderNav>
-            <HeaderNavItem>
-              <HeaderButton
-                onClick={handleUserMenuOpen}
-                aria-controls="header_dialog_example_2"
-                aria-expanded={isUserMenuOpen}
-              >
-                Marian
-              </HeaderButton>
-            </HeaderNavItem>
-            <HeaderNavItem>
-              <Button color="inverted" isSquare UNSAFE_className="ml-700">
-                <Icon name="search" />
-                <VisuallyHidden>Search</VisuallyHidden>
-              </Button>
-            </HeaderNavItem>
-          </HeaderNav>
+        <HeaderDesktopActions color="secondary">
+          <HeaderButton
+            onClick={handleUserMenuOpen}
+            aria-controls="header_dialog_example_2"
+            aria-expanded={isUserMenuOpen}
+          >
+            Marian
+          </HeaderButton>
+          <Button color="inverted" isSquare>
+            <Icon name="search" />
+            <VisuallyHidden>Search</VisuallyHidden>
+          </Button>
         </HeaderDesktopActions>
       </Header>
       <HeaderDialog id="header_dialog_example_1" aria-label="Menu" isOpen={isMenuOpen} onClose={handleMenuClose}>