From 080271fb274667996f6d90d7603b2692ddbc9295 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Albert=20Juh=C3=A9=20Lluveras?= Date: Tue, 22 Dec 2020 15:32:24 +0100 Subject: [PATCH] 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 --- .../packages/components/CHANGELOG.md | 1 + .../src/search-list-control/index.js | 13 ++++++++++-- .../src/search-list-control/stories/index.js | 2 ++ .../src/search-list-control/style.scss | 14 ++++++------- .../test/__snapshots__/index.js.snap | 20 +++++++++---------- 5 files changed, 31 insertions(+), 19 deletions(-) diff --git a/plugins/woocommerce-admin/packages/components/CHANGELOG.md b/plugins/woocommerce-admin/packages/components/CHANGELOG.md index 79ab0bd2fef..c41179c4ce5 100644 --- a/plugins/woocommerce-admin/packages/components/CHANGELOG.md +++ b/plugins/woocommerce-admin/packages/components/CHANGELOG.md @@ -4,6 +4,7 @@ - Add new `` component. - Remove the `showCount` prop from ``. Count will always be displayed if any of those props is not undefined/null: `countLabel` and `item.count`. - Fix alignment of `` count bubble in newest versions of `@wordpress/components`. +- `` 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 ``. - Add product attributes support to ``. - Allow single-selection support to ``. diff --git a/plugins/woocommerce-admin/packages/components/src/search-list-control/index.js b/plugins/woocommerce-admin/packages/components/src/search-list-control/index.js index 90385877db2..10c03c71d9b 100644 --- a/plugins/woocommerce-admin/packages/components/src/search-list-control/index.js +++ b/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 ( -
+
{ this.renderSelectedSection() }
@@ -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. diff --git a/plugins/woocommerce-admin/packages/components/src/search-list-control/stories/index.js b/plugins/woocommerce-admin/packages/components/src/search-list-control/stories/index.js index 7a1e8e79a12..d8b3130c9c0 100644 --- a/plugins/woocommerce-admin/packages/components/src/search-list-control/stories/index.js +++ b/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( { setState( { selected: items } ) } diff --git a/plugins/woocommerce-admin/packages/components/src/search-list-control/style.scss b/plugins/woocommerce-admin/packages/components/src/search-list-control/style.scss index eac52420603..4fe9ef27850 100644 --- a/plugins/woocommerce-admin/packages/components/src/search-list-control/style.scss +++ b/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; diff --git a/plugins/woocommerce-admin/packages/components/src/search-list-control/test/__snapshots__/index.js.snap b/plugins/woocommerce-admin/packages/components/src/search-list-control/test/__snapshots__/index.js.snap index e3e99bca5ec..c53314c37a5 100644 --- a/plugins/woocommerce-admin/packages/components/src/search-list-control/test/__snapshots__/index.js.snap +++ b/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`] = `