Allow custom texts for Cancel and Confirm buttons in DangerConfirmationDialog (#232)

Author: HDinger

.changeset/itchy-lions-count.md

@@ -0,0 +1,5 @@
+---
+'@openproject/primer-view-components': patch
+---
+
+Allow custom texts for cancel and confirm button in DangerConfirmationDialog

app/components/primer/open_project/danger_confirmation_dialog.html.erb

@@ -11,8 +11,8 @@
         <% end %>
       </scrollable-region>
       <%= render(Primer::Alpha::Dialog::Footer.new(show_divider: false)) do %>
-        <%= render(Primer::Beta::Button.new(data: { "close-dialog-id": dialog_id })) { I18n.t("button_cancel") } %>
-        <%= render(Primer::Beta::Button.new(type: (@form_wrapper.shows_form? ? :submit : :button), scheme: :danger, data: { "submit-dialog-id": dialog_id })) { I18n.t("button_delete_permanently") } %>
+        <%= render(Primer::Beta::Button.new(data: { "close-dialog-id": dialog_id })) { @cancel_button_text } %>
+        <%= render(Primer::Beta::Button.new(type: (@form_wrapper.shows_form? ? :submit : :button), scheme: :danger, data: { "submit-dialog-id": dialog_id })) { @confirm_button_text } %>
       <% end %>
     <% end %>
   </danger-confirmation-dialog-form-helper>

app/components/primer/open_project/danger_confirmation_dialog.rb

@@ -67,12 +67,17 @@ class DangerConfirmationDialog < Primer::Component
       def initialize(
         form_arguments: {},
         id: self.class.generate_id,
+        confirm_button_text: I18n.t("button_delete_permanently"),
+        cancel_button_text: I18n.t("button_cancel"),
         **system_arguments
       )
         @check_box_name = form_arguments.delete(:name) || "confirm_dangerous_action"
         @form_wrapper = FormWrapper.new(**form_arguments)
         @dialog_id = id.to_s
 
+        @confirm_button_text = confirm_button_text
+        @cancel_button_text = cancel_button_text
+
         @system_arguments = system_arguments
         @system_arguments[:id] = @dialog_id
         @system_arguments[:classes] = class_names(

previews/primer/open_project/danger_confirmation_dialog_preview.rb

@@ -25,18 +25,24 @@ def default
       # @param icon_color [Symbol] select [default, muted, subtle, accent, success, attention, severe, danger, open, closed, done, sponsors, on_emphasis, inherit]
       # @param show_description toggle
       # @param show_additional_details toggle
+      # @param confirm_button_text [String]
+      # @param cancel_button_text [String]
       # @param check_box_text [String]
       def playground(
         icon: :"alert",
         icon_color: :danger,
         show_description: true,
         show_additional_details: false,
+        confirm_button_text: "Understood",
+        cancel_button_text: "NO!",
         check_box_text: "I understand that this deletion cannot be reversed"
       )
         render_with_template(locals: { icon: icon,
                                        icon_color: icon_color,
                                        show_description: show_description,
                                        show_additional_details: show_additional_details,
+                                       confirm_button_text: confirm_button_text,
+                                       cancel_button_text: cancel_button_text,
                                        check_box_text: check_box_text })
       end
 

previews/primer/open_project/danger_confirmation_dialog_preview/playground.html.erb

@@ -1,4 +1,6 @@
-<%= render(Primer::OpenProject::DangerConfirmationDialog.new(id: "my-dialog")) do |dialog| %>
+<%= render(Primer::OpenProject::DangerConfirmationDialog.new(id: "my-dialog",
+                                                             confirm_button_text: confirm_button_text,
+                                                             cancel_button_text: cancel_button_text)) do |dialog| %>
   <% dialog.with_show_button { "Click me" } %>
   <% dialog.with_confirmation_message(icon_arguments: { icon: icon, color: icon_color }) do |message| %>
     <% message.with_heading(tag: :h2).with_content("Proceed with danger?") %>