Created new component for Filters elements labels

assets/js/blocks/stock-filter/label.js → assets/js/base/components/filter-element-label/index.js

@@ -4,14 +4,19 @@
 import { _n, sprintf } from '@wordpress/i18n';
 import { Label } from '@woocommerce/blocks-checkout';
 
+/**
+ * Internal dependencies
+ */
+import './style.scss';
+
 /**
  * The label for an stock status filter.
  *
  * @param {Object} props Incoming props for the component.
  * @param {string} props.name The name for the label.
  * @param {number} props.count The count of products this status is attached to.
  */
-const StockFilterLabel = ( { name, count } ) => {
+const FilterElementLabel = ( { name, count } ) => {
 	return (
 		<>
 			{ name }
@@ -30,12 +35,12 @@ const StockFilterLabel = ( { name, count } ) => {
 					) }
 					wrapperElement="span"
 					wrapperProps={ {
-						className: 'wc-block-stock-filter-list-count',
+						className: 'wc-filter-element-label-list-count',
 					} }
 				/>
 			) }
 		</>
 	);
 };
 
-export default StockFilterLabel;
+export default FilterElementLabel;

assets/js/base/components/filter-element-label/style.scss

@@ -0,0 +1,9 @@
+.wc-filter-element-label-list-count {
+	&::before {
+		content: " (";
+	}
+	&::after {
+		content: ")";
+	}
+	opacity: 0.6;
+}