Wrap search control selected items in list (https://github.com/woocommerce/woocommerce-admin/pull/5231)
* Wrap search control selected items in list * Fix up snapshots
This commit is contained in:
Joshua T Flowers
GitHub
parent
20a14ca689
commit
443e2f9a55
|
|
@ -209,14 +209,19 @@ export class SearchListControl extends Component {
|
||||||
</Button>
|
</Button>
|
||||||
) : null }
|
) : null }
|
||||||
</div>
|
</div>
|
||||||
{ selected.map( ( item, i ) => (
|
{ selectedCount > 0 ? (
|
||||||
<Tag
|
<ul>
|
||||||
key={ i }
|
{ selected.map( ( item, i ) => (
|
||||||
label={ item.name }
|
<li key={ i }>
|
||||||
id={ item.id }
|
<Tag
|
||||||
remove={ this.onRemove }
|
label={ item.name }
|
||||||
/>
|
id={ item.id }
|
||||||
) ) }
|
remove={ this.onRemove }
|
||||||
|
/>
|
||||||
|
</li>
|
||||||
|
) ) }
|
||||||
|
</ul>
|
||||||
|
) : null }
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -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 {
|
||||||
|
|
|
||||||
|
|
@ -1676,47 +1676,51 @@ exports[`SearchListControl should render a search box, a list of options, and 1
|
||||||
Clear all
|
Clear all
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
<span
|
<ul>
|
||||||
className="woocommerce-tag has-remove"
|
<li>
|
||||||
>
|
|
||||||
<span
|
|
||||||
className="woocommerce-tag__text"
|
|
||||||
id="woocommerce-tag__label-0"
|
|
||||||
>
|
|
||||||
<span
|
<span
|
||||||
className="screen-reader-text"
|
className="woocommerce-tag has-remove"
|
||||||
>
|
>
|
||||||
Clementine
|
<span
|
||||||
|
className="woocommerce-tag__text"
|
||||||
|
id="woocommerce-tag__label-0"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
className="screen-reader-text"
|
||||||
|
>
|
||||||
|
Clementine
|
||||||
|
</span>
|
||||||
|
<span
|
||||||
|
aria-hidden="true"
|
||||||
|
>
|
||||||
|
Clementine
|
||||||
|
</span>
|
||||||
|
</span>
|
||||||
|
<button
|
||||||
|
aria-describedby="woocommerce-tag__label-0"
|
||||||
|
aria-label="Remove Clementine"
|
||||||
|
className="components-button woocommerce-tag__remove"
|
||||||
|
onClick={[Function]}
|
||||||
|
type="button"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
aria-hidden={true}
|
||||||
|
className="dashicon dashicons-dismiss"
|
||||||
|
focusable={false}
|
||||||
|
height={20}
|
||||||
|
role="img"
|
||||||
|
viewBox="0 0 20 20"
|
||||||
|
width={20}
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M10 2c4.42 0 8 3.58 8 8s-3.58 8-8 8-8-3.58-8-8 3.58-8 8-8zm5 11l-3-3 3-3-2-2-3 3-3-3-2 2 3 3-3 3 2 2 3-3 3 3z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
</span>
|
</span>
|
||||||
<span
|
</li>
|
||||||
aria-hidden="true"
|
</ul>
|
||||||
>
|
|
||||||
Clementine
|
|
||||||
</span>
|
|
||||||
</span>
|
|
||||||
<button
|
|
||||||
aria-describedby="woocommerce-tag__label-0"
|
|
||||||
aria-label="Remove Clementine"
|
|
||||||
className="components-button woocommerce-tag__remove"
|
|
||||||
onClick={[Function]}
|
|
||||||
type="button"
|
|
||||||
>
|
|
||||||
<svg
|
|
||||||
aria-hidden={true}
|
|
||||||
className="dashicon dashicons-dismiss"
|
|
||||||
focusable={false}
|
|
||||||
height={20}
|
|
||||||
role="img"
|
|
||||||
viewBox="0 0 20 20"
|
|
||||||
width={20}
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
>
|
|
||||||
<path
|
|
||||||
d="M10 2c4.42 0 8 3.58 8 8s-3.58 8-8 8-8-3.58-8-8 3.58-8 8-8zm5 11l-3-3 3-3-2-2-3 3-3-3-2 2 3 3-3 3 2 2 3-3 3 3z"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
</button>
|
|
||||||
</span>
|
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
className="woocommerce-search-list__search"
|
className="woocommerce-search-list__search"
|
||||||
|
|
@ -2011,88 +2015,94 @@ exports[`SearchListControl should render a search box, a list of options, and 2
|
||||||
Clear all
|
Clear all
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
<span
|
<ul>
|
||||||
className="woocommerce-tag has-remove"
|
<li>
|
||||||
>
|
|
||||||
<span
|
|
||||||
className="woocommerce-tag__text"
|
|
||||||
id="woocommerce-tag__label-1"
|
|
||||||
>
|
|
||||||
<span
|
<span
|
||||||
className="screen-reader-text"
|
className="woocommerce-tag has-remove"
|
||||||
>
|
>
|
||||||
Clementine
|
<span
|
||||||
|
className="woocommerce-tag__text"
|
||||||
|
id="woocommerce-tag__label-1"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
className="screen-reader-text"
|
||||||
|
>
|
||||||
|
Clementine
|
||||||
|
</span>
|
||||||
|
<span
|
||||||
|
aria-hidden="true"
|
||||||
|
>
|
||||||
|
Clementine
|
||||||
|
</span>
|
||||||
|
</span>
|
||||||
|
<button
|
||||||
|
aria-describedby="woocommerce-tag__label-1"
|
||||||
|
aria-label="Remove Clementine"
|
||||||
|
className="components-button woocommerce-tag__remove"
|
||||||
|
onClick={[Function]}
|
||||||
|
type="button"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
aria-hidden={true}
|
||||||
|
className="dashicon dashicons-dismiss"
|
||||||
|
focusable={false}
|
||||||
|
height={20}
|
||||||
|
role="img"
|
||||||
|
viewBox="0 0 20 20"
|
||||||
|
width={20}
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M10 2c4.42 0 8 3.58 8 8s-3.58 8-8 8-8-3.58-8-8 3.58-8 8-8zm5 11l-3-3 3-3-2-2-3 3-3-3-2 2 3 3-3 3 2 2 3-3 3 3z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
</span>
|
</span>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
<span
|
<span
|
||||||
aria-hidden="true"
|
className="woocommerce-tag has-remove"
|
||||||
>
|
>
|
||||||
Clementine
|
<span
|
||||||
|
className="woocommerce-tag__text"
|
||||||
|
id="woocommerce-tag__label-2"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
className="screen-reader-text"
|
||||||
|
>
|
||||||
|
Guava
|
||||||
|
</span>
|
||||||
|
<span
|
||||||
|
aria-hidden="true"
|
||||||
|
>
|
||||||
|
Guava
|
||||||
|
</span>
|
||||||
|
</span>
|
||||||
|
<button
|
||||||
|
aria-describedby="woocommerce-tag__label-2"
|
||||||
|
aria-label="Remove Guava"
|
||||||
|
className="components-button woocommerce-tag__remove"
|
||||||
|
onClick={[Function]}
|
||||||
|
type="button"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
aria-hidden={true}
|
||||||
|
className="dashicon dashicons-dismiss"
|
||||||
|
focusable={false}
|
||||||
|
height={20}
|
||||||
|
role="img"
|
||||||
|
viewBox="0 0 20 20"
|
||||||
|
width={20}
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M10 2c4.42 0 8 3.58 8 8s-3.58 8-8 8-8-3.58-8-8 3.58-8 8-8zm5 11l-3-3 3-3-2-2-3 3-3-3-2 2 3 3-3 3 2 2 3-3 3 3z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
</span>
|
</span>
|
||||||
</span>
|
</li>
|
||||||
<button
|
</ul>
|
||||||
aria-describedby="woocommerce-tag__label-1"
|
|
||||||
aria-label="Remove Clementine"
|
|
||||||
className="components-button woocommerce-tag__remove"
|
|
||||||
onClick={[Function]}
|
|
||||||
type="button"
|
|
||||||
>
|
|
||||||
<svg
|
|
||||||
aria-hidden={true}
|
|
||||||
className="dashicon dashicons-dismiss"
|
|
||||||
focusable={false}
|
|
||||||
height={20}
|
|
||||||
role="img"
|
|
||||||
viewBox="0 0 20 20"
|
|
||||||
width={20}
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
>
|
|
||||||
<path
|
|
||||||
d="M10 2c4.42 0 8 3.58 8 8s-3.58 8-8 8-8-3.58-8-8 3.58-8 8-8zm5 11l-3-3 3-3-2-2-3 3-3-3-2 2 3 3-3 3 2 2 3-3 3 3z"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
</button>
|
|
||||||
</span>
|
|
||||||
<span
|
|
||||||
className="woocommerce-tag has-remove"
|
|
||||||
>
|
|
||||||
<span
|
|
||||||
className="woocommerce-tag__text"
|
|
||||||
id="woocommerce-tag__label-2"
|
|
||||||
>
|
|
||||||
<span
|
|
||||||
className="screen-reader-text"
|
|
||||||
>
|
|
||||||
Guava
|
|
||||||
</span>
|
|
||||||
<span
|
|
||||||
aria-hidden="true"
|
|
||||||
>
|
|
||||||
Guava
|
|
||||||
</span>
|
|
||||||
</span>
|
|
||||||
<button
|
|
||||||
aria-describedby="woocommerce-tag__label-2"
|
|
||||||
aria-label="Remove Guava"
|
|
||||||
className="components-button woocommerce-tag__remove"
|
|
||||||
onClick={[Function]}
|
|
||||||
type="button"
|
|
||||||
>
|
|
||||||
<svg
|
|
||||||
aria-hidden={true}
|
|
||||||
className="dashicon dashicons-dismiss"
|
|
||||||
focusable={false}
|
|
||||||
height={20}
|
|
||||||
role="img"
|
|
||||||
viewBox="0 0 20 20"
|
|
||||||
width={20}
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
>
|
|
||||||
<path
|
|
||||||
d="M10 2c4.42 0 8 3.58 8 8s-3.58 8-8 8-8-3.58-8-8 3.58-8 8-8zm5 11l-3-3 3-3-2-2-3 3-3-3-2 2 3 3-3 3 2 2 3-3 3 3z"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
</button>
|
|
||||||
</span>
|
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
className="woocommerce-search-list__search"
|
className="woocommerce-search-list__search"
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue