From 1a2a6920ed17ddfaa80d7cb59751bdcd5e8fe587 Mon Sep 17 00:00:00 2001 From: Marie Lucca Date: Tue, 16 Sep 2025 23:43:36 -0400 Subject: [PATCH 1/8] chore: remove sx from Overlay --- e2e/components/Overlay.test.ts | 4 -- .../react/src/Overlay/Overlay.dev.stories.tsx | 56 ------------------- packages/react/src/Overlay/Overlay.docs.json | 5 -- packages/react/src/Overlay/Overlay.tsx | 7 +-- packages/styled-react/src/index.tsx | 8 ++- 5 files changed, 9 insertions(+), 71 deletions(-) diff --git a/e2e/components/Overlay.test.ts b/e2e/components/Overlay.test.ts index b9f36ba62ed..556db3c4a10 100644 --- a/e2e/components/Overlay.test.ts +++ b/e2e/components/Overlay.test.ts @@ -39,10 +39,6 @@ const stories = [ title: 'Positioned Overlays', id: 'private-components-overlay-features--positioned-overlays', }, - { - title: 'SX Props', - id: 'private-components-overlay-dev--sx-props', - }, ] as const test.describe('Overlay ', () => { diff --git a/packages/react/src/Overlay/Overlay.dev.stories.tsx b/packages/react/src/Overlay/Overlay.dev.stories.tsx index 624f920320f..3d8a1b678a4 100644 --- a/packages/react/src/Overlay/Overlay.dev.stories.tsx +++ b/packages/react/src/Overlay/Overlay.dev.stories.tsx @@ -21,62 +21,6 @@ export default { }, } as Meta -export const SxProps = (args: Args) => { - const [isOpen, setIsOpen] = useState(false) - const buttonRef = useRef(null) - const confirmButtonRef = useRef(null) - const anchorRef = useRef(null) - const closeOverlay = () => setIsOpen(false) - const containerRef = useRef(null) - useFocusTrap({ - containerRef, - disabled: !isOpen, - }) - return ( -
- - {isOpen || args.open ? ( - -
- - Look! an overlay -
- - ) : null} -
- ) -} - export const PreventFocusOnOpen = (args: Args) => { const [isOpen, setIsOpen] = useState(false) const openButtonRef = useRef(null) diff --git a/packages/react/src/Overlay/Overlay.docs.json b/packages/react/src/Overlay/Overlay.docs.json index 18e76af6ba0..3c262d79be2 100644 --- a/packages/react/src/Overlay/Overlay.docs.json +++ b/packages/react/src/Overlay/Overlay.docs.json @@ -146,11 +146,6 @@ "description": "", "defaultValue": "" }, - { - "name": "sx", - "type": "SystemStyleObject", - "deprecated": true - }, { "name": "responsiveVariant", "type": "'fullscreen'", diff --git a/packages/react/src/Overlay/Overlay.tsx b/packages/react/src/Overlay/Overlay.tsx index aa9cfc1e374..c68cb6a3fc5 100644 --- a/packages/react/src/Overlay/Overlay.tsx +++ b/packages/react/src/Overlay/Overlay.tsx @@ -6,7 +6,6 @@ import type {AriaRole, Merge} from '../utils/types' import type {TouchOrMouseEvent} from '../hooks' import {useOverlay} from '../hooks' import Portal from '../Portal' -import type {SxProp} from '../sx' import {useRefObjectAsForwardedRef} from '../hooks/useRefObjectAsForwardedRef' import type {AnchorSide} from '@primer/behaviors' import {useTheme} from '../ThemeProvider' @@ -14,7 +13,6 @@ import type {ForwardRefComponent as PolymorphicForwardRefComponent} from '../uti import {useFeatureFlag} from '../FeatureFlags' import classes from './Overlay.module.css' import {clsx} from 'clsx' -import {BoxWithFallback} from '../internal/components/BoxWithFallback' type StyledOverlayProps = { width?: keyof typeof widthMap @@ -24,7 +22,7 @@ type StyledOverlayProps = { visibility?: 'visible' | 'hidden' overflow?: 'auto' | 'hidden' | 'scroll' | 'visible' style?: React.CSSProperties -} & SxProp +} export const heightMap = { xsmall: '192px', @@ -111,8 +109,7 @@ export const BaseOverlay = React.forwardRef( forwardedRef, ): ReactElement => { return ( - (function T return }) -export {SegmentedControl, StateLabel, SubNav, ToggleSwitch} +const BaseOverlay = forwardRef(function BaseOverlay(props, ref) { + return +}) + +export {SegmentedControl, StateLabel, SubNav, ToggleSwitch, BaseOverlay} export { ActionList, From 35585da66f6dc92f3c9d53ae101e6eca631ea390 Mon Sep 17 00:00:00 2001 From: Marie Lucca Date: Mon, 22 Sep 2025 22:04:27 -0400 Subject: [PATCH 2/8] add styled wrapper for Overlay --- packages/styled-react/src/components/Overlay.tsx | 14 ++++++++++++++ packages/styled-react/src/index.tsx | 5 ++--- 2 files changed, 16 insertions(+), 3 deletions(-) create mode 100644 packages/styled-react/src/components/Overlay.tsx diff --git a/packages/styled-react/src/components/Overlay.tsx b/packages/styled-react/src/components/Overlay.tsx new file mode 100644 index 00000000000..37b2103f466 --- /dev/null +++ b/packages/styled-react/src/components/Overlay.tsx @@ -0,0 +1,14 @@ +import {Overlay as PrimerOverlay, type OverlayProps as PrimerOverlayProps, sx, type SxProp} from '@primer/react' +import styled from 'styled-components' +import {type ForwardRefComponent} from '../polymorphic' + +type OverlayProps = PrimerOverlayProps & SxProp + +const Overlay: ForwardRefComponent<'div', OverlayProps> = styled(PrimerOverlay).withConfig({ + shouldForwardProp: prop => (prop as keyof OverlayProps) !== 'sx', +})` + ${sx} +` + +export {Overlay} +export type {OverlayProps} diff --git a/packages/styled-react/src/index.tsx b/packages/styled-react/src/index.tsx index 959667a24b4..d21815828fb 100644 --- a/packages/styled-react/src/index.tsx +++ b/packages/styled-react/src/index.tsx @@ -32,8 +32,6 @@ import { SegmentedControl as PrimerSegmentedControl, type SegmentedControlButtonProps as PrimerSegmentedControlButtonProps, type SegmentedControlIconButtonProps as PrimerSegmentedControlIconButtonProps, - Overlay as PrimerBaseOverlay, - type OverlayProps as BaseOverlayProps, UnderlineNav as PrimerUnderlineNav, type UnderlineNavProps as PrimerUnderlineNavProps, type UnderlineNavItemProps as PrimerUnderlineNavItemProps, @@ -258,6 +256,8 @@ export {Header, type HeaderProps} from './components/Header' export {Flash} from './components/Flash' +export {Overlay} from './components/Overlay' + export { Checkbox, CounterLabel, @@ -292,7 +292,6 @@ export { Label, Link, NavList, - Overlay, PageLayout, Select, Text, From 5220aa364407fa60f5d1922737445b561a7cb427 Mon Sep 17 00:00:00 2001 From: Marie Lucca Date: Mon, 22 Sep 2025 22:07:43 -0400 Subject: [PATCH 3/8] remove unused import --- packages/react/src/Overlay/Overlay.dev.stories.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/react/src/Overlay/Overlay.dev.stories.tsx b/packages/react/src/Overlay/Overlay.dev.stories.tsx index 3d8a1b678a4..55736b4e2b5 100644 --- a/packages/react/src/Overlay/Overlay.dev.stories.tsx +++ b/packages/react/src/Overlay/Overlay.dev.stories.tsx @@ -3,7 +3,6 @@ import type {Args, Meta} from '@storybook/react-vite' import Text from '../Text' import {Button, IconButton} from '../Button' import Overlay from './Overlay' -import {useFocusTrap} from '../hooks/useFocusTrap' import {XIcon} from '@primer/octicons-react' import classes from './Overlay.dev.stories.module.css' From 469a9a11ee6e3ad4d8b7487ac789be1ed02ca679 Mon Sep 17 00:00:00 2001 From: Marie Lucca <40550942+francinelucca@users.noreply.github.com> Date: Mon, 22 Sep 2025 22:09:21 -0400 Subject: [PATCH 4/8] Update changeset for Overlay component --- .changeset/lazy-gifts-join.md | 6 ++++++ 1 file changed, 6 insertions(+) create mode 100644 .changeset/lazy-gifts-join.md diff --git a/.changeset/lazy-gifts-join.md b/.changeset/lazy-gifts-join.md new file mode 100644 index 00000000000..348d4b11447 --- /dev/null +++ b/.changeset/lazy-gifts-join.md @@ -0,0 +1,6 @@ +--- +"@primer/react": patch +"@primer/styled-react": patch +--- + +chore: remove sx from Overlay From 6fb241f7f54ac169907f28bd5a0fa219117b251d Mon Sep 17 00:00:00 2001 From: Marie Lucca <40550942+francinelucca@users.noreply.github.com> Date: Mon, 22 Sep 2025 22:11:06 -0400 Subject: [PATCH 5/8] Update version for @primer/react to major --- .changeset/lazy-gifts-join.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.changeset/lazy-gifts-join.md b/.changeset/lazy-gifts-join.md index 348d4b11447..ad6f3278c95 100644 --- a/.changeset/lazy-gifts-join.md +++ b/.changeset/lazy-gifts-join.md @@ -1,5 +1,5 @@ --- -"@primer/react": patch +"@primer/react": major "@primer/styled-react": patch --- From b4a97d250ebe1db8b2c25b196a66721940534602 Mon Sep 17 00:00:00 2001 From: Marie Lucca Date: Mon, 22 Sep 2025 22:15:24 -0400 Subject: [PATCH 6/8] remove sx usage --- packages/react/src/Overlay/Overlay.features.stories.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react/src/Overlay/Overlay.features.stories.tsx b/packages/react/src/Overlay/Overlay.features.stories.tsx index 4b89797ea61..eca6b4752b2 100644 --- a/packages/react/src/Overlay/Overlay.features.stories.tsx +++ b/packages/react/src/Overlay/Overlay.features.stories.tsx @@ -186,7 +186,7 @@ export const OverlayOnTopOfOverlay = ({anchorSide, role, open}: Args) => { onEscape={closeSecondaryOverlay} onClickOutside={closeSecondaryOverlay} width="small" - sx={{top: '40px'}} + style={{top: '40px'}} anchorSide={anchorSide} role={role} aria-modal={role === 'dialog' ? 'true' : undefined} From 4e34144d17b74d3aa6fe6b67656de03c01b30fc3 Mon Sep 17 00:00:00 2001 From: Marie Lucca Date: Mon, 22 Sep 2025 22:37:00 -0400 Subject: [PATCH 7/8] fix --- .../src/components/ActionMenu.tsx | 24 +++++++++++++ .../src/components/Autocomplete.tsx | 34 +++++++++++++++++++ packages/styled-react/src/index.tsx | 6 ++-- 3 files changed, 62 insertions(+), 2 deletions(-) create mode 100644 packages/styled-react/src/components/ActionMenu.tsx create mode 100644 packages/styled-react/src/components/Autocomplete.tsx diff --git a/packages/styled-react/src/components/ActionMenu.tsx b/packages/styled-react/src/components/ActionMenu.tsx new file mode 100644 index 00000000000..dbb89ecf7b2 --- /dev/null +++ b/packages/styled-react/src/components/ActionMenu.tsx @@ -0,0 +1,24 @@ +import {ActionMenu as PrimerActionMenu, type SxProp} from '@primer/react' +import {sx} from '../sx' +import styled from 'styled-components' +import type {ComponentProps} from 'react' + +type ActionMenuOverlayProps = ComponentProps & SxProp + +const ActionMenuOverlay: React.ComponentType = styled(PrimerActionMenu.Overlay).withConfig({ + shouldForwardProp: prop => (prop as keyof ActionMenuOverlayProps) !== 'sx', +})` + ${sx} +` + +export const ActionMenu: typeof PrimerActionMenu & { + Button: typeof PrimerActionMenu.Button + Anchor: typeof PrimerActionMenu.Anchor + Overlay: typeof ActionMenuOverlay + Divider: typeof PrimerActionMenu.Divider +} = Object.assign(PrimerActionMenu, { + Button: PrimerActionMenu.Button, + Anchor: PrimerActionMenu.Anchor, + Overlay: ActionMenuOverlay, + Divider: PrimerActionMenu.Divider, +}) diff --git a/packages/styled-react/src/components/Autocomplete.tsx b/packages/styled-react/src/components/Autocomplete.tsx new file mode 100644 index 00000000000..2028c65d111 --- /dev/null +++ b/packages/styled-react/src/components/Autocomplete.tsx @@ -0,0 +1,34 @@ +import { + Autocomplete as PrimerAutocomplete, + type AutocompleteOverlayProps as PrimerAutocompleteOverlayProps, +} from '@primer/react' +import {sx, type SxProp} from '../sx' +import styled from 'styled-components' +import type {ComponentProps} from 'react' + +export type AutocompleteOverlayProps = PrimerAutocompleteOverlayProps & SxProp + +const AutocompleteOverlay: React.ComponentType = styled( + PrimerAutocomplete.Overlay, +).withConfig({ + shouldForwardProp: prop => (prop as keyof AutocompleteOverlayProps) !== 'sx', +})` + ${sx} +` + +interface AutocompleteExport { + (props: ComponentProps): React.ReactNode + Context: typeof PrimerAutocomplete.Context + Input: typeof PrimerAutocomplete.Input + Menu: typeof PrimerAutocomplete.Menu + Overlay: typeof AutocompleteOverlay +} + +const Autocomplete: AutocompleteExport = Object.assign(PrimerAutocomplete, { + Context: PrimerAutocomplete.Context, + Input: PrimerAutocomplete.Input, + Menu: PrimerAutocomplete.Menu, + Overlay: AutocompleteOverlay, +}) + +export {Autocomplete} diff --git a/packages/styled-react/src/index.tsx b/packages/styled-react/src/index.tsx index d21815828fb..6abe5be2e31 100644 --- a/packages/styled-react/src/index.tsx +++ b/packages/styled-react/src/index.tsx @@ -258,6 +258,10 @@ export {Flash} from './components/Flash' export {Overlay} from './components/Overlay' +export {Autocomplete, type AutocompleteOverlayProps} from './components/Autocomplete' + +export {ActionMenu} from './components/ActionMenu' + export { Checkbox, CounterLabel, @@ -277,8 +281,6 @@ export { export { ActionList, - ActionMenu, - Autocomplete, Avatar, Breadcrumbs, Button, From 7066200061d6113dd84ecac1eb96fee5f8e61b4f Mon Sep 17 00:00:00 2001 From: Marie Lucca Date: Tue, 23 Sep 2025 10:34:52 -0400 Subject: [PATCH 8/8] fix as type for BaseOverlay --- packages/react/src/Overlay/Overlay.tsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/packages/react/src/Overlay/Overlay.tsx b/packages/react/src/Overlay/Overlay.tsx index c68cb6a3fc5..ca84e09c668 100644 --- a/packages/react/src/Overlay/Overlay.tsx +++ b/packages/react/src/Overlay/Overlay.tsx @@ -89,7 +89,7 @@ type OwnOverlayProps = Merge * @param bottom Optional. Vertical bottom position of the overlay, relative to its closest positioned ancestor (often its `Portal`). * @param position Optional. Sets how an element is positioned in a document. Defaults to `absolute` positioning. */ -export const BaseOverlay = React.forwardRef( +export const BaseOverlay = React.forwardRef( ( { visibility, @@ -104,12 +104,13 @@ export const BaseOverlay = React.forwardRef( className, maxHeight, maxWidth, + as: Component = 'div', ...rest }, forwardedRef, ): ReactElement => { return ( -