Add BackButton (#692)

Co-authored-by: Danielle Foré <danielle@elementary.io>
Co-authored-by: Ryan Kornheisl <ryan@skarva.tech>

Author: 3 people

demo/Views/ControlsView.vala

@@ -23,8 +23,9 @@ public class ControlsView : DemoPage {
             tooltip_text = "Gtk.ToggleButton.icon_name"
         };
 
-        var back_button = new Gtk.Button.with_label ("Granite.CssClass.BACK");
-        back_button.add_css_class (Granite.CssClass.BACK);
+        var back_button = new Granite.BackButton ("Granite.BackButton") {
+            halign = START
+        };
 
         var destructive_button = new Gtk.Button.with_label ("Granite.CssClass.DESTRUCTIVE");
         destructive_button.add_css_class (Granite.CssClass.DESTRUCTIVE);

lib/Constants.vala

@@ -12,7 +12,7 @@ namespace Granite {
     /**
      * Style class for shaping a {@link Gtk.Button}
      */
-    [Version (deprecated = true, deprecated_since = "7.7.0", replacement = "Granite.CssClass.BACK")]
+    [Version (deprecated = true, deprecated_since = "7.7.0", replacement = "Granite.BackButton")]
     public const string STYLE_CLASS_BACK_BUTTON = "back-button";
     /**
      * Style class to match the window background
@@ -226,11 +226,6 @@ namespace Granite {
          */
         public const string ACCENT = "accent";
 
-        /**
-         * Style class for a {@link Gtk.Button} which is used to navigate backwards
-         */
-        public const string BACK = "back-button";
-
         /**
          * Style class for adding a small shadow to a container such as for image thumbnails
          */

lib/Styles/Gtk/Button.scss

@@ -57,44 +57,6 @@ button {
         }
     }
 
-    // Stopgap since we can't do angled buttons in GtkCSS, and generating all
-    // the necessary SVGs for light/dark and accent color combinations is
-    // untenable. Ideally we'd deprecate this in favor of something like a
-    // Granite.BackButton with custom drawing; until then, stick an icon in it.
-
-    &.back-button {
-        background-repeat: no-repeat no-repeat;
-        background-size: 16px, cover;
-
-        &:dir(ltr) {
-            background-image:
-                -gtk-icontheme('go-previous-symbolic'),
-                linear-gradient(
-                    to bottom,
-                    #{'alpha(@highlight_color, 0.2)'},
-                    rgba(white, 0)
-                );
-            padding-left: calc(#{rem(9px)} + 16px);
-            background-position:
-                #{rem(6px)} 50%,
-                center, center;
-        }
-
-        &:dir(rtl) {
-            background-image:
-                -gtk-icontheme('go-next-symbolic'),
-                linear-gradient(
-                    to bottom,
-                    #{'alpha(@highlight_color, 0.2)'},
-                    rgba(white, 0)
-                );
-            padding-right: calc(#{rem(9px)} + 16px);
-            background-position:
-                calc(100% - #{rem(6px)}) 50%,
-                center, center;
-        }
-    }
-
     &.osd {
         @include control;
         @include border-interactive-roundrect;
@@ -150,4 +112,9 @@ button {
                 shadow(2);
         }
     }
+
+    // Almost certainly a button with text and image
+    > box.horizontal {
+        border-spacing: $button-spacing / 2;
+    }
 }

lib/Widgets/BackButton.vala

@@ -0,0 +1,39 @@
+/*
+ * Copyright 2025 elementary, Inc. (https://elementary.io)
+ * SPDX-License-Identifier: GPL-2.0-or-later
+ */
+
+/**
+ * BackButton is meant to be used in headers to navigate in
+ * {@link Adw.NavigationView}.
+ *
+ * By default `action_name` is set to `navigation.pop`
+ */
+[Version (since = "7.7.0")]
+public class Granite.BackButton : Gtk.Button {
+    /**
+     * Text of the label inside of #this
+     */
+    public new string label { get; set; }
+
+    public BackButton (string label) {
+        Object (label: label);
+    }
+
+    construct {
+        var image = new Gtk.Image.from_icon_name ("go-previous-symbolic");
+
+        var label_widget = new Gtk.Label ("");
+
+        var box = new Gtk.Box (HORIZONTAL, 0);
+        box.append (image);
+        box.append (label_widget);
+
+        action_name = "navigation.pop";
+        child = box;
+        tooltip_markup = Granite.markup_accel_tooltip ({"<alt>Left"});
+
+        add_css_class ("text-button");
+        bind_property ("label", label_widget, "label");
+    }
+}

lib/meson.build

@@ -17,6 +17,7 @@ libgranite_sources = files(
     'Widgets/AbstractSettingsPage.vala',
     'Widgets/AbstractSimpleSettingsPage.vala',
     'Widgets/AccelLabel.vala',
+    'Widgets/BackButton.vala',
     'Widgets/Bin.vala',
     'Widgets/Box.vala',
     'Widgets/DatePicker.vala',