From 5be0a0f1e60e02cb5140e159fd6b68dfd25194fa Mon Sep 17 00:00:00 2001 From: Cameron Dutro Date: Mon, 26 Aug 2024 10:48:16 -0700 Subject: [PATCH] Fire an event when banners are dismissed (#3026) --- .changeset/chatty-beds-double.md | 5 +++++ app/components/primer/alpha/banner.rb | 6 ++++++ app/components/primer/alpha/x_banner.ts | 14 +++++++++++--- test/system/alpha/banner_test.rb | 18 ++++++++++++++++++ 4 files changed, 40 insertions(+), 3 deletions(-) create mode 100644 .changeset/chatty-beds-double.md diff --git a/.changeset/chatty-beds-double.md b/.changeset/chatty-beds-double.md new file mode 100644 index 0000000000..9aa4a86786 --- /dev/null +++ b/.changeset/chatty-beds-double.md @@ -0,0 +1,5 @@ +--- +'@primer/view-components': minor +--- + +Fire an event when banners are dismissed diff --git a/app/components/primer/alpha/banner.rb b/app/components/primer/alpha/banner.rb index da849bf3fc..90eeeab3da 100644 --- a/app/components/primer/alpha/banner.rb +++ b/app/components/primer/alpha/banner.rb @@ -4,6 +4,12 @@ module Primer module Alpha # Use `Banner` to highlight important information. # + # ### Events + # + # |Name |Type |Bubbles |Cancelable | + # |:---------|:-------------------|:-------|:----------| + # |`dismiss` |`CustomEvent` |No |No | + # # @accessibility # ### Improve discoverability with a heading and landmark # Banners are made visually prominent with icons and colors to immediately draw attention. diff --git a/app/components/primer/alpha/x_banner.ts b/app/components/primer/alpha/x_banner.ts index 3d77c0d68e..5a11806de2 100644 --- a/app/components/primer/alpha/x_banner.ts +++ b/app/components/primer/alpha/x_banner.ts @@ -1,18 +1,26 @@ import {controller, target} from '@github/catalyst' +declare global { + interface HTMLElementEventMap { + 'banner:dismiss': CustomEvent + } +} + @controller class XBannerElement extends HTMLElement { @target titleText: HTMLElement dismiss() { - const parentElement = this.parentElement - if (!parentElement) return - if (this.#dismissScheme === 'remove') { + const parentElement = this.parentElement + if (!parentElement) return + parentElement.removeChild(this) } else { this.hide() } + + this.dispatchEvent(new CustomEvent('banner:dismiss')) } show() { diff --git a/test/system/alpha/banner_test.rb b/test/system/alpha/banner_test.rb index 660a52069d..888f1db711 100644 --- a/test/system/alpha/banner_test.rb +++ b/test/system/alpha/banner_test.rb @@ -4,6 +4,8 @@ module Alpha class IntegrationBannerTest < System::TestCase + include Primer::JsTestHelpers + def test_dismiss_button_remove visit_preview(:playground, dismiss_scheme: :remove) assert_selector(".Banner") @@ -21,5 +23,21 @@ def test_dismiss_button_hide assert_selector(".Banner", visible: :hidden) end + + def test_dismiss_fires_event + visit_preview(:playground, dismiss_scheme: :hide) + + evaluate_multiline_script(<<~JS) + window.bannerDismissed = false + + document.querySelector('x-banner').addEventListener('banner:dismiss', () => { + window.bannerDismissed = true + }) + JS + + find(".Banner-close button").click + + assert page.evaluate_script("window.bannerDismissed") + end end end