Add destructive primary action to modal (#431)

feat: add destructive primary action to modal

app/assets/stylesheets/polaris_view_components/button.pcss

@@ -52,7 +52,8 @@ html[class~="Polaris-Summer-Editions-2023"] .Polaris-Button {
   }
 
   /* Destructive */
-  &.Polaris-Button--destructive {
+  &.Polaris-Button--destructive,
+  &.Polaris-Button--destructive:is(.Polaris-Button--primary) {
     --pc-button-color: var(--p-color-bg-fill-critical);
     --pc-button-text: var(--p-color-bg-surface);
     --pc-button-color-hover: var(--p-color-bg-fill-critical-hover);

demo/app/previews/modal_component_preview.rb

@@ -17,6 +17,9 @@ def multiple_sections
   def with_primary_action
   end
 
+  def with_destructive_primary_action
+  end
+
   def without_title
   end
 end

demo/app/previews/modal_component_preview/with_destructive_primary_action.html.erb

@@ -0,0 +1,22 @@
+<%= polaris_button(data: {
+  controller: "polaris",
+  target: "#demo-modal",
+  action: "polaris#openModal",
+}) { "Open" } %>
+
+<%= polaris_modal(
+  id: "demo-modal",
+  title: "Reach more shoppers with Instagram product tags",
+  open: true,
+) do |modal| %>
+  <%= polaris_text_container do %>
+    <p>
+      Use Instagram posts to share your products with millions of
+      people. Let shoppers buy from your store without leaving
+    Instagram.
+    </p>
+  <% end %>
+
+  <% modal.with_primary_action(destructive: true) { "Discard changes" } %>
+  <% modal.with_secondary_action(data: { action: "polaris-modal#close" }) { "Continue editing" } %>
+<% end %>