Additional legacy flash/banner classes; fix data-target issue (#1559)

primer · Nov 3, 2022 · b534001 · b534001
1 parent bc235b3
commit b534001
Show file tree

Hide file tree

Showing 4 changed files with 11 additions and 8 deletions.
diff --git a/.changeset/light-crabs-hear.md b/.changeset/light-crabs-hear.md
@@ -0,0 +1,5 @@
+---
+'@primer/view-components': patch
+---
+
+Additional legacy flash/banner classes; fix data-target issue
diff --git a/app/components/primer/beta/banner.html.erb b/app/components/primer/beta/banner.html.erb
@@ -12,12 +12,12 @@
       <% end %>
     <% end %>
     <% if action %>
-      <div class="Banner-actions">
+      <div class="flash-action Banner-actions">
         <%= action %>
       </div>
     <% end %>
     <% if @dismissible %>
-      <div class="Banner-close">
+      <div class="flash-close Banner-close">
         <%= render(
           Primer::Beta::IconButton.new(
             scheme: :invisible,

diff --git a/app/components/primer/beta/banner.rb b/app/components/primer/beta/banner.rb
@@ -96,9 +96,6 @@ def initialize(full: false, full_when_narrow: false, dismissible: false, descrip
 
         @system_arguments = deny_tag_argument(**system_arguments)
         @system_arguments[:tag] = :div
-        @system_arguments[:data] ||= {}
-        @system_arguments[:data][:target] = catalyst_target(field: "root")
-        @system_arguments[:data][:reappear] = @reappear if @reappear
         @system_arguments[:classes] = class_names(
           @system_arguments[:classes],
           "Banner",
@@ -118,6 +115,8 @@ def initialize(full: false, full_when_narrow: false, dismissible: false, descrip
         @wrapper_arguments = {
           tag: custom_element_name
         }
+
+        @wrapper_arguments[:data] = { reappear: @reappear } if @reappear
       end
 
       private

diff --git a/app/components/primer/beta/x_banner.ts b/app/components/primer/beta/x_banner.ts
@@ -1,8 +1,7 @@
 import {controller, target} from '@github/catalyst'
 
 @controller
-class XBannerElement extends HTMLElement {
-  @target root: HTMLElement
+export class XBannerElement extends HTMLElement {
   @target titleText: HTMLElement
 
   dismiss() {
@@ -23,7 +22,7 @@ class XBannerElement extends HTMLElement {
   }
 
   private shouldReappear(): boolean {
-    return this.root.getAttribute('data-reappear') === 'true'
+    return this.getAttribute('data-reappear') === 'true'
   }
 }