Add SearchListControl isCompact prop (https://github.com/woocommerce/woocommerce-admin/pull/5901)

* Add isCompact prop to SearchListControl

* Add left and right borders to search list

* Remove box-shadow when search list items are focused/active

* Add Changelog notice

* Update snapshots

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

@@ -4,6 +4,7 @@
 -   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`.
+-   `<SearchListControl>` no longer has different styles when it's used inside a panel. Those styles are available now with the `isCompact` prop.
 -   Support custom attributes in `<AttributeFilter />`.
 -   Add product attributes support to `<Search />`.
 -   Allow single-selection support to `<Search />`.

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

@@ -14,6 +14,7 @@ import { compose, withInstanceId, withState } from '@wordpress/compose';
 import { escapeRegExp, findIndex } from 'lodash';
 import NoticeOutlineIcon from 'gridicons/dist/notice-outline';
 import PropTypes from 'prop-types';
+import classnames from 'classnames';
 
 /**
  * Internal dependencies
@@ -226,11 +227,15 @@ export class SearchListControl extends Component {
 	}
 
 	render() {
-		const { className = '', search, setState } = this.props;
+		const { className = '', isCompact, search, setState } = this.props;
 		const messages = { ...defaultMessages, ...this.props.messages };
 
 		return (
-			<div className={ `woocommerce-search-list ${ className }` }>
+			<div
+				className={ classnames( 'woocommerce-search-list', className, {
+					'is-compact': isCompact,
+				} ) }
+			>
 				{ this.renderSelectedSection() }
 
 				<div className="woocommerce-search-list__search">
@@ -253,6 +258,10 @@ SearchListControl.propTypes = {
 	 * Additional CSS classes.
 	 */
 	className: PropTypes.string,
+	/**
+	 * Whether it should be displayed in a compact way, so it occupies less space.
+	 */
+	isCompact: PropTypes.bool,
 	/**
 	 * Whether the list of items is hierarchical or not. If true, each list item is expected to
 	 * have a parent property.

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

@@ -10,6 +10,7 @@ const SearchListControlExample = withState( {
 	loading: true,
 } )( ( { selected, loading, setState } ) => {
 	const showCount = boolean( 'Show count', false );
+	const isCompact = boolean( 'Compact', false );
 	let list = [
 		{ id: 1, name: 'Apricots' },
 		{ id: 2, name: 'Clementine' },
@@ -31,6 +32,7 @@ const SearchListControlExample = withState( {
 			</button>
 			<SearchListControl
 				list={ list }
+				isCompact={ isCompact }
 				isLoading={ loading }
 				selected={ selected }
 				onChange={ ( items ) => setState( { selected: items } ) }

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

@@ -43,12 +43,11 @@
 }
 
 .woocommerce-search-list__list {
+	border: 1px solid $gray-100;
 	padding: 0;
 	max-height: 17em;
 	overflow-x: hidden;
 	overflow-y: auto;
-	border-top: 1px solid $gray-100;
-	border-bottom: 1px solid $gray-100;
 
 	&.is-loading {
 		padding: $gap-small 0;
@@ -104,6 +103,11 @@
 			background: $gray-100;
 		}
 
+		&:active,
+		&:focus {
+			box-shadow: none;
+		}
+
 		&:last-child {
 			border-bottom: none !important;
 		}
@@ -202,11 +206,7 @@
 	}
 }
 
-.components-panel {
-	.woocommerce-search-list {
-		padding: 0;
-	}
-
+.woocommerce-search-list.is-compact {
 	.woocommerce-search-list__selected {
 		margin: 0 0 $gap;
 		padding: 0;

plugins/woocommerce-admin/packages/components/src/search-list-control/test/__snapshots__/index.js.snap

@@ -2,7 +2,7 @@
 
 exports[`SearchListControl should render a search box and list of hierarchical options 1`] = `
 <div
-  className="woocommerce-search-list "
+  className="woocommerce-search-list"
 >
   <div
     className="woocommerce-search-list__selected"
@@ -303,7 +303,7 @@ exports[`SearchListControl should render a search box and list of hierarchical o
 
 exports[`SearchListControl should render a search box and list of options 1`] = `
 <div
-  className="woocommerce-search-list "
+  className="woocommerce-search-list"
 >
   <div
     className="woocommerce-search-list__selected"
@@ -875,7 +875,7 @@ exports[`SearchListControl should render a search box and list of options with a
 
 exports[`SearchListControl should render a search box and list of options, with a custom render callback for each item 1`] = `
 <div
-  className="woocommerce-search-list "
+  className="woocommerce-search-list"
 >
   <div
     className="woocommerce-search-list__selected"
@@ -957,7 +957,7 @@ exports[`SearchListControl should render a search box and list of options, with
 
 exports[`SearchListControl should render a search box and list of options, with a custom search input message 1`] = `
 <div
-  className="woocommerce-search-list "
+  className="woocommerce-search-list"
 >
   <div
     className="woocommerce-search-list__selected"
@@ -1243,7 +1243,7 @@ exports[`SearchListControl should render a search box and list of options, with
 
 exports[`SearchListControl should render a search box and no options 1`] = `
 <div
-  className="woocommerce-search-list "
+  className="woocommerce-search-list"
 >
   <div
     className="woocommerce-search-list__selected"
@@ -1314,7 +1314,7 @@ exports[`SearchListControl should render a search box and no options 1`] = `
 
 exports[`SearchListControl should render a search box with a search term, and no matching options 1`] = `
 <div
-  className="woocommerce-search-list "
+  className="woocommerce-search-list"
 >
   <div
     className="woocommerce-search-list__selected"
@@ -1386,7 +1386,7 @@ exports[`SearchListControl should render a search box with a search term, and no
 
 exports[`SearchListControl should render a search box with a search term, and only matching options 1`] = `
 <div
-  className="woocommerce-search-list "
+  className="woocommerce-search-list"
 >
   <div
     className="woocommerce-search-list__selected"
@@ -1521,7 +1521,7 @@ exports[`SearchListControl should render a search box with a search term, and on
 
 exports[`SearchListControl should render a search box with a search term, and only matching options, regardless of case sensitivity 1`] = `
 <div
-  className="woocommerce-search-list "
+  className="woocommerce-search-list"
 >
   <div
     className="woocommerce-search-list__selected"
@@ -1656,7 +1656,7 @@ exports[`SearchListControl should render a search box with a search term, and on
 
 exports[`SearchListControl should render a search box, a list of options, and 1 selected item 1`] = `
 <div
-  className="woocommerce-search-list "
+  className="woocommerce-search-list"
 >
   <div
     className="woocommerce-search-list__selected"
@@ -1995,7 +1995,7 @@ exports[`SearchListControl should render a search box, a list of options, and 1
 
 exports[`SearchListControl should render a search box, a list of options, and 2 selected item 1`] = `
 <div
-  className="woocommerce-search-list "
+  className="woocommerce-search-list"
 >
   <div
     className="woocommerce-search-list__selected"