Add a slot for a zenModeButton to the PageHeader

Author: HDinger

.changeset/chilled-doors-shout.md

@@ -0,0 +1,5 @@
+---
+"@openproject/primer-view-components": minor
+---
+
+Add a slot for Primer::OpenProject::ZenModeButton to the Primer::OpenProject::PageHeader

app/components/primer/open_project/page_header.rb

@@ -71,6 +71,14 @@ class PageHeader < Primer::Component
 
           Primer::Beta::Button.new(**system_arguments)
         },
+        zen_mode_button: lambda { |mobile_icon: Primer::OpenProject::ZenModeButton::ZEN_MODE_BUTTON_ICON, mobile_label: Primer::OpenProject::ZenModeButton::ZEN_MODE_BUTTON_LABEL, **system_arguments|
+          deny_tag_argument(**system_arguments)
+          system_arguments = set_action_arguments(system_arguments, scheme: DEFAULT_ACTION_SCHEME)
+          add_option_to_mobile_menu(system_arguments, mobile_icon, mobile_label, DEFAULT_ACTION_SCHEME)
+
+          Primer::OpenProject::ZenModeButton.new(**system_arguments)
+        },
+
         link: lambda { |mobile_icon:, mobile_label:, scheme: DEFAULT_ACTION_SCHEME, **system_arguments|
           deny_tag_argument(**system_arguments)
           system_arguments = set_action_arguments(system_arguments, scheme: scheme)

app/components/primer/open_project/zen_mode_button.html.erb

@@ -3,8 +3,8 @@
           Primer::Beta::IconButton.new(
             scheme: :default,
             id: "zenModeButton",
-            icon: "screen-normal",
-            aria: { label: I18n.t("zen_mode") },
+            icon: ZEN_MODE_BUTTON_ICON,
+            aria: { label: ZEN_MODE_BUTTON_LABEL },
             data: { target: "zen-mode-button.button", action: "click:zen-mode-button#performAction" }
           )
         ) %>

app/components/primer/open_project/zen_mode_button.rb

@@ -8,6 +8,9 @@ module OpenProject
     class ZenModeButton < Primer::Component
       status :open_project
 
+      ZEN_MODE_BUTTON_LABEL = I18n.t("label_zen_mode")
+      ZEN_MODE_BUTTON_ICON = "screen-full"
+
       # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
       def initialize(**system_arguments)
         @system_arguments = system_arguments

previews/primer/open_project/page_header_preview.rb

@@ -104,6 +104,22 @@ def dialog_actions
         end
       end
 
+      # @label With a ZenModeButton inside the actions
+      # The missing label will be resolved automatically when included into the core
+      def zen_mode_button_actions
+        render(Primer::OpenProject::PageHeader.new) do |component|
+          component.with_title { "Great news" }
+          component.with_breadcrumbs([{ href: "/foo", text: "Foo" }, { href: "/bar", text: "Bar" }, "Baz"])
+
+          # The missing label will be resolved automatically when included into the core
+          component.with_action_zen_mode_button
+          component.with_action_button(mobile_icon: "plus", mobile_label: "Meeting", scheme: :primary) do |button|
+            button.with_leading_visual_icon(icon: "plus")
+            "Meeting"
+          end
+        end
+      end
+
       # @label With leading action (on wide)
       # **Leading action** is only shown on **wide screens** by default.
       # If you want to override that behaviour please use the system_argument: **display**

test/components/primer/open_project/page_header_test.rb

@@ -133,6 +133,16 @@ def test_renders_a_dialog_as_action
     assert_selector("dialog#my-dialog")
   end
 
+  def test_renders_a_zen_mode_button_as_action
+    render_inline(Primer::OpenProject::PageHeader.new) do |header|
+      header.with_title { "Hello" }
+      header.with_breadcrumbs(breadcrumb_elements)
+      header.with_action_zen_mode_button
+    end
+
+    assert_selector(".PageHeader-actions zen-mode-button")
+  end
+
   def test_renders_single_action
     render_inline(Primer::OpenProject::PageHeader.new) do |header|
       header.with_title { "Hello" }

test/components/primer/open_project/zen_mode_button_test.rb

@@ -8,6 +8,6 @@ class PrimerOpenProjectZenModeButtonTest < Minitest::Test
   def test_renders
     render_inline(Primer::OpenProject::ZenModeButton.new)
 
-    assert_selector(".ZenModeButton .octicon-screen-normal")
+    assert_selector(".ZenModeButton .octicon-screen-full")
   end
 end