From 31ab1aa9f8d8e2760d3dd4698629f802d98da8cc Mon Sep 17 00:00:00 2001 From: Behrokh Satarnejad Date: Wed, 24 Jan 2024 13:24:53 +0100 Subject: [PATCH 1/9] Add a ZenModeButton component --- .../open_project/zen_mode_button.html.erb | 12 +++++ .../primer/open_project/zen_mode_button.pcss | 5 ++ .../primer/open_project/zen_mode_button.rb | 23 +++++++++ .../primer/open_project/zen_mode_button.ts | 48 +++++++++++++++++++ app/components/primer/primer.pcss | 1 + app/components/primer/primer.ts | 1 + package-lock.json | 17 +++++++ package.json | 1 + .../open_project/zen_mode_button_preview.rb | 19 ++++++++ static/classes.json | 3 ++ test/components/component_test.rb | 1 + .../open_project/zen_mode_button_test.rb | 13 +++++ .../open_project/zen_mode_button_test.rb | 11 +++++ 13 files changed, 155 insertions(+) create mode 100644 app/components/primer/open_project/zen_mode_button.html.erb create mode 100644 app/components/primer/open_project/zen_mode_button.pcss create mode 100644 app/components/primer/open_project/zen_mode_button.rb create mode 100644 app/components/primer/open_project/zen_mode_button.ts create mode 100644 previews/primer/open_project/zen_mode_button_preview.rb create mode 100644 test/components/primer/open_project/zen_mode_button_test.rb create mode 100644 test/system/open_project/zen_mode_button_test.rb diff --git a/app/components/primer/open_project/zen_mode_button.html.erb b/app/components/primer/open_project/zen_mode_button.html.erb new file mode 100644 index 0000000000..f6ff7ef82e --- /dev/null +++ b/app/components/primer/open_project/zen_mode_button.html.erb @@ -0,0 +1,12 @@ +<%= render(Primer::BaseComponent.new(tag: "zen-mode-button", **@system_arguments)) do %> + <%= render( + Primer::Beta::IconButton.new( + scheme: :default, + id: 'zenModeButton', + icon: 'screen-normal', + aria: { label: 'zen mode' }, + autofocus: true, + data: { target: "zen-mode-button.button", action: "click:zen-mode-button#performAction" } + ) + ) %> +<% end %> diff --git a/app/components/primer/open_project/zen_mode_button.pcss b/app/components/primer/open_project/zen_mode_button.pcss new file mode 100644 index 0000000000..72c01e31ab --- /dev/null +++ b/app/components/primer/open_project/zen_mode_button.pcss @@ -0,0 +1,5 @@ +/* CSS for ZenModeButton */ + +.zen-mode-button--active { +box-shadow: 0 0 3px var(--color-border-default) inset; +} diff --git a/app/components/primer/open_project/zen_mode_button.rb b/app/components/primer/open_project/zen_mode_button.rb new file mode 100644 index 0000000000..a349a78231 --- /dev/null +++ b/app/components/primer/open_project/zen_mode_button.rb @@ -0,0 +1,23 @@ +# frozen_string_literal: true + +module Primer + module OpenProject + # Add a general description of component here + # Add additional usage considerations or best practices that may aid the user to use the component correctly. + # @accessibility Add any accessibility considerations + class ZenModeButton < Primer::Component + status :open_project + + # @param system_arguments [Hash] <%= link_to_system_arguments_docs %> + def initialize(**system_arguments) + @system_arguments = system_arguments + @system_arguments[:tag] = "zen-mode-button" + @system_arguments[:classes] = + class_names( + @system_arguments[:classes], + "zen-mode-button" + ) + end + end + end +end diff --git a/app/components/primer/open_project/zen_mode_button.ts b/app/components/primer/open_project/zen_mode_button.ts new file mode 100644 index 0000000000..e81af2fd8d --- /dev/null +++ b/app/components/primer/open_project/zen_mode_button.ts @@ -0,0 +1,48 @@ +import {attr, controller, target, targets} from '@github/catalyst' +import screenfull from 'screenfull'; + + +@controller +class ZenModeButtonElement extends HTMLElement { + @target button: HTMLElement + inZenMode = false; + @attr name = 'screen-full'; + + private deactivateZenMode():void { + this.inZenMode = false; + this.button.classList.remove('zen-mode-button--active'); + this.querySelector('body')?.classList.remove('zen-mode'); + if (screenfull.isEnabled && screenfull.isFullscreen) { + screenfull.exit(); + } + } + + private activateZenMode() { + this.inZenMode = true; + document.querySelector('body')?.classList.add('zen-mode'); + this.button.classList.add('zen-mode-button--active'); + if (screenfull.isEnabled) { + screenfull.request(); + } + } + + public performAction() { + if (this.inZenMode) { + this.deactivateZenMode(); + } else { + this.activateZenMode(); + } + } +} + +declare global { + interface Window { + ZenModeButtonElement: typeof ZenModeButtonElement + } +} + +if (!window.customElements.get('zen-mode-button')) { + window.ZenModeButtonElement = ZenModeButtonElement + window.customElements.define('zen-mode-button', ZenModeButtonElement) +} + \ No newline at end of file diff --git a/app/components/primer/primer.pcss b/app/components/primer/primer.pcss index 26331e104a..37f401035e 100644 --- a/app/components/primer/primer.pcss +++ b/app/components/primer/primer.pcss @@ -44,3 +44,4 @@ @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"; diff --git a/app/components/primer/primer.ts b/app/components/primer/primer.ts index 817a2dd9ea..2158437b3e 100644 --- a/app/components/primer/primer.ts +++ b/app/components/primer/primer.ts @@ -23,3 +23,4 @@ import '../../../lib/primer/forms/primer_text_field' import '../../../lib/primer/forms/toggle_switch_input' import './alpha/action_menu/action_menu_element' import './open_project/page_header_element' +import './open_project/zen_mode_button' diff --git a/package-lock.json b/package-lock.json index 4905370bf3..88c1f646d4 100644 --- a/package-lock.json +++ b/package-lock.json @@ -20,6 +20,7 @@ "@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", @@ -10379,6 +10380,17 @@ "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==", "dev": true }, + "node_modules/screenfull": { + "version": "6.0.2", + "resolved": "https://registry.npmjs.org/screenfull/-/screenfull-6.0.2.tgz", + "integrity": "sha512-AQdy8s4WhNvUZ6P8F6PB21tSPIYKniic+Ogx0AacBMjKP1GUHN2E9URxQHtCusiwxudnCKkdy4GrHXPPJSkCCw==", + "engines": { + "node": "^14.13.1 || >=16.0.0" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, "node_modules/semver": { "version": "7.5.4", "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.4.tgz", @@ -19118,6 +19130,11 @@ "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==", "dev": true }, + "screenfull": { + "version": "6.0.2", + "resolved": "https://registry.npmjs.org/screenfull/-/screenfull-6.0.2.tgz", + "integrity": "sha512-AQdy8s4WhNvUZ6P8F6PB21tSPIYKniic+Ogx0AacBMjKP1GUHN2E9URxQHtCusiwxudnCKkdy4GrHXPPJSkCCw==" + }, "semver": { "version": "7.5.4", "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.4.tgz", diff --git a/package.json b/package.json index a0d807d691..59e02d36ad 100644 --- a/package.json +++ b/package.json @@ -53,6 +53,7 @@ "@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", diff --git a/previews/primer/open_project/zen_mode_button_preview.rb b/previews/primer/open_project/zen_mode_button_preview.rb new file mode 100644 index 0000000000..5de2e784de --- /dev/null +++ b/previews/primer/open_project/zen_mode_button_preview.rb @@ -0,0 +1,19 @@ +# frozen_string_literal: true + +# Setup Playground to use all available component props +# Setup Features to use individual component props and combinations + +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()) + end + end + end +end diff --git a/static/classes.json b/static/classes.json index 9a46fd7e7b..b4ae332f4f 100644 --- a/static/classes.json +++ b/static/classes.json @@ -662,5 +662,8 @@ ], "UnderlineNav-octicon": [ "Primer::Alpha::UnderlineNav" + ], + "Zone-mode-button": [ + "Primer::OpenProject::ZoneModeButton" ] } \ No newline at end of file diff --git a/test/components/component_test.rb b/test/components/component_test.rb index f834b6099e..0df6074f4e 100644 --- a/test/components/component_test.rb +++ b/test/components/component_test.rb @@ -8,6 +8,7 @@ class PrimerComponentTest < Minitest::Test # Components with any arguments necessary to make them render COMPONENTS_WITH_ARGS = [ + [Primer::OpenProject::ZenModeButton, {}], [Primer::OpenProject::InputGroup, {}, proc { |component| component.with_text_input(name: "a name", label: "My input group", value: "Copyable value") component.with_trailing_action_clipboard_copy_button(id: "button", value: "Copyable value", aria: { label: "Copy some text" }) diff --git a/test/components/primer/open_project/zen_mode_button_test.rb b/test/components/primer/open_project/zen_mode_button_test.rb new file mode 100644 index 0000000000..98ce82d225 --- /dev/null +++ b/test/components/primer/open_project/zen_mode_button_test.rb @@ -0,0 +1,13 @@ +# frozen_string_literal: true + +require "components/test_helper" + +class PrimerOpenProjectZenModeButtonTest < Minitest::Test + include Primer::ComponentTestHelpers + + def test_renders + render_inline(Primer::OpenProject::ZenModeButton.new) + + assert_selector(".zen-mode-button .octicon-screen-normal") + end +end diff --git a/test/system/open_project/zen_mode_button_test.rb b/test/system/open_project/zen_mode_button_test.rb new file mode 100644 index 0000000000..e813786f67 --- /dev/null +++ b/test/system/open_project/zen_mode_button_test.rb @@ -0,0 +1,11 @@ +# frozen_string_literal: true + +require "system/test_case" + +class IntegrationOpenProjectZenModeButtonTest < System::TestCase + def test_renders_component + visit_preview(:default) + + assert_selector(".zen-mode-button") + end +end From 81bb4b7f746da1e076d085387a4ef2000067b946 Mon Sep 17 00:00:00 2001 From: Behrokh Satarnejad <62008897+bsatarnejad@users.noreply.github.com> Date: Wed, 24 Jan 2024 13:57:59 +0100 Subject: [PATCH 2/9] Create changeset --- .changeset/wild-avocados-smash.md | 7 +++++++ 1 file changed, 7 insertions(+) create mode 100644 .changeset/wild-avocados-smash.md diff --git a/.changeset/wild-avocados-smash.md b/.changeset/wild-avocados-smash.md new file mode 100644 index 0000000000..eec7305e20 --- /dev/null +++ b/.changeset/wild-avocados-smash.md @@ -0,0 +1,7 @@ +--- +"@openproject/primer-view-components": patch +--- + +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 From 7871b478626cac24e1c533af5b14243dbf69e2c8 Mon Sep 17 00:00:00 2001 From: Behrokh Satarnejad Date: Wed, 24 Jan 2024 14:34:23 +0100 Subject: [PATCH 3/9] remove deprecated css variable --- app/components/primer/open_project/zen_mode_button.pcss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/components/primer/open_project/zen_mode_button.pcss b/app/components/primer/open_project/zen_mode_button.pcss index 72c01e31ab..53725a9c8c 100644 --- a/app/components/primer/open_project/zen_mode_button.pcss +++ b/app/components/primer/open_project/zen_mode_button.pcss @@ -1,5 +1,5 @@ /* CSS for ZenModeButton */ .zen-mode-button--active { -box-shadow: 0 0 3px var(--color-border-default) inset; +box-shadow: 0 0 3px var(--borderColor-default) inset; } From 75091ebbd87e5512d8d36b680b32eb34917aaa96 Mon Sep 17 00:00:00 2001 From: Behrokh Satarnejad Date: Thu, 25 Jan 2024 08:11:41 +0100 Subject: [PATCH 4/9] fix css coverage error --- app/components/primer/open_project/zen_mode_button.html.erb | 1 - test/css/component_specific_selectors_test.rb | 3 +++ 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/app/components/primer/open_project/zen_mode_button.html.erb b/app/components/primer/open_project/zen_mode_button.html.erb index f6ff7ef82e..e9a8178003 100644 --- a/app/components/primer/open_project/zen_mode_button.html.erb +++ b/app/components/primer/open_project/zen_mode_button.html.erb @@ -5,7 +5,6 @@ id: 'zenModeButton', icon: 'screen-normal', aria: { label: 'zen mode' }, - autofocus: true, data: { target: "zen-mode-button.button", action: "click:zen-mode-button#performAction" } ) ) %> diff --git a/test/css/component_specific_selectors_test.rb b/test/css/component_specific_selectors_test.rb index ed3809f1dd..64cd32f624 100644 --- a/test/css/component_specific_selectors_test.rb +++ b/test/css/component_specific_selectors_test.rb @@ -185,6 +185,9 @@ class ComponentSpecificSelectorsTest < Minitest::Test ], Primer::OpenProject::PageHeader => [ ".PageHeader--singleAction .PageHeader-action", + ], + Primer::OpenProject::ZenModeButton => [ + ".zen-mode-button--active" ] }.freeze From b590852d2f47252814225b98a722b69cbaa82fa6 Mon Sep 17 00:00:00 2001 From: Behrokh Satarnejad Date: Thu, 25 Jan 2024 08:37:57 +0100 Subject: [PATCH 5/9] fix eslint errors --- .../primer/open_project/zen_mode_button.ts | 33 +++++++++---------- 1 file changed, 15 insertions(+), 18 deletions(-) diff --git a/app/components/primer/open_project/zen_mode_button.ts b/app/components/primer/open_project/zen_mode_button.ts index e81af2fd8d..9f7f4e91d6 100644 --- a/app/components/primer/open_project/zen_mode_button.ts +++ b/app/components/primer/open_project/zen_mode_button.ts @@ -1,48 +1,45 @@ -import {attr, controller, target, targets} from '@github/catalyst' -import screenfull from 'screenfull'; - +import {controller, target} from '@github/catalyst' +import screenfull from 'screenfull' @controller class ZenModeButtonElement extends HTMLElement { @target button: HTMLElement - inZenMode = false; - @attr name = 'screen-full'; + inZenMode = false private deactivateZenMode():void { - this.inZenMode = false; - this.button.classList.remove('zen-mode-button--active'); - this.querySelector('body')?.classList.remove('zen-mode'); + this.inZenMode = false + this.button.classList.remove('zen-mode-button--active') + this.querySelector('body')?.classList.remove('zen-mode') if (screenfull.isEnabled && screenfull.isFullscreen) { - screenfull.exit(); + screenfull.exit() } } private activateZenMode() { - this.inZenMode = true; - document.querySelector('body')?.classList.add('zen-mode'); - this.button.classList.add('zen-mode-button--active'); + this.inZenMode = true + document.querySelector('body')?.classList.add('zen-mode') + this.button.classList.add('zen-mode-button--active') if (screenfull.isEnabled) { - screenfull.request(); + screenfull.request() } } public performAction() { if (this.inZenMode) { - this.deactivateZenMode(); + this.deactivateZenMode() } else { - this.activateZenMode(); + this.activateZenMode() } } } declare global { interface Window { - ZenModeButtonElement: typeof ZenModeButtonElement + ZenModeButtonElement: typeof ZenModeButtonElement } } - + if (!window.customElements.get('zen-mode-button')) { window.ZenModeButtonElement = ZenModeButtonElement window.customElements.define('zen-mode-button', ZenModeButtonElement) } - \ No newline at end of file From 208fb59027a1db6c2089ba056aefb75bab69f7ea Mon Sep 17 00:00:00 2001 From: Behrokh Satarnejad Date: Thu, 25 Jan 2024 09:08:46 +0100 Subject: [PATCH 6/9] remove method return type --- app/components/primer/open_project/zen_mode_button.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/components/primer/open_project/zen_mode_button.ts b/app/components/primer/open_project/zen_mode_button.ts index 9f7f4e91d6..7dcaacdbc8 100644 --- a/app/components/primer/open_project/zen_mode_button.ts +++ b/app/components/primer/open_project/zen_mode_button.ts @@ -6,7 +6,7 @@ class ZenModeButtonElement extends HTMLElement { @target button: HTMLElement inZenMode = false - private deactivateZenMode():void { + private deactivateZenMode() { this.inZenMode = false this.button.classList.remove('zen-mode-button--active') this.querySelector('body')?.classList.remove('zen-mode') From e164cc5bf0c7a4d3bc26d9edc42f9952c7238fb2 Mon Sep 17 00:00:00 2001 From: Behrokh Satarnejad Date: Thu, 25 Jan 2024 10:45:29 +0100 Subject: [PATCH 7/9] force button to have box-shadow style in active mode --- app/components/primer/open_project/zen_mode_button.pcss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/components/primer/open_project/zen_mode_button.pcss b/app/components/primer/open_project/zen_mode_button.pcss index 53725a9c8c..79bd2a718d 100644 --- a/app/components/primer/open_project/zen_mode_button.pcss +++ b/app/components/primer/open_project/zen_mode_button.pcss @@ -1,5 +1,5 @@ /* CSS for ZenModeButton */ .zen-mode-button--active { -box-shadow: 0 0 3px var(--borderColor-default) inset; +box-shadow: 0 0 3px var(--borderColor-default) inset !important; } From 4bd294b2b53b8ef04a34001eaeb22485d003095a Mon Sep 17 00:00:00 2001 From: Behrokh Satarnejad Date: Thu, 25 Jan 2024 11:43:54 +0100 Subject: [PATCH 8/9] changing how to select body --- app/components/primer/open_project/zen_mode_button.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/app/components/primer/open_project/zen_mode_button.ts b/app/components/primer/open_project/zen_mode_button.ts index 7dcaacdbc8..e306e2f1e2 100644 --- a/app/components/primer/open_project/zen_mode_button.ts +++ b/app/components/primer/open_project/zen_mode_button.ts @@ -9,7 +9,7 @@ class ZenModeButtonElement extends HTMLElement { private deactivateZenMode() { this.inZenMode = false this.button.classList.remove('zen-mode-button--active') - this.querySelector('body')?.classList.remove('zen-mode') + document.getElementsByTagName('body')[0].classList.remove('zen-mode') if (screenfull.isEnabled && screenfull.isFullscreen) { screenfull.exit() } @@ -17,7 +17,7 @@ class ZenModeButtonElement extends HTMLElement { private activateZenMode() { this.inZenMode = true - document.querySelector('body')?.classList.add('zen-mode') + document.getElementsByTagName('body')[0].classList.add('zen-mode') this.button.classList.add('zen-mode-button--active') if (screenfull.isEnabled) { screenfull.request() From 4ee4c9a89fd6886611bcf19fe5906793eae841be Mon Sep 17 00:00:00 2001 From: Henriette Darge Date: Thu, 4 Apr 2024 12:31:10 +0200 Subject: [PATCH 9/9] Fine-tuning of ZenModeButton component --- .changeset/wild-avocados-smash.md | 6 ++---- .../open_project/zen_mode_button.html.erb | 8 ++++---- .../primer/open_project/zen_mode_button.pcss | 5 ----- .../primer/open_project/zen_mode_button.rb | 2 +- .../primer/open_project/zen_mode_button.ts | 15 ++++++--------- app/components/primer/primer.pcss | 1 - package-lock.json | 17 ----------------- package.json | 1 - .../open_project/zen_mode_button_preview.rb | 13 ++++++++----- static/classes.json | 3 --- .../primer/open_project/zen_mode_button_test.rb | 2 +- test/css/component_specific_selectors_test.rb | 3 --- .../system/open_project/zen_mode_button_test.rb | 2 +- 13 files changed, 23 insertions(+), 55 deletions(-) delete mode 100644 app/components/primer/open_project/zen_mode_button.pcss diff --git a/.changeset/wild-avocados-smash.md b/.changeset/wild-avocados-smash.md index eec7305e20..df5e1e97d1 100644 --- a/.changeset/wild-avocados-smash.md +++ b/.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. diff --git a/app/components/primer/open_project/zen_mode_button.html.erb b/app/components/primer/open_project/zen_mode_button.html.erb index e9a8178003..4e6f5b2874 100644 --- a/app/components/primer/open_project/zen_mode_button.html.erb +++ b/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" } ) ) %> diff --git a/app/components/primer/open_project/zen_mode_button.pcss b/app/components/primer/open_project/zen_mode_button.pcss deleted file mode 100644 index 79bd2a718d..0000000000 --- a/app/components/primer/open_project/zen_mode_button.pcss +++ /dev/null @@ -1,5 +0,0 @@ -/* CSS for ZenModeButton */ - -.zen-mode-button--active { -box-shadow: 0 0 3px var(--borderColor-default) inset !important; -} diff --git a/app/components/primer/open_project/zen_mode_button.rb b/app/components/primer/open_project/zen_mode_button.rb index a349a78231..812cacc862 100644 --- a/app/components/primer/open_project/zen_mode_button.rb +++ b/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 diff --git a/app/components/primer/open_project/zen_mode_button.ts b/app/components/primer/open_project/zen_mode_button.ts index e306e2f1e2..89f8447893 100644 --- a/app/components/primer/open_project/zen_mode_button.ts +++ b/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() } } diff --git a/app/components/primer/primer.pcss b/app/components/primer/primer.pcss index 37f401035e..26331e104a 100644 --- a/app/components/primer/primer.pcss +++ b/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"; diff --git a/package-lock.json b/package-lock.json index 88c1f646d4..4905370bf3 100644 --- a/package-lock.json +++ b/package-lock.json @@ -20,7 +20,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", @@ -10380,17 +10379,6 @@ "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==", "dev": true }, - "node_modules/screenfull": { - "version": "6.0.2", - "resolved": "https://registry.npmjs.org/screenfull/-/screenfull-6.0.2.tgz", - "integrity": "sha512-AQdy8s4WhNvUZ6P8F6PB21tSPIYKniic+Ogx0AacBMjKP1GUHN2E9URxQHtCusiwxudnCKkdy4GrHXPPJSkCCw==", - "engines": { - "node": "^14.13.1 || >=16.0.0" - }, - "funding": { - "url": "https://github.com/sponsors/sindresorhus" - } - }, "node_modules/semver": { "version": "7.5.4", "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.4.tgz", @@ -19130,11 +19118,6 @@ "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==", "dev": true }, - "screenfull": { - "version": "6.0.2", - "resolved": "https://registry.npmjs.org/screenfull/-/screenfull-6.0.2.tgz", - "integrity": "sha512-AQdy8s4WhNvUZ6P8F6PB21tSPIYKniic+Ogx0AacBMjKP1GUHN2E9URxQHtCusiwxudnCKkdy4GrHXPPJSkCCw==" - }, "semver": { "version": "7.5.4", "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.4.tgz", diff --git a/package.json b/package.json index 59e02d36ad..a0d807d691 100644 --- a/package.json +++ b/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", diff --git a/previews/primer/open_project/zen_mode_button_preview.rb b/previews/primer/open_project/zen_mode_button_preview.rb index 5de2e784de..28ad21d622 100644 --- a/previews/primer/open_project/zen_mode_button_preview.rb +++ b/previews/primer/open_project/zen_mode_button_preview.rb @@ -7,12 +7,15 @@ module Primer module OpenProject # @label ZenModeButton class ZenModeButtonPreview < ViewComponent::Preview - def playground() - render(Primer::OpenProject::ZenModeButton.new()) + # @label Default + # @snapshot + def default + render(Primer::OpenProject::ZenModeButton.new) end - # @label Default - def default() - render(Primer::OpenProject::ZenModeButton.new()) + + # @label Playground + def playground + render(Primer::OpenProject::ZenModeButton.new) end end end diff --git a/static/classes.json b/static/classes.json index b4ae332f4f..9a46fd7e7b 100644 --- a/static/classes.json +++ b/static/classes.json @@ -662,8 +662,5 @@ ], "UnderlineNav-octicon": [ "Primer::Alpha::UnderlineNav" - ], - "Zone-mode-button": [ - "Primer::OpenProject::ZoneModeButton" ] } \ No newline at end of file diff --git a/test/components/primer/open_project/zen_mode_button_test.rb b/test/components/primer/open_project/zen_mode_button_test.rb index 98ce82d225..3049a8b890 100644 --- a/test/components/primer/open_project/zen_mode_button_test.rb +++ b/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 diff --git a/test/css/component_specific_selectors_test.rb b/test/css/component_specific_selectors_test.rb index 64cd32f624..ed3809f1dd 100644 --- a/test/css/component_specific_selectors_test.rb +++ b/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 diff --git a/test/system/open_project/zen_mode_button_test.rb b/test/system/open_project/zen_mode_button_test.rb index e813786f67..25507dedee 100644 --- a/test/system/open_project/zen_mode_button_test.rb +++ b/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