From 0864cf3b1e33283dd4b2ebdcaf711715f6c2f856 Mon Sep 17 00:00:00 2001
From: Jon Rohan <yes@jonrohan.codes>
Date: Fri, 19 Oct 2018 11:04:08 -0700
Subject: [PATCH] Hiding empty counters.

---
 modules/primer-labels/README.md         | 2 +-
 modules/primer-labels/lib/counters.scss | 4 ++++
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/modules/primer-labels/README.md b/modules/primer-labels/README.md
index 2f34b9a5ad..d93247aa26 100644
--- a/modules/primer-labels/README.md
+++ b/modules/primer-labels/README.md
@@ -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>
diff --git a/modules/primer-labels/lib/counters.scss b/modules/primer-labels/lib/counters.scss
index d4ceb6447b..359f903672 100644
--- a/modules/primer-labels/lib/counters.scss
+++ b/modules/primer-labels/lib/counters.scss
@@ -8,6 +8,10 @@
   color: $gray-600;
   background-color: rgba($black, 0.08);
   border-radius: 20px;
+
+  &:empty {
+    visibility: hidden;
+  }
 }
 
 .Counter--gray-light {