Add countLabel prop to SearchListItem

packages/components/CHANGELOG.md

@@ -1,3 +1,6 @@
+# unreleased
+- SearchListItem component: new `countLabel` prop that will overwrite the `item.count` value.
+
 # 3.0.0
 - <DateInput> and <DatePicker> got a `disabled` prop.
 - TableCard component: new `onPageChange` prop.

packages/components/src/search-list-control/item.js

@@ -42,6 +42,7 @@ const getInteractionIcon = ( isSingle = false, isSelected = false ) => {
 };
 
 const SearchListItem = ( {
+	countLabel,
 	className,
 	depth = 0,
 	item,
@@ -87,7 +88,7 @@ const SearchListItem = ( {
 
 			{ !! showCount && (
 				<span className="woocommerce-search-list__item-count">
-					{ item.count }
+					{ countLabel || item.count }
 				</span>
 			) }
 		</MenuItem>
@@ -99,6 +100,10 @@ SearchListItem.propTypes = {
 	 * Additional CSS classes.
 	 */
 	className: PropTypes.string,
+	/**
+	 * Label to display if `showCount` is set to true. If undefined, it will use `item.count`.
+	 */
+	countLabel: PropTypes.node,
 	/**
 	 * Depth, non-zero if the list is hierarchical.
 	 */

packages/components/src/search-list-control/style.scss

@@ -183,6 +183,7 @@
 			line-height: 1.4;
 			color: $core-grey-dark-300;
 			background: $white;
+			white-space: nowrap;
 		}
 	}
 }