Skip to content

chore: ActionList use forwardedAs in subcomponents #6995

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
francinelucca merged 7 commits into from
Oct 13, 2025
Merged

chore: ActionList use forwardedAs in subcomponents #6995

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
4cb8ea0
chore: ActionList use forwardedAs in subcomponents
francinelucca Oct 13, 2025
16eb0c2
Use forwardedAs in ActionList subcomponents
francinelucca Oct 13, 2025
a34f9a8
Update packages/styled-react/src/components/ActionList.tsx
francinelucca Oct 13, 2025
f47a570
Update packages/styled-react/src/components/ActionList.tsx
francinelucca Oct 13, 2025
1b1e1f1
Update packages/styled-react/src/components/ActionList.tsx
francinelucca Oct 13, 2025
e82354f
Update packages/styled-react/src/components/ActionList.tsx
francinelucca Oct 13, 2025
d33bcfc
displayName correction
francinelucca Oct 13, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/real-cooks-melt.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@primer/styled-react": patch
---

chore: ActionList use forwardedAs in subcomponents
58 changes: 50 additions & 8 deletions packages/styled-react/src/components/ActionList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,11 +18,19 @@ type PrimerActionListTrailingActionProps = React.ComponentProps<typeof PrimerAct

export type ActionListProps<As extends React.ElementType = 'ul'> = PrimerActionListProps<As> & SxProp
export type ActionListItemProps = React.PropsWithChildren<PrimerActionListItemProps & SxProp>
export type ActionListLinkItemProps = React.PropsWithChildren<PrimerActionListLinkItemProps & SxProp>
export type ActionListGroupProps = React.PropsWithChildren<PrimerActionListGroupProps & SxProp>
export type ActionListLinkItemProps = React.PropsWithChildren<PrimerActionListLinkItemProps & SxProp> & {
as?: React.ElementType
}
export type ActionListGroupProps = React.PropsWithChildren<PrimerActionListGroupProps & SxProp> & {
as?: React.ElementType
}
export type ActionListDividerProps = React.PropsWithChildren<PrimerActionListDividerProps & SxProp>
export type ActionListLeadingVisualProps = React.PropsWithChildren<PrimerActionListLeadingVisualProps & SxProp>
export type ActionListTrailingVisualProps = React.PropsWithChildren<PrimerActionListTrailingVisualProps & SxProp>
export type ActionListLeadingVisualProps = React.PropsWithChildren<PrimerActionListLeadingVisualProps & SxProp> & {
as?: React.ElementType
}
export type ActionListTrailingVisualProps = React.PropsWithChildren<PrimerActionListTrailingVisualProps & SxProp> & {
as?: React.ElementType
}
export type ActionListTrailingActionProps = React.PropsWithChildren<PrimerActionListTrailingActionProps & SxProp>

const StyledActionList = styled(PrimerActionList).withConfig({
Expand All @@ -40,14 +48,22 @@ const ActionListImpl = React.forwardRef(function ActionListImpl<As extends React
return <StyledActionList ref={ref} {...rest} {...(as ? {forwardedAs: as} : {})} />
})

const ActionListLinkItem: ForwardRefComponent<'a', ActionListLinkItemProps> & SlotMarker = styled(
const StyledActionListLinkItem: ForwardRefComponent<'a', ActionListLinkItemProps> & SlotMarker = styled(
PrimerActionList.LinkItem,
).withConfig<ActionListLinkItemProps>({
shouldForwardProp: prop => prop !== 'sx',
})`
${sx}
`

const ActionListLinkItem = React.forwardRef<HTMLAnchorElement, ActionListLinkItemProps>(
({children, as, ...props}, ref) => (
<StyledActionListLinkItem ref={ref} {...props} {...(as ? {forwardedAs: as} : {})}>
{children}
</StyledActionListLinkItem>
),
) as ForwardRefComponent<'a', ActionListLinkItemProps> & SlotMarker
Comment thread
francinelucca marked this conversation as resolved.

type TrailingActionElements = 'button' | 'a'
const StyledActionListTrailingAction = styled(PrimerActionList.TrailingAction).withConfig({
shouldForwardProp: (prop: keyof ActionListTrailingActionProps) => prop !== 'sx',
Expand Down Expand Up @@ -82,14 +98,20 @@ const ActionListItem = React.forwardRef<HTMLLIElement, ActionListItemProps>(({ch
</StyledActionListItem>
)) as ForwardRefComponent<'li', ActionListItemProps> & SlotMarker

const ActionListGroup: React.ComponentType<ActionListGroupProps> & SlotMarker = styled(
const StyledActionListGroup: React.ComponentType<ActionListGroupProps> & SlotMarker = styled(
PrimerActionList.Group,
).withConfig<ActionListGroupProps>({
shouldForwardProp: prop => prop !== 'sx',
})`
${sx}
`

const ActionListGroup: React.ComponentType<ActionListGroupProps> & SlotMarker = ({children, as, ...props}) => (
<StyledActionListGroup {...props} {...(as ? {forwardedAs: as} : {})}>
{children}
</StyledActionListGroup>
)
Comment thread
francinelucca marked this conversation as resolved.

const ActionListDivider: React.ComponentType<ActionListDividerProps> & SlotMarker = styled(
PrimerActionList.Divider,
).withConfig<ActionListDividerProps>({
Expand All @@ -98,22 +120,42 @@ const ActionListDivider: React.ComponentType<ActionListDividerProps> & SlotMarke
${sx}
`

const ActionListLeadingVisual: React.ComponentType<ActionListLeadingVisualProps> & SlotMarker = styled(
const StyledActionListLeadingVisual: React.ComponentType<ActionListLeadingVisualProps> & SlotMarker = styled(
PrimerActionList.LeadingVisual,
).withConfig<ActionListLeadingVisualProps>({
shouldForwardProp: prop => prop !== 'sx',
})`
${sx}
`

const ActionListTrailingVisual: React.ComponentType<ActionListTrailingVisualProps> & SlotMarker = styled(
const ActionListLeadingVisual: React.ComponentType<ActionListLeadingVisualProps> & SlotMarker = ({
children,
as,
...props
}) => (
<StyledActionListLeadingVisual {...props} {...(as ? {forwardedAs: as} : {})}>
{children}
</StyledActionListLeadingVisual>
)
Comment thread
francinelucca marked this conversation as resolved.

const StyledActionListTrailingVisual: React.ComponentType<ActionListTrailingVisualProps> & SlotMarker = styled(
PrimerActionList.TrailingVisual,
).withConfig<ActionListTrailingVisualProps>({
shouldForwardProp: prop => prop !== 'sx',
})`
${sx}
`

const ActionListTrailingVisual: React.ComponentType<ActionListTrailingVisualProps> & SlotMarker = ({
children,
as,
...props
}) => (
<StyledActionListTrailingVisual {...props} {...(as ? {forwardedAs: as} : {})}>
{children}
</StyledActionListTrailingVisual>
)
Comment thread
francinelucca marked this conversation as resolved.

export const ActionList: typeof ActionListImpl & {
Item: typeof ActionListItem
LinkItem: typeof ActionListLinkItem
Expand Down
Loading