-
Notifications
You must be signed in to change notification settings - Fork 537
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.
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
Adding FilterList and FilterListItem #167
Conversation
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Looks good! Just left a few comments!
src/FilterListItem.js
Outdated
|
||
return ( | ||
<Tag className={classes} {...rest}> | ||
{countComponent} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Instead of returning undefined
here you could do {count && getCountComponent(count)}
or {count && countComponent}
src/FilterListItem.js
Outdated
) | ||
} | ||
|
||
FilterListItem.displayName = 'FilterListItem' |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Yep, we can nix this.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Should the label show up when the count is zero? If so, you might need to use typeof
rather than short-circuiting with &&
.
Closes #137
This PR introduces
FilterList
andFilterListItem
to create the side nav filters seen here https://styleguide.github.com/primer/components/navigation/#filter-listI modeled this API almost exactly like
UnderlineNav
However there are a few key differences and less complexity.Differences
FilterList
renders with a<ul>
and<li>
elements. I usedFilterList
to wrap it's childrenFilterListItem
in<li>
. I did this on FilterList instead of FilterListItem because none of the appropriate classes go on the li and I think they're only needed in context of FilterListFilterList
doesn't have any extra actions alignmentsFilterList
has asmall
option that condenses the listFilterListItem
has acount
prop that will render the item count.I'm ready for review on this 👍