Fire an event when banners are dismissed (#3026)

primer · Aug 26, 2024 · 5be0a0f · 5be0a0f
1 parent 50d8e7a
commit 5be0a0f
Show file tree

Hide file tree

Showing 4 changed files with 40 additions and 3 deletions.
diff --git a/.changeset/chatty-beds-double.md 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
@@ -4,6 +4,12 @@ module Primer
   module Alpha
     # Use `Banner` to highlight important information.
     #
+    # ### Events
+    #
+    # |Name      |Type                |Bubbles |Cancelable |
+    # |:---------|:-------------------|:-------|:----------|
+    # |`dismiss` |`CustomEvent<void>` |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
@@ -1,18 +1,26 @@
 import {controller, target} from '@github/catalyst'
 
+declare global {
+  interface HTMLElementEventMap {
+    'banner:dismiss': CustomEvent<void>
+  }
+}
+
 @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
@@ -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