diff --git a/.changeset/beige-shrimps-sleep.md b/.changeset/beige-shrimps-sleep.md new file mode 100644 index 00000000000..2a4955a9bb6 --- /dev/null +++ b/.changeset/beige-shrimps-sleep.md @@ -0,0 +1,5 @@ +--- +'@primer/react': major +--- + +Remove sx prop support from the Spinner component. diff --git a/.changeset/nasty-seals-carry.md b/.changeset/nasty-seals-carry.md new file mode 100644 index 00000000000..96da155de94 --- /dev/null +++ b/.changeset/nasty-seals-carry.md @@ -0,0 +1,6 @@ +--- +'@primer/styled-react': patch +'@primer/react': patch +--- + +Fix typing issues in PageHeader exports. diff --git a/packages/react/src/PageHeader/PageHeader.tsx b/packages/react/src/PageHeader/PageHeader.tsx index 8fff2517360..af3e250160f 100644 --- a/packages/react/src/PageHeader/PageHeader.tsx +++ b/packages/react/src/PageHeader/PageHeader.tsx @@ -191,7 +191,7 @@ const ContextAreaActions: React.FC> = ) } -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. diff --git a/packages/react/src/Spinner/Spinner.dev.stories.module.css b/packages/react/src/Spinner/Spinner.dev.stories.module.css new file mode 100644 index 00000000000..253fe0608ad --- /dev/null +++ b/packages/react/src/Spinner/Spinner.dev.stories.module.css @@ -0,0 +1,3 @@ +.SpinnerBorder { + border: var(--borderWidth-thin) solid var(--borderColor-closed-emphasis); +} diff --git a/packages/react/src/Spinner/Spinner.dev.stories.tsx b/packages/react/src/Spinner/Spinner.dev.stories.tsx index daef85a30bc..7a78bdd8606 100644 --- a/packages/react/src/Spinner/Spinner.dev.stories.tsx +++ b/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 -export const Default = () => +export const Default = () => diff --git a/packages/react/src/Spinner/Spinner.docs.json b/packages/react/src/Spinner/Spinner.docs.json index 73a6365b5c0..76b4a0c3d1c 100644 --- a/packages/react/src/Spinner/Spinner.docs.json +++ b/packages/react/src/Spinner/Spinner.docs.json @@ -45,12 +45,7 @@ { "name": "data-*", "type": "string" - }, - { - "name": "sx", - "type": "SystemStyleObject", - "deprecated": true } ], "subcomponents": [] -} +} \ No newline at end of file diff --git a/packages/react/src/Spinner/Spinner.tsx b/packages/react/src/Spinner/Spinner.tsx index 83f05a8df39..d87ff3e10b9 100644 --- a/packages/react/src/Spinner/Spinner.tsx +++ b/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 -} - -StyledSpinner.displayName = 'Spinner' +Spinner.displayName = 'Spinner' -export default StyledSpinner +export default Spinner diff --git a/packages/react/src/__tests__/__snapshots__/exports.test.ts.snap b/packages/react/src/__tests__/__snapshots__/exports.test.ts.snap index ffe05ff87bf..90bf1d0f839 100644 --- a/packages/react/src/__tests__/__snapshots__/exports.test.ts.snap +++ b/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", diff --git a/packages/react/src/index.ts b/packages/react/src/index.ts index 9800c792fd1..29e4c13b91f 100644 --- a/packages/react/src/index.ts +++ b/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' diff --git a/packages/styled-react/src/components/PageHeader.tsx b/packages/styled-react/src/components/PageHeader.tsx index 739c677c3e1..62b85dd7d49 100644 --- a/packages/styled-react/src/components/PageHeader.tsx +++ b/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 } -type PageHeaderTitleProps = PrimerPageHeaderTitleProps & SxProp +type PageHeaderTitleProps = PropsWithChildren & SxProp type CSSCustomProperties = { [key: `--${string}`]: string | number @@ -63,9 +65,29 @@ function PageHeaderTitle({sx, ...rest}: PageHeaderTitleProps) { return } +type PageHeaderTitleAreaProps = PropsWithChildren & SxProp + +const PageHeaderTitleArea: ForwardRefComponent<'div', PageHeaderTitleAreaProps> = styled( + PrimerPageHeader.TitleArea, +).withConfig({ + 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} diff --git a/packages/styled-react/src/index.tsx b/packages/styled-react/src/index.tsx index 59c7c3f9367..e5d87d2a30e 100644 --- a/packages/styled-react/src/index.tsx +++ b/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 +} + 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,