Skip to content

Commit 3618e5b

Browse files
jonrohanjonrohan
authored
Merge 9341539 into 196fbf5 
2 parents 196fbf5 + 9341539 commit 3618e5b

File tree

32 files changed

+137
-437
lines changed

32 files changed

+137
-437
lines changed

‎.changeset/thick-rules-shout.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"@primer/react": patch
3+
---
4+
5+
chore: Refactor components to use BoxWithFallback instead of custom Box if statements and remove defaultSxProp references

‎packages/react/src/ActionList/Description.tsx

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@ import Truncate from '../Truncate'
33
import type {SxProp} from '../sx'
44
import {ItemContext} from './shared'
55
import classes from './ActionList.module.css'
6-
import {defaultSxProp} from '../utils/defaultSxProp'
76
import {BoxWithFallback} from '../internal/components/BoxWithFallback'
87
import {clsx} from 'clsx'
98

@@ -25,7 +24,7 @@ export type ActionListDescriptionProps = {
2524

2625
export const Description: React.FC<React.PropsWithChildren<ActionListDescriptionProps>> = ({
2726
variant = 'inline',
28-
sx = defaultSxProp,
27+
sx,
2928
className,
3029
truncate,
3130
...props

‎packages/react/src/ActionList/Divider.tsx

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@ import type React from 'react'
22
import type {SxProp} from '../sx'
33
import {clsx} from 'clsx'
44
import classes from './ActionList.module.css'
5-
import {defaultSxProp} from '../utils/defaultSxProp'
65
import {BoxWithFallback} from '../internal/components/BoxWithFallback'
76

87
export type ActionListDividerProps = SxProp & {
@@ -12,7 +11,7 @@ export type ActionListDividerProps = SxProp & {
1211
/**
1312
* Visually separates `Item`s or `Group`s in an `ActionList`.
1413
*/
15-
export const Divider: React.FC<React.PropsWithChildren<ActionListDividerProps>> = ({sx = defaultSxProp, className}) => {
14+
export const Divider: React.FC<React.PropsWithChildren<ActionListDividerProps>> = ({sx, className}) => {
1615
return (
1716
<BoxWithFallback
1817
className={clsx(className, classes.Divider)}

‎packages/react/src/ActionList/Group.tsx

Lines changed: 2 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,6 @@ import type {SxProp} from '../sx'
44
import {ListContext, type ActionListProps} from './shared'
55
import type {ActionListHeadingProps} from './Heading'
66
import {useSlots} from '../hooks/useSlots'
7-
import {defaultSxProp} from '../utils/defaultSxProp'
87
import {invariant} from '../utils/invariant'
98
import {clsx} from 'clsx'
109
import classes from './ActionList.module.css'
@@ -22,13 +21,12 @@ const Heading: React.FC<HeadingProps & React.HTMLAttributes<HTMLHeadingElement>>
2221
as: Component = 'h3',
2322
className,
2423
children,
25-
sx = defaultSxProp,
2624
id,
2725
...rest
2826
}) => {
2927
return (
3028
// Box is temporary to support lingering sx usage
31-
<BoxWithFallback as={Component} className={className} sx={sx} id={id} {...rest}>
29+
<BoxWithFallback as={Component} className={className} id={id} {...rest}>
3230
{children}
3331
</BoxWithFallback>
3432
)
@@ -81,7 +79,6 @@ export const Group: React.FC<React.PropsWithChildren<ActionListGroupProps>> = ({
8179
role,
8280
className,
8381
'aria-label': ariaLabel,
84-
sx = defaultSxProp,
8582
...props
8683
}) => {
8784
const id = useId()
@@ -108,7 +105,6 @@ export const Group: React.FC<React.PropsWithChildren<ActionListGroupProps>> = ({
108105
as="li"
109106
className={clsx(className, groupClasses.Group)}
110107
role={listRole ? 'none' : undefined}
111-
sx={sx}
112108
{...props}
113109
>
114110
<GroupContext.Provider value={{selectionVariant, groupHeadingId}}>
@@ -160,7 +156,7 @@ export const GroupHeading: React.FC<React.PropsWithChildren<ActionListGroupHeadi
160156
auxiliaryText,
161157
children,
162158
className,
163-
sx = defaultSxProp,
159+
sx,
164160
headingWrapElement = 'div',
165161
...props
166162
}) => {

‎packages/react/src/ActionList/Item.tsx

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@ import React from 'react'
22

33
import {useId} from '../hooks/useId'
44
import {useSlots} from '../hooks/useSlots'
5-
import {defaultSxProp} from '../utils/defaultSxProp'
65
import type {ForwardRefComponent as PolymorphicForwardRefComponent} from '../utils/polymorphic'
76
import {ActionListContainerContext} from './ActionListContainerContext'
87
import {Description} from './Description'
@@ -54,7 +53,7 @@ export const Item = React.forwardRef<HTMLLIElement, ActionListItemProps>(
5453
selected = undefined,
5554
active = false,
5655
onSelect: onSelectUser,
57-
sx: sxProp = defaultSxProp,
56+
sx: sxProp,
5857
id,
5958
role,
6059
loading,

‎packages/react/src/ActionList/LinkItem.tsx

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@ import type {ForwardRefComponent as PolymorphicForwardRefComponent} from '../uti
33
import Link from '../Link'
44
import {Item} from './Item'
55
import type {ActionListItemProps} from './shared'
6-
import {defaultSxProp} from '../utils/defaultSxProp'
76

87
// adopted from React.AnchorHTMLAttributes
98
type LinkProps = {
@@ -27,7 +26,7 @@ export type ActionListLinkItemProps = Pick<
2726
LinkProps
2827

2928
export const LinkItem = React.forwardRef(
30-
({sx = defaultSxProp, active, inactiveText, variant, as: Component, className, ...props}, forwardedRef) => {
29+
({sx, active, inactiveText, variant, as: Component, className, ...props}, forwardedRef) => {
3130
return (
3231
<Item
3332
className={className}

‎packages/react/src/ActionList/List.tsx

Lines changed: 1 addition & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import React from 'react'
22
import type {ForwardRefComponent as PolymorphicForwardRefComponent} from '../utils/polymorphic'
33
import {ActionListContainerContext} from './ActionListContainerContext'
4-
import {defaultSxProp} from '../utils/defaultSxProp'
54
import {useSlots} from '../hooks/useSlots'
65
import {Heading} from './Heading'
76
import {useId} from '../hooks/useId'
@@ -14,16 +13,7 @@ import {BoxWithFallback} from '../internal/components/BoxWithFallback'
1413

1514
export const List = React.forwardRef<HTMLUListElement, ActionListProps>(
1615
(
17-
{
18-
variant = 'inset',
19-
selectionVariant,
20-
showDividers = false,
21-
role,
22-
sx: sxProp = defaultSxProp,
23-
disableFocusZone = false,
24-
className,
25-
...props
26-
},
16+
{variant = 'inset', selectionVariant, showDividers = false, role, disableFocusZone = false, className, ...props},
2717
forwardedRef,
2818
): JSX.Element => {
2919
const [slots, childrenWithoutSlots] = useSlots(props.children, {
@@ -68,7 +58,6 @@ export const List = React.forwardRef<HTMLUListElement, ActionListProps>(
6858
{slots.heading}
6959
<BoxWithFallback
7060
as="ul"
71-
sx={sxProp}
7261
className={clsx(classes.ActionList, className)}
7362
role={listRole}
7463
aria-labelledby={ariaLabelledBy}

‎packages/react/src/ActionList/Visuals.tsx

Lines changed: 6 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -6,41 +6,28 @@ import {ItemContext} from './shared'
66
import {Tooltip, type TooltipProps} from '../TooltipV2'
77
import {clsx} from 'clsx'
88
import classes from './ActionList.module.css'
9-
import {defaultSxProp} from '../utils/defaultSxProp'
109
import {BoxWithFallback} from '../internal/components/BoxWithFallback'
1110

1211
export type VisualProps = SxProp & React.HTMLAttributes<HTMLSpanElement>
1312

14-
export const VisualContainer: React.FC<React.PropsWithChildren<VisualProps>> = ({
15-
sx = defaultSxProp,
16-
className,
17-
...props
18-
}) => {
19-
return <BoxWithFallback as="span" className={clsx(className, classes.VisualWrap)} sx={sx} {...props} />
13+
export const VisualContainer: React.FC<React.PropsWithChildren<VisualProps>> = ({className, ...props}) => {
14+
return <BoxWithFallback as="span" className={clsx(className, classes.VisualWrap)} {...props} />
2015
}
2116

2217
export type ActionListLeadingVisualProps = VisualProps
23-
export const LeadingVisual: React.FC<React.PropsWithChildren<VisualProps>> = ({
24-
sx = defaultSxProp,
25-
className,
26-
...props
27-
}) => {
18+
export const LeadingVisual: React.FC<React.PropsWithChildren<VisualProps>> = ({className, ...props}) => {
2819
return (
29-
<VisualContainer className={clsx(className, classes.LeadingVisual)} sx={sx} {...props}>
20+
<VisualContainer className={clsx(className, classes.LeadingVisual)} {...props}>
3021
{props.children}
3122
</VisualContainer>
3223
)
3324
}
3425

3526
export type ActionListTrailingVisualProps = VisualProps
36-
export const TrailingVisual: React.FC<React.PropsWithChildren<VisualProps>> = ({
37-
sx = defaultSxProp,
38-
className,
39-
...props
40-
}) => {
27+
export const TrailingVisual: React.FC<React.PropsWithChildren<VisualProps>> = ({className, ...props}) => {
4128
const {trailingVisualId} = React.useContext(ItemContext)
4229
return (
43-
<VisualContainer className={clsx(className, classes.TrailingVisual)} sx={sx} id={trailingVisualId} {...props}>
30+
<VisualContainer className={clsx(className, classes.TrailingVisual)} id={trailingVisualId} {...props}>
4431
{props.children}
4532
</VisualContainer>
4633
)

‎packages/react/src/Avatar/Avatar.tsx

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@ import React from 'react'
33
import type {SxProp} from '../sx'
44
import type {ResponsiveValue} from '../hooks/useResponsiveValue'
55
import {isResponsiveValue} from '../hooks/useResponsiveValue'
6-
import {defaultSxProp} from '../utils/defaultSxProp'
76
import {BoxWithFallback} from '../internal/components/BoxWithFallback'
87
import classes from './Avatar.module.css'
98

@@ -24,7 +23,7 @@ export type AvatarProps = {
2423
React.ComponentPropsWithoutRef<'img'>
2524

2625
const Avatar = React.forwardRef<HTMLImageElement, AvatarProps>(function Avatar(
27-
{alt = '', size = DEFAULT_AVATAR_SIZE, square = false, sx: sxProp = defaultSxProp, className, style, ...rest},
26+
{alt = '', size = DEFAULT_AVATAR_SIZE, square = false, sx: sxProp, className, style, ...rest},
2827
ref,
2928
) {
3029
const isResponsive = isResponsiveValue(size)

‎packages/react/src/AvatarStack/AvatarStack.tsx

Lines changed: 1 addition & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,6 @@ import type {AvatarProps} from '../Avatar/Avatar'
55
import {DEFAULT_AVATAR_SIZE} from '../Avatar/Avatar'
66
import type {ResponsiveValue} from '../hooks/useResponsiveValue'
77
import {isResponsiveValue} from '../hooks/useResponsiveValue'
8-
import {defaultSxProp} from '../utils/defaultSxProp'
98
import type {WidthOnlyViewportRangeKeys} from '../utils/types/ViewportRangeKeys'
109
import classes from './AvatarStack.module.css'
1110
import {hasInteractiveNodes} from '../internal/utils/hasInteractiveNodes'
@@ -58,15 +57,7 @@ const AvatarStackBody = ({
5857
)
5958
}
6059

61-
const AvatarStack = ({
62-
children,
63-
alignRight,
64-
disableExpand,
65-
size,
66-
className,
67-
style,
68-
sx: sxProp = defaultSxProp,
69-
}: AvatarStackProps) => {
60+
const AvatarStack = ({children, alignRight, disableExpand, size, className, style, sx: sxProp}: AvatarStackProps) => {
7061
const [hasInteractiveChildren, setHasInteractiveChildren] = useState<boolean | undefined>(false)
7162
const stackContainer = useRef<HTMLDivElement>(null)
7263

0 commit comments

Comments
 (0)