Problem/Motivation

Autocomplete fields has core styles, which overrides styles of form-element.css.
autocomplete olivero

These core styles comes from /core/modules/system/css/components/autocomplete-loading.module.css.

Proposed resolution

These styles should be kicked and recreated from Olivero, based on figma. So same as other input text fields.

About what icon we may have for autocomplete fields? Well, It's up to you, maybe make sense to follow Claro way and use magnifier icon:
autocomplete claro

CommentFileSizeAuthor
#13 3128172-13.patch27.1 KBmherchel
#9 3128172-9.patch29.92 KBkostyashupenko
#9 autocomplete.gif3.3 MBkostyashupenko
Снимок экрана 2020-04-16 в 16.03.55.png18.17 KBkostyashupenko
Снимок экрана 2020-04-16 в 16.03.39.png16.62 KBkostyashupenko

Comments

kostyashupenko created an issue. See original summary.

kostyashupenko’s picture

kostyashupenko
Primary language English
Location Omsk
commented
Issue summary: View changes
kostyashupenko’s picture

kostyashupenko
Primary language English
Location Omsk
commented
Issue summary: View changes
kostyashupenko’s picture

kostyashupenko
Primary language English
Location Omsk
commented
Assigned: Unassigned » kostyashupenko
kostyashupenko’s picture

kostyashupenko
Primary language English
Location Omsk
commented
Title: Theme autocomplete input fields » Theme autocomplete input fields and autocomplete dropdown
kostyashupenko’s picture

kostyashupenko
Primary language English
Location Omsk
commented
Issue summary: View changes
kostyashupenko’s picture

kostyashupenko
Primary language English
Location Omsk
commented
Assigned: kostyashupenko » Unassigned

No time today for it :)

kostyashupenko’s picture

kostyashupenko
Primary language English
Location Omsk
commented
Assigned: Unassigned » kostyashupenko
kostyashupenko’s picture

kostyashupenko
Primary language English
Location Omsk
commented
Title: Theme autocomplete input fields and autocomplete dropdown » Theme autocomplete input fields
Assigned: kostyashupenko » Unassigned
Status: Active » Needs review
StatusFileSize
new autocomplete.gif3.3 MB
new 3128172-9.patch29.92 KB

Autocomplete was styled
Autocomplete

How to test:
1. Set Olivero as administration theme + check checkbox "Use the administration theme when editing or creating content"
1. Add couple tags here /admin/structure/taxonomy/manage/tags/overview
2. Create Article CT node and play with Tags field during creation of your node.

kostyashupenko’s picture

kostyashupenko
Primary language English
Location Omsk
commented
Issue summary: View changes

It's not easy to style autocomplete dropdown, since huge work expected.
We have to override whole this file https://git.drupalcode.org/project/drupal/-/blob/9.1.x/core/assets/vendo... like it was done in Claro. So better to manage it in new task

mherchel’s picture

mherchel
he/him
Primary language English
Location Gainesville, FL, US
commented

I'm not sure I like the the magnifying glass as the "non-active" icon. That icon looks to me like it's a traditional search form. I think just a standard ring would be more understood.

That being said, this is what Claro has implemented, which has been [hopefully] thought through.

mherchel’s picture

mherchel
he/him
Primary language English
Location Gainesville, FL, US
commented

I'm getting the following when applying the patch. I'm going to try to re-roll it. 

error: cannot apply binary patch to 'images/throbber.gif' without full index line
error: images/throbber.gif: patch does not apply
mherchel’s picture

mherchel
he/him
Primary language English
Location Gainesville, FL, US
commented
Status: Needs review » Reviewed & tested by the community
StatusFileSize
new 3128172-13.patch27.1 KB

This looks good. I re-rolled, and also reformatted the CSS to use indentation and wrap the long multiple background properties (I made sure it passed linting). Patch attached and committing!

mherchel’s picture

mherchel
he/him
Primary language English
Location Gainesville, FL, US
commented
Status: Reviewed & tested by the community » Fixed

Committed!

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.