Remove sx and BoxWithFallback from the Spinner component

.changeset/beige-shrimps-sleep.md

@@ -0,0 +1,5 @@
+---
+'@primer/react': major
+---
+
+Remove sx prop support from the Spinner component.

.changeset/nasty-seals-carry.md

@@ -0,0 +1,6 @@
+---
+'@primer/styled-react': patch
+'@primer/react': patch
+---
+
+Fix typing issues in PageHeader exports.

packages/react/src/PageHeader/PageHeader.tsx

@@ -191,7 +191,7 @@ const ContextAreaActions: React.FC<React.PropsWithChildren<ChildrenPropTypes>> =
   )
 }
 
-type TitleAreaProps = {
+export type TitleAreaProps = {
   variant?: 'subtitle' | 'medium' | 'large' | ResponsiveValue<'subtitle' | 'medium' | 'large'>
 } & ChildrenPropTypes
 // PageHeader.TitleArea: The main title area of the page. Visible on all viewports.

packages/react/src/Spinner/Spinner.dev.stories.module.css

@@ -0,0 +1,3 @@
+.SpinnerBorder {
+  border: var(--borderWidth-thin) solid var(--borderColor-closed-emphasis);
+}

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

@@ -1,9 +1,10 @@
 import type {Meta} from '@storybook/react-vite'
 import Spinner from './Spinner'
+import classes from './Spinner.dev.stories.module.css'
 
 export default {
   title: 'Components/Spinner/Dev',
   component: Spinner,
 } as Meta<typeof Spinner>
 
-export const Default = () => <Spinner sx={{border: '1px solid red'}} size="small" />
+export const Default = () => <Spinner className={classes.SpinnerBorder} size="small" />

packages/react/src/Spinner/Spinner.docs.json

@@ -45,12 +45,7 @@
     {
       "name": "data-*",
       "type": "string"
-    },
-    {
-      "name": "sx",
-      "type": "SystemStyleObject",
-      "deprecated": true
     }
   ],
   "subcomponents": []
-}
+}

packages/react/src/Spinner/Spinner.tsx

@@ -1,11 +1,9 @@
 import type React from 'react'
-import {type SxProp} from '../sx'
 import {VisuallyHidden} from '../VisuallyHidden'
 import type {HTMLDataAttributes} from '../internal/internal-types'
 import {useId} from '../hooks'
 import classes from './Spinner.module.css'
 import {clsx} from 'clsx'
-import {BoxWithFallback} from '../internal/components/BoxWithFallback'
 
 const sizeMap = {
   small: '16px',
@@ -22,8 +20,7 @@ export type SpinnerProps = {
   'aria-label'?: string
   className?: string
   style?: React.CSSProperties
-} & HTMLDataAttributes &
-  SxProp
+} & HTMLDataAttributes
 
 function Spinner({
   size: sizeKey = 'medium',
@@ -48,7 +45,7 @@ function Spinner({
         aria-hidden
         aria-label={ariaLabel ?? undefined}
         aria-labelledby={hasHiddenLabel ? labelId : undefined}
-        className={className}
+        className={clsx(className, classes.SpinnerAnimation)}
         style={style}
         {...props}
       >
@@ -74,10 +71,6 @@ function Spinner({
   )
 }
 
-function StyledSpinner({className, ...props}: SpinnerProps) {
-  return <BoxWithFallback as={Spinner} className={clsx(className, classes.SpinnerAnimation)} {...props} />
-}
-
-StyledSpinner.displayName = 'Spinner'
+Spinner.displayName = 'Spinner'
 
-export default StyledSpinner
+export default Spinner

packages/react/src/__tests__/__snapshots__/exports.test.ts.snap

@@ -105,7 +105,9 @@ exports[`@primer/react > should not update exports without a semver change 1`] =
   "type OverlayProps",
   "PageHeader",
   "type PageHeaderActionsProps",
+  "type PageHeaderChildrenPropTypes",
   "type PageHeaderProps",
+  "type PageHeaderTitleAreaProps",
   "type PageHeaderTitleProps",
   "PageLayout",
   "type PageLayoutContentProps",

packages/react/src/index.ts

@@ -211,6 +211,8 @@ export type {
   PageHeaderProps,
   TitleProps as PageHeaderTitleProps,
   ActionsProps as PageHeaderActionsProps,
+  TitleAreaProps as PageHeaderTitleAreaProps,
+  ChildrenPropTypes as PageHeaderChildrenPropTypes,
 } from './PageHeader'
 
 export {default as sx, merge} from './sx'

packages/styled-react/src/components/PageHeader.tsx

@@ -3,11 +3,13 @@ import {
   type PageHeaderProps as PrimerPageHeaderProps,
   type PageHeaderTitleProps as PrimerPageHeaderTitleProps,
   type PageHeaderActionsProps as PrimerPageHeaderActionsProps,
+  type PageHeaderTitleAreaProps as PrimerPageHeaderTitleAreaProps,
 } from '@primer/react'
 import styled from 'styled-components'
 import {sx, type SxProp} from '../sx'
 import type {ForwardRefComponent} from '../polymorphic'
 import {Box} from './Box'
+import type {PropsWithChildren} from 'react'
 
 type PageHeaderProps = PrimerPageHeaderProps & SxProp
 
@@ -35,7 +37,7 @@ function PageHeaderActions({sx, ...rest}: PageHeaderActionsProps) {
   return <Box {...rest} as={PrimerPageHeader.Actions} style={style} sx={sx} />
 }
 
-type PageHeaderTitleProps = PrimerPageHeaderTitleProps & SxProp
+type PageHeaderTitleProps = PropsWithChildren<PrimerPageHeaderTitleProps> & SxProp
 
 type CSSCustomProperties = {
   [key: `--${string}`]: string | number
@@ -63,9 +65,29 @@ function PageHeaderTitle({sx, ...rest}: PageHeaderTitleProps) {
   return <Box {...rest} as={PrimerPageHeader.Title} style={style} sx={sx} />
 }
 
+type PageHeaderTitleAreaProps = PropsWithChildren<PrimerPageHeaderTitleAreaProps> & SxProp
+
+const PageHeaderTitleArea: ForwardRefComponent<'div', PageHeaderTitleAreaProps> = styled(
+  PrimerPageHeader.TitleArea,
+).withConfig<PageHeaderTitleAreaProps>({
+  shouldForwardProp: prop => prop !== 'sx',
+})`
+  ${sx}
+`
+
 const PageHeader = Object.assign(PageHeaderImpl, {
   Actions: PageHeaderActions,
   Title: PageHeaderTitle,
+  TitleArea: PageHeaderTitleArea,
+  ContextArea: PrimerPageHeader.ContextArea,
+  ContextAreaActions: PrimerPageHeader.ContextAreaActions,
+  TrailingVisual: PrimerPageHeader.TrailingVisual,
+  Description: PrimerPageHeader.Description,
+  ContextBar: PrimerPageHeader.ContextBar,
+  LeadingAction: PrimerPageHeader.LeadingAction,
+  Breadcrumbs: PrimerPageHeader.Breadcrumbs,
+  LeadingVisual: PrimerPageHeader.LeadingVisual,
+  TrailingAction: PrimerPageHeader.TrailingAction,
 })
 
 export {PageHeader}

packages/styled-react/src/index.tsx

@@ -3,6 +3,8 @@ import {
   Box,
   type BoxProps,
   type SxProp,
+  Spinner as PrimerSpinner,
+  type SpinnerProps as PrimerSpinnerProps,
   RadioGroup as PrimerRadioGroup,
   type RadioGroupProps as PrimerRadioGroupProps,
   Checkbox as PrimerCheckbox,
@@ -60,6 +62,12 @@ type StyledProps = SxProp &
   PositionProps &
   ShadowProps
 
+type SpinnerProps = PrimerSpinnerProps & SxProp
+
+function Spinner(props: SpinnerProps) {
+  return <Box as={PrimerSpinner} {...props} />
+}
+
 type RelativeTimeProps = PrimerRelativeTimeProps & SxProp
 
 function RelativeTime(props: RelativeTimeProps) {
@@ -217,6 +225,7 @@ export {
   RadioGroup,
   RelativeTime,
   SegmentedControl,
+  Spinner,
   StateLabel,
   SubNav,
   ToggleSwitch,
@@ -244,7 +253,6 @@ export {
   Overlay,
   PageLayout,
   Select,
-  Spinner,
   Text,
   Textarea,
   TextInput,