Search Component Upgrade

[joshuajames-smith]

Problem

The UI for the search component in CURATE requires updated styling for design system consistency and to also improve the UX.

Solution

The updated search component should use an outlined select field and outlined text field (outline: 1px #C4C4C4 > border-radius: 8px). The select field should use a custom arrow icon pointing down. The text field should use the search icon inside the container. Gap between the fields and edges of box of ~9px.

The hover state for the select field outline should change colour to indicate user interaction (outline: #02FFAD).

When the select field is clicked by a user, the outline should change colour to indicate user interaction (outline: #000000) with the custom arrow icon pointing up. The placeholder text should be #A1A1A1 but the selected value text should be #000000.

The dropdown menu is the same width as the select field. The row hover state should be #E5E5E5always. The selected value should be marked with a tick icon to the left.

Once a user clicks off, the select field returns to original state with select field value remaining.

The hover state for the text field outline should change colour to indicate user interaction (outline: #02FFAD).

When the text field is clicked by a user, the outline should change colour to indicate user interaction (outline: #000000) with. The text should be #000000.

Once a user clicks the search icon (which works like all other icons - circle hover state with colour #02FFAD), the filter value should be placed into an outlined chip component (outline: 1px #000000` > border-radius: 6px > padding: 6px 10px 7px 10px) with a cross allowing users to get remove. A gap between chip and search component of ~16px.

Adobe XD: https://xd.adobe.com/view/7c2b47fe-97f4-4050-8ab2-bd2a1cb9949f-2978/

Considered Alternatives

N/A

[cooper667]

One (minor) thing for this, the 2nd input is a dropdown for some fields, like name...we should search when they select a value here I think, rather than require clicking a button. Free text should need a click?

[cooper667]

Also one query about behaviour:

I'd probably expect this to show items that have either of these values? Currently it will show only ones that have both (effectively AND vs OR). Not sure how intuitive that is for searching in a single category? However maybe you'd want AND when searching in 2 categories (ie Date AND Size).

Obviously t's quite easy to go down a rabbit hole where you allow any and all AND/OR combos, which is probably overkill....maybe it's just me and i'm using it on fields that I know each image can only have one of 🤷

[joshuajames-smith]

@cooper667 a good point!
If I look at how search works in Adobe Creative Cloud as an example, it appears to use AND for all filters? Do we head this direction and assume the UX is the add a set of filters and show all that appear for that? i.e. if a user adds two Date Created filters they want to see images of both otherwise they would only use one Date Created` filter?