Add edge-to-edge tweak

Supposed to be used when component is placed within another control that already provides external borders. Should not be confused with 'no-border' style. Some controls in the 'edge-to-edge' mode still need a border, e.g. toolbar always needs the bottom border.

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

@@ -1,7 +1,15 @@
 package atlantafx.base.theme;
 
-/** Contains extra style class names introduced to tweak some controls view. */
+/**
+ * Contains extra style class names introduced to tweak some controls view if and where it makes sense.
+ * The reason of supporting tweaks is to allow users to write less CSS code. Search for #tweak/classname
+ * to find the controls supporting tweaks or check the control page in the Sampler app.
+ */
 public final class Tweaks {
 
+    /** Removes or hides dropdown arrow button */
     public static final String NO_ARROW  = "no-arrow";
+
+    /** Remover external control borders */
+    public static final String EDGE_TO_EDGE = "edge-to-edge";
 }

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

@@ -3,6 +3,7 @@ package atlantafx.sampler.page.components;
 
 import atlantafx.base.controls.Spacer;
 import atlantafx.base.controls.ToggleSwitch;
+import atlantafx.base.theme.Tweaks;
 import atlantafx.sampler.fake.domain.Book;
 import atlantafx.sampler.page.AbstractPage;
 import javafx.geometry.Orientation;
@@ -91,6 +92,9 @@ public class ListPage extends AbstractPage {
         var stripedToggle = new ToggleSwitch("Striped");
         stripedToggle.selectedProperty().addListener((obs, old, value) -> toggleListProperty(lv -> toggleStyleClass(lv, STRIPED)));
 
+        var edge2edgeToggle = new ToggleSwitch("Edge to edge");
+        edge2edgeToggle.selectedProperty().addListener((obs, old, value) -> toggleListProperty(lv -> toggleStyleClass(lv, Tweaks.EDGE_TO_EDGE)));
+
         var disableToggle = new ToggleSwitch("Disable");
         disableToggle.selectedProperty().addListener((obs, old, val) -> findDisplayedList().ifPresent(lv -> {
             if (val != null) { lv.setDisable(val); }
@@ -101,6 +105,7 @@ public class ListPage extends AbstractPage {
                 borderedToggle,
                 denseToggle,
                 stripedToggle,
+                edge2edgeToggle,
                 disableToggle,
                 new Spacer()
         );

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

@@ -1,10 +1,11 @@
 /* SPDX-License-Identifier: MIT */
 package atlantafx.sampler.page.components;
 
-import atlantafx.base.controls.ToggleSwitch;
-import atlantafx.sampler.fake.domain.Product;
 import atlantafx.base.controls.CaptionMenuItem;
 import atlantafx.base.controls.Spacer;
+import atlantafx.base.controls.ToggleSwitch;
+import atlantafx.base.theme.Tweaks;
+import atlantafx.sampler.fake.domain.Product;
 import atlantafx.sampler.page.AbstractPage;
 import javafx.beans.binding.Bindings;
 import javafx.beans.binding.StringBinding;
@@ -225,6 +226,15 @@ public class TablePage extends AbstractPage {
         table.getSelectionModel().cellSelectionEnabledProperty().bind(cellSelectionItem.selectedProperty());
         cellSelectionItem.setSelected(false);
 
+        var edge2edgeItem = new CheckMenuItem("Edge to edge");
+        edge2edgeItem.selectedProperty().addListener((obs, old, val) -> {
+            if (!val) {
+                table.getStyleClass().remove(Tweaks.EDGE_TO_EDGE);
+            } else {
+                table.getStyleClass().add(Tweaks.EDGE_TO_EDGE);
+            }
+        });
+
         var menuButtonItem = new CheckMenuItem("Show menu button");
         table.tableMenuButtonVisibleProperty().bind(menuButtonItem.selectedProperty());
         menuButtonItem.setSelected(true);
@@ -240,6 +250,7 @@ public class TablePage extends AbstractPage {
                     new SeparatorMenuItem(),
                     editCellsItem,
                     cellSelectionItem,
+                    edge2edgeItem,
                     menuButtonItem
             );
         }};

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

@@ -3,6 +3,7 @@ package atlantafx.sampler.page.components;
 
 import atlantafx.base.controls.Spacer;
 import atlantafx.base.controls.ToggleSwitch;
+import atlantafx.base.theme.Tweaks;
 import atlantafx.sampler.page.AbstractPage;
 import javafx.geometry.Orientation;
 import javafx.scene.control.*;
@@ -71,6 +72,11 @@ public class TreePage extends AbstractPage {
         }));
         showRootToggle.setSelected(true);
 
+        var edge2edgeToggle = new ToggleSwitch("Edge to edge");
+        edge2edgeToggle.selectedProperty().addListener(
+                (obs, old, val) -> findDisplayedTree().ifPresent(tv -> toggleStyleClass(tv, Tweaks.EDGE_TO_EDGE))
+        );
+
         var disableToggle = new ToggleSwitch("Disable");
         disableToggle.selectedProperty().addListener((obs, old, val) -> findDisplayedTree().ifPresent(tv -> {
             if (val != null) { tv.setDisable(val); }
@@ -80,6 +86,7 @@ public class TreePage extends AbstractPage {
                 new Spacer(),
                 denseToggle,
                 showRootToggle,
+                edge2edgeToggle,
                 disableToggle,
                 new Spacer()
         );

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

@@ -4,6 +4,7 @@ package atlantafx.sampler.page.components;
 import atlantafx.base.controls.CaptionMenuItem;
 import atlantafx.base.controls.Spacer;
 import atlantafx.base.controls.ToggleSwitch;
+import atlantafx.base.theme.Tweaks;
 import atlantafx.sampler.fake.domain.Product;
 import atlantafx.sampler.page.AbstractPage;
 import javafx.beans.property.SimpleStringProperty;
@@ -213,6 +214,15 @@ public class TreeTablePage extends AbstractPage {
         treeTable.getSelectionModel().cellSelectionEnabledProperty().bind(cellSelectionItem.selectedProperty());
         cellSelectionItem.setSelected(false);
 
+        var edge2edgeItem = new CheckMenuItem("Edge to edge");
+        edge2edgeItem.selectedProperty().addListener((obs, old, val) -> {
+            if (!val) {
+                treeTable.getStyleClass().remove(Tweaks.EDGE_TO_EDGE);
+            } else {
+                treeTable.getStyleClass().add(Tweaks.EDGE_TO_EDGE);
+            }
+        });
+
         var menuButtonItem = new CheckMenuItem("Show menu button");
         treeTable.tableMenuButtonVisibleProperty().bind(menuButtonItem.selectedProperty());
         menuButtonItem.setSelected(true);
@@ -229,6 +239,7 @@ public class TreeTablePage extends AbstractPage {
                     showRootItem,
                     editCellsItem,
                     cellSelectionItem,
+                    edge2edgeItem,
                     menuButtonItem
             );
         }};

sampler/src/main/java/atlantafx/sampler/page/showcase/musicplayer/PlaylistPane.java

@@ -2,6 +2,7 @@
 package atlantafx.sampler.page.showcase.musicplayer;
 
 import atlantafx.base.controls.Spacer;
+import atlantafx.base.theme.Tweaks;
 import javafx.application.Platform;
 import javafx.collections.ListChangeListener;
 import javafx.concurrent.Task;
@@ -82,6 +83,7 @@ final class PlaylistPane extends VBox {
         controlsBox.setAlignment(CENTER_LEFT);
 
         playlist = new ListView<>(model.playlist());
+        playlist.getStyleClass().add(Tweaks.EDGE_TO_EDGE);
         playlist.setCellFactory(param -> new MediaCell(model));
         playlist.setPlaceholder(new Label("No Content"));
         VBox.setVgrow(playlist, ALWAYS);

sampler/src/main/java/atlantafx/sampler/page/showcase/musicplayer/music-player.css

@@ -41,9 +41,6 @@
     -color-button-bg-focused: transparent;
     -color-button-bg-pressed: transparent;
 }
-.music-player-showcase > .player-screen > * > .playlist > .list-view {
-    -fx-border-width: 0;
-}
 .music-player-showcase > .player-screen > * > .playlist > .list-view .list-cell {
     -color-cell-bg: transparent;
     -color-cell-bg-selected: transparent;

styles/src/components/_data.scss

@@ -50,6 +50,11 @@ $tree-cell-indent: 1em !default;
       -fx-opacity: cfg.$opacity-disabled;
     }
   }
+
+  // #tweak/edge-to-edge
+  &.edge-to-edge {
+    -fx-border-width: 0;
+  }
 }
 
 // row selection (cellSelectionEnabled = false)

styles/src/components/_menu-button.scss

@@ -122,6 +122,7 @@ $separator-width:    0.75px !default;
 }
 
 .menu-button {
+  // #tweak/no-arrow
   &.no-arrow {
     >.arrow-button {
       -fx-padding: 0;