Skip to content

Commit eaf7e58

Browse files
chore: remove sx from Overlay (#6865)
1 parent 628e601 commit eaf7e58

File tree

10 files changed

+86
-76
lines changed

10 files changed

+86
-76
lines changed

.changeset/lazy-gifts-join.md

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
---
2+
"@primer/react": major
3+
"@primer/styled-react": patch
4+
---
5+
6+
chore: remove sx from Overlay

e2e/components/Overlay.test.ts

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -39,10 +39,6 @@ const stories = [
3939
title: 'Positioned Overlays',
4040
id: 'private-components-overlay-features--positioned-overlays',
4141
},
42-
{
43-
title: 'SX Props',
44-
id: 'private-components-overlay-dev--sx-props',
45-
},
4642
] as const
4743

4844
test.describe('Overlay ', () => {

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

Lines changed: 0 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@ import type {Args, Meta} from '@storybook/react-vite'
33
import Text from '../Text'
44
import {Button, IconButton} from '../Button'
55
import Overlay from './Overlay'
6-
import {useFocusTrap} from '../hooks/useFocusTrap'
76
import {XIcon} from '@primer/octicons-react'
87
import classes from './Overlay.dev.stories.module.css'
98

@@ -21,62 +20,6 @@ export default {
2120
},
2221
} as Meta<typeof Overlay>
2322

24-
export const SxProps = (args: Args) => {
25-
const [isOpen, setIsOpen] = useState(false)
26-
const buttonRef = useRef<HTMLButtonElement>(null)
27-
const confirmButtonRef = useRef<HTMLButtonElement>(null)
28-
const anchorRef = useRef<HTMLDivElement>(null)
29-
const closeOverlay = () => setIsOpen(false)
30-
const containerRef = useRef<HTMLDivElement>(null)
31-
useFocusTrap({
32-
containerRef,
33-
disabled: !isOpen,
34-
})
35-
return (
36-
<div ref={anchorRef}>
37-
<Button
38-
ref={buttonRef}
39-
onClick={() => {
40-
setIsOpen(!isOpen)
41-
}}
42-
>
43-
Open overlay
44-
</Button>
45-
{isOpen || args.open ? (
46-
<Overlay
47-
initialFocusRef={confirmButtonRef}
48-
returnFocusRef={buttonRef}
49-
ignoreClickRefs={[buttonRef]}
50-
onEscape={closeOverlay}
51-
onClickOutside={closeOverlay}
52-
width="large"
53-
anchorSide="inside-right"
54-
role="dialog"
55-
aria-modal="true"
56-
aria-label="Sample overlay"
57-
ref={containerRef}
58-
sx={{
59-
left: '50%',
60-
mt: 2,
61-
color: 'var(--bgColor-danger-muted)',
62-
}}
63-
>
64-
<div className={classes.OverlayContent}>
65-
<IconButton
66-
aria-label="Close"
67-
onClick={closeOverlay}
68-
icon={XIcon}
69-
variant="invisible"
70-
className={classes.CloseButton}
71-
/>
72-
<Text>Look! an overlay</Text>
73-
</div>
74-
</Overlay>
75-
) : null}
76-
</div>
77-
)
78-
}
79-
8023
export const PreventFocusOnOpen = (args: Args) => {
8124
const [isOpen, setIsOpen] = useState(false)
8225
const openButtonRef = useRef<HTMLButtonElement>(null)

packages/react/src/Overlay/Overlay.docs.json

Lines changed: 0 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -146,11 +146,6 @@
146146
"description": "",
147147
"defaultValue": ""
148148
},
149-
{
150-
"name": "sx",
151-
"type": "SystemStyleObject",
152-
"deprecated": true
153-
},
154149
{
155150
"name": "responsiveVariant",
156151
"type": "'fullscreen'",

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -186,7 +186,7 @@ export const OverlayOnTopOfOverlay = ({anchorSide, role, open}: Args) => {
186186
onEscape={closeSecondaryOverlay}
187187
onClickOutside={closeSecondaryOverlay}
188188
width="small"
189-
sx={{top: '40px'}}
189+
style={{top: '40px'}}
190190
anchorSide={anchorSide}
191191
role={role}
192192
aria-modal={role === 'dialog' ? 'true' : undefined}

packages/react/src/Overlay/Overlay.tsx

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -6,15 +6,13 @@ import type {AriaRole, Merge} from '../utils/types'
66
import type {TouchOrMouseEvent} from '../hooks'
77
import {useOverlay} from '../hooks'
88
import Portal from '../Portal'
9-
import type {SxProp} from '../sx'
109
import {useRefObjectAsForwardedRef} from '../hooks/useRefObjectAsForwardedRef'
1110
import type {AnchorSide} from '@primer/behaviors'
1211
import {useTheme} from '../ThemeProvider'
1312
import type {ForwardRefComponent as PolymorphicForwardRefComponent} from '../utils/polymorphic'
1413
import {useFeatureFlag} from '../FeatureFlags'
1514
import classes from './Overlay.module.css'
1615
import {clsx} from 'clsx'
17-
import {BoxWithFallback} from '../internal/components/BoxWithFallback'
1816

1917
type StyledOverlayProps = {
2018
width?: keyof typeof widthMap
@@ -24,7 +22,7 @@ type StyledOverlayProps = {
2422
visibility?: 'visible' | 'hidden'
2523
overflow?: 'auto' | 'hidden' | 'scroll' | 'visible'
2624
style?: React.CSSProperties
27-
} & SxProp
25+
}
2826

2927
export const heightMap = {
3028
xsmall: '192px',
@@ -91,7 +89,7 @@ type OwnOverlayProps = Merge<StyledOverlayProps, BaseOverlayProps>
9189
* @param bottom Optional. Vertical bottom position of the overlay, relative to its closest positioned ancestor (often its `Portal`).
9290
* @param position Optional. Sets how an element is positioned in a document. Defaults to `absolute` positioning.
9391
*/
94-
export const BaseOverlay = React.forwardRef<HTMLDivElement, OwnOverlayProps>(
92+
export const BaseOverlay = React.forwardRef(
9593
(
9694
{
9795
visibility,
@@ -106,13 +104,13 @@ export const BaseOverlay = React.forwardRef<HTMLDivElement, OwnOverlayProps>(
106104
className,
107105
maxHeight,
108106
maxWidth,
107+
as: Component = 'div',
109108
...rest
110109
},
111110
forwardedRef,
112111
): ReactElement => {
113112
return (
114-
<BoxWithFallback
115-
as="div"
113+
<Component
116114
{...rest}
117115
ref={forwardedRef}
118116
style={
Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
import {ActionMenu as PrimerActionMenu, type SxProp} from '@primer/react'
2+
import {sx} from '../sx'
3+
import styled from 'styled-components'
4+
import type {ComponentProps} from 'react'
5+
6+
type ActionMenuOverlayProps = ComponentProps<typeof PrimerActionMenu.Overlay> & SxProp
7+
8+
const ActionMenuOverlay: React.ComponentType<ActionMenuOverlayProps> = styled(PrimerActionMenu.Overlay).withConfig({
9+
shouldForwardProp: prop => (prop as keyof ActionMenuOverlayProps) !== 'sx',
10+
})`
11+
${sx}
12+
`
13+
14+
export const ActionMenu: typeof PrimerActionMenu & {
15+
Button: typeof PrimerActionMenu.Button
16+
Anchor: typeof PrimerActionMenu.Anchor
17+
Overlay: typeof ActionMenuOverlay
18+
Divider: typeof PrimerActionMenu.Divider
19+
} = Object.assign(PrimerActionMenu, {
20+
Button: PrimerActionMenu.Button,
21+
Anchor: PrimerActionMenu.Anchor,
22+
Overlay: ActionMenuOverlay,
23+
Divider: PrimerActionMenu.Divider,
24+
})
Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
import {
2+
Autocomplete as PrimerAutocomplete,
3+
type AutocompleteOverlayProps as PrimerAutocompleteOverlayProps,
4+
} from '@primer/react'
5+
import {sx, type SxProp} from '../sx'
6+
import styled from 'styled-components'
7+
import type {ComponentProps} from 'react'
8+
9+
export type AutocompleteOverlayProps = PrimerAutocompleteOverlayProps & SxProp
10+
11+
const AutocompleteOverlay: React.ComponentType<AutocompleteOverlayProps> = styled(
12+
PrimerAutocomplete.Overlay,
13+
).withConfig({
14+
shouldForwardProp: prop => (prop as keyof AutocompleteOverlayProps) !== 'sx',
15+
})<AutocompleteOverlayProps>`
16+
${sx}
17+
`
18+
19+
interface AutocompleteExport {
20+
(props: ComponentProps<typeof PrimerAutocomplete>): React.ReactNode
21+
Context: typeof PrimerAutocomplete.Context
22+
Input: typeof PrimerAutocomplete.Input
23+
Menu: typeof PrimerAutocomplete.Menu
24+
Overlay: typeof AutocompleteOverlay
25+
}
26+
27+
const Autocomplete: AutocompleteExport = Object.assign(PrimerAutocomplete, {
28+
Context: PrimerAutocomplete.Context,
29+
Input: PrimerAutocomplete.Input,
30+
Menu: PrimerAutocomplete.Menu,
31+
Overlay: AutocompleteOverlay,
32+
})
33+
34+
export {Autocomplete}
Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import {Overlay as PrimerOverlay, type OverlayProps as PrimerOverlayProps, sx, type SxProp} from '@primer/react'
2+
import styled from 'styled-components'
3+
import {type ForwardRefComponent} from '../polymorphic'
4+
5+
type OverlayProps = PrimerOverlayProps & SxProp
6+
7+
const Overlay: ForwardRefComponent<'div', OverlayProps> = styled(PrimerOverlay).withConfig({
8+
shouldForwardProp: prop => (prop as keyof OverlayProps) !== 'sx',
9+
})<OverlayProps>`
10+
${sx}
11+
`
12+
13+
export {Overlay}
14+
export type {OverlayProps}

packages/styled-react/src/index.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,4 @@
11
export {ActionList} from '@primer/react'
2-
export {ActionMenu} from '@primer/react'
3-
export {Autocomplete} from '@primer/react'
42
export {Avatar} from '@primer/react'
53
export {Breadcrumbs} from '@primer/react'
64
export {Box, type BoxProps} from './components/Box'
@@ -9,7 +7,6 @@ export {CheckboxGroup} from '@primer/react'
97
export {Details} from '@primer/react'
108
export {IconButton} from '@primer/react'
119
export {Label} from '@primer/react'
12-
export {Overlay} from '@primer/react'
1310
export {ProgressBar} from '@primer/react'
1411
export {Select} from '@primer/react'
1512
export {Text} from '@primer/react'
@@ -28,6 +25,8 @@ export {themeGet} from '@primer/react'
2825
export {useColorSchemeVar} from '@primer/react'
2926
export {useTheme} from '@primer/react'
3027

28+
export {ActionMenu} from './components/ActionMenu'
29+
export {Autocomplete, type AutocompleteOverlayProps} from './components/Autocomplete'
3130
export {Checkbox, type CheckboxProps} from './components/Checkbox'
3231
export {CircleBadge} from './components/CircleBadge'
3332
export {CounterLabel, type CounterLabelProps} from './components/CounterLabel'
@@ -39,6 +38,7 @@ export {Heading} from './components/Heading'
3938
export {Link, type LinkProps} from './components/Link'
4039
export {LinkButton, type LinkButtonProps} from './components/LinkButton'
4140
export {NavList, type NavListProps} from './components/NavList'
41+
export {Overlay} from './components/Overlay'
4242
export {PageLayout, type PageLayoutProps} from './components/PageLayout'
4343
export {
4444
PageHeader,

0 commit comments

Comments
 (0)