Skip to content
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鈥檒l occasionally send you account related emails.

Already on GitHub? Sign in to your account

Adding FilterList and FilterListItem #167

Merged
merged 11 commits into from Aug 3, 2018
Merged

Adding FilterList and FilterListItem #167

merged 11 commits into from Aug 3, 2018

Conversation

jonrohan
Copy link
Member

@jonrohan jonrohan commented Aug 1, 2018

Closes #137

This PR introduces FilterList and FilterListItem to create the side nav filters seen here https://styleguide.github.com/primer/components/navigation/#filter-list

image


I 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 used FilterList to wrap it's children FilterListItem 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 FilterList
  • FilterList doesn't have any extra actions alignments
  • FilterList has a small option that condenses the list
  • FilterListItem has a count prop that will render the item count.

I'm ready for review on this 馃憤

@jonrohan jonrohan requested a review from emplums August 1, 2018 17:38
Copy link

@emplums emplums left a 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!


return (
<Tag className={classes} {...rest}>
{countComponent}
Copy link

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}

)
}

FilterListItem.displayName = 'FilterListItem'
Copy link

Choose a reason for hiding this comment

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

I think this won't be necessary with #160 cc @shawnbot

Copy link
Contributor

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.

Copy link
Contributor

@shawnbot shawnbot left a 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 &&.

@emplums emplums changed the base branch from master to release-1.0.0-beta August 3, 2018 16:54
@jonrohan jonrohan merged commit 503f093 into release-1.0.0-beta Aug 3, 2018
@jonrohan jonrohan deleted the side_nav branch August 3, 2018 18:06
@emplums emplums mentioned this pull request Aug 3, 2018
12 tasks
@emplums emplums added this to Backlog in Primer Components release tracking 馃搵 via automation Aug 6, 2018
@emplums emplums moved this from Backlog to 1.0.0-beta Completed in Primer Components release tracking 馃搵 Aug 6, 2018
@emplums emplums moved this from 2.0.0-beta Completed to 馃殺Published in Primer Components release tracking 馃搵 Aug 13, 2018
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
No open projects
Development

Successfully merging this pull request may close these issues.

None yet

3 participants