[EuiFilterButton] Allow for zero notifications

CHANGELOG.md

@@ -8,6 +8,7 @@
 - Updated `EuiPage` background color to match body background color ([#1513](https://github.com/elastic/eui/pull/1513))
 - Fixed React key usage in `EuiPagination` ([#1514](https://github.com/elastic/eui/pull/1514))
 - Fixed bug which prevented `EuiSwitch` with generated ID from having its label announced by VoiceOver ([#1519](https://github.com/elastic/eui/pull/1519))
+- Fixed `EuiFilterButton` handling `numFilters` when `0` was specified ([#1510](https://github.com/elastic/eui/pull/1510))
 
 ## [`6.8.0`](https://github.com/elastic/eui/tree/v6.8.0)
 

src/components/filter_group/__snapshots__/filter_button.test.js.snap

@@ -20,3 +20,29 @@ exports[`EuiFilterButton is rendered 1`] = `
   </span>
 </button>
 `;
+
+exports[`EuiFilterButton renders zero properly 1`] = `
+<button
+  aria-label="aria-label"
+  class="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--iconRight euiFilterButton testClass1 testClass2"
+  data-test-subj="test subject string"
+  type="button"
+>
+  <span
+    class="euiButtonEmpty__content"
+  >
+    <span
+      class="euiButtonEmpty__text euiFilterButton__text-hasNotification"
+    >
+      <span
+        class="euiFilterButton__textShift"
+      />
+      <span
+        class="euiNotificationBadge euiFilterButton__notification"
+      >
+        0
+      </span>
+    </span>
+  </span>
+</button>
+`;

src/components/filter_group/filter_button.js

@@ -42,8 +42,10 @@ export const EuiFilterButton = ({
     className,
   );
 
+  // != instead of !== to allow for null and undefined
+  const numFiltersDefined = numFilters != null;
   const buttonTextClassNames = classNames(
-    { 'euiFilterButton__text-hasNotification': numFilters, },
+    { 'euiFilterButton__text-hasNotification': numFiltersDefined, },
     textProps && textProps.className,
   );
 
@@ -52,7 +54,7 @@ export const EuiFilterButton = ({
       <span className="euiFilterButton__textShift" data-text={children}>
         {children}
       </span>
-      {numFilters &&
+      {numFiltersDefined &&
         <EuiNotificationBadge className="euiFilterButton__notification">{numFilters}</EuiNotificationBadge>
       }
     </Fragment>

src/components/filter_group/filter_button.test.js

@@ -13,4 +13,12 @@ describe('EuiFilterButton', () => {
     expect(component)
       .toMatchSnapshot();
   });
+
+  test('renders zero properly', () => {
+    const component = render(
+      <EuiFilterButton {...requiredProps} numFilters={0} />
+    );
+
+    expect(component).toMatchSnapshot();
+  });
 });