Skip to content

Commit 6252062

Browse files
joshblackjoshblack
authored
Merge branch 'main' into 6791-remove-sx-from-inline-message
2 parents 13b3ffc + 9d13904 commit 6252062

File tree

11 files changed

+94
-87
lines changed

11 files changed

+94
-87
lines changed

‎.changeset/spotty-colts-hear.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'@primer/react': major
3+
---
4+
5+
Remove the `sx` prop from `Announce`, `AriaAlert`, and `AriaStatus`

‎packages/react/src/live-region/Announce.tsx‎

Lines changed: 44 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -1,50 +1,56 @@
11
import {announceFromElement} from '@primer/live-region-element'
22
import type React from 'react'
33
import {useEffect, useRef, useState, type ElementRef} from 'react'
4-
import Box from '../Box'
54
import {useEffectOnce} from '../internal/hooks/useEffectOnce'
65
import {useEffectCallback} from '../internal/hooks/useEffectCallback'
7-
8-
export type AnnounceProps = React.ComponentPropsWithoutRef<typeof Box> & {
9-
/**
10-
* Specify if the content of the element should be announced when this
11-
* component is rendered and is not hidden
12-
* @default false
13-
*/
14-
announceOnShow?: boolean
15-
16-
/**
17-
* Specify if the element is hidden
18-
* @default false
19-
*/
20-
hidden?: boolean
21-
22-
/**
23-
* Provide a delay in milliseconds before the announcement is made. This will
24-
* only work with `polite` announcements
25-
*/
26-
delayMs?: number
27-
28-
/**
29-
* The politeness level to use for the announcement
30-
* @default 'polite'
31-
*/
32-
politeness?: 'assertive' | 'polite'
33-
}
6+
import type {PolymorphicProps} from '../utils/polymorphic2'
7+
8+
export type AnnounceProps<As extends React.ElementType> = PolymorphicProps<
9+
'div',
10+
As,
11+
{
12+
/**
13+
* Specify if the content of the element should be announced when this
14+
* component is rendered and is not hidden
15+
* @default false
16+
*/
17+
announceOnShow?: boolean
18+
19+
/**
20+
* Specify if the element is hidden
21+
* @default false
22+
*/
23+
hidden?: boolean
24+
25+
/**
26+
* Provide a delay in milliseconds before the announcement is made. This will
27+
* only work with `polite` announcements
28+
*/
29+
delayMs?: number
30+
31+
/**
32+
* The politeness level to use for the announcement
33+
* @default 'polite'
34+
*/
35+
politeness?: 'assertive' | 'polite'
36+
}
37+
>
3438

3539
/**
3640
* `Announce` is a component that will announce the text content of the
3741
* `children` passed in to screen readers using the given politeness level. It
3842
* will also announce any changes to the text content of `children`
3943
*/
40-
export function Announce({
41-
announceOnShow = true,
42-
children,
43-
delayMs,
44-
hidden = false,
45-
politeness = 'polite',
46-
...rest
47-
}: AnnounceProps) {
44+
export function Announce<As extends React.ElementType = 'div'>(props: AnnounceProps<As>) {
45+
const {
46+
as: BaseComponent = 'div',
47+
announceOnShow = true,
48+
children,
49+
delayMs,
50+
hidden = false,
51+
politeness = 'polite',
52+
...rest
53+
} = props
4854
const ref = useRef<ElementRef<'div'>>(null)
4955
const [previousAnnouncementText, setPreviousAnnouncementText] = useState<string | null>(null)
5056
const savedAnnouncement = useRef<ReturnType<typeof announceFromElement> | null>(null)
@@ -127,9 +133,9 @@ export function Announce({
127133
}, [])
128134

129135
return (
130-
<Box {...rest} ref={ref}>
136+
<BaseComponent {...rest} ref={ref}>
131137
{children}
132-
</Box>
138+
</BaseComponent>
133139
)
134140
}
135141

‎packages/react/src/live-region/AriaAlert.tsx‎

Lines changed: 7 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,12 @@
11
import type React from 'react'
22
import {type ElementType} from 'react'
33
import {Announce} from './Announce'
4-
import type {SxProp} from '../sx'
4+
import type {PolymorphicProps} from '../utils/polymorphic2'
55

6-
export type AriaAlertProps<As extends ElementType> = React.PropsWithChildren<
6+
export type AriaAlertProps<As extends ElementType> = PolymorphicProps<
7+
'div',
8+
As,
79
{
8-
/**
9-
* Customize the element type of the rendered container
10-
*/
11-
as?: As
12-
1310
/**
1411
* Specify if the content of the element should be announced when this
1512
* component is rendered and is not hidden
@@ -22,14 +19,14 @@ export type AriaAlertProps<As extends ElementType> = React.PropsWithChildren<
2219
* @default false
2320
*/
2421
hidden?: boolean
25-
} & SxProp
22+
}
2623
>
2724

28-
export function AriaAlert<As extends ElementType>({
25+
export function AriaAlert<As extends ElementType = 'div'>({
2926
announceOnShow = true,
3027
children,
3128
...rest
32-
}: AriaAlertProps<As> & React.ComponentPropsWithoutRef<ElementType extends As ? As : 'div'>) {
29+
}: AriaAlertProps<As>) {
3330
return (
3431
<Announce {...rest} announceOnShow={announceOnShow} politeness="assertive">
3532
{children}

‎packages/react/src/live-region/AriaStatus.tsx‎

Lines changed: 7 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,12 @@
11
import type React from 'react'
22
import {type ElementType} from 'react'
33
import {Announce} from './Announce'
4-
import type {SxProp} from '../sx'
4+
import type {PolymorphicProps} from '../utils/polymorphic2'
55

6-
export type AriaStatusProps<As extends ElementType> = React.PropsWithChildren<
6+
export type AriaStatusProps<As extends ElementType> = PolymorphicProps<
7+
'div',
8+
As,
79
{
8-
/**
9-
* Customize the element type of the rendered container
10-
*/
11-
as?: As
12-
1310
/**
1411
* Specify if the content of the element should be announced when this
1512
* component is rendered and is not hidden
@@ -27,14 +24,14 @@ export type AriaStatusProps<As extends ElementType> = React.PropsWithChildren<
2724
* Provide a delay in milliseconds before the announcement is made
2825
*/
2926
delayMs?: number
30-
} & SxProp
27+
}
3128
>
3229

33-
export function AriaStatus<As extends ElementType>({
30+
export function AriaStatus<As extends ElementType = 'div'>({
3431
announceOnShow = false,
3532
children,
3633
...rest
37-
}: AriaStatusProps<As> & React.ComponentPropsWithoutRef<ElementType extends As ? As : 'div'>) {
34+
}: AriaStatusProps<As>) {
3835
return (
3936
<Announce {...rest} announceOnShow={announceOnShow} politeness="polite">
4037
{children}

‎packages/react/src/live-region/__tests__/Announce.test.tsx‎

Lines changed: 0 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -37,15 +37,6 @@ describe('Announce', () => {
3737
expect(container.firstChild).toHaveAttribute('data-testid', 'container')
3838
})
3939

40-
it('should support styling via the `sx` prop', () => {
41-
render(
42-
<Announce data-testid="container" sx={{color: 'blue'}}>
43-
test
44-
</Announce>,
45-
)
46-
expect(screen.getByTestId('container')).toHaveStyle('color: rgb(0, 0, 255)')
47-
})
48-
4940
it('should support customizing the container element with `as`', () => {
5041
render(
5142
<Announce as="span" data-testid="container">

‎packages/react/src/live-region/__tests__/AriaAlert.test.tsx‎

Lines changed: 0 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -31,15 +31,6 @@ describe('AriaAlert', () => {
3131
expect(container.firstChild).toHaveAttribute('data-testid', 'container')
3232
})
3333

34-
it('should support styling via the `sx` prop', () => {
35-
render(
36-
<AriaAlert data-testid="container" sx={{color: 'blue'}}>
37-
test
38-
</AriaAlert>,
39-
)
40-
expect(screen.getByTestId('container')).toHaveStyle('color: rgb(0, 0, 255)')
41-
})
42-
4334
it('should support customizing the container element with `as`', () => {
4435
render(
4536
<AriaAlert as="span" data-testid="container">

‎packages/react/src/live-region/__tests__/AriaStatus.test.tsx‎

Lines changed: 0 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -67,15 +67,6 @@ describe('AriaStatus', () => {
6767
expect(container.firstChild).toHaveAttribute('data-testid', 'container')
6868
})
6969

70-
it('should support styling via the `sx` prop', () => {
71-
render(
72-
<AriaStatus data-testid="container" sx={{color: 'blue'}}>
73-
test
74-
</AriaStatus>,
75-
)
76-
expect(screen.getByTestId('container')).toHaveStyle('color: rgb(0, 0, 255)')
77-
})
78-
7970
it('should support customizing the container element with `as`', () => {
8071
render(
8172
<AriaStatus as="span" data-testid="container">

‎packages/react/src/utils/polymorphic2.ts‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
/**
2+
* This file is an alternative to polymorphic.ts that hopes to support
3+
* polyrmophic components in React. It explicitly hopes to make it easy to
4+
* type the props of components and allow for explicitly setting the type of a
5+
* component
6+
*/
7+
8+
import type {ElementType} from 'react'
9+
10+
type AsProp<As extends ElementType> = {
11+
/**
12+
* Customize the element type of the container element for the component
13+
*/
14+
as?: As
15+
}
16+
17+
type PolymorphicProps<DefaultAs extends ElementType, As extends ElementType, Props> = Props &
18+
AsProp<As> &
19+
(As extends React.ElementType
20+
? Omit<React.ComponentPropsWithoutRef<As>, keyof Props>
21+
: Omit<React.ComponentPropsWithoutRef<DefaultAs>, keyof Props>)
22+
23+
export type {PolymorphicProps}

‎packages/styled-react/src/index.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -106,7 +106,7 @@ const Textarea: React.ForwardRefExoticComponent<TextareaProps & React.RefAttribu
106106
return <Box as={PrimerTextarea} ref={ref} {...props} />
107107
})
108108

109-
export {Autocomplete, SegmentedControl, StateLabel, SubNav, Textarea, TextInput, Select, ToggleSwitch}
109+
export {Autocomplete, SegmentedControl, Select, StateLabel, SubNav, TextInput, Textarea, ToggleSwitch}
110110

111111
export {
112112
ActionList,

‎packages/styled-react/vitest.config.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import {defineConfig} from 'vitest/config'
22

33
export default defineConfig({
44
test: {
5+
name: '@primer/styled-react (node)',
56
environment: 'node',
67
exclude: ['src/**/*.browser.test.?(c|m)[jt]s?(x)'],
78
},

0 commit comments

Comments
 (0)