Add Dialog::Header close_scheme, close_label params

Allows the customization of the close button - or removal entirely.

Author: myabc

app/components/primer/alpha/dialog/header.html.erb

@@ -12,9 +12,17 @@
         <%= subtitle %>
       <% end %>
     </div>
-    <div class="Overlay-actionWrap">
-      <%= render Primer::Beta::CloseButton.new(classes: "Overlay-closeButton", "data-close-dialog-id": @id) %>
-    </div>
+    <% if @close_scheme != :none %>
+      <div class="Overlay-actionWrap">
+        <%= render(
+          Primer::Beta::CloseButton.new(
+            classes: "Overlay-closeButton",
+            aria: { label: @close_label },
+            data: { close_dialog_id: @id }
+          )
+        ) %>
+      </div>
+    <% end %>
   </div>
   <%= filter %>
 <% end %>

app/components/primer/alpha/dialog/header.rb

@@ -16,6 +16,14 @@ class Header < Primer::Component
         }.freeze
         VARIANT_OPTIONS = VARIANT_MAPPINGS.keys
 
+        DEFAULT_CLOSE_SCHEME = :close
+        CLOSE_SCHEMES = [
+          DEFAULT_CLOSE_SCHEME,
+          :none
+        ].freeze
+
+        DEFAULT_CLOSE_LABEL = "Close"
+
         # Optional filter slot for adding a filter input to the header.
         #
         # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
@@ -48,6 +56,8 @@ class Header < Primer::Component
         # @param show_divider [Boolean] Show a divider between the header and body.
         # @param visually_hide_title [Boolean] Visually hide the `title` while maintaining a label for assistive technologies.
         # @param variant [Symbol] <%= one_of(Primer::Alpha::Dialog::Header::VARIANT_OPTIONS) %>
+        # @param close_scheme [Symbol] Whether the component can be closed with an "x" button. <%= one_of(Primer::Alpha::Banner::CLOSE_SCHEMES) %>
+        # @param close_label [String] The aria-label text of the close "x" button.
         # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
         def initialize(
           id:,
@@ -56,12 +66,16 @@ def initialize(
           show_divider: false,
           visually_hide_title: false,
           variant: DEFAULT_VARIANT,
+          close_scheme: DEFAULT_CLOSE_SCHEME,
+          close_label: DEFAULT_CLOSE_LABEL,
           **system_arguments
         )
           @id = id
           @title = title
           @subtitle = subtitle
           @visually_hide_title = visually_hide_title
+          @close_scheme = close_scheme
+          @close_label = close_label
           @system_arguments = deny_tag_argument(**system_arguments)
           @system_arguments[:tag] = :div
 

previews/primer/alpha/dialog_preview.rb

@@ -302,6 +302,38 @@ def initally_open(title: "Test Dialog", subtitle: nil, size: :medium, button_tex
       def with_header_filter
         render_with_template(locals: {})
       end
+
+      # @label With Header Close Button label
+      #
+      # @param title [String] text
+      # @param subtitle [String] text
+      # @param button_text [String] text
+      # @param show_divider [Boolean] toggle
+      # @param close_label [String] text
+      def with_header_close_button_label(title: "Test Dialog", subtitle: nil, button_text: "Show Dialog", show_divider: true, close_label: "Close me!")
+        render_with_template(locals: {
+                               title: title,
+                               subtitle: subtitle,
+                               button_text: button_text,
+                               show_divider: show_divider,
+                               close_label: close_label
+                             })
+      end
+
+      # @label Without Header Close Button
+      #
+      # @param title [String] text
+      # @param subtitle [String] text
+      # @param button_text [String] text
+      # @param show_divider [Boolean] toggle
+      def without_header_close_button(title: "Test Dialog", subtitle: nil, button_text: "Show Dialog", show_divider: true)
+        render_with_template(locals: {
+                               title: title,
+                               subtitle: subtitle,
+                               button_text: button_text,
+                               show_divider: show_divider
+                             })
+      end
     end
   end
 end

previews/primer/alpha/dialog_preview/with_header_close_button_label.html.erb

@@ -0,0 +1,5 @@
+<%= render(Primer::Alpha::Dialog.new(id: "my-dialog", title: title, subtitle: subtitle, visually_hide_title: false)) do |dialog| %>
+  <% dialog.with_header(show_divider: show_divider, close_label: close_label) %>
+  <% dialog.with_show_button_content(button_text) %>
+  <% dialog.with_body_content("Hello World") %>
+<% end %>

previews/primer/alpha/dialog_preview/without_header_close_button.html.erb

@@ -0,0 +1,8 @@
+<%= render(Primer::Alpha::Dialog.new(id: "my-dialog", title: title, subtitle: subtitle, visually_hide_title: false)) do |dialog| %>
+  <% dialog.with_header(show_divider: show_divider, close_scheme: :none) %>
+  <% dialog.with_show_button_content(button_text) %>
+  <% dialog.with_body_content("Hello World") %>
+  <% dialog.with_footer do %>
+    <%= render(Primer::Beta::Button.new(data: { "close-dialog-id": "my-dialog" })) { "Close" } %>
+  <% end %>
+<% end %>

test/components/primer/alpha/dialog_test.rb

@@ -98,6 +98,34 @@ def test_renders_header_subtitle
         assert_selector(".Overlay-header .Overlay-description")
       end
 
+      def test_renders_header_with_close_label
+        render_inline(Primer::Alpha::Dialog.new(title: "Title", id: "my-dialog")) do |component|
+          component.with_body { "content" }
+          component.with_header(close_label: "Close me!") { "header" }
+        end
+
+        assert_selector("dialog") do
+          assert_selector(".Overlay-header") do
+            assert_selector(".Overlay-actionWrap")
+            assert_selector("button[data-close-dialog-id][aria-label='Close me!']")
+          end
+        end
+      end
+
+      def test_renders_header_with_close_scheme_none
+        render_inline(Primer::Alpha::Dialog.new(title: "Title", id: "my-dialog")) do |component|
+          component.with_body { "content" }
+          component.with_header(close_scheme: :none) { "header" }
+        end
+
+        assert_selector("dialog") do
+          assert_selector(".Overlay-header") do
+            refute_selector(".Overlay-actionWrap")
+            refute_selector("button[data-close-dialog-id]")
+          end
+        end
+      end
+
       def test_renders_header_with_filter
         render_preview(:with_header_filter)