Add tweak to apply different arrow button to combo boxes

base/src/main/java/atlantafx/base/theme/Tweaks.java

@@ -10,11 +10,14 @@ public final class Tweaks {
     /** Removes or hides dropdown arrow button */
     public static final String NO_ARROW  = "no-arrow";
 
-    /** Remover external control borders */
+    /** Removes external control borders */
     public static final String EDGE_TO_EDGE = "edge-to-edge";
 
     /** Alignment */
     public static final String ALIGN_LEFT = "align-left";
     public static final String ALIGN_CENTER = "align-center";
     public static final String ALIGN_RIGHT = "align-right";
+
+    /** Forces a control to use alternative icon, if available */
+    public static final String ALT_ICON = "alt-icon";
 }

sampler/src/main/java/atlantafx/sampler/page/components/ComboBoxPage.java

@@ -1,6 +1,7 @@
 /* SPDX-License-Identifier: MIT */
 package atlantafx.sampler.page.components;
 
+import atlantafx.base.theme.Tweaks;
 import atlantafx.sampler.page.AbstractPage;
 import javafx.collections.FXCollections;
 import javafx.collections.ObservableList;
@@ -115,32 +116,45 @@ public class ComboBoxPage extends AbstractPage {
             c.getSelectionModel().selectFirst();
         }), 2, 6);
 
-        // disabled
+        // alt icon
-        grid.add(comboBox(c -> c.setDisable(true)), 0, 7);
-        grid.add(label("disabled"), 1, 7);
-        grid.add(choiceBox(c -> c.setDisable(true)), 2, 7);
-
-        // overflow
         grid.add(comboBox(c -> {
-            c.setItems(createItems(50));
+            c.setItems(createItems(5));
+            c.getStyleClass().add(Tweaks.ALT_ICON);
             c.getSelectionModel().selectFirst();
-        }), 0, 8);
+        }), 0, 7);
-        grid.add(label("large list"), 1, 8);
+        grid.add(label("alt icon"), 1, 7);
         grid.add(choiceBox(c -> {
-            c.setItems(createItems(50));
+            c.setItems(createItems(5));
+            c.getStyleClass().add(Tweaks.ALT_ICON);
             c.getSelectionModel().selectFirst();
-        }), 2, 8);
+        }), 2, 7);
+
+        // disabled
+        grid.add(comboBox(c -> c.setDisable(true)), 0, 8);
+        grid.add(label("disabled"), 1, 8);
+        grid.add(choiceBox(c -> c.setDisable(true)), 2, 8);
 
         // overflow
         grid.add(comboBox(c -> {
-            c.setItems(observableArrayList(generate(() -> FAKER.chuckNorris().fact(), 5)));
+            c.setItems(createItems(50));
             c.getSelectionModel().selectFirst();
         }), 0, 9);
-        grid.add(label("wide text"), 1, 9);
+        grid.add(label("large list"), 1, 9);
+        grid.add(choiceBox(c -> {
+            c.setItems(createItems(50));
+            c.getSelectionModel().selectFirst();
+        }), 2, 9);
+
+        // overflow
+        grid.add(comboBox(c -> {
+            c.setItems(observableArrayList(generate(() -> FAKER.chuckNorris().fact(), 5)));
+            c.getSelectionModel().selectFirst();
+        }), 0, 10);
+        grid.add(label("wide text"), 1, 10);
         grid.add(choiceBox(c -> {
             c.setItems(observableArrayList(generate(() -> FAKER.chuckNorris().fact(), 5)));
             c.getSelectionModel().selectFirst();
-        }), 2, 9);
+        }), 2, 10);
 
         return grid;
     }

sampler/src/main/java/atlantafx/sampler/page/components/OverviewPage.java

@@ -2,6 +2,7 @@
 package atlantafx.sampler.page.components;
 
 import atlantafx.base.controls.ToggleSwitch;
+import atlantafx.base.theme.Tweaks;
 import atlantafx.base.util.IntegerStringConverter;
 import atlantafx.sampler.page.AbstractPage;
 import atlantafx.sampler.page.SampleBlock;
@@ -228,6 +229,7 @@ public class OverviewPage extends AbstractPage {
 
         var comboBox = new ComboBox<String>();
         comboBox.getItems().setAll("Option 1", "Option 2", "Option 3");
+        comboBox.getStyleClass().add(Tweaks.ALT_ICON);
         comboBox.getSelectionModel().selectFirst();
         comboBox.setPrefWidth(COMBO_BOX_WIDTH);
 

styles/src/components/_combo-box.scss

@@ -5,8 +5,8 @@
 @use "../settings/icons";
 @use "../settings/utils";
 
-$color-cell-bg:          -color-bg-default !default;
+$color-cell-bg: -color-bg-default !default;
-$color-cell-bg-hover:    if(cfg.$darkMode, -color-base-7, -color-base-1) !default;
+$color-cell-bg-hover: if(cfg.$darkMode, -color-base-7, -color-base-1) !default;
 $color-cell-bg-selected: if(cfg.$darkMode, -color-base-6, -color-base-2) !default;
 
 @mixin _arrow() {
@@ -14,6 +14,11 @@ $color-cell-bg-selected: if(cfg.$darkMode, -color-base-6, -color-base-2) !defaul
   -fx-background-color: -color-fg-muted;
 }
 
+// alt icon to make combo-box not to be confused with menu button, if matters
+@mixin _alt-arrow() {
+  @include icons.get("unfold-more", false);
+}
+
 @mixin _combo-box-base() {
   -fx-background-color: -color-border-default, -color-bg-default;
   -fx-background-insets: 0, 1;
@@ -103,6 +108,13 @@ $color-cell-bg-selected: if(cfg.$darkMode, -color-base-6, -color-base-2) !defaul
       -fx-background-color: -color-danger-fg;
     }
   }
+
+  // #tweaks/alt-icon
+  &.alt-icon {
+    >.arrow-button>.arrow {
+      @include _alt-arrow();
+    }
+  }
 }
 
 .combo-box {
@@ -203,4 +215,11 @@ $color-cell-bg-selected: if(cfg.$darkMode, -color-base-6, -color-base-2) !defaul
       -fx-background-color: -color-danger-fg;
     }
   }
+
+  // #tweaks/alt-icon
+  &.alt-icon {
+    >.open-button>.arrow {
+      @include _alt-arrow();
+    }
+  }
 }