diff --git a/.changeset/real-cooks-melt.md b/.changeset/real-cooks-melt.md new file mode 100644 index 00000000000..05df529b63e --- /dev/null +++ b/.changeset/real-cooks-melt.md @@ -0,0 +1,5 @@ +--- +"@primer/styled-react": patch +--- + +chore: ActionList use forwardedAs in subcomponents diff --git a/packages/styled-react/src/components/ActionList.tsx b/packages/styled-react/src/components/ActionList.tsx index 454517eb7e0..44358b1c8e3 100644 --- a/packages/styled-react/src/components/ActionList.tsx +++ b/packages/styled-react/src/components/ActionList.tsx @@ -18,11 +18,19 @@ type PrimerActionListTrailingActionProps = React.ComponentProps = PrimerActionListProps & SxProp export type ActionListItemProps = React.PropsWithChildren -export type ActionListLinkItemProps = React.PropsWithChildren -export type ActionListGroupProps = React.PropsWithChildren +export type ActionListLinkItemProps = React.PropsWithChildren & { + as?: React.ElementType +} +export type ActionListGroupProps = React.PropsWithChildren & { + as?: React.ElementType +} export type ActionListDividerProps = React.PropsWithChildren -export type ActionListLeadingVisualProps = React.PropsWithChildren -export type ActionListTrailingVisualProps = React.PropsWithChildren +export type ActionListLeadingVisualProps = React.PropsWithChildren & { + as?: React.ElementType +} +export type ActionListTrailingVisualProps = React.PropsWithChildren & { + as?: React.ElementType +} export type ActionListTrailingActionProps = React.PropsWithChildren const StyledActionList = styled(PrimerActionList).withConfig({ @@ -40,7 +48,7 @@ const ActionListImpl = React.forwardRef(function ActionListImpl }) -const ActionListLinkItem: ForwardRefComponent<'a', ActionListLinkItemProps> & SlotMarker = styled( +const StyledActionListLinkItem: ForwardRefComponent<'a', ActionListLinkItemProps> & SlotMarker = styled( PrimerActionList.LinkItem, ).withConfig({ shouldForwardProp: prop => prop !== 'sx', @@ -48,6 +56,15 @@ const ActionListLinkItem: ForwardRefComponent<'a', ActionListLinkItemProps> & Sl ${sx} ` +const ActionListLinkItem = React.forwardRef( + ({children, as, ...props}, ref) => ( + + {children} + + ), +) as ForwardRefComponent<'a', ActionListLinkItemProps> & SlotMarker +ActionListLinkItem.displayName = 'ActionList.LinkItem' + type TrailingActionElements = 'button' | 'a' const StyledActionListTrailingAction = styled(PrimerActionList.TrailingAction).withConfig({ shouldForwardProp: (prop: keyof ActionListTrailingActionProps) => prop !== 'sx', @@ -82,7 +99,7 @@ const ActionListItem = React.forwardRef(({ch )) as ForwardRefComponent<'li', ActionListItemProps> & SlotMarker -const ActionListGroup: React.ComponentType & SlotMarker = styled( +const StyledActionListGroup: React.ComponentType & SlotMarker = styled( PrimerActionList.Group, ).withConfig({ shouldForwardProp: prop => prop !== 'sx', @@ -90,6 +107,13 @@ const ActionListGroup: React.ComponentType & SlotMarker = ${sx} ` +const ActionListGroup: React.ComponentType & SlotMarker = ({children, as, ...props}) => ( + + {children} + +) +ActionListGroup.displayName = 'ActionList.Group' + const ActionListDivider: React.ComponentType & SlotMarker = styled( PrimerActionList.Divider, ).withConfig({ @@ -98,7 +122,7 @@ const ActionListDivider: React.ComponentType & SlotMarke ${sx} ` -const ActionListLeadingVisual: React.ComponentType & SlotMarker = styled( +const StyledActionListLeadingVisual: React.ComponentType & SlotMarker = styled( PrimerActionList.LeadingVisual, ).withConfig({ shouldForwardProp: prop => prop !== 'sx', @@ -106,7 +130,18 @@ const ActionListLeadingVisual: React.ComponentType ${sx} ` -const ActionListTrailingVisual: React.ComponentType & SlotMarker = styled( +const ActionListLeadingVisual: React.ComponentType & SlotMarker = ({ + children, + as, + ...props +}) => ( + + {children} + +) +ActionListLeadingVisual.displayName = 'ActionList.LeadingVisual' + +const StyledActionListTrailingVisual: React.ComponentType & SlotMarker = styled( PrimerActionList.TrailingVisual, ).withConfig({ shouldForwardProp: prop => prop !== 'sx', @@ -114,6 +149,17 @@ const ActionListTrailingVisual: React.ComponentType & SlotMarker = ({ + children, + as, + ...props +}) => ( + + {children} + +) +ActionListTrailingVisual.displayName = 'ActionList.TrailingVisual' + export const ActionList: typeof ActionListImpl & { Item: typeof ActionListItem LinkItem: typeof ActionListLinkItem