Fine-tuning of ZenModeButton component

.changeset/wild-avocados-smash.md

@@ -1,7 +1,5 @@
 ---
-"@openproject/primer-view-components": patch
+"@openproject/primer-view-components": minor
 ---
 
-We added a new zen-mode buton component, by clicking on the button, screen will be in full-mode or back in normal-mode.
-
-zen mode button component
+Add `Primer::OpenProject::ZenModeButton` component. By clicking on the button, screen will be in full-mode or back in normal-mode.

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

@@ -1,10 +1,10 @@
-<%= render(Primer::BaseComponent.new(tag: "zen-mode-button", **@system_arguments)) do %>
+<%= render(Primer::BaseComponent.new(**@system_arguments)) do %>
   <%= render(
           Primer::Beta::IconButton.new(
             scheme: :default,
-            id: 'zenModeButton',
-            icon: 'screen-normal',
-            aria: { label: 'zen mode' },
+            id: "zenModeButton",
+            icon: "screen-normal",
+            aria: { label: I18n.t("zen_mode") },
             data: { target: "zen-mode-button.button", action: "click:zen-mode-button#performAction" }
           )
         ) %>

app/components/primer/open_project/zen_mode_button.rb

@@ -15,7 +15,7 @@ def initialize(**system_arguments)
         @system_arguments[:classes] =
         class_names(
           @system_arguments[:classes],
-          "zen-mode-button"
+          "ZenModeButton"
         )
       end
     end

app/components/primer/open_project/zen_mode_button.ts

@@ -1,5 +1,4 @@
 import {controller, target} from '@github/catalyst'
-import screenfull from 'screenfull'
 
 @controller
 class ZenModeButtonElement extends HTMLElement {
@@ -8,19 +7,17 @@ class ZenModeButtonElement extends HTMLElement {
 
   private deactivateZenMode() {
     this.inZenMode = false
-    this.button.classList.remove('zen-mode-button--active')
-    document.getElementsByTagName('body')[0].classList.remove('zen-mode')
-    if (screenfull.isEnabled && screenfull.isFullscreen) {
-      screenfull.exit()
+    this.button.setAttribute('aria-pressed', 'false')
+    if (document.exitFullscreen) {
+      void document.exitFullscreen()
     }
   }
 
   private activateZenMode() {
     this.inZenMode = true
-    document.getElementsByTagName('body')[0].classList.add('zen-mode')
-    this.button.classList.add('zen-mode-button--active')
-    if (screenfull.isEnabled) {
-      screenfull.request()
+    this.button.setAttribute('aria-pressed', 'true')
+    if (document.documentElement.requestFullscreen) {
+      void document.documentElement.requestFullscreen()
     }
   }
 

app/components/primer/primer.pcss

@@ -44,4 +44,3 @@
 @import "./open_project/drag_handle.pcss";
 @import "./open_project/border_grid.pcss";
 @import "./open_project/input_group.pcss";
-@import "./open_project/zen_mode_button.pcss";

package.json

@@ -53,7 +53,6 @@
     "@github/tab-container-element": "^3.1.2",
     "@oddbird/popover-polyfill": "^0.4.0",
     "@primer/behaviors": "^1.3.4"
-    "screenfull": "^6.0.2"
   },
   "devDependencies": {
     "@changesets/changelog-github": "^0.5.0",

previews/primer/open_project/zen_mode_button_preview.rb

@@ -7,12 +7,9 @@ module Primer
   module OpenProject
     # @label ZenModeButton
     class ZenModeButtonPreview < ViewComponent::Preview
-      def playground()
-        render(Primer::OpenProject::ZenModeButton.new())
-      end
     # @label Default
-      def default()
-        render(Primer::OpenProject::ZenModeButton.new())
+      def default
+        render(Primer::OpenProject::ZenModeButton.new)
       end
     end
   end

static/classes.json

@@ -662,8 +662,5 @@
   ],
   "UnderlineNav-octicon": [
     "Primer::Alpha::UnderlineNav"
-  ],
-  "Zone-mode-button": [
-    "Primer::OpenProject::ZoneModeButton"
   ]
 }

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(".zen-mode-button .octicon-screen-normal")
+    assert_selector(".ZenModeButton .octicon-screen-normal")
   end
 end

test/css/component_specific_selectors_test.rb

@@ -185,9 +185,6 @@ class ComponentSpecificSelectorsTest < Minitest::Test
     ],
     Primer::OpenProject::PageHeader => [
       ".PageHeader--singleAction .PageHeader-action",
-    ],
-    Primer::OpenProject::ZenModeButton => [
-      ".zen-mode-button--active"
     ]
   }.freeze
 

test/system/open_project/zen_mode_button_test.rb

@@ -6,6 +6,6 @@ class IntegrationOpenProjectZenModeButtonTest < System::TestCase
   def test_renders_component
     visit_preview(:default)
 
-    assert_selector(".zen-mode-button")
+    assert_selector(".ZenModeButton")
   end
 end