diff --git a/.changeset/fruity-monkeys-cover.md b/.changeset/fruity-monkeys-cover.md new file mode 100644 index 00000000000..645fb39223e --- /dev/null +++ b/.changeset/fruity-monkeys-cover.md @@ -0,0 +1,5 @@ +--- +'@primer/react': major +--- + +Removes `sx` prop from DataTable.Container diff --git a/packages/react/src/DataTable/Table.tsx b/packages/react/src/DataTable/Table.tsx index 4a4bee37f6c..b564b5344fa 100644 --- a/packages/react/src/DataTable/Table.tsx +++ b/packages/react/src/DataTable/Table.tsx @@ -2,7 +2,6 @@ import {SortAscIcon, SortDescIcon} from '@primer/octicons-react' import {clsx} from 'clsx' import React from 'react' import Text from '../Text' -import type {SxProp} from '../sx' import VisuallyHidden from '../_VisuallyHidden' import type {Column, CellAlignment} from './column' import type {UniqueRow} from './row' @@ -12,7 +11,7 @@ import {SkeletonText} from '../SkeletonText' import {ScrollableRegion} from '../ScrollableRegion' import {Button} from '../internal/components/ButtonReset' import classes from './Table.module.css' -import {BoxWithFallback} from '../internal/components/BoxWithFallback' +import type {PolymorphicProps} from '../utils/modern-polymorphic' // ---------------------------------------------------------------------------- // Table @@ -233,13 +232,20 @@ function TableCellPlaceholder({children}: TableCellPlaceholderProps) { // ---------------------------------------------------------------------------- // TableContainer // ---------------------------------------------------------------------------- -export type TableContainerProps = React.PropsWithChildren> - -function TableContainer({children, className, ...rest}: TableContainerProps) { +export type TableContainerProps = PolymorphicProps & + React.PropsWithChildren + +function TableContainer({ + children, + className, + as, + ...rest +}: TableContainerProps) { + const Component = as || 'div' return ( - + {children} - + ) } diff --git a/packages/react/src/DataTable/__tests__/Table.test.tsx b/packages/react/src/DataTable/__tests__/Table.test.tsx index cdea4002c31..16829956738 100644 --- a/packages/react/src/DataTable/__tests__/Table.test.tsx +++ b/packages/react/src/DataTable/__tests__/Table.test.tsx @@ -156,11 +156,6 @@ describe('Table', () => { const {container} = render() expect(container.firstElementChild).toHaveClass('test') }) - - it('should support custom styles through the `sx` prop', () => { - const {container} = render() - expect(container.firstElementChild).toHaveStyle('margin:0') - }) }) describe('Table.Title', () => { diff --git a/packages/styled-react/src/__tests__/primer-react-experimental.browser.test.tsx b/packages/styled-react/src/__tests__/primer-react-experimental.browser.test.tsx index f43f68c6ec0..f531a71243c 100644 --- a/packages/styled-react/src/__tests__/primer-react-experimental.browser.test.tsx +++ b/packages/styled-react/src/__tests__/primer-react-experimental.browser.test.tsx @@ -37,4 +37,15 @@ describe('@primer/react/experimental', () => { ) expect(window.getComputedStyle(screen.getByTestId('component')).backgroundColor).toBe('rgb(255, 0, 0)') }) + + test('Table.Container supports `sx` prop', () => { + render( + + + cell + + , + ) + expect(window.getComputedStyle(screen.getByTestId('component')).backgroundColor).toBe('rgb(255, 0, 0)') + }) }) diff --git a/packages/styled-react/src/components/DataTable.tsx b/packages/styled-react/src/components/DataTable.tsx new file mode 100644 index 00000000000..3be7f6cbed3 --- /dev/null +++ b/packages/styled-react/src/components/DataTable.tsx @@ -0,0 +1,43 @@ +import {Table as PrimerDataTable, type TableContainerProps} from '@primer/react/experimental' +import {sx, type SxProp} from '../sx' +import styled from 'styled-components' +import type React from 'react' + +const {Container: PrimerDataTableContainer, ...rest} = PrimerDataTable + +type DataTableContainerProps = TableContainerProps & SxProp + +const StyleDataTableContainer: React.ComponentType = styled( + PrimerDataTableContainer, +).withConfig({ + shouldForwardProp: prop => (prop as keyof DataTableContainerProps) !== 'sx', +})` + ${sx} +` as typeof PrimerDataTable.Container & { + (props: DataTableContainerProps): React.ReactElement | null +} + +function DataTableContainer({as, ...rest}: DataTableContainerProps) { + return +} + +const Table: typeof PrimerDataTable & { + Container: typeof DataTableContainer +} = Object.assign(PrimerDataTable, { + Container: DataTableContainer, + ...rest, +}) + +export type { + TableProps, + TableHeadProps, + TableBodyProps, + TableRowProps, + TableHeaderProps, + TableCellProps, + TableTitleProps, + TableSubtitleProps, + TableActionsProps, +} from '@primer/react/experimental' + +export {Table, type DataTableContainerProps} diff --git a/packages/styled-react/src/experimental.tsx b/packages/styled-react/src/experimental.tsx index 65ea374d430..c69f394f245 100644 --- a/packages/styled-react/src/experimental.tsx +++ b/packages/styled-react/src/experimental.tsx @@ -15,4 +15,16 @@ export { type UnderlinePanelsPanelProps, } from './components/UnderlinePanels' -export {Table} from '@primer/react/experimental' +export { + Table, + type DataTableContainerProps, + type TableProps, + type TableHeadProps, + type TableBodyProps, + type TableRowProps, + type TableHeaderProps, + type TableCellProps, + type TableTitleProps, + type TableSubtitleProps, + type TableActionsProps, +} from './components/DataTable'