feat(dropdown): maintain a lower opacity of the clear icon unless being hovered

ko2in · web-flow · commit 45ac3fe85a21 · 2025-03-17T20:29:30.000+01:00
When the dropdown allows for clearing, the clear icon should maintain a lower opacity unless it's being hovered. This improves user experience by indicating the option to clear the selection only when the user interacts with it.
diff --git a/src/definitions/modules/dropdown.less b/src/definitions/modules/dropdown.less
@@ -616,14 +616,20 @@ select.ui.dropdown {
         .ui.ui.selection.dropdown@{notInverted}:has(> input:focus) {
             border-color: @selectionFocusBorderColor;
             box-shadow: none;
-            & > i.icon {
-                opacity: @selectionIconFocusOpacity;
+        }
+
+        .ui.ui.selection.dropdown {
+            &:focus,
+            &:has(> input:focus) {
+                & > i.icon:not(.remove) {
+                    opacity: @selectionIconFocusOpacity;
+                }
+                & > i.icon.remove:not(:hover) {
+                    opacity: @actionIconFocusOpacity;
+                }
             }
         }
     }
-    .ui.ui.selection.dropdown:focus > i.icon {
-        opacity: @selectionIconFocusOpacity;
-    }
 
     /* Visible */
     .ui.selection.visible.dropdown > .text:not(.default) {
diff --git a/src/themes/default/modules/dropdown.variables b/src/themes/default/modules/dropdown.variables
@@ -220,6 +220,7 @@
 @selectionVisibleIconOpacity: "";
 
 @selectionIconFocusOpacity: 1;
+@actionIconFocusOpacity: ((@selectionIconFocusOpacity * 68) / 100);
 
 /* --------------
      Search
