Skip to content

Commit 32febac

Browse files
joshblackfrancinelucca
joshblack
and
francinelucca
authored
feat(Header): remove support for sx prop (#6839)
Co-authored-by: Marie Lucca <40550942+francinelucca@users.noreply.github.com>
1 parent 6843040 commit 32febac

File tree

12 files changed

+93
-80
lines changed

12 files changed

+93
-80
lines changed

‎.changeset/twelve-sloths-flow.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'@primer/react': major
3+
---
4+
5+
Remove support for `sx` from `Header`

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

Lines changed: 1 addition & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@ import {MarkGithubIcon} from '@primer/octicons-react'
33

44
import Header from './Header'
55
import Avatar from '../Avatar'
6-
import Octicon from '../Octicon'
76

87
import classes from './Header.dev.module.css'
98

@@ -16,7 +15,7 @@ export const WithCss = () => (
1615
<Header className={classes.HeaderDev}>
1716
<Header.Item id="github">
1817
<Header.Link href="#" className={classes.HeaderDevLink}>
19-
<Octicon icon={MarkGithubIcon} size={32} sx={{mr: 2}} />
18+
<MarkGithubIcon className={classes.Icon} size={32} />
2019
<span>GitHub</span>
2120
</Header.Link>
2221
</Header.Item>
@@ -26,33 +25,3 @@ export const WithCss = () => (
2625
</Header.Item>
2726
</Header>
2827
)
29-
30-
export const WithSx = () => (
31-
<Header sx={{backgroundColor: 'blue', color: 'white'}}>
32-
<Header.Item id="github">
33-
<Header.Link href="#" sx={{fontSize: 3}}>
34-
<Octicon icon={MarkGithubIcon} size={32} sx={{mr: 2}} />
35-
<span>GitHub</span>
36-
</Header.Link>
37-
</Header.Item>
38-
<Header.Item full>Menu</Header.Item>
39-
<Header.Item sx={{mr: 2}}>
40-
<Avatar src="https://github.com/octocat.png" size={20} square alt="@octocat" />
41-
</Header.Item>
42-
</Header>
43-
)
44-
45-
export const WithSxAndCSS = () => (
46-
<Header className={classes.HeaderDev} sx={{backgroundColor: 'orange', color: 'black'}}>
47-
<Header.Item id="github">
48-
<Header.Link href="#" className={classes.HeaderDevLink} sx={{p: 0, color: 'black'}}>
49-
<Octicon icon={MarkGithubIcon} size={32} sx={{mr: 2}} />
50-
<span>GitHub</span>
51-
</Header.Link>
52-
</Header.Item>
53-
<Header.Item full>Menu</Header.Item>
54-
<Header.Item className={classes.HeaderDevItem} sx={{m: 0}}>
55-
<Avatar src="https://github.com/octocat.png" size={20} square alt="@octocat" />
56-
</Header.Item>
57-
</Header>
58-
)

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

Lines changed: 1 addition & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -5,13 +5,7 @@
55
"a11yReviewed": "2025-01-08",
66
"stories": [],
77
"importPath": "@primer/react",
8-
"props": [
9-
{
10-
"name": "sx",
11-
"type": "SystemStyleObject",
12-
"deprecated": true
13-
}
14-
],
8+
"props": [],
159
"subcomponents": [
1610
{
1711
"name": "Header.Item",
@@ -21,11 +15,6 @@
2115
"type": "string",
2216
"defaultValue": "",
2317
"description": "Stretches item to fill the available space"
24-
},
25-
{
26-
"name": "sx",
27-
"type": "SystemStyleObject",
28-
"deprecated": true
2918
}
3019
]
3120
},
@@ -42,11 +31,6 @@
4231
"name": "as",
4332
"type": "React.ElementType",
4433
"defaultValue": "\"a\""
45-
},
46-
{
47-
"name": "sx",
48-
"type": "SystemStyleObject",
49-
"deprecated": true
5034
}
5135
],
5236
"passthrough": {

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

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
.Logo {
2+
/* stylelint-disable-next-line primer/typography */
3+
font-size: var(--base-size-16);
4+
}
5+
6+
.Icon {
7+
margin-right: var(--base-size-8);
8+
}
9+
10+
.LastItem {
11+
margin-right: 0;
12+
}

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

Lines changed: 7 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,8 @@
11
import type {Meta} from '@storybook/react-vite'
2-
3-
import Header from './Header'
4-
import Avatar from '../Avatar'
5-
import Octicon from '../Octicon'
62
import {MarkGithubIcon} from '@primer/octicons-react'
3+
import Avatar from '../Avatar'
4+
import Header from './Header'
5+
import classes from './Header.features.stories.module.css'
76

87
export default {
98
title: 'Components/Header/Features',
@@ -14,7 +13,7 @@ export const WithFullSizeItem = () => (
1413
<Header>
1514
<Header.Item>Item 1</Header.Item>
1615
<Header.Item full>Item 2</Header.Item>
17-
<Header.Item sx={{mr: 0}}>Item 3</Header.Item>
16+
<Header.Item className={classes.LastItem}>Item 3</Header.Item>
1817
</Header>
1918
)
2019

@@ -35,8 +34,8 @@ export const WithLinks = () => (
3534
export const WithManyItems = () => (
3635
<Header>
3736
<Header.Item>
38-
<Header.Link href="#" sx={{fontSize: 2}}>
39-
<Octicon icon={MarkGithubIcon} size={32} sx={{mr: 2}} />
37+
<Header.Link className={classes.Logo} href="#">
38+
<MarkGithubIcon className={classes.Icon} size={32} />
4039
<span>GitHub</span>
4140
</Header.Link>
4241
</Header.Item>
@@ -50,7 +49,7 @@ export const WithManyItems = () => (
5049
<Header.Item>Item</Header.Item>
5150
<Header.Item>Item</Header.Item>
5251
<Header.Item>Item</Header.Item>
53-
<Header.Item sx={{mr: 0}}>
52+
<Header.Item className={classes.LastItem}>
5453
<Avatar src="https://github.com/octocat.png" size={20} square alt="@octocat" />
5554
</Header.Item>
5655
</Header>

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

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
.HeaderLink {
2+
/* stylelint-disable-next-line primer/typography */
3+
font-size: var(--base-size-16);
4+
}
5+
6+
.AvatarContainer {
7+
margin-right: 0;
8+
}
9+
10+
.Icon {
11+
margin-right: var(--base-size-8);
12+
}

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

Lines changed: 7 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,8 @@
11
import type {Meta, StoryFn} from '@storybook/react-vite'
22
import {MarkGithubIcon} from '@primer/octicons-react'
3-
43
import Header from './Header'
54
import Avatar from '../Avatar'
6-
import Octicon from '../Octicon'
5+
import classes from './Header.stories.module.css'
76

87
export default {
98
title: 'Components/Header',
@@ -13,13 +12,13 @@ export default {
1312
export const Default = () => (
1413
<Header>
1514
<Header.Item>
16-
<Header.Link href="#" sx={{fontSize: 2}}>
17-
<Octicon icon={MarkGithubIcon} size={32} sx={{mr: 2}} />
15+
<Header.Link href="#" className={classes.HeaderLink}>
16+
<MarkGithubIcon className={classes.Icon} size={32} />
1817
<span>GitHub</span>
1918
</Header.Link>
2019
</Header.Item>
2120
<Header.Item full>Menu</Header.Item>
22-
<Header.Item sx={{mr: 0}}>
21+
<Header.Item className={classes.AvatarContainer}>
2322
<Avatar src="https://github.com/octocat.png" size={20} square alt="@octocat" />
2423
</Header.Item>
2524
</Header>
@@ -28,13 +27,13 @@ export const Default = () => (
2827
export const Playground: StoryFn<typeof Header> = args => (
2928
<Header {...args}>
3029
<Header.Item>
31-
<Header.Link href="#" sx={{fontSize: 2}}>
32-
<Octicon icon={MarkGithubIcon} size={32} sx={{mr: 2}} />
30+
<Header.Link className={classes.HeaderLink} href="#">
31+
<MarkGithubIcon className={classes.Icon} size={32} />
3332
<span>GitHub</span>
3433
</Header.Link>
3534
</Header.Item>
3635
<Header.Item full>Menu</Header.Item>
37-
<Header.Item sx={{mr: 0}}>
36+
<Header.Item className={classes.AvatarContainer}>
3837
<Avatar src="https://github.com/octocat.png" size={20} square alt="@octocat" />
3938
</Header.Item>
4039
</Header>

‎packages/react/src/Header/Header.tsx‎

Lines changed: 11 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,21 @@
11
import type {Location, Pathname} from 'history'
2-
import type {SxProp} from '../sx'
32
import React from 'react'
43
import {clsx} from 'clsx'
54
import classes from './Header.module.css'
65
import type {ForwardRefComponent as PolymorphicForwardRefComponent} from '../utils/polymorphic'
7-
import {BoxWithFallback} from '../internal/components/BoxWithFallback'
86

9-
export type HeaderProps = React.ComponentProps<'header'> & SxProp & {as?: React.ElementType}
10-
export type HeaderItemProps = React.ComponentProps<'div'> & SxProp & {full?: boolean}
11-
export type HeaderLinkProps = React.ComponentProps<'a'> & SxProp & {to?: Location | Pathname; as?: React.ElementType}
7+
export type HeaderProps = React.ComponentProps<'header'> & {as?: React.ElementType}
8+
export type HeaderItemProps = React.ComponentProps<'div'> & {full?: boolean}
9+
export type HeaderLinkProps = React.ComponentProps<'a'> & {to?: Location | Pathname; as?: React.ElementType}
1210

1311
const Header = React.forwardRef<HTMLElement, HeaderProps>(function Header(
14-
{children, className, as = 'header', ...rest},
12+
{as: BaseComponent = 'header', children, className, ...rest},
1513
forwardRef,
1614
) {
1715
return (
18-
<BoxWithFallback as={as} ref={forwardRef} className={clsx(className, classes.Header)} {...rest}>
16+
<BaseComponent ref={forwardRef} className={clsx(className, classes.Header)} {...rest}>
1917
{children}
20-
</BoxWithFallback>
18+
</BaseComponent>
2119
)
2220
}) as PolymorphicForwardRefComponent<'header', HeaderProps>
2321

@@ -28,22 +26,22 @@ const HeaderItem = React.forwardRef<HTMLDivElement, HeaderItemProps>(function He
2826
forwardRef,
2927
) {
3028
return (
31-
<BoxWithFallback ref={forwardRef} className={clsx(className, classes.HeaderItem)} data-full={full} {...rest}>
29+
<div ref={forwardRef} className={clsx(className, classes.HeaderItem)} data-full={full} {...rest}>
3230
{children}
33-
</BoxWithFallback>
31+
</div>
3432
)
3533
})
3634

3735
HeaderItem.displayName = 'Header.Item'
3836

3937
const HeaderLink = React.forwardRef<HTMLAnchorElement, HeaderLinkProps>(function HeaderLink(
40-
{children, className, as = 'a', ...rest},
38+
{children, className, as: BaseComponent = 'a', ...rest},
4139
forwardRef,
4240
) {
4341
return (
44-
<BoxWithFallback as={as} ref={forwardRef} className={clsx(className, classes.HeaderLink)} {...rest}>
42+
<BaseComponent ref={forwardRef} className={clsx(className, classes.HeaderLink)} {...rest}>
4543
{children}
46-
</BoxWithFallback>
44+
</BaseComponent>
4745
)
4846
})
4947

‎packages/styled-react/rollup.config.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ export default defineConfig({
2121
tsconfig: 'tsconfig.build.json',
2222
}),
2323
babel({
24-
presets: ['@babel/preset-typescript', '@babel/preset-react'],
24+
presets: ['@babel/preset-typescript', ['@babel/preset-react', {runtime: 'automatic'}]],
2525
extensions: ['.ts', '.tsx'],
2626
babelHelpers: 'bundled',
2727
}),

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export {Box, type BoxProps} from '@primer/react'

0 commit comments

Comments
 (0)