Add graphic-only property to icon buttons

sampler/src/main/java/atlantafx/sampler/page/Page.java

@@ -123,7 +123,7 @@ public interface Page {
                 }
             });
 
-            var menuBtn = new MenuButton("", new FontIcon(Material2AL.EXPAND_MORE));
+            var menuBtn = new MenuButton(null, new FontIcon(Material2AL.EXPAND_MORE));
             menuBtn.getStyleClass().addAll(Styles.FLAT, Styles.BUTTON_ICON, Tweaks.NO_ARROW);
             menuBtn.getItems().setAll(sourceCodeItem, javadocItem);
 

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

@@ -163,35 +163,35 @@ public final class ButtonPage extends OutlinePage {
 
     private ExampleBox iconButtonExample() {
         //snippet_3:start
-        var normalBtn = new Button("", new FontIcon(Feather.MORE_HORIZONTAL));
+        var normalBtn = new Button(null, new FontIcon(Feather.MORE_HORIZONTAL));
         normalBtn.getStyleClass().addAll(Styles.BUTTON_ICON);
 
-        var accentBtn = new Button("", new FontIcon(Feather.MENU));
+        var accentBtn = new Button(null, new FontIcon(Feather.MENU));
         accentBtn.getStyleClass().addAll(
             Styles.BUTTON_ICON, Styles.ACCENT
         );
 
-        var successBtn = new Button("", new FontIcon(Feather.CHECK));
+        var successBtn = new Button(null, new FontIcon(Feather.CHECK));
         successBtn.getStyleClass().addAll(
             Styles.BUTTON_ICON, Styles.SUCCESS
         );
 
-        var dangerBtn = new Button("", new FontIcon(Feather.TRASH));
+        var dangerBtn = new Button(null, new FontIcon(Feather.TRASH));
         dangerBtn.getStyleClass().addAll(
             Styles.BUTTON_ICON, Styles.BUTTON_OUTLINED, Styles.DANGER
         );
 
-        var flatAccentBtn = new Button("", new FontIcon(Feather.MIC));
+        var flatAccentBtn = new Button(null, new FontIcon(Feather.MIC));
         flatAccentBtn.getStyleClass().addAll(
             Styles.BUTTON_ICON, Styles.FLAT, Styles.ACCENT
         );
 
-        var flatSuccessBtn = new Button("", new FontIcon(Feather.USER));
+        var flatSuccessBtn = new Button(null, new FontIcon(Feather.USER));
         flatSuccessBtn.getStyleClass().addAll(
             Styles.BUTTON_ICON, Styles.FLAT, Styles.SUCCESS
         );
 
-        var flatDangerBtn = new Button("", new FontIcon(Feather.CROSSHAIR));
+        var flatDangerBtn = new Button(null, new FontIcon(Feather.CROSSHAIR));
         flatDangerBtn.getStyleClass().addAll(
             Styles.BUTTON_ICON, Styles.FLAT, Styles.DANGER
         );
@@ -212,45 +212,38 @@ public final class ButtonPage extends OutlinePage {
 
     private ExampleBox circularButtonExample() {
         //snippet_4:start
-        var normalBtn = new Button("", new FontIcon(Feather.MORE_HORIZONTAL));
+        var normalBtn = new Button(null, new FontIcon(Feather.MORE_HORIZONTAL));
         normalBtn.getStyleClass().addAll(Styles.BUTTON_CIRCLE);
-        normalBtn.setShape(new Circle(50));
 
-        var accentBtn = new Button("", new FontIcon(Feather.MENU));
+        var accentBtn = new Button(null, new FontIcon(Feather.MENU));
         accentBtn.getStyleClass().addAll(
             Styles.BUTTON_CIRCLE, Styles.ACCENT
         );
-        accentBtn.setShape(new Circle(50));
 
-        var successBtn = new Button("", new FontIcon(Feather.CHECK));
+        var successBtn = new Button(null, new FontIcon(Feather.CHECK));
         successBtn.getStyleClass().addAll(
             Styles.BUTTON_CIRCLE, Styles.SUCCESS
         );
-        successBtn.setShape(new Circle(50));
 
-        var dangerBtn = new Button("", new FontIcon(Feather.TRASH));
+        var dangerBtn = new Button(null, new FontIcon(Feather.TRASH));
         dangerBtn.getStyleClass().addAll(
             Styles.BUTTON_CIRCLE, Styles.BUTTON_OUTLINED, Styles.DANGER
         );
-        dangerBtn.setShape(new Circle(50));
 
-        var flatAccentBtn = new Button("", new FontIcon(Feather.MIC));
+        var flatAccentBtn = new Button(null, new FontIcon(Feather.MIC));
         flatAccentBtn.getStyleClass().addAll(
             Styles.BUTTON_CIRCLE, Styles.FLAT, Styles.ACCENT
         );
-        flatAccentBtn.setShape(new Circle(50));
 
-        var flatSuccessBtn = new Button("", new FontIcon(Feather.USER));
+        var flatSuccessBtn = new Button(null, new FontIcon(Feather.USER));
         flatSuccessBtn.getStyleClass().addAll(
             Styles.BUTTON_CIRCLE, Styles.FLAT, Styles.SUCCESS
         );
-        flatSuccessBtn.setShape(new Circle(50));
 
-        var flatDangerBtn = new Button("", new FontIcon(Feather.CROSSHAIR));
+        var flatDangerBtn = new Button(null, new FontIcon(Feather.CROSSHAIR));
         flatDangerBtn.getStyleClass().addAll(
             Styles.BUTTON_CIRCLE, Styles.FLAT, Styles.DANGER
         );
-        flatDangerBtn.setShape(new Circle(50));
         //snippet_4:end
 
         var box = new HBox(HGAP_20,
@@ -379,7 +372,7 @@ public final class ButtonPage extends OutlinePage {
         // -color-button-bg-pressed: -color-button-bg;
         btn.setStyle(customStyle);
 
-        var iconBtn = new Button("", new FontIcon(Material2AL.FAVORITE));
+        var iconBtn = new Button(null, new FontIcon(Material2AL.FAVORITE));
         iconBtn.getStyleClass().addAll(
             "favorite-button",
             Styles.BUTTON_CIRCLE, Styles.FLAT, Styles.DANGER

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

@@ -116,7 +116,7 @@ public final class DeckPanePage extends AbstractPage {
             return deck.getChildren().get(next);
         };
 
-        var topBtn = new Button("", new FontIcon(Material2MZ.NORTH));
+        var topBtn = new Button(null, new FontIcon(Material2MZ.NORTH));
         topBtn.setOnAction(e -> {
             if ((int) transitionType.getSelectedToggle().getUserData() < 0) {
                 deck.swipeUp(nextItem.get());
@@ -127,7 +127,7 @@ public final class DeckPanePage extends AbstractPage {
         galleryPane.setTop(topBtn);
         BorderPane.setAlignment(topBtn, Pos.CENTER);
 
-        var rightBtn = new Button("", new FontIcon(Material2AL.EAST));
+        var rightBtn = new Button(null, new FontIcon(Material2AL.EAST));
         rightBtn.setOnAction(e -> {
             if ((int) transitionType.getSelectedToggle().getUserData() < 0) {
                 deck.swipeRight(nextItem.get());
@@ -138,7 +138,7 @@ public final class DeckPanePage extends AbstractPage {
         galleryPane.setRight(rightBtn);
         BorderPane.setAlignment(rightBtn, Pos.CENTER);
 
-        var bottomBtn = new Button("", new FontIcon(Material2MZ.SOUTH));
+        var bottomBtn = new Button(null, new FontIcon(Material2MZ.SOUTH));
         bottomBtn.setOnAction(e -> {
             if ((int) transitionType.getSelectedToggle().getUserData() < 0) {
                 deck.swipeDown(nextItem.get());
@@ -149,7 +149,7 @@ public final class DeckPanePage extends AbstractPage {
         galleryPane.setBottom(bottomBtn);
         BorderPane.setAlignment(bottomBtn, Pos.CENTER);
 
-        var leftBtn = new Button("", new FontIcon(Material2MZ.WEST));
+        var leftBtn = new Button(null, new FontIcon(Material2MZ.WEST));
         leftBtn.setOnAction(e -> {
             if ((int) transitionType.getSelectedToggle().getUserData() < 0) {
                 deck.swipeLeft(nextItem.get());

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

@@ -159,7 +159,7 @@ public final class ProgressIndicatorPage extends OutlinePage {
         var reverseLabel = new Label("25%");
         reverseLabel.getStyleClass().add(Styles.TITLE_4);
 
-        var reverseBtn = new Button("", new FontIcon(Feather.PLAY));
+        var reverseBtn = new Button(null, new FontIcon(Feather.PLAY));
         reverseBtn.getStyleClass().addAll(
             Styles.BUTTON_CIRCLE, Styles.FLAT
         );

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

@@ -247,23 +247,23 @@ public final class TabPanePage extends OutlinePage {
     private TitledPane createController(BorderPane borderPane, TabPane tabs) {
         // == BUTTONS ==
 
-        var toTopBtn = new Button("", new FontIcon(Feather.ARROW_UP));
+        var toTopBtn = new Button(null, new FontIcon(Feather.ARROW_UP));
         toTopBtn.getStyleClass().addAll(Styles.BUTTON_ICON);
         toTopBtn.setOnAction(e -> rotateTabs(borderPane, tabs, Side.TOP));
 
-        var toRightBtn = new Button("", new FontIcon(Feather.ARROW_RIGHT));
+        var toRightBtn = new Button(null, new FontIcon(Feather.ARROW_RIGHT));
         toRightBtn.getStyleClass().addAll(Styles.BUTTON_ICON);
         toRightBtn.setOnAction(e -> rotateTabs(borderPane, tabs, Side.RIGHT));
 
-        var toBottomBtn = new Button("", new FontIcon(Feather.ARROW_DOWN));
+        var toBottomBtn = new Button(null, new FontIcon(Feather.ARROW_DOWN));
         toBottomBtn.getStyleClass().addAll(Styles.BUTTON_ICON);
         toBottomBtn.setOnAction(e -> rotateTabs(borderPane, tabs, Side.BOTTOM));
 
-        var toLeftBtn = new Button("", new FontIcon(Feather.ARROW_LEFT));
+        var toLeftBtn = new Button(null, new FontIcon(Feather.ARROW_LEFT));
         toLeftBtn.getStyleClass().addAll(Styles.BUTTON_ICON);
         toLeftBtn.setOnAction(e -> rotateTabs(borderPane, tabs, Side.LEFT));
 
-        var appendBtn = new Button("", new FontIcon(Feather.PLUS));
+        var appendBtn = new Button(null, new FontIcon(Feather.PLUS));
         appendBtn.getStyleClass().addAll(Styles.BUTTON_ICON, Styles.ACCENT);
         appendBtn.setOnAction(e -> tabs.getTabs().add(createRandomTab()));
 

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

@@ -112,7 +112,7 @@ public class TilePage extends OutlinePage {
         tile2.setGraphic(img);
 
         var tile3 = new Tile("Photos", "Last updated: Jun 9, 2019");
-        var btn = new Button("", new FontIcon(Material2OutlinedAL.DELETE));
+        var btn = new Button(null, new FontIcon(Material2OutlinedAL.DELETE));
         btn.getStyleClass().addAll(Styles.BUTTON_CIRCLE, Styles.FLAT);
         tile3.setAction(btn);
         //snippet_1:end

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

@@ -93,18 +93,18 @@ public final class ToggleButtonPage extends OutlinePage {
 
     private ExampleBox iconOnlyExample() {
         //snippet_2:start
-        var leftBtn = new ToggleButton("", new FontIcon(Feather.BOLD));
+        var leftBtn = new ToggleButton(null, new FontIcon(Feather.BOLD));
         leftBtn.getStyleClass().addAll(
             Styles.BUTTON_ICON, Styles.LEFT_PILL
         );
         leftBtn.setSelected(true);
 
-        var centerBtn = new ToggleButton("", new FontIcon(Feather.ITALIC));
+        var centerBtn = new ToggleButton(null, new FontIcon(Feather.ITALIC));
         centerBtn.getStyleClass().addAll(
             Styles.BUTTON_ICON, Styles.CENTER_PILL
         );
 
-        var rightBtn = new ToggleButton("", new FontIcon(Feather.UNDERLINE));
+        var rightBtn = new ToggleButton(null, new FontIcon(Feather.UNDERLINE));
         rightBtn.getStyleClass().addAll(
             Styles.BUTTON_ICON, Styles.RIGHT_PILL
         );
@@ -147,7 +147,7 @@ public final class ToggleButtonPage extends OutlinePage {
             }
         });
 
-        var prevBtn = new Button("\f", new FontIcon(Feather.CHEVRON_LEFT));
+        var prevBtn = new Button(null, new FontIcon(Feather.CHEVRON_LEFT));
         prevBtn.getStyleClass().addAll(
             Styles.BUTTON_ICON, Styles.LEFT_PILL, "toggle-button"
         );
@@ -158,7 +158,7 @@ public final class ToggleButtonPage extends OutlinePage {
             }
         });
 
-        var nextBtn = new Button("\f", new FontIcon(Feather.CHEVRON_RIGHT));
+        var nextBtn = new Button(null, new FontIcon(Feather.CHEVRON_RIGHT));
         nextBtn.getStyleClass().addAll(
             Styles.BUTTON_ICON, Styles.RIGHT_PILL, "toggle-button"
         );

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

@@ -211,30 +211,30 @@ public final class ToolBarPage extends OutlinePage {
     private TitledPane createController(BorderPane borderPane, ToolBar toolbar) {
         // == BUTTONS ==
 
-        var toTopBtn = new Button("", new FontIcon(Feather.ARROW_UP));
+        var toTopBtn = new Button(null, new FontIcon(Feather.ARROW_UP));
         toTopBtn.getStyleClass().addAll(Styles.BUTTON_ICON);
         toTopBtn.setOnAction(e -> rotateToolbar(borderPane, toolbar, Side.TOP));
 
-        var toRightBtn = new Button("", new FontIcon(Feather.ARROW_RIGHT));
+        var toRightBtn = new Button(null, new FontIcon(Feather.ARROW_RIGHT));
         toRightBtn.getStyleClass().addAll(Styles.BUTTON_ICON);
         toRightBtn.setOnAction(e -> rotateToolbar(borderPane, toolbar, Side.RIGHT));
 
-        var toBottomBtn = new Button("", new FontIcon(Feather.ARROW_DOWN));
+        var toBottomBtn = new Button(null, new FontIcon(Feather.ARROW_DOWN));
         toBottomBtn.getStyleClass().addAll(Styles.BUTTON_ICON);
         toBottomBtn.setOnAction(e -> rotateToolbar(borderPane, toolbar, Side.BOTTOM));
 
-        var toLeftBtn = new Button("", new FontIcon(Feather.ARROW_LEFT));
+        var toLeftBtn = new Button(null, new FontIcon(Feather.ARROW_LEFT));
         toLeftBtn.getStyleClass().addAll(Styles.BUTTON_ICON);
         toLeftBtn.setOnAction(e -> rotateToolbar(borderPane, toolbar, Side.LEFT));
 
-        var appendBtn = new Button("", new FontIcon(Feather.PLUS));
+        var appendBtn = new Button(null, new FontIcon(Feather.PLUS));
         appendBtn.getStyleClass().addAll(Styles.BUTTON_ICON, Styles.ACCENT);
         appendBtn.setOnAction(e -> {
             if (toolbar.getOrientation() == Orientation.HORIZONTAL) {
                 var textBtn = new Button(FAKER.animal().name(), new FontIcon(randomIcon()));
                 toolbar.getItems().add(textBtn);
             } else {
-                var iconBtn = new Button("", new FontIcon(randomIcon()));
+                var iconBtn = new Button(null, new FontIcon(randomIcon()));
                 iconBtn.getStyleClass().addAll(Styles.BUTTON_ICON);
                 toolbar.getItems().add(iconBtn);
             }
@@ -389,7 +389,7 @@ public final class ToolBarPage extends OutlinePage {
     }
 
     public static Button iconButton(Ikon icon) {
-        var btn = new Button("");
+        var btn = new Button(null);
         if (icon != null) {
             btn.setGraphic(new FontIcon(icon));
         }

sampler/src/main/java/atlantafx/sampler/page/general/AccentColorSelector.java

@@ -23,7 +23,7 @@ final class AccentColorSelector extends HBox {
     }
 
     private void createView() {
-        var resetBtn = new Button("", new FontIcon(Material2AL.CLEAR));
+        var resetBtn = new Button(null, new FontIcon(Material2AL.CLEAR));
         resetBtn.getStyleClass().addAll(BUTTON_ICON, FLAT);
         resetBtn.setOnAction(e -> ThemeManager.getInstance().resetAccentColor());
 
@@ -41,7 +41,7 @@ final class AccentColorSelector extends HBox {
         var icon = new Region();
         icon.getStyleClass().add("icon");
 
-        var btn = new Button("", icon);
+        var btn = new Button(null, icon);
         btn.getStyleClass().addAll(BUTTON_ICON, FLAT, "color-button");
         btn.setStyle("-color-primary:" + JColorUtils.toHexWithAlpha(accentColor.primaryColor()) + ";");
         btn.setUserData(accentColor);

sampler/src/main/java/atlantafx/sampler/page/general/ThemePage.java

@@ -153,7 +153,7 @@ public final class ThemePage extends OutlinePage {
     }
 
     private Node createThemeManagementSection() {
-        var themeRepoBtn = new Button("", new FontIcon(Material2OutlinedMZ.SETTINGS));
+        var themeRepoBtn = new Button(null, new FontIcon(Material2OutlinedMZ.SETTINGS));
         themeRepoBtn.getStyleClass().addAll(Styles.BUTTON_ICON, Styles.FLAT);
         themeRepoBtn.setTooltip(new Tooltip("Settings"));
         themeRepoBtn.setOnAction(e -> {

sampler/src/main/java/atlantafx/sampler/page/general/ThemeRepoManager.java

@@ -182,7 +182,7 @@ final class ThemeRepoManager extends VBox {
 
             // == CONTROLS ==
 
-            deleteBtn = new Button("", new FontIcon(Material2OutlinedAL.DELETE));
+            deleteBtn = new Button(null, new FontIcon(Material2OutlinedAL.DELETE));
             deleteBtn.getStyleClass().addAll(BUTTON_ICON, BUTTON_CIRCLE, FLAT, DANGER);
             deleteBtn.setOnAction(e -> {
                 if (deleteHandler != null) {

sampler/src/main/java/atlantafx/sampler/page/showcase/filemanager/FileManagerPage.java

@@ -59,15 +59,13 @@ public class FileManagerPage extends ShowcasePage {
     }
 
     private void createView() {
-        var backBtn = new Button("", new FontIcon(Feather.ARROW_LEFT));
+        var backBtn = new Button(null, new FontIcon(Feather.ARROW_LEFT));
-        backBtn.setContentDisplay(ContentDisplay.GRAPHIC_ONLY);
         backBtn.getStyleClass().add(Styles.BUTTON_ICON);
         backBtn.setOnAction(e -> model.back());
         backBtn.disableProperty().bind(model.getHistory().canGoBackProperty().not());
         backBtn.setTooltip(new Tooltip("Back"));
 
-        var forthBtn = new Button("", new FontIcon(Feather.ARROW_RIGHT));
+        var forthBtn = new Button(null, new FontIcon(Feather.ARROW_RIGHT));
-        forthBtn.setContentDisplay(ContentDisplay.GRAPHIC_ONLY);
         forthBtn.getStyleClass().add(Styles.BUTTON_ICON);
         forthBtn.setOnAction(e -> model.forth());
         forthBtn.disableProperty().bind(model.getHistory().canGoForthProperty().not());

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

@@ -99,22 +99,19 @@ final class PlayerPane extends VBox {
 
         // == MEDIA CONTROLS ==
 
-        var prevBtn = new Button("", new FontIcon(FAST_REWIND));
+        var prevBtn = new Button(null, new FontIcon(FAST_REWIND));
         prevBtn.getStyleClass().addAll(BUTTON_CIRCLE);
-        prevBtn.setShape(new Circle(50));
         prevBtn.setTooltip(new Tooltip("Previous"));
         prevBtn.disableProperty().bind(model.canGoBackProperty().not());
         prevBtn.setOnAction(e -> model.playPrevious());
 
         playIcon = new FontIcon(PLAY_ARROW);
 
-        playBtn = new Button("", playIcon);
+        playBtn = new Button(null, playIcon);
         playBtn.getStyleClass().addAll("play", BUTTON_CIRCLE);
-        playBtn.setShape(new Circle(50));
 
-        var nextBtn = new Button("", new FontIcon(FAST_FORWARD));
+        var nextBtn = new Button(null, new FontIcon(FAST_FORWARD));
         nextBtn.getStyleClass().addAll(BUTTON_CIRCLE);
-        nextBtn.setShape(new Circle(50));
         nextBtn.disableProperty().bind(model.canGoForwardProperty().not());
         nextBtn.setOnAction(e -> model.playNext());
         nextBtn.setTooltip(new Tooltip("Next"));
@@ -144,15 +141,13 @@ final class PlayerPane extends VBox {
 
         // == EXTRA CONTROLS ==
 
-        var clearPlaylistBtn = new Button("", new FontIcon(CLEAR_ALL));
+        var clearPlaylistBtn = new Button(null, new FontIcon(CLEAR_ALL));
         clearPlaylistBtn.getStyleClass().addAll(BUTTON_CIRCLE);
-        clearPlaylistBtn.setShape(new Circle(50));
         clearPlaylistBtn.setTooltip(new Tooltip("Clear"));
         clearPlaylistBtn.setOnAction(e -> model.removeAll());
 
-        var shuffleBtn = new Button("", new FontIcon(SHUFFLE));
+        var shuffleBtn = new Button(null, new FontIcon(SHUFFLE));
         shuffleBtn.getStyleClass().addAll(BUTTON_CIRCLE);
-        shuffleBtn.setShape(new Circle(50));
         shuffleBtn.setTooltip(new Tooltip("Shuffle"));
         shuffleBtn.setOnAction(e -> model.shuffle());
 
@@ -169,9 +164,8 @@ final class PlayerPane extends VBox {
         volumePopover.setHeaderAlwaysVisible(false);
         volumePopover.setArrowLocation(ArrowLocation.TOP_LEFT);
 
-        var volumeBtn = new Button("", new FontIcon(VOLUME_UP));
+        var volumeBtn = new Button(null, new FontIcon(VOLUME_UP));
         volumeBtn.getStyleClass().addAll(BUTTON_CIRCLE);
-        volumeBtn.setShape(new Circle(50));
         volumeBtn.setOnAction(e -> volumePopover.show(volumeBtn));
 
         var extraControls = new HBox(10);

styles/src/components/_button.scss

@@ -162,20 +162,14 @@ $color-shadow: -color-shadow-default !default;
   // \s or \f as button text.
   &.button-icon {
     -fx-padding: cfg.$padding-y;
-
+    -fx-content-display: graphic-only;
-    >.text {
-      visibility: hidden;
-    }
   }
 
   &.button-circle {
     -fx-background-radius: 50;
     -fx-padding: 6px 8px 6px 8px;
+    -fx-content-display: graphic-only;
     -fx-effect:  none;
-
-    >.text {
-      visibility: hidden;
-    }
   }
 
   // toggle button + input group