Skip to content

Commit

Permalink
Merge pull request #586 from primer/empty_counter
Browse files Browse the repository at this point in the history
Hiding .Counter component when it's empty.
  • Loading branch information
shawnbot authored Oct 19, 2018
2 parents a4b6676 + 0864cf3 commit 9db5ba0
Show file tree
Hide file tree
Showing 2 changed files with 5 additions and 1 deletion.
2 changes: 1 addition & 1 deletion modules/primer-labels/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -129,7 +129,7 @@ Use `State--small` for a state label with reduced padding a smaller font size. T

## Counters

Use the `Counter` component to add a count to navigational elements and buttons. Counters come in 3 variations: the default `Counter` with a light gray background, `Counter--gray` with a dark-gray background and inverse white text, and `Counter--gray-light` with a light-gray background and dark gray text.
Use the `Counter` component to add a count to navigational elements and buttons. Counters come in 3 variations: the default `Counter` with a light gray background, `Counter--gray` with a dark-gray background and inverse white text, and `Counter--gray-light` with a light-gray background and dark gray text. When a counter is empty, it's visibility will be hidden.

```html title="Counter"
<span class="Counter">16</span>
Expand Down
4 changes: 4 additions & 0 deletions modules/primer-labels/lib/counters.scss
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,10 @@
color: $gray-600;
background-color: rgba($black, 0.08);
border-radius: 20px;

&:empty {
visibility: hidden;
}
}

.Counter--gray-light {
Expand Down

0 comments on commit 9db5ba0

Please sign in to comment.