Fix count bubble alignment in SearchListItem with latest @wordpress/components (https://github.com/woocommerce/woocommerce-admin/pull/5809)

* Remove showCount prop from SearchListControlItem

* Add option to show counts in ShowListControl story

* Fix count alignment in SearchListItem with latest Gutenberg

* Add new changelog entry

* Update dated prop description

plugins/woocommerce-admin/packages/components/CHANGELOG.md

@@ -2,6 +2,8 @@
 
 -   Change styling of `<ProductImage />`
 -   Add new `<Accordion>` component.
+-   Remove the `showCount` prop from `<SearchListItem>`. Count will always be displayed if any of those props is not undefined/null: `countLabel` and `item.count`.
+-   Fix alignment of `<SearchListItem>` count bubble in newest versions of `@wordpress/components`.
 
 # 5.1.2
 

plugins/woocommerce-admin/packages/components/src/search-list-control/README.md

@@ -63,11 +63,10 @@ Used implicitly by `SearchListControl` when the `renderItem` prop is omitted.
 Name | Type | Default | Description
 --- | --- | --- | ---
 `className` | String | `null` | Additional CSS classes
-`countLabel` | ReactNode | `null` | Label to display if `showCount` is set to true. If undefined, it will use `item.count`
+`countLabel` | ReactNode | `null` | Label to display in the count bubble. Takes preference over `item.count`.
 `depth` | Number | `0` | Depth, non-zero if the list is hierarchical
 `item` | Object | `null` | Current item to display
 `isSelected` | Boolean | `null` | Whether this item is selected
 `isSingle` | Boolean | `null` | Whether this should only display a single item (controls radio vs checkbox icon)
 `onSelect` | Function | `null` | Callback for selecting the item
 `search` | String | `''` | Search string, used to highlight the substring in the item name
-`showCount` | Boolean | `false` | Toggles the "count" bubble on/off

plugins/woocommerce-admin/packages/components/src/search-list-control/item.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { escapeRegExp, first, last } from 'lodash';
+import { escapeRegExp, first, last, isNil } from 'lodash';
 import { MenuItem } from '@wordpress/components';
 import PropTypes from 'prop-types';
 
@@ -50,14 +50,17 @@ const SearchListItem = ( {
 	isSingle,
 	onSelect,
 	search = '',
-	showCount = false,
 	...props
 } ) => {
+	const showCount = ! isNil( countLabel ) || ! isNil( item.count );
 	const classes = [ className, 'woocommerce-search-list__item' ];
 	classes.push( `depth-${ depth }` );
 	if ( isSingle ) {
 		classes.push( 'is-radio-button' );
 	}
+	if ( showCount ) {
+		classes.push( 'has-count' );
+	}
 	const hasBreadcrumbs = item.breadcrumbs && item.breadcrumbs.length;
 
 	return (
@@ -101,7 +104,7 @@ SearchListItem.propTypes = {
 	 */
 	className: PropTypes.string,
 	/**
-	 * Label to display if `showCount` is set to true. If undefined, it will use `item.count`.
+	 * Label to display in the count bubble. Takes preference over `item.count`.
 	 */
 	countLabel: PropTypes.node,
 	/**
@@ -128,10 +131,6 @@ SearchListItem.propTypes = {
 	 * Search string, used to highlight the substring in the item name.
 	 */
 	search: PropTypes.string,
-	/**
-	 * Toggles the "count" bubble on/off.
-	 */
-	showCount: PropTypes.bool,
 };
 
 export default SearchListItem;

plugins/woocommerce-admin/packages/components/src/search-list-control/stories/index.js

@@ -1,6 +1,7 @@
 /**
  * External dependencies
  */
+import { boolean } from '@storybook/addon-knobs';
 import { SearchListControl } from '@woocommerce/components';
 import { withState } from '@wordpress/compose';
 
@@ -8,7 +9,8 @@ const SearchListControlExample = withState( {
 	selected: [],
 	loading: true,
 } )( ( { selected, loading, setState } ) => {
-	const list = [
+	const showCount = boolean( 'Show count', false );
+	let list = [
 		{ id: 1, name: 'Apricots' },
 		{ id: 2, name: 'Clementine' },
 		{ id: 3, name: 'Elderberry' },
@@ -16,6 +18,11 @@ const SearchListControlExample = withState( {
 		{ id: 5, name: 'Lychee' },
 		{ id: 6, name: 'Mulberry' },
 	];
+	const counts = [ 3, 1, 1, 5, 2, 0 ];
+
+	if ( showCount ) {
+		list = list.map( ( item, i ) => ( { ...item, count: counts[ i ] } ) );
+	}
 
 	return (
 		<div>

plugins/woocommerce-admin/packages/components/src/search-list-control/style.scss

@@ -182,6 +182,12 @@
 			}
 		}
 
+		&.has-count {
+			> .components-menu-item__item {
+				width: 100%;
+			}
+		}
+
 		.woocommerce-search-list__item-count {
 			flex: 0 1 auto;
 			padding: $gap-smallest/2 $gap-smaller;