Feat(web-react): Allow combining links and buttons in `HeaderDesktopA…

…ctions`
lmc-eu · Nov 7, 2023 · 1f5e4ae · 1f5e4ae
1 parent 5ba5ff1
commit 1f5e4ae
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 15 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,6 +206,18 @@ Both links and buttons are supported:
 </HeaderNav>
 ```
 
+#### 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
+<HeaderDesktopActions color="secondary">
+  <HeaderButton>Marian</HeaderButton>
+  <Button color="primary">Sign in</Button>
+</HeaderDesktopActions>
+```
+
 ##### HeaderNav API
 
 | Name               | Type            | Default | Required | Description       |

diff --git a/packages/web-react/src/components/Header/demo/HeaderInvertedWithActionsAndDialog.tsx b/packages/web-react/src/components/Header/demo/HeaderInvertedWithActionsAndDialog.tsx
@@ -1,5 +1,8 @@
 import React, { useState } from 'react';
+import { Button } from '../../Button';
+import { Icon } from '../../Icon';
 import { Link } from '../../Link';
+import { VisuallyHidden } from '../../VisuallyHidden';
 import {
   Header,
   HeaderButton,
@@ -56,18 +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>
-          </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}>