Header: add overflow (#4768)

* add overflow to Header * Create moody-rivers-impress.md
primer · Aug 1, 2024 · b7c90ea · b7c90ea
1 parent 527f9a9
commit b7c90ea
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 0 deletions.
diff --git a/.changeset/moody-rivers-impress.md b/.changeset/moody-rivers-impress.md
@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+Header: Add overflow when there are a lot of items
diff --git a/packages/react/src/Header/Header.features.stories.tsx b/packages/react/src/Header/Header.features.stories.tsx
@@ -2,6 +2,9 @@ import React from 'react'
 import type {Meta} from '@storybook/react'
 
 import Header from './Header'
+import Avatar from '../Avatar'
+import Octicon from '../Octicon'
+import {MarkGithubIcon} from '@primer/octicons-react'
 
 export default {
   title: 'Components/Header/Features',
@@ -29,3 +32,27 @@ export const WithLinks = () => (
     </Header.Item>
   </Header>
 )
+
+export const WithManyItems = () => (
+  <Header>
+    <Header.Item>
+      <Header.Link href="#" sx={{fontSize: 2}}>
+        <Octicon icon={MarkGithubIcon} size={32} sx={{mr: 2}} />
+        <span>GitHub</span>
+      </Header.Link>
+    </Header.Item>
+    <Header.Item>Item</Header.Item>
+    <Header.Item>Item</Header.Item>
+    <Header.Item>Item</Header.Item>
+    <Header.Item>Item</Header.Item>
+    <Header.Item>Item</Header.Item>
+    <Header.Item>Item</Header.Item>
+    <Header.Item>Item</Header.Item>
+    <Header.Item>Item</Header.Item>
+    <Header.Item>Item</Header.Item>
+    <Header.Item>Item</Header.Item>
+    <Header.Item sx={{mr: 0}}>
+      <Avatar src="https://github.com/octocat.png" size={20} square alt="@octocat" />
+    </Header.Item>
+  </Header>
+)
diff --git a/packages/react/src/Header/Header.tsx b/packages/react/src/Header/Header.tsx
@@ -19,6 +19,7 @@ const Header = styled.header<StyledHeaderProps>`
   background-color: ${get('colors.header.bg')};
   align-items: center;
   flex-wrap: nowrap;
+  overflow: auto;
 
   ${sx};
 `