Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Appearance settings

Commit ecb449f

Browse filesBrowse files
jamiesharkjamieshark
authored
Simplify arguments for toggle component helper function (#5861)
1 parent a812a86 commit ecb449f
Copy full SHA for ecb449f

File tree

Expand file treeCollapse file tree

6 files changed

+16
-13
lines changed
Filter options
Expand file treeCollapse file tree

6 files changed

+16
-13
lines changed

‎.changeset/old-lemons-film.md

Copy file name to clipboard
+5Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'@primer/react': minor
3+
---
4+
5+
Changes argument signature for toggleSxComponent to simplify

‎packages/react/src/FormControl/FormControlCaption.tsx

Copy file name to clipboardExpand all lines: packages/react/src/FormControl/FormControlCaption.tsx
+1-1Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ type FormControlCaptionProps = React.PropsWithChildren<
1313
} & SxProp
1414
>
1515

16-
const Caption = toggleSxComponent({}, Text) as React.ComponentType<FormControlCaptionProps>
16+
const Caption = toggleSxComponent(Text) as React.ComponentType<FormControlCaptionProps>
1717

1818
function FormControlCaption({id, children, sx, className}: FormControlCaptionProps) {
1919
const {captionId, disabled} = useFormControlContext()

‎packages/react/src/internal/components/InputLabel.tsx

Copy file name to clipboardExpand all lines: packages/react/src/internal/components/InputLabel.tsx
+1-1Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ export type LegendOrSpanProps = BaseProps & {
2626

2727
type Props = React.PropsWithChildren<LabelProps | LegendOrSpanProps>
2828

29-
const Label = toggleSxComponent({}, 'label') as React.ComponentType<Props>
29+
const Label = toggleSxComponent('label') as React.ComponentType<Props>
3030

3131
function InputLabel({
3232
children,

‎packages/react/src/internal/components/UnderlineTabbedInterface.tsx

Copy file name to clipboardExpand all lines: packages/react/src/internal/components/UnderlineTabbedInterface.tsx
+2-2Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ type UnderlineWrapperProps = {
2222
ref?: React.Ref<unknown>
2323
} & SxProp
2424

25-
const UnderlineWrapperComponent = toggleSxComponent({}, 'div') as React.ComponentType<
25+
const UnderlineWrapperComponent = toggleSxComponent('div') as React.ComponentType<
2626
PropsWithChildren<UnderlineWrapperProps>
2727
>
2828

@@ -99,7 +99,7 @@ export type UnderlineItemProps = {
9999
ref?: React.Ref<unknown>
100100
} & SxProp
101101

102-
const UnderlineComponent = toggleSxComponent({}, 'a') as React.ComponentType<PropsWithChildren<UnderlineItemProps>>
102+
const UnderlineComponent = toggleSxComponent('a') as React.ComponentType<PropsWithChildren<UnderlineItemProps>>
103103

104104
export const UnderlineItem = forwardRef(
105105
(

‎packages/react/src/internal/utils/__tests__/toggleSxComponent.test.tsx

Copy file name to clipboardExpand all lines: packages/react/src/internal/utils/__tests__/toggleSxComponent.test.tsx
+6-6Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -6,30 +6,30 @@ const customSx = {color: 'red', p: 2}
66

77
describe('toggleSxComponent', () => {
88
test('renders the plain component when no sx', () => {
9-
const TestComponent = toggleSxComponent({}, 'span')
9+
const TestComponent = toggleSxComponent('span')
1010
const {container} = render(<TestComponent />)
1111
expect(container.firstChild).toBeInstanceOf(HTMLSpanElement)
1212
})
1313

1414
test('renders Box with `as` if `sx` is provided', () => {
15-
const TestComponent = toggleSxComponent(customSx, 'div')
16-
const {container} = render(<TestComponent as="button" sx={{color: 'red'}} />)
15+
const TestComponent = toggleSxComponent('div')
16+
const {container} = render(<TestComponent as="button" sx={customSx} />)
1717

1818
expect(container.firstChild).toBeInstanceOf(HTMLButtonElement)
1919
expect(container.firstChild).toHaveStyle('color: red')
2020
})
2121

2222
test('swaps out component if `sx` is not the default', () => {
23-
const Label = toggleSxComponent(customSx, 'label') as React.ComponentType<{htmlFor: string}>
23+
const Label = toggleSxComponent('label') as React.ComponentType<{htmlFor: string}>
2424
const {container} = render(<Label htmlFor="bloop" />)
2525

2626
expect(container.firstChild).toBeInstanceOf(HTMLLabelElement)
2727
expect(container.firstChild).toHaveAttribute('for', 'bloop')
2828
})
2929

3030
test('passes down other props', () => {
31-
const TestComponent = toggleSxComponent(customSx, 'div')
32-
const {container} = render(<TestComponent as="button" sx={{color: 'red'}} data-foo="bar" />)
31+
const TestComponent = toggleSxComponent('div')
32+
const {container} = render(<TestComponent as="button" sx={customSx} data-foo="bar" />)
3333

3434
expect(container.firstChild).toBeInstanceOf(HTMLButtonElement)
3535
expect(container.firstChild).toHaveStyle('color: red')

‎packages/react/src/internal/utils/toggleSxComponent.tsx

Copy file name to clipboardExpand all lines: packages/react/src/internal/utils/toggleSxComponent.tsx
+1-3Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import React from 'react'
22
import Box from '../../Box'
33
import {defaultSxProp} from '../../utils/defaultSxProp'
4-
import type {BetterSystemStyleObject} from '../../sx'
54

65
type CSSModulesProps = {
76
// eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -17,12 +16,11 @@ type CSSModulesProps = {
1716
* @param defaultAs - the default component to use when `as` is not provided
1817
*/
1918
export function toggleSxComponent<T, P extends CSSModulesProps>(
20-
sx: BetterSystemStyleObject | undefined,
2119
// eslint-disable-next-line @typescript-eslint/no-explicit-any
2220
defaultAs: string | React.ComponentType<any>,
2321
) {
2422
const Wrapper = React.forwardRef<T, P>(function Wrapper(
25-
{as: BaseComponent = defaultAs, sx: sxProp = sx, ...rest},
23+
{as: BaseComponent = defaultAs, sx: sxProp = defaultSxProp, ...rest},
2624
ref,
2725
) {
2826
if (sxProp !== defaultSxProp) {

0 commit comments

Comments
0 (0)
Morty Proxy This is a proxified and sanitized view of the page, visit original site.