Skip to content

Commit 29facae

Browse files
jonrohanjoshblack
jonrohan
and
joshblack
authored
chore: Refactor components to use BoxWithFallback instead of custom Box if statements and remove defaultSxProp references (#6278)
Co-authored-by: Josh Black <joshblack@github.com>
1 parent db3bc85 commit 29facae

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)
pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy