* Wrap search control selected items in list

* Fix up snapshots
This commit is contained in:
Joshua T Flowers 2020-10-06 23:27:38 +03:00 committed by GitHub
parent 20a14ca689
commit 443e2f9a55
3 changed files with 145 additions and 122 deletions

View File

@ -209,14 +209,19 @@ export class SearchListControl extends Component {
</Button> </Button>
) : null } ) : null }
</div> </div>
{ selectedCount > 0 ? (
<ul>
{ selected.map( ( item, i ) => ( { selected.map( ( item, i ) => (
<li key={ i }>
<Tag <Tag
key={ i }
label={ item.name } label={ item.name }
id={ item.id } id={ item.id }
remove={ this.onRemove } remove={ this.onRemove }
/> />
</li>
) ) } ) ) }
</ul>
) : null }
</div> </div>
); );
} }

View File

@ -22,6 +22,14 @@
.woocommerce-tag__text { .woocommerce-tag__text {
max-width: 13em; max-width: 13em;
} }
ul {
list-style: none;
li {
float: left;
}
}
} }
.woocommerce-search-list__search { .woocommerce-search-list__search {

View File

@ -1676,6 +1676,8 @@ exports[`SearchListControl should render a search box, a list of options, and 1
Clear all Clear all
</button> </button>
</div> </div>
<ul>
<li>
<span <span
className="woocommerce-tag has-remove" className="woocommerce-tag has-remove"
> >
@ -1717,6 +1719,8 @@ exports[`SearchListControl should render a search box, a list of options, and 1
</svg> </svg>
</button> </button>
</span> </span>
</li>
</ul>
</div> </div>
<div <div
className="woocommerce-search-list__search" className="woocommerce-search-list__search"
@ -2011,6 +2015,8 @@ exports[`SearchListControl should render a search box, a list of options, and 2
Clear all Clear all
</button> </button>
</div> </div>
<ul>
<li>
<span <span
className="woocommerce-tag has-remove" className="woocommerce-tag has-remove"
> >
@ -2052,6 +2058,8 @@ exports[`SearchListControl should render a search box, a list of options, and 2
</svg> </svg>
</button> </button>
</span> </span>
</li>
<li>
<span <span
className="woocommerce-tag has-remove" className="woocommerce-tag has-remove"
> >
@ -2093,6 +2101,8 @@ exports[`SearchListControl should render a search box, a list of options, and 2
</svg> </svg>
</button> </button>
</span> </span>
</li>
</ul>
</div> </div>
<div <div
className="woocommerce-search-list__search" className="woocommerce-search-list__search"