diff --git a/.changeset/gold-geckos-send.md b/.changeset/gold-geckos-send.md deleted file mode 100644 index 5e3441f4a4a..00000000000 --- a/.changeset/gold-geckos-send.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'@primer/react': major ---- - -Removes sx prop from PageLayout and subcomponents diff --git a/packages/react/src/PageLayout/PageLayout.dev.stories.module.css b/packages/react/src/PageLayout/PageLayout.dev.stories.module.css deleted file mode 100644 index 35584590235..00000000000 --- a/packages/react/src/PageLayout/PageLayout.dev.stories.module.css +++ /dev/null @@ -1,9 +0,0 @@ -.DebugPageLayout { - /* `red` is just used for debugging purposes. VRTs fail if changed. */ - /* stylelint-disable-next-line color-named */ - border: var(--borderWidth-thin) solid red; -} - -.SuccessColor { - color: var(--fgColor-success); -} diff --git a/packages/react/src/PageLayout/PageLayout.dev.stories.tsx b/packages/react/src/PageLayout/PageLayout.dev.stories.tsx index 5be8f52ffad..1eca843ae20 100644 --- a/packages/react/src/PageLayout/PageLayout.dev.stories.tsx +++ b/packages/react/src/PageLayout/PageLayout.dev.stories.tsx @@ -1,7 +1,6 @@ import type {Meta, StoryFn} from '@storybook/react-vite' import {Placeholder} from '../Placeholder' import {PageLayout} from './PageLayout' -import classes from './PageLayout.dev.stories.module.css' const meta: Meta = { title: 'Components/PageLayout/Dev', @@ -347,11 +346,11 @@ export const Default: StoryFn = args => ( padding={args.padding} rowGap={args.rowGap} columnGap={args.columnGap} - className={classes.DebugPageLayout} + sx={{border: '1px solid red'}} > ( ( ( padding={args.padding} rowGap={args.rowGap} columnGap={args.columnGap} + sx={args.sx} > {args['Render header?'] ? ( className?: string style?: React.CSSProperties -} +} & SxProp // eslint-disable-next-line @typescript-eslint/no-unused-vars const containerWidths = { @@ -70,6 +73,7 @@ const Root: React.FC> = ({ rowGap = 'normal', columnGap = 'normal', children, + sx, className, style, _slotsConfig: slotsConfig, @@ -89,13 +93,14 @@ const Root: React.FC> = ({ return ( -
@@ -103,7 +108,7 @@ const Root: React.FC> = ({
{rest}
{slots.footer}
-
+ ) } @@ -118,10 +123,11 @@ type DividerProps = { className?: string style?: React.CSSProperties position?: keyof typeof panePositions -} +} & SxProp const HorizontalDivider: React.FC> = ({ variant = 'none', + sx, className, position, style, @@ -130,7 +136,8 @@ const HorizontalDivider: React.FC> = ({ const responsiveVariant = useResponsiveValue(variant, 'none') return ( -
{ const [isDragging, setIsDragging] = React.useState(false) const [isKeyboardDrag, setIsKeyboardDrag] = React.useState(false) @@ -260,7 +268,8 @@ const VerticalDivider: React.FC {draggable ? ( // Drag handle -
{ - if (event.button === 0) { - setIsDragging(true) - onDragStart?.() - } - }} - onKeyDown={(event: React.KeyboardEvent) => { - if ( - event.key === 'ArrowLeft' || - event.key === 'ArrowRight' || - event.key === 'ArrowUp' || - event.key === 'ArrowDown' - ) { - setIsKeyboardDrag(true) - onDragStart?.() - } - }} - onDoubleClick={onDoubleClick} - /> + <> + { + if (event.button === 0) { + setIsDragging(true) + onDragStart?.() + } + }} + onKeyDown={event => { + if ( + event.key === 'ArrowLeft' || + event.key === 'ArrowRight' || + event.key === 'ArrowUp' || + event.key === 'ArrowDown' + ) { + setIsKeyboardDrag(true) + onDragStart?.() + } + }} + onDoubleClick={onDoubleClick} + /> + ) : null} -
+ ) } @@ -336,7 +355,7 @@ export type PageLayoutHeaderProps = { hidden?: boolean | ResponsiveValue className?: string style?: React.CSSProperties -} +} & SxProp const Header: React.FC> = ({ 'aria-label': label, @@ -347,6 +366,7 @@ const Header: React.FC> = ({ hidden = false, children, style, + sx, className, }) => { // Combine divider and dividerWhenNarrow for backwards compatibility @@ -360,10 +380,12 @@ const Header: React.FC> = ({ const {rowGap} = React.useContext(PageLayoutContext) return ( - + ) } @@ -421,7 +443,7 @@ export type PageLayoutContentProps = { hidden?: boolean | ResponsiveValue className?: string style?: React.CSSProperties -} +} & SxProp // TODO: Account for pane width when centering content // eslint-disable-next-line @typescript-eslint/no-unused-vars @@ -440,17 +462,19 @@ const Content: React.FC> = ({ padding = 'none', hidden = false, children, + sx, className, style, }) => { const isHidden = useResponsiveValue(hidden, false) - const Component = as return ( - @@ -465,7 +489,7 @@ const Content: React.FC> = ({ > {children}
- + ) } @@ -539,7 +563,7 @@ export type PageLayoutPaneProps = { id?: string className?: string style?: React.CSSProperties -} +} & SxProp // eslint-disable-next-line @typescript-eslint/no-unused-vars const panePositions = { @@ -577,6 +601,7 @@ const Pane = React.forwardRef - + ) }, ) @@ -779,7 +803,7 @@ export type PageLayoutFooterProps = { hidden?: boolean | ResponsiveValue className?: string style?: React.CSSProperties -} +} & SxProp const Footer: React.FC> = ({ 'aria-label': label, @@ -789,6 +813,7 @@ const Footer: React.FC> = ({ dividerWhenNarrow = 'inherit', hidden = false, children, + sx, className, style, }) => { @@ -803,11 +828,13 @@ const Footer: React.FC> = ({ const {rowGap} = React.useContext(PageLayoutContext) return ( -
> = ({ > {children} -
+ ) } diff --git a/packages/styled-react/src/components/PageLayout.tsx b/packages/styled-react/src/components/PageLayout.tsx deleted file mode 100644 index de4670c6528..00000000000 --- a/packages/styled-react/src/components/PageLayout.tsx +++ /dev/null @@ -1,57 +0,0 @@ -import React, {type PropsWithChildren} from 'react' -import styled from 'styled-components' -import type { - PageLayoutProps as PrimerPageLayoutProps, - PageLayoutContentProps as PrimerPageLayoutContentProps, - PageLayoutHeaderProps as PrimerPageLayoutHeaderProps, - PageLayoutPaneProps as PrimerPageLayoutPaneProps, - PageLayoutFooterProps as PrimerPageLayoutFooterProps, -} from '@primer/react' -import {PageLayout as PrimerPageLayout} from '@primer/react' -import {sx, type SxProp} from '../sx' - -const Wrapper = styled.div` - ${sx} -` - -type PageLayoutProps = PropsWithChildren & SxProp - -const PageLayoutImpl = React.forwardRef((props, ref) => { - // @ts-expect-error - PrimerPageLayout is not recognized as a valid component type - return -}) - -type PageLayoutContentProps = PropsWithChildren & SxProp - -const PageLayoutContent = React.forwardRef((props, ref) => { - return -}) - -type PageLayoutHeaderProps = PropsWithChildren & SxProp - -const PageLayoutHeader = React.forwardRef((props, ref) => { - // @ts-expect-error - PrimerPageLayout.Header is not recognized as a valid component type - return -}) - -type PageLayoutPaneProps = PropsWithChildren & SxProp - -const PageLayoutPane = React.forwardRef((props, ref) => { - return -}) - -type PageLayoutFooterProps = PropsWithChildren & SxProp - -const PageLayoutFooter = React.forwardRef((props, ref) => { - // @ts-expect-error - PrimerPageLayout.Footer is not recognized as a valid component type - return -}) - -const PageLayout = Object.assign(PageLayoutImpl, { - Content: PageLayoutContent, - Header: PageLayoutHeader, - Pane: PageLayoutPane, - Footer: PageLayoutFooter, -}) - -export {PageLayout, type PageLayoutProps} diff --git a/packages/styled-react/src/index.tsx b/packages/styled-react/src/index.tsx index aed597490ab..7f308e4488f 100644 --- a/packages/styled-react/src/index.tsx +++ b/packages/styled-react/src/index.tsx @@ -4,6 +4,7 @@ export {Button} from '@primer/react' export {Details} from '@primer/react' export {IconButton} from '@primer/react' export {ProgressBar} from '@primer/react' +export {PageLayout} from '@primer/react' export {Select} from '@primer/react' export {Textarea} from '@primer/react' export {TextInput} from '@primer/react' @@ -35,7 +36,6 @@ export {Link, type LinkProps} from './components/Link' export {LinkButton, type LinkButtonProps} from './components/LinkButton' export {NavList, type NavListProps} from './components/NavList' export {Overlay} from './components/Overlay' -export {PageLayout, type PageLayoutProps} from './components/PageLayout' export { PageHeader, type PageHeaderProps,