Header: add overflow (#4768)

* add overflow to Header

* Create moody-rivers-impress.md

Author: siddharthkp

.changeset/moody-rivers-impress.md

@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+Header: Add overflow when there are a lot of items

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>
+)

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};
 `