diff --git a/assets/css/instant-results.css b/assets/css/instant-results.css
index 497fb56ec1..ba17c2b388 100644
--- a/assets/css/instant-results.css
+++ b/assets/css/instant-results.css
@@ -1,4 +1,5 @@
@import "instant-results/utilities.css";
+@import "instant-results/checkbox.css";
@import "instant-results/input.css";
@import "instant-results/modal.css";
@import "instant-results/options-list.css";
diff --git a/assets/css/instant-results/checkbox.css b/assets/css/instant-results/checkbox.css
new file mode 100644
index 0000000000..1cc9ab456e
--- /dev/null
+++ b/assets/css/instant-results/checkbox.css
@@ -0,0 +1,7 @@
+.ep-search-checkbox__count::before {
+ content: "(";
+}
+
+.ep-search-checkbox__count::after {
+ content: ")";
+}
diff --git a/assets/js/instant-results/components/common/checkbox-list.js b/assets/js/instant-results/components/common/checkbox-list.js
index 374416017f..41ff712d96 100644
--- a/assets/js/instant-results/components/common/checkbox-list.js
+++ b/assets/js/instant-results/components/common/checkbox-list.js
@@ -122,7 +122,7 @@ export default ({ disabled, label, options, onChange, selected, sortBy }) => {
* @param {Option} option Option.
* @return {WPElement} Render function.
*/
- const displayOption = ({ id, label, value }) => {
+ const displayOption = ({ count, id, label, value }) => {
const children = childOptions[value];
if (!showAll && optionsShown >= optionsLimit) {
@@ -133,6 +133,7 @@ export default ({ disabled, label, options, onChange, selected, sortBy }) => {
{
+export default ({ count, id, label, ...props }) => {
return (
-
+ {' '}
);
diff --git a/assets/js/instant-results/components/facets/post-type-facet.js b/assets/js/instant-results/components/facets/post-type-facet.js
index 6931b56a87..8204d3cdfe 100644
--- a/assets/js/instant-results/components/facets/post-type-facet.js
+++ b/assets/js/instant-results/components/facets/post-type-facet.js
@@ -41,13 +41,14 @@ export default ({ defaultIsOpen, label }) => {
* @return {Array} Array of options.
*/
const reduceOptions = useCallback(
- (options, { key }, index) => {
+ (options, { doc_count, key }, index) => {
if (!Object.prototype.hasOwnProperty.call(postTypeLabels, key)) {
return options;
}
options.push({
checked: selectedPostTypes.includes(key),
+ count: doc_count,
id: `ep-search-post-type-${key}`,
label: postTypeLabels[key].singular,
order: index,
diff --git a/assets/js/instant-results/components/facets/taxonomy-terms-facet.js b/assets/js/instant-results/components/facets/taxonomy-terms-facet.js
index a69822f135..46b7214eeb 100644
--- a/assets/js/instant-results/components/facets/taxonomy-terms-facet.js
+++ b/assets/js/instant-results/components/facets/taxonomy-terms-facet.js
@@ -66,11 +66,12 @@ export default ({ defaultIsOpen, label, postTypes, taxonomy }) => {
* @return {Array} Array of options.
*/
const reduceOptions = useCallback(
- (options, { key }) => {
+ (options, { doc_count, key }) => {
const { name, parent, term_id, term_order } = JSON.parse(key);
options.push({
checked: selectedTerms.includes(term_id),
+ count: doc_count,
id: `ep-search-${taxonomy}-${term_id}`,
label: name,
parent: parent.toString(),