feat(Header): remove support for sx prop

.changeset/twelve-sloths-flow.md

@@ -0,0 +1,5 @@
+---
+'@primer/react': major
+---
+
+Remove support for `sx` from `Header`

packages/react/src/Header/Header.dev.stories.tsx

@@ -3,7 +3,6 @@ import {MarkGithubIcon} from '@primer/octicons-react'
 
 import Header from './Header'
 import Avatar from '../Avatar'
-import Octicon from '../Octicon'
 
 import classes from './Header.dev.module.css'
 
@@ -16,7 +15,7 @@ export const WithCss = () => (
   <Header className={classes.HeaderDev}>
     <Header.Item id="github">
       <Header.Link href="#" className={classes.HeaderDevLink}>
-        <Octicon icon={MarkGithubIcon} size={32} sx={{mr: 2}} />
+        <MarkGithubIcon className={classes.Icon} size={32} />
         <span>GitHub</span>
       </Header.Link>
     </Header.Item>
@@ -26,33 +25,3 @@ export const WithCss = () => (
     </Header.Item>
   </Header>
 )
-
-export const WithSx = () => (
-  <Header sx={{backgroundColor: 'blue', color: 'white'}}>
-    <Header.Item id="github">
-      <Header.Link href="#" sx={{fontSize: 3}}>
-        <Octicon icon={MarkGithubIcon} size={32} sx={{mr: 2}} />
-        <span>GitHub</span>
-      </Header.Link>
-    </Header.Item>
-    <Header.Item full>Menu</Header.Item>
-    <Header.Item sx={{mr: 2}}>
-      <Avatar src="https://github.com/octocat.png" size={20} square alt="@octocat" />
-    </Header.Item>
-  </Header>
-)
-
-export const WithSxAndCSS = () => (
-  <Header className={classes.HeaderDev} sx={{backgroundColor: 'orange', color: 'black'}}>
-    <Header.Item id="github">
-      <Header.Link href="#" className={classes.HeaderDevLink} sx={{p: 0, color: 'black'}}>
-        <Octicon icon={MarkGithubIcon} size={32} sx={{mr: 2}} />
-        <span>GitHub</span>
-      </Header.Link>
-    </Header.Item>
-    <Header.Item full>Menu</Header.Item>
-    <Header.Item className={classes.HeaderDevItem} sx={{m: 0}}>
-      <Avatar src="https://github.com/octocat.png" size={20} square alt="@octocat" />
-    </Header.Item>
-  </Header>
-)

packages/react/src/Header/Header.docs.json

@@ -5,13 +5,7 @@
   "a11yReviewed": "2025-01-08",
   "stories": [],
   "importPath": "@primer/react",
-  "props": [
-    {
-      "name": "sx",
-      "type": "SystemStyleObject",
-      "deprecated": true
-    }
-  ],
+  "props": [],
   "subcomponents": [
     {
       "name": "Header.Item",
@@ -21,11 +15,6 @@
           "type": "string",
           "defaultValue": "",
           "description": "Stretches item to fill the available space"
-        },
-        {
-          "name": "sx",
-          "type": "SystemStyleObject",
-          "deprecated": true
         }
       ]
     },
@@ -42,11 +31,6 @@
           "name": "as",
           "type": "React.ElementType",
           "defaultValue": "\"a\""
-        },
-        {
-          "name": "sx",
-          "type": "SystemStyleObject",
-          "deprecated": true
         }
       ],
       "passthrough": {

packages/react/src/Header/Header.features.stories.module.css

@@ -0,0 +1,12 @@
+.Logo {
+  /* stylelint-disable-next-line primer/typography */
+  font-size: var(--base-size-16);
+}
+
+.Icon {
+  margin-right: var(--base-size-8);
+}
+
+.LastItem {
+  margin-right: 0;
+}

packages/react/src/Header/Header.features.stories.tsx

@@ -1,9 +1,8 @@
 import type {Meta} from '@storybook/react-vite'
-
-import Header from './Header'
-import Avatar from '../Avatar'
-import Octicon from '../Octicon'
 import {MarkGithubIcon} from '@primer/octicons-react'
+import Avatar from '../Avatar'
+import Header from './Header'
+import classes from './Header.features.stories.module.css'
 
 export default {
   title: 'Components/Header/Features',
@@ -14,7 +13,7 @@ export const WithFullSizeItem = () => (
   <Header>
     <Header.Item>Item 1</Header.Item>
     <Header.Item full>Item 2</Header.Item>
-    <Header.Item sx={{mr: 0}}>Item 3</Header.Item>
+    <Header.Item className={classes.LastItem}>Item 3</Header.Item>
   </Header>
 )
 
@@ -35,8 +34,8 @@ export const WithLinks = () => (
 export const WithManyItems = () => (
   <Header>
     <Header.Item>
-      <Header.Link href="#" sx={{fontSize: 2}}>
-        <Octicon icon={MarkGithubIcon} size={32} sx={{mr: 2}} />
+      <Header.Link className={classes.Logo} href="#">
+        <MarkGithubIcon className={classes.Icon} size={32} />
         <span>GitHub</span>
       </Header.Link>
     </Header.Item>
@@ -50,7 +49,7 @@ export const WithManyItems = () => (
     <Header.Item>Item</Header.Item>
     <Header.Item>Item</Header.Item>
     <Header.Item>Item</Header.Item>
-    <Header.Item sx={{mr: 0}}>
+    <Header.Item className={classes.LastItem}>
       <Avatar src="https://github.com/octocat.png" size={20} square alt="@octocat" />
     </Header.Item>
   </Header>

packages/react/src/Header/Header.stories.module.css

@@ -0,0 +1,12 @@
+.HeaderLink {
+  /* stylelint-disable-next-line primer/typography */
+  font-size: var(--base-size-16);
+}
+
+.AvatarContainer {
+  margin-right: 0;
+}
+
+.Icon {
+  margin-right: var(--base-size-8);
+}

packages/react/src/Header/Header.stories.tsx

@@ -1,9 +1,8 @@
 import type {Meta, StoryFn} from '@storybook/react-vite'
 import {MarkGithubIcon} from '@primer/octicons-react'
-
 import Header from './Header'
 import Avatar from '../Avatar'
-import Octicon from '../Octicon'
+import classes from './Header.stories.module.css'
 
 export default {
   title: 'Components/Header',
@@ -13,13 +12,13 @@ export default {
 export const Default = () => (
   <Header>
     <Header.Item>
-      <Header.Link href="#" sx={{fontSize: 2}}>
-        <Octicon icon={MarkGithubIcon} size={32} sx={{mr: 2}} />
+      <Header.Link href="#" className={classes.HeaderLink}>
+        <MarkGithubIcon className={classes.Icon} size={32} />
         <span>GitHub</span>
       </Header.Link>
     </Header.Item>
     <Header.Item full>Menu</Header.Item>
-    <Header.Item sx={{mr: 0}}>
+    <Header.Item className={classes.AvatarContainer}>
       <Avatar src="https://github.com/octocat.png" size={20} square alt="@octocat" />
     </Header.Item>
   </Header>
@@ -28,13 +27,13 @@ export const Default = () => (
 export const Playground: StoryFn<typeof Header> = args => (
   <Header {...args}>
     <Header.Item>
-      <Header.Link href="#" sx={{fontSize: 2}}>
-        <Octicon icon={MarkGithubIcon} size={32} sx={{mr: 2}} />
+      <Header.Link className={classes.HeaderLink} href="#">
+        <MarkGithubIcon className={classes.Icon} size={32} />
         <span>GitHub</span>
       </Header.Link>
     </Header.Item>
     <Header.Item full>Menu</Header.Item>
-    <Header.Item sx={{mr: 0}}>
+    <Header.Item className={classes.AvatarContainer}>
       <Avatar src="https://github.com/octocat.png" size={20} square alt="@octocat" />
     </Header.Item>
   </Header>

packages/react/src/Header/Header.tsx

@@ -1,23 +1,21 @@
 import type {Location, Pathname} from 'history'
-import type {SxProp} from '../sx'
 import React from 'react'
 import {clsx} from 'clsx'
 import classes from './Header.module.css'
 import type {ForwardRefComponent as PolymorphicForwardRefComponent} from '../utils/polymorphic'
-import {BoxWithFallback} from '../internal/components/BoxWithFallback'
 
-export type HeaderProps = React.ComponentProps<'header'> & SxProp & {as?: React.ElementType}
-export type HeaderItemProps = React.ComponentProps<'div'> & SxProp & {full?: boolean}
-export type HeaderLinkProps = React.ComponentProps<'a'> & SxProp & {to?: Location | Pathname; as?: React.ElementType}
+export type HeaderProps = React.ComponentProps<'header'> & {as?: React.ElementType}
+export type HeaderItemProps = React.ComponentProps<'div'> & {full?: boolean}
+export type HeaderLinkProps = React.ComponentProps<'a'> & {to?: Location | Pathname; as?: React.ElementType}
 
 const Header = React.forwardRef<HTMLElement, HeaderProps>(function Header(
-  {children, className, as = 'header', ...rest},
+  {as: BaseComponent = 'header', children, className, ...rest},
   forwardRef,
 ) {
   return (
-    <BoxWithFallback as={as} ref={forwardRef} className={clsx(className, classes.Header)} {...rest}>
+    <BaseComponent ref={forwardRef} className={clsx(className, classes.Header)} {...rest}>
       {children}
-    </BoxWithFallback>
+    </BaseComponent>
   )
 }) as PolymorphicForwardRefComponent<'header', HeaderProps>
 
@@ -28,22 +26,22 @@ const HeaderItem = React.forwardRef<HTMLDivElement, HeaderItemProps>(function He
   forwardRef,
 ) {
   return (
-    <BoxWithFallback ref={forwardRef} className={clsx(className, classes.HeaderItem)} data-full={full} {...rest}>
+    <div ref={forwardRef} className={clsx(className, classes.HeaderItem)} data-full={full} {...rest}>
       {children}
-    </BoxWithFallback>
+    </div>
   )
 })
 
 HeaderItem.displayName = 'Header.Item'
 
 const HeaderLink = React.forwardRef<HTMLAnchorElement, HeaderLinkProps>(function HeaderLink(
-  {children, className, as = 'a', ...rest},
+  {children, className, as: BaseComponent = 'a', ...rest},
   forwardRef,
 ) {
   return (
-    <BoxWithFallback as={as} ref={forwardRef} className={clsx(className, classes.HeaderLink)} {...rest}>
+    <BaseComponent ref={forwardRef} className={clsx(className, classes.HeaderLink)} {...rest}>
       {children}
-    </BoxWithFallback>
+    </BaseComponent>
   )
 })
 

packages/styled-react/rollup.config.js

@@ -21,7 +21,7 @@ export default defineConfig({
       tsconfig: 'tsconfig.build.json',
     }),
     babel({
-      presets: ['@babel/preset-typescript', '@babel/preset-react'],
+      presets: ['@babel/preset-typescript', ['@babel/preset-react', {runtime: 'automatic'}]],
       extensions: ['.ts', '.tsx'],
       babelHelpers: 'bundled',
     }),

packages/styled-react/src/components/Box.tsx

@@ -0,0 +1 @@
+export {Box, type BoxProps} from '@primer/react'

packages/styled-react/src/components/Header.tsx

@@ -0,0 +1,33 @@
+import {
+  type HeaderProps as PrimerHeaderProps,
+  type HeaderItemProps as PrimerHeaderItemProps,
+  type HeaderLinkProps as PrimerHeaderLinkProps,
+  Header as PrimerHeader,
+} from '@primer/react'
+import {forwardRef} from 'react'
+import {Box} from './Box'
+import type {ForwardRefComponent} from '../polymorphic'
+import type {SxProp} from '../sx'
+
+type HeaderProps = PrimerHeaderProps & SxProp
+
+const HeaderImpl = forwardRef(function Header(props, ref) {
+  return <Box as={PrimerHeader} ref={ref} {...props} />
+}) as ForwardRefComponent<'header', HeaderProps>
+
+type HeaderItemProps = PrimerHeaderItemProps & SxProp
+
+const HeaderItem = forwardRef<HTMLDivElement, HeaderItemProps>(function HeaderItem(props, ref) {
+  return <Box as={PrimerHeader.Item} ref={ref} {...props} />
+})
+
+const HeaderLink = forwardRef<HTMLAnchorElement, PrimerHeaderLinkProps>(function HeaderLink(props, ref) {
+  return <Box as={PrimerHeader.Link} ref={ref} {...props} />
+})
+
+const Header = Object.assign(HeaderImpl, {
+  Item: HeaderItem,
+  Link: HeaderLink,
+})
+
+export {Header, type HeaderProps}

packages/styled-react/src/index.tsx

@@ -189,6 +189,8 @@ const UnderlineNav = Object.assign(UnderlineNavImpl, {
   Item: UnderlineNavItem,
 })
 
+export {Header, type HeaderProps} from './components/Header'
+
 export {Flash} from './components/Flash'
 
 export {
@@ -217,7 +219,6 @@ export {
   Details,
   Dialog,
   FormControl,
-  Header,
   Heading,
   IconButton,
   Label,