Skip to content

Navlist passthrough action list group props #2133

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
merged 7 commits into from
Jun 21, 2022
Merged

Navlist passthrough action list group props #2133

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
583c1f3
passthrough actionlist group props to navlist.group
mattcosta7 Jun 20, 2022
732c93d
changeset
mattcosta7 Jun 20, 2022
5719cc8
pass through props
mattcosta7 Jun 20, 2022
f64dd58
fix pass through block
mattcosta7 Jun 20, 2022
a952a03
Update docs/content/NavList.mdx
colebemis Jun 20, 2022
9d19daf
avoid passing through action list props, but spread additional props …
mattcosta7 Jun 21, 2022
361f90e
Merge branch 'main' into navlist-passthrough-action-list-group-props
colebemis Jun 21, 2022
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/smooth-balloons-hope.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@primer/react': patch
---

Passthrough ActionList.Group props from NavList.Group
5 changes: 3 additions & 2 deletions src/NavList/NavList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -240,13 +240,14 @@ export type NavListGroupProps = {
title?: string
} & SxProp

const defaultSx = {}
// TODO: ref prop
const Group = ({title, children, sx: sxProp = {}}: NavListGroupProps) => {
const Group: React.VFC<NavListGroupProps> = ({title, children, sx: sxProp = defaultSx, ...props}) => {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Just curious, what are the benefits of using React.VFC?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

VFC is FC but children is not implied, which makes it much easier to transition to react 18, where FC doesn't have children by default - since it ensures we add them manually

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

spreading props here, but not adding additional ones should allow any xxx-xxx attributes through, so we can set aria and data attributes as necessary, but won't expose the underlying ActionListGroupProps

return (
<>
{/* Hide divider if the group is the first item in the list */}
<ActionList.Divider sx={{'&:first-child': {display: 'none'}}} />
<ActionList.Group title={title} sx={sxProp}>
<ActionList.Group {...props} title={title} sx={sxProp}>
{children}
</ActionList.Group>
</>
Expand Down