Remove support for sx from BaseStyles component

.changeset/sharp-beans-run.md

@@ -0,0 +1,5 @@
+---
+"@primer/react": major
+---
+
+Update BaseStyles component to no longer support sx

e2e/components/BaseStyles.test.ts

@@ -11,14 +11,6 @@ const stories = [
     id: 'behaviors-basestyles-dev--with-style-props',
     title: 'Dev With Style Props',
   },
-  {
-    id: 'behaviors-basestyles-dev--with-sx-props',
-    title: 'Dev With Sx Props',
-  },
-  {
-    id: 'behaviors-basestyles-dev--with-system-props',
-    title: 'Dev With System Props',
-  },
 ] as const
 
 test.describe('BaseStyles', () => {

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

@@ -9,25 +9,6 @@ export default {
 
 export const Default = () => 'Hello'
 
-export const WithSxProps = () => (
-  <BaseStyles
-    sx={{
-      color: 'red',
-      backgroundColor: 'blue',
-      fontFamily: 'Arial',
-      lineHeight: '1.5',
-    }}
-  >
-    Hello
-  </BaseStyles>
-)
-
-export const WithSystemProps = () => (
-  <BaseStyles color="red" backgroundColor="blue" fontFamily="Arial" fontSize="14px" lineHeight="1.5" display="flex">
-    Hello
-  </BaseStyles>
-)
-
 export const WithStyleProps = () => (
   <BaseStyles
     style={{

packages/react/src/BaseStyles.tsx

@@ -3,12 +3,10 @@ import {type CSSProperties, type PropsWithChildren} from 'react'
 import {clsx} from 'clsx'
 import type {SystemCommonProps, SystemTypographyProps} from './constants'
 import {useTheme} from './ThemeProvider'
-import type {SxProp} from './sx'
 
 import classes from './BaseStyles.module.css'
 
 import 'focus-visible'
-import {BoxWithFallback} from './internal/components/BoxWithFallback'
 
 export type BaseStylesProps = PropsWithChildren & {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -17,8 +15,7 @@ export type BaseStylesProps = PropsWithChildren & {
   style?: CSSProperties
   color?: string // Fixes `color` ts-error
 } & SystemTypographyProps &
-  SystemCommonProps &
-  SxProp
+  SystemCommonProps
 
 function BaseStyles({
   children,
@@ -40,8 +37,7 @@ function BaseStyles({
   }
 
   return (
-    <BoxWithFallback
-      as={Component}
+    <Component
       className={newClassName}
       data-portal-root
       /**
@@ -59,7 +55,7 @@ function BaseStyles({
       {...rest}
     >
       {children}
-    </BoxWithFallback>
+    </Component>
   )
 }
 

packages/react/src/__tests__/BaseStyles.test.tsx

@@ -23,19 +23,6 @@ describe('BaseStyles', () => {
     } as Partial<CSSStyleDeclaration>)
   })
 
-  it('respects system props', () => {
-    const {container} = render(
-      <BaseStyles display="contents" whiteSpace="pre-wrap" mr="2">
-        Hello
-      </BaseStyles>,
-    )
-
-    expect(container.children[0]).toHaveStyle({
-      display: 'contents',
-      'margin-right': '8px',
-    } as Partial<CSSStyleDeclaration>)
-  })
-
   it('accepts className and style props', () => {
     const styles = {
       style: {margin: '10px'},