Issue #3477435 by mogtofu33: Autocomplete element theme

css/icon.autocomplete.css

@@ -27,11 +27,14 @@
 .ui-icons-preview.form-item {
   min-width: 3rem;
   max-width: 3rem;
-  border: var(--input-border-size) solid var(--input-border-color);
+  /* Olivero fallback */
+  border: var(--input-border-size, 1px) solid
+    var(--color--gray-60, var(--input-border-color, #ccced1));
   border-right: 0 none;
   border-top-right-radius: 0;
   border-bottom-right-radius: 0;
-  background-color: var(--color-gray-050);
+  /* Olivero fallback */
+  background-color: var(--color-gray-050, var(--color--gray-95, #eaeef0));
 }
 
 .ui-icons-preview-icon img,
@@ -44,3 +47,15 @@
   max-height: 2.8rem;
   margin: auto;
 }
+
+/* Gin theme support */
+body[class*="gin"] .ui-icons-preview-icon {
+  height: 2.3rem;
+}
+body[class*="gin"] .ui-icons-preview-icon img,
+body[class*="gin"] .ui-icons-preview-icon svg,
+body[class*="gin"] .ui-icons-preview-icon > i,
+body[class*="gin"] .ui-icons-preview-icon > b,
+body[class*="gin"] .ui-icons-preview-icon > span {
+  max-height: 2.2rem;
+}

js/icon.autocomplete.js

@@ -17,8 +17,7 @@
         context,
       )
         .filter(
-          (iconSelector) =>
-            typeof $(iconSelector).autocomplete() === 'function',
+          (iconSelector) => typeof $(iconSelector).autocomplete() === 'object',
         )
         .forEach((iconSelector) => {
           $(iconSelector).autocomplete('option', {

src/Element/IconAutocomplete.php

@@ -79,7 +79,7 @@ class IconAutocomplete extends FormElementBase {
       '#pre_render' => [
         [$class, 'preRenderGroup'],
       ],
-      '#theme' => 'input__icon',
+      '#theme' => 'icon_selector',
       '#theme_wrappers' => ['form_element'],
       '#allowed_icon_pack' => [],
       '#show_settings' => FALSE,

tests/src/Unit/Element/IconAutocompleteTest.php

@@ -63,7 +63,7 @@ class IconAutocompleteTest extends IconUnitTestCase {
       '#pre_render' => [
         [$class, 'preRenderGroup'],
       ],
-      '#theme' => 'input__icon',
+      '#theme' => 'icon_selector',
       '#theme_wrappers' => ['form_element'],
       '#allowed_icon_pack' => [],
       '#show_settings' => FALSE,

ui_icons.module

@@ -38,7 +38,7 @@ function ui_icons_help(string $route_name, RouteMatchInterface $route_match): ?s
  */
 function ui_icons_theme(array $existing, string $type, string $theme, string $path): array {
   return [
-    'input__icon' => [
+    'icon_selector' => [
       'render element' => 'element',
     ],
     'icon_preview' => [
@@ -64,7 +64,7 @@ function ui_icons_theme(array $existing, string $type, string $theme, string $pa
  *
  * @see src/Element/IconAutocomplete.php
  */
-function template_preprocess_input__icon(array &$variables): void {
+function template_preprocess_icon_selector(array &$variables): void {
   $variables['has_settings'] = $variables['element']['#show_settings'] ?? FALSE;
   $variables['icon_form'] = $variables['element']['icon_id'] ?? '';